diff --git a/CLAUDE.md b/CLAUDE.md
index 91bfcb3..1fa7428 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -104,10 +104,11 @@ src/components/
 
 **TypeScript Standards:**
 
-- Enable strict mode - no `any` types allowed
+- Enable strict mode - no `any` types allowed (linter will catch violations)
 - Use interfaces for all props and data structures
 - Prefer union types over enums for string constants
 - Use optional chaining (`?.`) and nullish coalescing (`??`)
+- NEVER use `any` - always use proper types or `unknown` when type is truly unknown
 
 **Error Handling:**
 
diff --git a/README.md b/README.md
index 64b2349..d6521b5 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 ![Claude Runner Logo](https://raw.githubusercontent.com/codingworkflow/claude-runner/main/assets/icon.png)
 
-Create and run multi-step tasks in your VS Code. Create workflows & save them to reuse.
+Chat, create and run multi-step tasks in your VS Code. Create workflows & save them to reuse.
 Get cost usage (estimate if you use subscription), and check conversation history.
 
 ## Key Features
@@ -13,12 +13,15 @@ Get cost usage (estimate if you use subscription), and check conversation histor
 
 Create and execute sophisticated multi-step workflows:
 
+- Chat directly in VScode
 - Chain multiple Claude Code tasks together
 - Mix different Claude models per task or keep in Auto mode
 - Session continuity between tasks
 - Save and reuse pipelines
 - Format similar to Claude Code GitHub action
 
+![Chat](https://raw.githubusercontent.com/codingworkflow/claude-runner/main/assets/chatui.png)
+
 ![Create Workflow](https://raw.githubusercontent.com/codingworkflow/claude-runner/main/assets/pipeline.png)
 
 ![Save Workflow](https://raw.githubusercontent.com/codingworkflow/claude-runner/main/assets/savepipeline.png)
diff --git a/VERSION b/VERSION
index 9fc80f9..60a2d3e 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.3.2
\ No newline at end of file
+0.4.0
\ No newline at end of file
diff --git a/assets/chatui.png b/assets/chatui.png
new file mode 100644
index 0000000..135f49b
Binary files /dev/null and b/assets/chatui.png differ
diff --git a/package.json b/package.json
index 6e0d766..0624ee6 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "claude-runner",
   "displayName": "Claude Runner",
   "description": "Execute Claude Code commands directly from VS Code with an intuitive interface",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "publisher": "Codingworkflow",
   "private": false,
   "license": "GPL-3.0",
diff --git a/src/components/panels/ChatPanel.tsx b/src/components/panels/ChatPanel.tsx
index 09e7e56..87fcd59 100644
--- a/src/components/panels/ChatPanel.tsx
+++ b/src/components/panels/ChatPanel.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useRef, useEffect } from "react";
 import Card from "../common/Card";
 import Button from "../common/Button";
 import Toggle from "../common/Toggle";
@@ -11,11 +11,31 @@ interface ChatPanelProps {
   disabled: boolean;
 }
 
+interface ChatMessage {
+  role: "user" | "assistant";
+  content: string;
+  timestamp: string;
+}
+
 const ChatPanel: React.FC<ChatPanelProps> = ({ disabled }) => {
   const { state, actions } = useExtension();
   const { main, claude } = state;
+  const [chatMode, setChatMode] = useState<"terminal" | "extension">(
+    "extension",
+  );
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [inputMessage, setInputMessage] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
 
-  const handleStartChat = () => {
+  const handleStartTerminalChat = () => {
     if (main.showChatPrompt && main.chatPrompt.trim()) {
       actions.startInteractive(main.chatPrompt.trim());
     } else {
@@ -23,9 +43,59 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ disabled }) => {
     }
   };
 
+  const handleSendMessage = async () => {
+    if (!inputMessage.trim() || main.chatSending) {
+      return;
+    }
+
+    const messageText = inputMessage.trim();
+    const userMessage: ChatMessage = {
+      role: "user",
+      content: messageText,
+      timestamp: new Date().toISOString(),
+    };
+
+    // Immediately add user message to local state for responsive UI
+    setMessages((prev) => [...prev, userMessage]);
+    setInputMessage("");
+
+    // Set chatSending to true to show the spinner
+    actions.updateMainState({ chatSending: true });
+
+    try {
+      // Send to extension host - this will handle full conversation
+      actions.sendChatMessage(
+        messageText,
+        (main.chatMessages?.length ?? 0) === 0,
+      );
+    } catch (error) {
+      console.error("Error sending message:", error);
+      // Reset chatSending on error
+      actions.updateMainState({ chatSending: false });
+    }
+  };
+
+  const handleClearChat = () => {
+    setMessages([]);
+    actions.clearChatSession();
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  // Sync with extension state - this receives the full conversation from the extension host
+  useEffect(() => {
+    if (main.chatMessages !== undefined) {
+      setMessages(main.chatMessages);
+    }
+  }, [main.chatMessages]);
+
   return (
     <div className="chat-panel">
-      {/* Claude Version Display - At the very top */}
       <ClaudeVersionDisplay
         version={claude.version}
         isAvailable={claude.isAvailable}
@@ -33,86 +103,187 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ disabled }) => {
         isLoading={claude.loading}
       />
 
-      {/* Root Path */}
       <PathSelector
         rootPath={main.rootPath}
         onUpdateRootPath={actions.updateRootPath}
         disabled={disabled}
       />
 
-      <Card title="Interactive Chat Session">
-        <div className="space-y-3">
-          <div className="chat-info">
-            <p>
-              Start an interactive Claude chat session in the VS Code terminal
-              using the selected model and configuration.
-            </p>
+      <Card title="Claude Chat">
+        <div className="chat-mode-selector">
+          <div className="button-group">
+            <Button
+              variant={chatMode === "extension" ? "primary" : "secondary"}
+              onClick={() => setChatMode("extension")}
+              disabled={disabled}
+            >
+              VSCode
+            </Button>
+            <Button
+              variant={chatMode === "terminal" ? "primary" : "secondary"}
+              onClick={() => setChatMode("terminal")}
+              disabled={disabled}
+            >
+              Terminal
+            </Button>
           </div>
+        </div>
 
-          {/* Model Selection */}
-          <ModelSelector
-            model={main.model}
-            onUpdateModel={actions.updateModel}
-            disabled={disabled}
-          />
-
-          {/* Tool Permissions */}
-          <Toggle
-            checked={main.allowAllTools}
-            onChange={actions.updateAllowAllTools}
-            label="Allow All Tools (--dangerously-skip-permissions)"
-            disabled={disabled}
-          />
-
-          <div className="chat-actions">
-            <div className="prompt-section">
-              {!main.showChatPrompt ? (
-                <div className="button-group">
-                  <Button
-                    variant="secondary"
-                    onClick={() => actions.updateShowChatPrompt(true)}
-                    disabled={disabled}
-                  >
-                    Add Prompt
-                  </Button>
-                </div>
-              ) : (
-                <>
+        {chatMode === "terminal" ? (
+          <div className="space-y-3">
+            <div className="chat-info">
+              <p>
+                Start an interactive Claude chat session in the VS Code terminal
+                using the selected model and configuration.
+              </p>
+            </div>
+
+            <ModelSelector
+              model={main.model}
+              onUpdateModel={actions.updateModel}
+              disabled={disabled}
+            />
+
+            <Toggle
+              checked={main.allowAllTools}
+              onChange={actions.updateAllowAllTools}
+              label="Allow All Tools (--dangerously-skip-permissions)"
+              disabled={disabled}
+            />
+
+            <div className="chat-actions">
+              <div className="prompt-section">
+                {!main.showChatPrompt ? (
                   <div className="button-group">
                     <Button
                       variant="secondary"
-                      onClick={() => {
-                        actions.updateShowChatPrompt(false);
-                        actions.updateChatPrompt("");
-                      }}
+                      onClick={() => actions.updateShowChatPrompt(true)}
                       disabled={disabled}
                     >
-                      Remove Prompt
+                      Add Initial Prompt
                     </Button>
                   </div>
-                  <textarea
-                    className="prompt-textarea"
-                    value={main.chatPrompt}
-                    onChange={(e) => actions.updateChatPrompt(e.target.value)}
-                    placeholder="Enter your initial prompt for Claude..."
-                    rows={10}
-                    disabled={disabled}
-                  />
-                </>
-              )}
+                ) : (
+                  <>
+                    <div className="button-group">
+                      <Button
+                        variant="secondary"
+                        onClick={() => {
+                          actions.updateShowChatPrompt(false);
+                          actions.updateChatPrompt("");
+                        }}
+                        disabled={disabled}
+                      >
+                        Remove Prompt
+                      </Button>
+                    </div>
+                    <textarea
+                      className="prompt-textarea"
+                      value={main.chatPrompt}
+                      onChange={(e) => actions.updateChatPrompt(e.target.value)}
+                      placeholder="Enter your initial prompt for Claude..."
+                      rows={10}
+                      disabled={disabled}
+                    />
+                  </>
+                )}
+              </div>
+
+              <div className="button-group">
+                <Button
+                  variant="primary"
+                  onClick={handleStartTerminalChat}
+                  disabled={disabled}
+                >
+                  Start Terminal Session
+                </Button>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="extension-chat">
+            <ModelSelector
+              model={main.model}
+              onUpdateModel={actions.updateModel}
+              disabled={disabled || main.chatSending}
+            />
+
+            <div className="chat-container">
+              <div className="chat-messages">
+                {messages.length === 0 ? (
+                  <div className="chat-empty">
+                    <p>Start a conversation with Claude...</p>
+                  </div>
+                ) : (
+                  messages.map((msg, index) => (
+                    <div
+                      key={index}
+                      className={`chat-message ${msg.role === "user" ? "user" : "assistant"}`}
+                    >
+                      <div className="message-header">
+                        <span className="message-role">
+                          {msg.role === "user" ? "👤 You" : "🤖 Claude"}
+                        </span>
+                        <span className="message-time">
+                          {new Date(msg.timestamp).toLocaleTimeString()}
+                        </span>
+                      </div>
+                      <div className="message-content">{msg.content}</div>
+                    </div>
+                  ))
+                )}
+                <div ref={messagesEndRef} />
+              </div>
             </div>
 
-            <div className="button-group">
-              <Button
-                variant="primary"
-                onClick={handleStartChat}
-                disabled={disabled}
-              >
-                Start Chat Session
-              </Button>
+            <div className="chat-input-container">
+              <textarea
+                className="chat-input"
+                value={inputMessage}
+                onChange={(e) => setInputMessage(e.target.value)}
+                onKeyPress={handleKeyPress}
+                placeholder="Type your message... (Shift+Enter for new line)"
+                disabled={disabled || main.chatSending}
+                rows={3}
+              />
+              <div className="chat-controls">
+                <div className="chat-controls-left">
+                  <Button
+                    variant="secondary"
+                    onClick={handleClearChat}
+                    disabled={
+                      (disabled ?? false) ||
+                      (main.chatSending ?? false) ||
+                      messages.length === 0
+                    }
+                  >
+                    Clear Chat
+                  </Button>
+                </div>
+                <div className="chat-controls-right">
+                  <Button
+                    variant="primary"
+                    onClick={handleSendMessage}
+                    disabled={
+                      (disabled ?? false) ||
+                      (main.chatSending ?? false) ||
+                      !inputMessage.trim()
+                    }
+                  >
+                    {main.chatSending ? (
+                      <>
+                        <span className="loading-spinner" />
+                        <span>Processing...</span>
+                      </>
+                    ) : (
+                      "Send"
+                    )}
+                  </Button>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </Card>
     </div>
   );
diff --git a/src/contexts/ExtensionContext.tsx b/src/contexts/ExtensionContext.tsx
index b52d2f5..aad92e9 100644
--- a/src/contexts/ExtensionContext.tsx
+++ b/src/contexts/ExtensionContext.tsx
@@ -121,6 +121,15 @@ export interface MainViewState {
     }
   >;
 
+  // Chat state
+  chatMessages?: Array<{
+    role: "user" | "assistant";
+    content: string;
+    timestamp: string;
+  }>;
+  chatSessionId?: string;
+  chatSending?: boolean;
+
   // Pause/Resume state
   isPaused: boolean;
   currentExecutionId?: string;
@@ -355,6 +364,10 @@ export interface ExtensionActions {
   deleteWorkflowState: (executionId: string) => void;
   getResumableWorkflows: () => void;
 
+  // Chat Actions
+  sendChatMessage: (message: string, isFirstMessage: boolean) => void;
+  clearChatSession: () => void;
+
   // Commands View Actions
   updateCommandsState: (updates: Partial<CommandsViewState>) => void;
   scanCommands: (rootPath: string) => void;
@@ -542,6 +555,15 @@ export const ExtensionProvider: React.FC<{ children: ReactNode }> = ({
       sendMessage("deleteWorkflowState", { executionId });
     },
 
+    // Chat Actions
+    sendChatMessage: (message: string, isFirstMessage: boolean) => {
+      sendMessage("sendChatMessage", { message, isFirstMessage });
+    },
+
+    clearChatSession: () => {
+      sendMessage("clearChatSession");
+    },
+
     // Commands View Actions
     updateCommandsState: (updates: Partial<CommandsViewState>) => {
       dispatch({ type: "UPDATE_COMMANDS_STATE", updates });
@@ -702,6 +724,44 @@ export const ExtensionProvider: React.FC<{ children: ReactNode }> = ({
           });
           break;
 
+        case "chatMessageResponse":
+          if (message.chatMessage) {
+            dispatch({
+              type: "UPDATE_MAIN_STATE",
+              updates: {
+                chatMessages: [
+                  ...(state.main.chatMessages ?? []),
+                  message.chatMessage,
+                ],
+                chatSessionId: message.sessionId,
+                chatSending: false,
+              },
+            });
+          }
+          break;
+
+        case "chatConversationUpdate":
+          if (message.chatMessages) {
+            dispatch({
+              type: "UPDATE_MAIN_STATE",
+              updates: {
+                chatMessages: message.chatMessages,
+                chatSessionId: message.sessionId,
+                chatSending: false,
+              },
+            });
+          }
+          break;
+
+        case "chatError":
+          dispatch({
+            type: "UPDATE_MAIN_STATE",
+            updates: {
+              chatSending: false,
+            },
+          });
+          break;
+
         case "workflowList":
           dispatch({
             type: "UPDATE_MAIN_STATE",
diff --git a/src/controllers/RunnerController.ts b/src/controllers/RunnerController.ts
index 10ffd5c..837b180 100644
--- a/src/controllers/RunnerController.ts
+++ b/src/controllers/RunnerController.ts
@@ -28,6 +28,7 @@ export interface ControllerCallbacks {
     globalCommands: CommandFile[];
     projectCommands: CommandFile[];
   }) => void;
+  postMessage?: (message: Record<string, unknown>) => void;
 }
 
 export class RunnerController implements EventBus {
@@ -178,6 +179,12 @@ export class RunnerController implements EventBus {
       case "deleteCommand":
         void this.deleteCommand(cmd.path);
         break;
+      case "sendChatMessage":
+        void this.sendChatMessage(cmd.message, cmd.isFirstMessage);
+        break;
+      case "clearChatSession":
+        this.clearChatSession();
+        break;
       case "webviewError":
         console.error("Webview error:", cmd.error);
         break;
@@ -1072,6 +1079,97 @@ export class RunnerController implements EventBus {
     }
   }
 
+  private async sendChatMessage(
+    message: string,
+    isFirstMessage: boolean,
+  ): Promise<void> {
+    try {
+      const currentState = this.state$.value;
+
+      // Add user message to chat
+      const userMessage = {
+        role: "user" as const,
+        content: message,
+        timestamp: new Date().toISOString(),
+      };
+
+      const updatedMessages = [
+        ...(currentState.chatMessages ?? []),
+        userMessage,
+      ];
+
+      this.updateState({
+        chatMessages: updatedMessages,
+        chatSending: true,
+      });
+
+      // Build command and execute directly to get raw JSON output
+      const args = this.claudeCodeService.buildTaskCommand(
+        message,
+        currentState.model,
+        {
+          allowAllTools: currentState.allowAllTools,
+          outputFormat: "json",
+          resumeSessionId: isFirstMessage
+            ? undefined
+            : currentState.chatSessionId,
+        },
+      );
+
+      const commandResult = await this.claudeCodeService.executeCommand(
+        args,
+        currentState.rootPath,
+      );
+
+      if (!commandResult.success) {
+        throw new Error(commandResult.error ?? "Chat command failed");
+      }
+
+      // Parse the JSON response from raw output
+      const jsonResponse = JSON.parse(commandResult.output.trim());
+      const assistantMessage = {
+        role: "assistant" as const,
+        content: jsonResponse.result || "No response",
+        timestamp: new Date().toISOString(),
+      };
+
+      this.updateState({
+        chatMessages: [...updatedMessages, assistantMessage],
+        chatSessionId: jsonResponse.session_id,
+        chatSending: false,
+      });
+
+      // Send full conversation state back to webview
+      this.callbacks.postMessage?.({
+        command: "chatConversationUpdate",
+        chatMessages: [...updatedMessages, assistantMessage],
+        sessionId: jsonResponse.session_id,
+      });
+    } catch (error) {
+      this.updateState({ chatSending: false });
+      this.callbacks.postMessage?.({
+        command: "chatError",
+        error: error instanceof Error ? error.message : String(error),
+      });
+      vscode.window.showErrorMessage(`Chat error: ${error}`);
+    }
+  }
+
+  private clearChatSession(): void {
+    this.updateState({
+      chatMessages: [],
+      chatSessionId: undefined,
+      chatSending: false,
+    });
+
+    // Notify webview to clear conversation
+    this.callbacks.postMessage?.({
+      command: "chatConversationUpdate",
+      chatMessages: [],
+      sessionId: undefined,
+    });
+  }
+
   private async deleteWorkflowState(executionId: string): Promise<void> {
     try {
       await this.claudeCodeService.deleteWorkflowState(executionId);
diff --git a/src/providers/ClaudeRunnerPanel.ts b/src/providers/ClaudeRunnerPanel.ts
index 199c3c9..2dbc971 100644
--- a/src/providers/ClaudeRunnerPanel.ts
+++ b/src/providers/ClaudeRunnerPanel.ts
@@ -98,6 +98,7 @@ export class ClaudeRunnerPanel implements vscode.WebviewViewProvider {
         this.postMessage.bind(this),
       ),
       onCommandScanResult: (data) => this.handleCommandScanResult(data),
+      postMessage: this.postMessage.bind(this),
     });
 
     // Load pipelines
diff --git a/src/services/ClaudeCodeService.ts b/src/services/ClaudeCodeService.ts
index 251b9ae..bfdcc9b 100644
--- a/src/services/ClaudeCodeService.ts
+++ b/src/services/ClaudeCodeService.ts
@@ -462,10 +462,10 @@ export class ClaudeCodeService {
 
   private extractResultFromJson(output: string): string {
     try {
-      // Try to parse the JSON response
+      // Parse the JSON response from Claude CLI
       const jsonData = JSON.parse(output.trim());
 
-      // Extract the result field if it exists
+      // Extract the result field from the standard CLI output
       if (jsonData && typeof jsonData.result === "string") {
         return jsonData.result;
       }
@@ -479,7 +479,7 @@ export class ClaudeCodeService {
     }
   }
 
-  private buildTaskCommand(
+  buildTaskCommand(
     task: string,
     model: string,
     options: TaskOptions,
diff --git a/src/styles/panels.css b/src/styles/panels.css
index b4cb1a6..572dcf7 100644
--- a/src/styles/panels.css
+++ b/src/styles/panels.css
@@ -514,6 +514,233 @@
   color: var(--vscode-input-foreground);
 }
 
+/* Chat Panel Styles */
+.chat-mode-selector {
+  margin-bottom: var(--spacing-lg);
+}
+
+.extension-chat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  flex: 1;
+}
+
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin-bottom: var(--spacing-md);
+  overflow: hidden;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.chat-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--vscode-descriptionForeground);
+  font-style: italic;
+}
+
+.chat-message {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+  border-radius: var(--border-radius-sm);
+  max-width: 80%;
+}
+
+.chat-message.user {
+  align-self: flex-end;
+  background-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+}
+
+.chat-message.assistant {
+  align-self: flex-start;
+  background-color: var(--vscode-editor-background);
+  border: 1px solid var(--vscode-panel-border);
+}
+
+.message-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.8em;
+  opacity: 0.8;
+}
+
+.message-role {
+  font-weight: 600;
+}
+
+.message-time {
+  font-family: var(--vscode-editor-font-family);
+  font-size: 0.9em;
+}
+
+.message-content {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  line-height: 1.4;
+}
+
+.chat-input-container {
+  /* Removed border and adjusted background for cleaner look */
+  padding: var(--spacing-md);
+  padding-top: 0;
+  flex-shrink: 0;
+}
+
+.chat-input {
+  width: 100%;
+  min-height: 60px;
+  max-height: 150px;
+  resize: vertical;
+  margin-bottom: var(--spacing-sm);
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.chat-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.chat-controls-left {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+.chat-controls-right {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+}
+
+/* Spinner inside button */
+.chat-controls button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.chat-controls .loading-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* Loading indicator styles */
+.chat-message.loading {
+  opacity: 0.8;
+}
+
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  color: var(--vscode-descriptionForeground);
+  font-style: italic;
+}
+
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--vscode-progressBar-background);
+  border-top: 2px solid var(--vscode-progressBar-foreground);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* History Selector Styles */
+.history-selector {
+  background-color: var(--vscode-editor-background);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+
+.history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-md);
+  padding-bottom: var(--spacing-xs);
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.history-header h4 {
+  margin: 0;
+  font-size: 0.95em;
+  font-weight: 600;
+  color: var(--vscode-foreground);
+}
+
+.project-selection {
+  margin-bottom: var(--spacing-md);
+}
+
+.conversations-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.conversation-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.no-conversations {
+  text-align: center;
+  padding: var(--spacing-lg);
+  color: var(--vscode-descriptionForeground);
+  font-style: italic;
+}
+
+.loading-message {
+  text-align: center;
+  padding: var(--spacing-md);
+  color: var(--vscode-descriptionForeground);
+}
+
+.error-message {
+  color: var(--vscode-errorForeground);
+  background-color: var(--vscode-inputValidation-errorBackground);
+  border: 1px solid var(--vscode-inputValidation-errorBorder);
+  border-radius: var(--border-radius-sm);
+  padding: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+
 /* Daily Breakdown Styles */
 .daily-breakdown {
   border-top: 1px solid var(--vscode-panel-border);
diff --git a/src/types/runner.ts b/src/types/runner.ts
index dbf0f12..bf71f69 100644
--- a/src/types/runner.ts
+++ b/src/types/runner.ts
@@ -84,6 +84,8 @@ export type RunnerCommand =
   | { kind: "openFile"; path: string }
   | { kind: "createCommand"; name: string; isGlobal: boolean; rootPath: string }
   | { kind: "deleteCommand"; path: string }
+  | { kind: "sendChatMessage"; message: string; isFirstMessage: boolean }
+  | { kind: "clearChatSession" }
   | { kind: "webviewError"; error: string };
 
 // Command Registry for type-safe command creation
@@ -249,6 +251,12 @@ export const RunnerCommandRegistry: {
     kind: "deleteCommand",
     path: isString(m.path) ? m.path : "",
   }),
+  sendChatMessage: (m) => ({
+    kind: "sendChatMessage",
+    message: isString(m.message) ? m.message : "",
+    isFirstMessage: isBoolean(m.isFirstMessage) ? m.isFirstMessage : false,
+  }),
+  clearChatSession: () => ({ kind: "clearChatSession" }),
   webviewError: (m) => ({
     kind: "webviewError",
     error: isString(m.error) ? m.error : "",
@@ -302,6 +310,13 @@ export interface UIState {
   // Chat state
   chatPrompt: string;
   showChatPrompt: boolean;
+  chatMessages?: Array<{
+    role: "user" | "assistant";
+    content: string;
+    timestamp: string;
+  }>;
+  chatSessionId?: string;
+  chatSending?: boolean;
 
   // Claude version state
   claudeVersion: string;
diff --git a/tests/e2e/ChatPanelE2E.test.ts b/tests/e2e/ChatPanelE2E.test.ts
new file mode 100644
index 0000000..849353a
--- /dev/null
+++ b/tests/e2e/ChatPanelE2E.test.ts
@@ -0,0 +1,457 @@
+import * as path from "path";
+import { ClaudeCodeService } from "../../src/services/ClaudeCodeService";
+import { ConfigurationService } from "../../src/services/ConfigurationService";
+import { spawn } from "child_process";
+
+interface ChatUIState {
+  activeTab: "terminal" | "extension";
+  messages: Array<{
+    role: "user" | "assistant";
+    content: string;
+    timestamp: string;
+  }>;
+  currentInput: string;
+  isSending: boolean;
+  sessionId?: string;
+  error?: string;
+}
+
+let chatUIState: ChatUIState = {
+  activeTab: "extension",
+  messages: [],
+  currentInput: "",
+  isSending: false,
+};
+
+let configService: ConfigurationService;
+let claudeService: ClaudeCodeService;
+
+function simulateTabChange(tab: "terminal" | "extension"): void {
+  console.log(
+    `🖱️  USER: Switching to ${tab === "terminal" ? "Terminal" : "VSCode"} chat mode`,
+  );
+  chatUIState.activeTab = tab;
+}
+
+async function simulateSendMessage(message: string): Promise<void> {
+  console.log(`🖱️  USER: Sending message: "${message}"`);
+  if (!chatUIState.isSending && message.trim()) {
+    chatUIState.currentInput = message;
+    await sendChatMessage(message);
+  }
+}
+
+async function sendChatMessage(message: string): Promise<void> {
+  chatUIState.isSending = true;
+  chatUIState.messages.push({
+    role: "user",
+    content: message,
+    timestamp: new Date().toISOString(),
+  });
+
+  try {
+    if (chatUIState.activeTab === "extension") {
+      // Build command using the same approach as RunnerController
+      const args = claudeService.buildTaskCommand(
+        message,
+        "claude-sonnet-4-20250514",
+        {
+          outputFormat: "json",
+          resumeSessionId: chatUIState.sessionId,
+        },
+      );
+
+      const commandResult = await claudeService.executeCommand(
+        args,
+        process.cwd(),
+      );
+
+      if (!commandResult.success) {
+        throw new Error(commandResult.error ?? "Chat command failed");
+      }
+
+      // Parse the JSON response from raw output
+      let responseContent: string;
+      let sessionId: string | undefined;
+
+      try {
+        const jsonResponse = JSON.parse(commandResult.output.trim());
+        responseContent = jsonResponse.result || "No response";
+        sessionId = jsonResponse.session_id;
+        chatUIState.sessionId = sessionId;
+      } catch {
+        responseContent = commandResult.output;
+      }
+
+      chatUIState.messages.push({
+        role: "assistant",
+        content: responseContent,
+        timestamp: new Date().toISOString(),
+      });
+    } else {
+      console.log("Terminal mode would open interactive session");
+    }
+  } catch (error) {
+    chatUIState.error = error instanceof Error ? error.message : String(error);
+  } finally {
+    chatUIState.isSending = false;
+    chatUIState.currentInput = "";
+  }
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+
+  configService = new ConfigurationService();
+  claudeService = new ClaudeCodeService(configService);
+
+  chatUIState = {
+    activeTab: "extension",
+    messages: [],
+    currentInput: "",
+    isSending: false,
+  };
+});
+
+describe("Chat Panel E2E Tests", () => {
+  test("should switch between VSCode and Terminal chat modes", () => {
+    expect(chatUIState.activeTab).toBe("extension");
+
+    simulateTabChange("terminal");
+    expect(chatUIState.activeTab).toBe("terminal");
+
+    simulateTabChange("extension");
+    expect(chatUIState.activeTab).toBe("extension");
+  });
+
+  test("should send message in extension mode and maintain session", async () => {
+    simulateTabChange("extension");
+
+    expect(chatUIState.messages.length).toBe(0);
+    expect(chatUIState.sessionId).toBeUndefined();
+
+    jest
+      .spyOn(claudeService, "executeCommand")
+      .mockImplementation(async (_args: string[]) => {
+        if (_args.includes("--output-format") && _args.includes("json")) {
+          return {
+            success: true,
+            output: JSON.stringify({
+              type: "result",
+              subtype: "success",
+              is_error: false,
+              duration_ms: 2887,
+              duration_api_ms: 4882,
+              num_turns: 1,
+              result:
+                "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.",
+              session_id: "test-session-123",
+              total_cost_usd: 0.0634276,
+              usage: {
+                input_tokens: 4,
+                cache_creation_input_tokens: 16592,
+                cache_read_input_tokens: 0,
+                output_tokens: 30,
+                server_tool_use: {
+                  web_search_requests: 0,
+                },
+                service_tier: "standard",
+              },
+            }),
+            exitCode: 0,
+          };
+        }
+        return {
+          success: true,
+          output: "Terminal mode output",
+          exitCode: 0,
+        };
+      });
+
+    await simulateSendMessage("What is TypeScript?");
+
+    expect(chatUIState.messages.length).toBe(2);
+    expect(chatUIState.messages[0].role).toBe("user");
+    expect(chatUIState.messages[0].content).toBe("What is TypeScript?");
+    expect(chatUIState.messages[1].role).toBe("assistant");
+    expect(chatUIState.messages[1].content).toContain(
+      "TypeScript is a typed superset",
+    );
+    expect(chatUIState.sessionId).toBe("test-session-123");
+
+    jest
+      .spyOn(claudeService, "executeCommand")
+      .mockImplementation(async (_args: string[]) => {
+        if (_args.includes("-r") && _args.includes("test-session-123")) {
+          return {
+            success: true,
+            output: JSON.stringify({
+              type: "result",
+              subtype: "success",
+              is_error: false,
+              result:
+                "TypeScript has several type features including interfaces, generics, and type inference.",
+              session_id: "test-session-123",
+            }),
+            exitCode: 0,
+          };
+        }
+        return { success: false, output: "", exitCode: 1 };
+      });
+
+    await simulateSendMessage("Tell me more about types");
+
+    expect(chatUIState.messages.length).toBe(4);
+    expect(chatUIState.sessionId).toBe("test-session-123");
+    expect(chatUIState.messages[3].content).toContain("type features");
+  });
+
+  test("should handle errors gracefully", async () => {
+    jest.spyOn(claudeService, "executeCommand").mockImplementation(async () => {
+      return {
+        success: false,
+        output: "",
+        error: "Claude CLI not found",
+        exitCode: 127,
+      };
+    });
+
+    await simulateSendMessage("Hello");
+
+    expect(chatUIState.error).toContain("Claude CLI not found");
+    expect(chatUIState.messages.length).toBe(1);
+    expect(chatUIState.isSending).toBe(false);
+  });
+
+  test("should display conversation history from logs", async () => {
+    const previousMessages = [
+      {
+        role: "user" as const,
+        content: "Previous message",
+        timestamp: new Date().toISOString(),
+      },
+      {
+        role: "assistant" as const,
+        content: "Previous response",
+        timestamp: new Date().toISOString(),
+      },
+    ];
+
+    chatUIState.messages = previousMessages;
+    chatUIState.sessionId = "test-session-123";
+
+    expect(chatUIState.messages.length).toBe(2);
+    expect(chatUIState.messages[0].content).toBe("Previous message");
+    expect(chatUIState.messages[1].content).toBe("Previous response");
+  });
+
+  test("should clear chat and start new session", async () => {
+    jest
+      .spyOn(claudeService, "executeCommand")
+      .mockImplementation(async (_args: string[]) => {
+        return {
+          success: true,
+          output: JSON.stringify({
+            type: "result",
+            result: "First response",
+            session_id: "test-session-123",
+          }),
+          exitCode: 0,
+        };
+      });
+
+    await simulateSendMessage("First message");
+
+    expect(chatUIState.messages.length).toBe(2);
+    expect(chatUIState.sessionId).toBe("test-session-123");
+
+    function simulateClearChat(): void {
+      console.log("🖱️  USER: Clicking Clear Chat button");
+      chatUIState.messages = [];
+      chatUIState.sessionId = undefined;
+      chatUIState.error = undefined;
+    }
+
+    simulateClearChat();
+
+    expect(chatUIState.messages.length).toBe(0);
+    expect(chatUIState.sessionId).toBeUndefined();
+
+    jest
+      .spyOn(claudeService, "executeCommand")
+      .mockImplementation(async (_args: string[]) => {
+        return {
+          success: true,
+          output: JSON.stringify({
+            type: "result",
+            result: "New conversation response",
+            session_id: "new-session-456",
+          }),
+          exitCode: 0,
+        };
+      });
+
+    await simulateSendMessage("New conversation");
+
+    expect(chatUIState.messages.length).toBe(2);
+    expect(chatUIState.sessionId).toBe("new-session-456");
+  });
+
+  test("should handle real Claude execution with fixtures", async () => {
+    const scriptPath = path.join(
+      __dirname,
+      "../fixtures/scripts/claude-mock.sh",
+    );
+
+    jest
+      .spyOn(claudeService, "executeCommand")
+      .mockImplementation(async (args: string[]) => {
+        return new Promise((resolve) => {
+          const child = spawn("bash", [scriptPath, ...args]);
+          let output = "";
+          let error = "";
+
+          child.stdout.on("data", (data) => {
+            output += data.toString();
+          });
+
+          child.stderr.on("data", (data) => {
+            error += data.toString();
+          });
+
+          child.on("close", (code) => {
+            resolve({
+              success: code === 0,
+              output: output.trim(),
+              error: error.trim() || undefined,
+              exitCode: code ?? 0,
+            });
+          });
+        });
+      });
+
+    await simulateSendMessage("Test with real script");
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    expect(chatUIState.messages.length).toBe(2);
+    expect(chatUIState.messages[1].content).toContain("mock response");
+    expect(chatUIState.isSending).toBe(false);
+  });
+
+  test("should build correct command with session resume", async () => {
+    const executeCommandSpy = jest
+      .spyOn(claudeService, "executeCommand")
+      .mockImplementation(async (_args: string[]) => {
+        return {
+          success: true,
+          output: JSON.stringify({
+            type: "result",
+            result: "Response",
+            session_id: "test-session",
+          }),
+          exitCode: 0,
+        };
+      });
+
+    chatUIState.sessionId = "existing-session-123";
+
+    await sendChatMessage("Continue conversation");
+
+    expect(executeCommandSpy).toHaveBeenCalledWith(
+      expect.arrayContaining([
+        "claude",
+        "-r",
+        "existing-session-123",
+        "-p",
+        "'Continue conversation'",
+        "--model",
+        "claude-sonnet-4-20250514",
+        "--output-format",
+        "json",
+      ]),
+      process.cwd(),
+    );
+  });
+
+  test("should handle JSON parsing errors gracefully", async () => {
+    jest.spyOn(claudeService, "executeCommand").mockImplementation(async () => {
+      return {
+        success: true,
+        output: "This is not valid JSON",
+        exitCode: 0,
+      };
+    });
+
+    await simulateSendMessage("Test invalid JSON");
+
+    expect(chatUIState.messages.length).toBe(2);
+    expect(chatUIState.messages[1].content).toBe("This is not valid JSON");
+    expect(chatUIState.error).toBeUndefined();
+  });
+
+  test("should handle multi-turn conversations", async () => {
+    const responses = [
+      { message: "Hello! How can I help you today?", session: "session-1" },
+      {
+        message: "Python is a high-level programming language.",
+        session: "session-1",
+      },
+      {
+        message: "Python was created by Guido van Rossum.",
+        session: "session-1",
+      },
+    ];
+
+    let callCount = 0;
+    jest.spyOn(claudeService, "executeCommand").mockImplementation(async () => {
+      const response = responses[callCount++];
+      return {
+        success: true,
+        output: JSON.stringify({
+          type: "result",
+          result: response.message,
+          session_id: response.session,
+        }),
+        exitCode: 0,
+      };
+    });
+
+    await simulateSendMessage("Hello");
+    expect(chatUIState.messages.length).toBe(2);
+    expect(chatUIState.sessionId).toBe("session-1");
+
+    await simulateSendMessage("What is Python?");
+    expect(chatUIState.messages.length).toBe(4);
+    expect(chatUIState.sessionId).toBe("session-1");
+
+    await simulateSendMessage("Who created it?");
+    expect(chatUIState.messages.length).toBe(6);
+    expect(chatUIState.sessionId).toBe("session-1");
+
+    expect(chatUIState.messages[5].content).toContain("Guido van Rossum");
+  });
+
+  test("should handle the exact JSON format from Claude CLI without double parsing", async () => {
+    // This test verifies the fix for the "SyntaxError: Unexpected token 'H', Hi! I'm Cl..." error
+    const realClaudeOutput = `{"type":"result","subtype":"success","is_error":false,"duration_ms":2887,"duration_api_ms":4882,"num_turns":1,"result":"Hi! I'm Claude Code, ready to help you with your software engineering tasks. What would you like to work on today?","session_id":"31aeff6b-89bd-4c0a-b20e-236890bb7804","total_cost_usd":0.0634276,"usage":{"input_tokens":4,"cache_creation_input_tokens":16592,"cache_read_input_tokens":0,"output_tokens":30,"server_tool_use":{"web_search_requests":0},"service_tier":"standard"}}`;
+
+    jest.spyOn(claudeService, "executeCommand").mockImplementation(async () => {
+      return {
+        success: true,
+        output: realClaudeOutput,
+        exitCode: 0,
+      };
+    });
+
+    await simulateSendMessage("hi");
+
+    expect(chatUIState.error).toBeUndefined();
+    expect(chatUIState.messages.length).toBe(2);
+    expect(chatUIState.messages[1].role).toBe("assistant");
+    expect(chatUIState.messages[1].content).toBe(
+      "Hi! I'm Claude Code, ready to help you with your software engineering tasks. What would you like to work on today?",
+    );
+    expect(chatUIState.sessionId).toBe("31aeff6b-89bd-4c0a-b20e-236890bb7804");
+    expect(chatUIState.isSending).toBe(false);
+  });
+});
diff --git a/tests/fixtures/scripts/claude-mock.sh b/tests/fixtures/scripts/claude-mock.sh
new file mode 100755
index 0000000..f1482f1
--- /dev/null
+++ b/tests/fixtures/scripts/claude-mock.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+# Mock Claude CLI for testing chat functionality
+
+if [[ "$*" == *"--output-format json"* ]]; then
+  echo '{"type":"result","subtype":"success","is_error":false,"duration_ms":2887,"duration_api_ms":4882,"num_turns":1,"result":"This is a mock response for testing. The command was: '"$*"'","session_id":"mock-session-'$RANDOM'","total_cost_usd":0.0634276,"usage":{"input_tokens":4,"cache_creation_input_tokens":16592,"cache_read_input_tokens":0,"output_tokens":30,"server_tool_use":{"web_search_requests":0},"service_tier":"standard"}}'
+else
+  echo "Mock Claude response in text mode"
+fi
+
+exit 0
diff --git a/tests/unit/components/panels/ChatPanel.history.test.tsx b/tests/unit/components/panels/ChatPanel.history.test.tsx
new file mode 100644
index 0000000..74dc2ae
--- /dev/null
+++ b/tests/unit/components/panels/ChatPanel.history.test.tsx
@@ -0,0 +1,416 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import ChatPanel from "../../../../src/components/panels/ChatPanel";
+import {
+  ExtensionState,
+  ExtensionActions,
+} from "../../../../src/contexts/ExtensionContext";
+
+// Mock child components
+jest.mock("../../../../src/components/common/Card", () => {
+  return ({
+    title,
+    children,
+  }: {
+    title: string;
+    children: React.ReactNode;
+  }) => (
+    <div data-testid="mock-card">
+      <h3>{title}</h3>
+      {children}
+    </div>
+  );
+});
+
+jest.mock("../../../../src/components/common/Button", () => {
+  return ({
+    variant,
+    onClick,
+    disabled,
+    children,
+  }: {
+    variant?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+  }) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      data-variant={variant}
+      data-testid="mock-button"
+    >
+      {children}
+    </button>
+  );
+});
+
+jest.mock("../../../../src/components/common/Toggle", () => {
+  return () => <div data-testid="mock-toggle" />;
+});
+
+jest.mock("../../../../src/components/common/PathSelector", () => {
+  return () => <div data-testid="mock-path-selector" />;
+});
+
+jest.mock("../../../../src/components/common/ModelSelector", () => {
+  return () => <div data-testid="mock-model-selector" />;
+});
+
+jest.mock("../../../../src/components/common/ClaudeVersionDisplay", () => {
+  return () => <div data-testid="mock-claude-version" />;
+});
+
+// Create mock extension context
+const createMockExtensionState = (
+  overrides: {
+    main?: Partial<ExtensionState["main"]>;
+    usage?: Partial<ExtensionState["usage"]>;
+    claude?: Partial<ExtensionState["claude"]>;
+  } = {},
+): ExtensionState => {
+  const baseState: ExtensionState = {
+    currentView: "main",
+    main: {
+      activeTab: "chat",
+      model: "claude-sonnet-4-20250514",
+      rootPath: "/workspace",
+      allowAllTools: false,
+      status: "stopped",
+      tasks: [],
+      currentTaskIndex: undefined,
+      results: undefined,
+      taskCompleted: undefined,
+      taskError: undefined,
+      chatPrompt: "",
+      showChatPrompt: false,
+      outputFormat: "json",
+      availablePipelines: [],
+      availableModels: [],
+      workflows: [],
+      currentWorkflow: null,
+      workflowInputs: {},
+      executionStatus: "idle",
+      stepStatuses: {},
+      isPaused: false,
+      currentExecutionId: undefined,
+      pausedPipelines: [],
+      resumableWorkflows: [],
+      chatMessages: [],
+      chatSessionId: undefined,
+      chatSending: false,
+    },
+    commands: {
+      activeTab: "global",
+      globalCommands: [],
+      projectCommands: [],
+      loading: false,
+      rootPath: "",
+    },
+    usage: {
+      activeTab: "usage",
+      projects: [],
+      selectedProject: "",
+      conversations: [],
+      selectedConversation: "",
+      conversationData: null,
+      projectsLoading: false,
+      conversationsLoading: false,
+      conversationLoading: false,
+      projectsError: null,
+      conversationsError: null,
+      conversationError: null,
+      selectedPeriod: "today",
+      totalHours: 5,
+      startHour: 0,
+      limitType: "output",
+      limitValue: 0,
+      autoRefresh: false,
+      report: null,
+      loading: false,
+      error: null,
+    },
+    claude: {
+      version: "1.0.0",
+      isAvailable: true,
+      isInstalled: true,
+      error: undefined,
+      loading: false,
+    },
+  };
+
+  return {
+    ...baseState,
+    ...overrides,
+    main: { ...baseState.main, ...overrides.main },
+    usage: { ...baseState.usage, ...overrides.usage },
+    claude: { ...baseState.claude, ...overrides.claude },
+  };
+};
+
+const createMockActions = (): ExtensionActions => ({
+  setCurrentView: jest.fn(),
+  updateMainState: jest.fn(),
+  startInteractive: jest.fn(),
+  runTasks: jest.fn(),
+  cancelTask: jest.fn(),
+  updateModel: jest.fn(),
+  updateRootPath: jest.fn(),
+  updateAllowAllTools: jest.fn(),
+  updateActiveTab: jest.fn(),
+  updateChatPrompt: jest.fn(),
+  updateShowChatPrompt: jest.fn(),
+  updateOutputFormat: jest.fn(),
+  savePipeline: jest.fn(),
+  loadPipeline: jest.fn(),
+  pipelineAddTask: jest.fn(),
+  pipelineRemoveTask: jest.fn(),
+  pipelineClearAll: jest.fn(),
+  pipelineUpdateTaskField: jest.fn(),
+  recheckClaude: jest.fn(),
+  loadWorkflows: jest.fn(),
+  loadWorkflow: jest.fn(),
+  saveWorkflow: jest.fn(),
+  deleteWorkflow: jest.fn(),
+  updateWorkflowInputs: jest.fn(),
+  runWorkflow: jest.fn(),
+  cancelWorkflow: jest.fn(),
+  createSampleWorkflow: jest.fn(),
+  pausePipeline: jest.fn(),
+  resumePipeline: jest.fn(),
+  pauseWorkflow: jest.fn(),
+  resumeWorkflow: jest.fn(),
+  deleteWorkflowState: jest.fn(),
+  getResumableWorkflows: jest.fn(),
+  sendChatMessage: jest.fn(),
+  clearChatSession: jest.fn(),
+  updateCommandsState: jest.fn(),
+  scanCommands: jest.fn(),
+  createCommand: jest.fn(),
+  openFile: jest.fn(),
+  deleteCommand: jest.fn(),
+  updateUsageState: jest.fn(),
+  requestUsageReport: jest.fn(),
+  requestLogProjects: jest.fn(),
+  requestLogConversations: jest.fn(),
+  requestLogConversation: jest.fn(),
+});
+
+// Mock the useExtension hook
+jest.mock("../../../../src/contexts/ExtensionContext", () => ({
+  ...jest.requireActual("../../../../src/contexts/ExtensionContext"),
+  useExtension: jest.fn(),
+}));
+
+const ChatPanelWithContext = ({
+  disabled = false,
+  state = createMockExtensionState(),
+  actions = createMockActions(),
+}: {
+  disabled?: boolean;
+  state?: ExtensionState;
+  actions?: ExtensionActions;
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { useExtension } = require("../../../../src/contexts/ExtensionContext");
+  useExtension.mockReturnValue({ state, actions });
+
+  return <ChatPanel disabled={disabled} />;
+};
+
+describe("ChatPanel History Functionality", () => {
+  let mockActions: ExtensionActions;
+
+  beforeEach(() => {
+    mockActions = createMockActions();
+    jest.clearAllMocks();
+
+    // Mock scrollIntoView which isn't available in test environment
+    Element.prototype.scrollIntoView = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("history selector", () => {
+    it("shows Load History button", () => {
+      render(<ChatPanelWithContext />);
+
+      expect(screen.getByText("Load History")).toBeInTheDocument();
+    });
+
+    it("opens history selector when Load History is clicked", () => {
+      render(<ChatPanelWithContext actions={mockActions} />);
+
+      const loadHistoryButton = screen.getByText("Load History");
+      fireEvent.click(loadHistoryButton);
+
+      expect(screen.getByText("Load Conversation History")).toBeInTheDocument();
+      expect(screen.getByText("Hide History")).toBeInTheDocument();
+      expect(mockActions.requestLogProjects).toHaveBeenCalled();
+    });
+
+    it("shows project selector when history is open", () => {
+      const state = createMockExtensionState({
+        usage: {
+          projects: [
+            {
+              name: "project1",
+              path: "/path/to/project1",
+              conversationCount: 5,
+              lastModified: "2023-01-01",
+            },
+            {
+              name: "project2",
+              path: "/path/to/project2",
+              conversationCount: 3,
+              lastModified: "2023-01-02",
+            },
+          ],
+        },
+      });
+
+      render(<ChatPanelWithContext state={state} actions={mockActions} />);
+
+      const loadHistoryButton = screen.getByText("Load History");
+      fireEvent.click(loadHistoryButton);
+
+      const projectSelect = screen.getByDisplayValue("Select a project...");
+      expect(projectSelect).toBeInTheDocument();
+    });
+
+    it("loads conversations when project is selected", () => {
+      const state = createMockExtensionState({
+        usage: {
+          projects: [
+            {
+              name: "project1",
+              path: "/path/to/project1",
+              conversationCount: 5,
+              lastModified: "2023-01-01",
+            },
+          ],
+        },
+      });
+
+      render(<ChatPanelWithContext state={state} actions={mockActions} />);
+
+      const loadHistoryButton = screen.getByText("Load History");
+      fireEvent.click(loadHistoryButton);
+
+      const projectSelect = screen.getByDisplayValue("Select a project...");
+      fireEvent.change(projectSelect, { target: { value: "project1" } });
+
+      expect(mockActions.updateUsageState).toHaveBeenCalledWith({
+        selectedProject: "project1",
+      });
+      expect(mockActions.requestLogConversations).toHaveBeenCalledWith(
+        "project1",
+      );
+    });
+
+    it("displays conversations when available", () => {
+      const state = createMockExtensionState({
+        usage: {
+          selectedProject: "project1",
+          conversations: [
+            {
+              id: "conv1",
+              sessionId: "session1",
+              fileName: "conv1.json",
+              firstTimestamp: "2023-01-01T10:00:00Z",
+              lastTimestamp: "2023-01-01T11:00:00Z",
+              messageCount: 5,
+              summary: "Discussion about TypeScript",
+              filePath: "/path/to/conv1.json",
+            },
+          ],
+        },
+      });
+
+      render(<ChatPanelWithContext state={state} actions={mockActions} />);
+
+      const loadHistoryButton = screen.getByText("Load History");
+      fireEvent.click(loadHistoryButton);
+
+      expect(screen.getByText("5 messages")).toBeInTheDocument();
+      expect(
+        screen.getByText("Discussion about TypeScript"),
+      ).toBeInTheDocument();
+    });
+
+    it("loads conversation when clicked", () => {
+      const state = createMockExtensionState({
+        usage: {
+          selectedProject: "project1",
+          conversations: [
+            {
+              id: "conv1",
+              sessionId: "session1",
+              fileName: "conv1.json",
+              firstTimestamp: "2023-01-01T10:00:00Z",
+              lastTimestamp: "2023-01-01T11:00:00Z",
+              messageCount: 5,
+              summary: "Discussion about TypeScript",
+              filePath: "/path/to/conv1.json",
+            },
+          ],
+        },
+      });
+
+      render(<ChatPanelWithContext state={state} actions={mockActions} />);
+
+      const loadHistoryButton = screen.getByText("Load History");
+      fireEvent.click(loadHistoryButton);
+
+      const conversationItem = screen
+        .getByText("Discussion about TypeScript")
+        .closest(".conversation-item");
+      if (conversationItem) {
+        fireEvent.click(conversationItem);
+      }
+
+      expect(mockActions.requestLogConversation).toHaveBeenCalledWith(
+        "/path/to/conv1.json",
+      );
+    });
+
+    it("closes history selector after loading conversation", () => {
+      const state = createMockExtensionState({
+        usage: {
+          selectedProject: "project1",
+          conversations: [
+            {
+              id: "conv1",
+              sessionId: "session1",
+              fileName: "conv1.json",
+              firstTimestamp: "2023-01-01T10:00:00Z",
+              lastTimestamp: "2023-01-01T11:00:00Z",
+              messageCount: 5,
+              summary: "Discussion about TypeScript",
+              filePath: "/path/to/conv1.json",
+            },
+          ],
+        },
+      });
+
+      render(<ChatPanelWithContext state={state} actions={mockActions} />);
+
+      const loadHistoryButton = screen.getByText("Load History");
+      fireEvent.click(loadHistoryButton);
+
+      const conversationItem = screen
+        .getByText("Discussion about TypeScript")
+        .closest(".conversation-item");
+      if (conversationItem) {
+        fireEvent.click(conversationItem);
+      }
+
+      expect(
+        screen.queryByText("Load Conversation History"),
+      ).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/tests/unit/components/panels/ChatPanel.test.tsx b/tests/unit/components/panels/ChatPanel.test.tsx
index 7be4099..d22aee2 100644
--- a/tests/unit/components/panels/ChatPanel.test.tsx
+++ b/tests/unit/components/panels/ChatPanel.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import ChatPanel from "../../../../src/components/panels/ChatPanel";
 import {
@@ -154,7 +154,6 @@ const createMockExtensionState = (
       model: "claude-sonnet-4-20250514",
       rootPath: "/workspace",
       allowAllTools: false,
-      parallelTasksCount: 1,
       status: "stopped",
       tasks: [],
       currentTaskIndex: undefined,
@@ -175,6 +174,9 @@ const createMockExtensionState = (
       currentExecutionId: undefined,
       pausedPipelines: [],
       resumableWorkflows: [],
+      chatMessages: [],
+      chatSessionId: undefined,
+      chatSending: false,
     },
     commands: {
       activeTab: "global",
@@ -238,7 +240,6 @@ const createMockActions = (): ExtensionActions => ({
   updateChatPrompt: jest.fn(),
   updateShowChatPrompt: jest.fn(),
   updateOutputFormat: jest.fn(),
-  updateParallelTasksCount: jest.fn(),
   savePipeline: jest.fn(),
   loadPipeline: jest.fn(),
   pipelineAddTask: jest.fn(),
@@ -260,6 +261,8 @@ const createMockActions = (): ExtensionActions => ({
   resumeWorkflow: jest.fn(),
   deleteWorkflowState: jest.fn(),
   getResumableWorkflows: jest.fn(),
+  sendChatMessage: jest.fn(),
+  clearChatSession: jest.fn(),
   updateCommandsState: jest.fn(),
   scanCommands: jest.fn(),
   createCommand: jest.fn(),
@@ -272,13 +275,16 @@ const createMockActions = (): ExtensionActions => ({
   requestLogConversation: jest.fn(),
 });
 
-// Create wrapper component with mock context
 // Mock the useExtension hook at the module level
 jest.mock("../../../../src/contexts/ExtensionContext", () => ({
   ...jest.requireActual("../../../../src/contexts/ExtensionContext"),
   useExtension: jest.fn(),
 }));
 
+// Store the mock reference to update it during tests
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { useExtension } = require("../../../../src/contexts/ExtensionContext");
+
 const ChatPanelWithContext = ({
   disabled = false,
   state = createMockExtensionState(),
@@ -288,477 +294,511 @@ const ChatPanelWithContext = ({
   state?: ExtensionState;
   actions?: ExtensionActions;
 }) => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { useExtension } = require("../../../../src/contexts/ExtensionContext");
   useExtension.mockReturnValue({ state, actions });
-
   return <ChatPanel disabled={disabled} />;
 };
 
 describe("ChatPanel", () => {
   let mockActions: ExtensionActions;
-  let baseExtensionState: ExtensionState;
-
-  beforeAll(() => {
-    // Create expensive objects once per test suite
-    baseExtensionState = createMockExtensionState();
-  });
 
   beforeEach(() => {
-    // Only create fresh actions and clear mocks
     mockActions = createMockActions();
     jest.clearAllMocks();
+
+    // Mock scrollIntoView which isn't available in test environment
+    Element.prototype.scrollIntoView = jest.fn();
   });
 
   afterEach(() => {
-    // Clean up to prevent memory leaks
     jest.clearAllMocks();
     mockActions = {} as ExtensionActions;
   });
 
-  describe("chat interface functionality and message handling", () => {
-    it("renders the main chat interface components", () => {
+  describe("chat mode selection", () => {
+    it("renders chat mode selector buttons", () => {
       render(<ChatPanelWithContext />);
 
-      expect(screen.getByTestId("mock-claude-version")).toBeInTheDocument();
-      expect(screen.getByTestId("mock-path-selector")).toBeInTheDocument();
-      expect(screen.getByTestId("mock-model-selector")).toBeInTheDocument();
-      expect(screen.getByTestId("mock-toggle")).toBeInTheDocument();
-      expect(screen.getByText("Interactive Chat Session")).toBeInTheDocument();
+      expect(screen.getByText("VSCode")).toBeInTheDocument();
+      expect(screen.getByText("Terminal")).toBeInTheDocument();
     });
 
-    it("displays chat session description", () => {
+    it("defaults to extension mode", () => {
       render(<ChatPanelWithContext />);
 
-      expect(
-        screen.getByText(/Start an interactive Claude chat session/),
-      ).toBeInTheDocument();
+      const extensionButton = screen.getByText("VSCode");
+      expect(extensionButton).toHaveAttribute("data-variant", "primary");
     });
 
-    it("shows Add Prompt button when prompt is not visible", () => {
-      const state = {
-        ...baseExtensionState,
-        main: { ...baseExtensionState.main, showChatPrompt: false },
-      };
-      render(<ChatPanelWithContext state={state} actions={mockActions} />);
+    it("switches between terminal and extension modes", () => {
+      render(<ChatPanelWithContext />);
 
-      const addPromptButton = screen.getByText("Add Prompt");
-      expect(addPromptButton).toBeInTheDocument();
+      const terminalButton = screen.getByText("Terminal");
+      fireEvent.click(terminalButton);
+
+      // Component should handle internal state for mode switching
+      expect(terminalButton).toBeInTheDocument();
     });
+  });
 
-    it("shows Remove Prompt button and textarea when prompt is visible", () => {
-      const state = {
-        ...baseExtensionState,
-        main: {
-          ...baseExtensionState.main,
-          showChatPrompt: true,
-          chatPrompt: "Test prompt",
-        },
-      };
-      render(<ChatPanelWithContext state={state} actions={mockActions} />);
+  describe("terminal mode functionality", () => {
+    it("shows terminal mode interface when selected", () => {
+      render(<ChatPanelWithContext />);
 
-      expect(screen.getByText("Remove Prompt")).toBeInTheDocument();
-      expect(screen.getByDisplayValue("Test prompt")).toBeInTheDocument();
-    });
+      const terminalButton = screen.getByText("Terminal");
+      fireEvent.click(terminalButton);
 
-    it("calls startInteractive without prompt when no prompt is provided", () => {
-      const state = {
-        ...baseExtensionState,
-        main: { ...baseExtensionState.main, showChatPrompt: false },
-      };
-      render(<ChatPanelWithContext state={state} actions={mockActions} />);
+      expect(
+        screen.getByText(/Start an interactive Claude chat session/),
+      ).toBeInTheDocument();
+      expect(screen.getByText("Start Terminal Session")).toBeInTheDocument();
+    });
 
-      const startButton = screen.getByText("Start Chat Session");
-      fireEvent.click(startButton);
+    it("shows Add Initial Prompt button in terminal mode", () => {
+      render(<ChatPanelWithContext />);
 
-      expect(mockActions.startInteractive).toHaveBeenCalledTimes(1);
-      expect(mockActions.startInteractive).toHaveBeenCalledWith();
+      fireEvent.click(screen.getByText("Terminal"));
+      expect(screen.getByText("Add Initial Prompt")).toBeInTheDocument();
     });
 
-    it("calls startInteractive with prompt when prompt is provided", () => {
+    it("calls startInteractive with prompt in terminal mode", () => {
       const state = createMockExtensionState({
         main: { showChatPrompt: true, chatPrompt: "Test prompt" },
       });
       render(<ChatPanelWithContext state={state} actions={mockActions} />);
 
-      const startButton = screen.getByText("Start Chat Session");
-      fireEvent.click(startButton);
+      fireEvent.click(screen.getByText("Terminal"));
+      fireEvent.click(screen.getByText("Start Terminal Session"));
 
-      expect(mockActions.startInteractive).toHaveBeenCalledTimes(1);
       expect(mockActions.startInteractive).toHaveBeenCalledWith("Test prompt");
     });
+  });
 
-    it("trims whitespace from chat prompt before starting", () => {
-      const state = createMockExtensionState({
-        main: { showChatPrompt: true, chatPrompt: "  Test prompt  " },
-      });
-      render(<ChatPanelWithContext state={state} actions={mockActions} />);
+  describe("extension mode chat functionality", () => {
+    it("shows extension mode chat interface when selected", () => {
+      render(<ChatPanelWithContext />);
 
-      const startButton = screen.getByText("Start Chat Session");
-      fireEvent.click(startButton);
+      expect(
+        screen.getByPlaceholderText(/Type your message/),
+      ).toBeInTheDocument();
+      expect(screen.getByText("Send")).toBeInTheDocument();
+    });
 
-      expect(mockActions.startInteractive).toHaveBeenCalledWith("Test prompt");
+    it("displays empty chat state", () => {
+      render(<ChatPanelWithContext />);
+
+      expect(
+        screen.getByText("Start a conversation with Claude..."),
+      ).toBeInTheDocument();
     });
-  });
 
-  describe("chat message display and formatting", () => {
-    it("displays Claude version information", () => {
+    it("displays chat messages", () => {
       const state = createMockExtensionState({
-        claude: {
-          version: "2.0.0",
-          isAvailable: true,
-          isInstalled: true,
-          loading: false,
+        main: {
+          chatMessages: [
+            {
+              role: "user",
+              content: "Hello",
+              timestamp: new Date().toISOString(),
+            },
+            {
+              role: "assistant",
+              content: "Hi there!",
+              timestamp: new Date().toISOString(),
+            },
+          ],
         },
       });
       render(<ChatPanelWithContext state={state} />);
 
-      const versionDisplay = screen.getByTestId("mock-claude-version");
-      expect(versionDisplay).toHaveTextContent("Version: 2.0.0");
-      expect(versionDisplay).toHaveTextContent("Available: Yes");
+      expect(screen.getByText("Hello")).toBeInTheDocument();
+      expect(screen.getByText("Hi there!")).toBeInTheDocument();
+      expect(screen.getByText("👤 You")).toBeInTheDocument();
+      expect(screen.getByText("🤖 Claude")).toBeInTheDocument();
     });
 
-    it("displays Claude error state", () => {
-      const state = createMockExtensionState({
-        claude: {
-          version: "Unknown",
-          isAvailable: false,
-          isInstalled: false,
-          error: "Claude not found",
-          loading: false,
-        },
+    it("handles sending a message and sets loading state", async () => {
+      render(<ChatPanelWithContext actions={mockActions} />);
+
+      const input = screen.getByPlaceholderText(/Type your message/);
+      fireEvent.change(input, { target: { value: "Test message" } });
+
+      const sendButton = screen.getByText("Send");
+      fireEvent.click(sendButton);
+
+      // Should set chatSending to true immediately
+      expect(mockActions.updateMainState).toHaveBeenCalledWith({
+        chatSending: true,
       });
-      render(<ChatPanelWithContext state={state} />);
 
-      const versionDisplay = screen.getByTestId("mock-claude-version");
-      expect(versionDisplay).toHaveTextContent("Error: Claude not found");
-      expect(versionDisplay).toHaveTextContent("Available: No");
+      // Should send the message
+      expect(mockActions.sendChatMessage).toHaveBeenCalledWith(
+        "Test message",
+        true,
+      );
     });
 
-    it("displays Claude loading state", () => {
-      const state = createMockExtensionState({
-        claude: {
-          version: "Checking...",
-          isAvailable: false,
-          isInstalled: true,
-          loading: true,
-        },
-      });
-      render(<ChatPanelWithContext state={state} />);
+    it("handles Enter key to send message", () => {
+      render(<ChatPanelWithContext actions={mockActions} />);
+
+      const input = screen.getByPlaceholderText(/Type your message/);
+      fireEvent.change(input, { target: { value: "Test message" } });
+      fireEvent.keyPress(input, { key: "Enter", code: "Enter", charCode: 13 });
 
-      const versionDisplay = screen.getByTestId("mock-claude-version");
-      expect(versionDisplay).toHaveTextContent("Loading...");
+      expect(mockActions.sendChatMessage).toHaveBeenCalledWith(
+        "Test message",
+        true,
+      );
     });
 
-    it("displays current model selection", () => {
-      const state = createMockExtensionState({
-        main: { model: "claude-opus-4-20250514" },
+    it("handles Shift+Enter for new line without sending", () => {
+      render(<ChatPanelWithContext actions={mockActions} />);
+
+      const input = screen.getByPlaceholderText(/Type your message/);
+      fireEvent.change(input, { target: { value: "Test message" } });
+      fireEvent.keyPress(input, {
+        key: "Enter",
+        code: "Enter",
+        charCode: 13,
+        shiftKey: true,
       });
-      render(<ChatPanelWithContext state={state} />);
 
-      const modelSelector = screen.getByTestId("mock-model-selector");
-      const select = modelSelector.querySelector("select");
-      expect(select).toHaveValue("claude-opus-4-20250514");
+      expect(mockActions.sendChatMessage).not.toHaveBeenCalled();
     });
 
-    it("displays current root path", () => {
-      const state = createMockExtensionState({
-        main: { rootPath: "/custom/path" },
-      });
-      render(<ChatPanelWithContext state={state} />);
+    it("disables send button when message is empty", () => {
+      render(<ChatPanelWithContext />);
 
-      const pathSelector = screen.getByTestId("mock-path-selector");
-      const input = pathSelector.querySelector("input");
-      expect(input).toHaveValue("/custom/path");
+      const sendButton = screen.getByText("Send");
+      expect(sendButton).toBeDisabled();
     });
-  });
 
-  describe("chat input validation and submission", () => {
-    it("handles Add Prompt button click", () => {
+    it("shows 'Processing...' when message is being sent", () => {
       const state = createMockExtensionState({
-        main: { showChatPrompt: false },
+        main: { chatSending: true },
       });
-      render(<ChatPanelWithContext state={state} actions={mockActions} />);
-
-      const addButton = screen.getByText("Add Prompt");
-      fireEvent.click(addButton);
+      render(<ChatPanelWithContext state={state} />);
 
-      expect(mockActions.updateShowChatPrompt).toHaveBeenCalledWith(true);
+      expect(screen.getByText("Processing...")).toBeInTheDocument();
     });
 
-    it("handles Remove Prompt button click", () => {
+    it("shows spinner element when message is being sent", () => {
       const state = createMockExtensionState({
-        main: { showChatPrompt: true, chatPrompt: "Some prompt" },
+        main: { chatSending: true },
       });
-      render(<ChatPanelWithContext state={state} actions={mockActions} />);
+      render(<ChatPanelWithContext state={state} />);
 
-      const removeButton = screen.getByText("Remove Prompt");
-      fireEvent.click(removeButton);
+      // Check that the loading spinner element exists
+      const spinner = document.querySelector(".loading-spinner") as HTMLElement;
+      expect(spinner).toBeInTheDocument();
 
-      expect(mockActions.updateShowChatPrompt).toHaveBeenCalledWith(false);
-      expect(mockActions.updateChatPrompt).toHaveBeenCalledWith("");
+      // Check that the send button shows both spinner and text
+      const sendButton = screen.getByText("Processing...").parentElement;
+      expect(sendButton).toContainElement(spinner as HTMLElement);
     });
 
-    it("handles prompt textarea changes", () => {
+    it("clears chat when Clear Chat button is clicked", () => {
       const state = createMockExtensionState({
-        main: { showChatPrompt: true, chatPrompt: "Initial prompt" },
+        main: {
+          chatMessages: [
+            {
+              role: "user",
+              content: "Hello",
+              timestamp: new Date().toISOString(),
+            },
+          ],
+        },
       });
       render(<ChatPanelWithContext state={state} actions={mockActions} />);
 
-      const textarea = screen.getByDisplayValue("Initial prompt");
-      fireEvent.change(textarea, { target: { value: "Updated prompt" } });
+      const clearButton = screen.getByText("Clear Chat");
+      fireEvent.click(clearButton);
 
-      expect(mockActions.updateChatPrompt).toHaveBeenCalledWith(
-        "Updated prompt",
-      );
+      expect(mockActions.clearChatSession).toHaveBeenCalled();
     });
 
-    it("validates that empty prompts are handled correctly", () => {
-      const state = createMockExtensionState({
-        main: { showChatPrompt: true, chatPrompt: "   " },
-      });
-      render(<ChatPanelWithContext state={state} actions={mockActions} />);
-
-      const startButton = screen.getByText("Start Chat Session");
-      fireEvent.click(startButton);
+    it("disables Clear Chat button when no messages", () => {
+      render(<ChatPanelWithContext />);
 
-      expect(mockActions.startInteractive).toHaveBeenCalledWith();
+      const clearButton = screen.getByText("Clear Chat");
+      expect(clearButton).toBeDisabled();
     });
 
-    it("validates prompt textarea has correct attributes", () => {
+    it("maintains session ID for subsequent messages", () => {
       const state = createMockExtensionState({
-        main: { showChatPrompt: true, chatPrompt: "Test" },
+        main: {
+          chatMessages: [
+            {
+              role: "user",
+              content: "First",
+              timestamp: new Date().toISOString(),
+            },
+          ],
+          chatSessionId: "test-session-123",
+        },
       });
-      render(<ChatPanelWithContext state={state} />);
+      render(<ChatPanelWithContext state={state} actions={mockActions} />);
 
-      const textarea = screen.getByDisplayValue("Test");
-      expect(textarea).toHaveAttribute(
-        "placeholder",
-        "Enter your initial prompt for Claude...",
+      const input = screen.getByPlaceholderText(/Type your message/);
+      fireEvent.change(input, { target: { value: "Second message" } });
+      fireEvent.click(screen.getByText("Send"));
+
+      expect(mockActions.sendChatMessage).toHaveBeenCalledWith(
+        "Second message",
+        false,
       );
-      expect(textarea).toHaveAttribute("rows", "10");
     });
   });
 
-  describe("chat history management and persistence", () => {
-    it("preserves chat prompt state across renders", () => {
-      const state = createMockExtensionState({
-        main: { showChatPrompt: true, chatPrompt: "Persistent prompt" },
-      });
-      const { rerender } = render(<ChatPanelWithContext state={state} />);
+  describe("chat interface interaction", () => {
+    it("disables all controls when disabled prop is true", () => {
+      render(<ChatPanelWithContext disabled={true} />);
 
-      expect(screen.getByDisplayValue("Persistent prompt")).toBeInTheDocument();
+      const terminalButton = screen.getByText("Terminal");
+      const extensionButton = screen.getByText("VSCode");
+      const input = screen.getByPlaceholderText(/Type your message/);
+      const sendButton = screen.getByText("Send");
 
-      rerender(<ChatPanelWithContext state={state} />);
-      expect(screen.getByDisplayValue("Persistent prompt")).toBeInTheDocument();
+      expect(terminalButton).toBeDisabled();
+      expect(extensionButton).toBeDisabled();
+      expect(input).toBeDisabled();
+      expect(sendButton).toBeDisabled();
     });
 
-    it("preserves model selection across renders", () => {
+    it("disables controls when sending message", () => {
       const state = createMockExtensionState({
-        main: { model: "claude-opus-4-20250514" },
+        main: { chatSending: true },
       });
-      const { rerender } = render(<ChatPanelWithContext state={state} />);
+      render(<ChatPanelWithContext state={state} />);
 
-      let select = screen
+      const input = screen.getByPlaceholderText(/Type your message/);
+      const modelSelector = screen
         .getByTestId("mock-model-selector")
         .querySelector("select");
-      expect(select).toHaveValue("claude-opus-4-20250514");
 
-      rerender(<ChatPanelWithContext state={state} />);
-      select = screen
-        .getByTestId("mock-model-selector")
-        .querySelector("select");
-      expect(select).toHaveValue("claude-opus-4-20250514");
+      expect(input).toBeDisabled();
+      expect(modelSelector).toBeDisabled();
     });
 
-    it("preserves tool permissions state", () => {
-      const state = createMockExtensionState({
-        main: { allowAllTools: true },
-      });
-      render(<ChatPanelWithContext state={state} />);
-
-      const toggle = screen.getByTestId("mock-toggle");
-      const checkbox = toggle.querySelector("input");
-      expect(checkbox).toBeChecked();
-    });
+    it("preserves input value while typing", () => {
+      render(<ChatPanelWithContext />);
 
-    it("preserves root path state", () => {
-      const state = createMockExtensionState({
-        main: { rootPath: "/preserved/path" },
-      });
-      render(<ChatPanelWithContext state={state} />);
+      const input = screen.getByPlaceholderText(
+        /Type your message/,
+      ) as HTMLTextAreaElement;
+      fireEvent.change(input, { target: { value: "Test in progress" } });
 
-      const pathInput = screen
-        .getByTestId("mock-path-selector")
-        .querySelector("input");
-      expect(pathInput).toHaveValue("/preserved/path");
+      expect(input.value).toBe("Test in progress");
     });
-  });
 
-  describe("chat error handling and connection states", () => {
-    it("handles disabled state correctly", () => {
-      render(<ChatPanelWithContext disabled={true} />);
+    it("clears input after sending message", () => {
+      const { rerender } = render(
+        <ChatPanelWithContext actions={mockActions} />,
+      );
 
-      const startButton = screen.getByText("Start Chat Session");
-      const addPromptButton = screen.getByText("Add Prompt");
+      const input = screen.getByPlaceholderText(
+        /Type your message/,
+      ) as HTMLTextAreaElement;
+      fireEvent.change(input, { target: { value: "Test message" } });
+      fireEvent.click(screen.getByText("Send"));
 
-      expect(startButton).toBeDisabled();
-      expect(addPromptButton).toBeDisabled();
+      // Simulate component update after message sent
+      rerender(<ChatPanelWithContext actions={mockActions} />);
+
+      expect(input.value).toBe("");
     });
 
-    it("disables all interactive elements when disabled", () => {
+    it("scrolls to bottom when new messages arrive", async () => {
+      const scrollIntoViewMock = jest.fn();
+      Element.prototype.scrollIntoView = scrollIntoViewMock;
+
       const state = createMockExtensionState({
-        main: { showChatPrompt: true, chatPrompt: "Test" },
+        main: {
+          chatMessages: [
+            {
+              role: "user",
+              content: "Hello",
+              timestamp: new Date().toISOString(),
+            },
+          ],
+        },
+      });
+
+      const { rerender } = render(<ChatPanelWithContext state={state} />);
+
+      const updatedState = createMockExtensionState({
+        main: {
+          chatMessages: [
+            {
+              role: "user",
+              content: "Hello",
+              timestamp: new Date().toISOString(),
+            },
+            {
+              role: "assistant",
+              content: "Hi!",
+              timestamp: new Date().toISOString(),
+            },
+          ],
+        },
       });
-      render(<ChatPanelWithContext disabled={true} state={state} />);
 
-      const textarea = screen.getByDisplayValue("Test");
-      const removeButton = screen.getByText("Remove Prompt");
-      const startButton = screen.getByText("Start Chat Session");
+      rerender(<ChatPanelWithContext state={updatedState} />);
 
-      expect(textarea).toBeDisabled();
-      expect(removeButton).toBeDisabled();
-      expect(startButton).toBeDisabled();
+      await waitFor(() => {
+        expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: "smooth" });
+      });
     });
+  });
 
-    it("passes disabled state to child components", () => {
-      render(<ChatPanelWithContext disabled={true} />);
+  describe("chat persistence and state management", () => {
+    it("displays messages from initial state", () => {
+      const stateWithMessages = createMockExtensionState({
+        main: {
+          chatMessages: [
+            {
+              role: "user",
+              content: "Hello Claude",
+              timestamp: new Date().toISOString(),
+            },
+            {
+              role: "assistant",
+              content: "Hello! How can I help?",
+              timestamp: new Date().toISOString(),
+            },
+          ],
+        },
+      });
 
-      const pathSelector = screen.getByTestId("mock-path-selector");
-      const modelSelector = screen.getByTestId("mock-model-selector");
-      const toggle = screen.getByTestId("mock-toggle");
+      render(<ChatPanelWithContext state={stateWithMessages} />);
 
-      expect(pathSelector.querySelector("input")).toBeDisabled();
-      expect(modelSelector.querySelector("select")).toBeDisabled();
-      expect(toggle.querySelector("input")).toBeDisabled();
+      expect(screen.getByText("Hello Claude")).toBeInTheDocument();
+      expect(screen.getByText("Hello! How can I help?")).toBeInTheDocument();
+      expect(
+        screen.queryByText("Start a conversation with Claude..."),
+      ).not.toBeInTheDocument();
     });
 
-    it("handles model update actions", () => {
-      render(<ChatPanelWithContext actions={mockActions} />);
-
-      const modelSelector = screen.getByTestId("mock-model-selector");
-      const select = modelSelector.querySelector("select");
+    it("preserves chat mode selection internally", () => {
+      render(<ChatPanelWithContext />);
 
-      if (select) {
-        fireEvent.change(select, {
-          target: { value: "claude-opus-4-20250514" },
-        });
-      }
+      const terminalButton = screen.getByText("Terminal");
+      fireEvent.click(terminalButton);
 
-      expect(mockActions.updateModel).toHaveBeenCalledWith(
-        "claude-opus-4-20250514",
-      );
+      expect(screen.getByText("Start Terminal Session")).toBeInTheDocument();
     });
 
-    it("handles root path update actions", () => {
+    it("handles rapid message sending", () => {
       render(<ChatPanelWithContext actions={mockActions} />);
 
-      const pathSelector = screen.getByTestId("mock-path-selector");
-      const input = pathSelector.querySelector("input");
+      const input = screen.getByPlaceholderText(/Type your message/);
+      const sendButton = screen.getByText("Send");
 
-      if (input) {
-        fireEvent.change(input, { target: { value: "/new/path" } });
-      }
+      fireEvent.change(input, { target: { value: "Message 1" } });
+      fireEvent.click(sendButton);
+      fireEvent.change(input, { target: { value: "Message 2" } });
+      fireEvent.click(sendButton);
 
-      expect(mockActions.updateRootPath).toHaveBeenCalledWith("/new/path");
+      expect(mockActions.sendChatMessage).toHaveBeenCalledTimes(2);
     });
 
-    it("handles tool permissions toggle", () => {
+    it("shows user message immediately when sent", () => {
       render(<ChatPanelWithContext actions={mockActions} />);
 
-      const toggle = screen.getByTestId("mock-toggle");
-      const checkbox = toggle.querySelector("input");
+      const input = screen.getByPlaceholderText(/Type your message/);
+      const sendButton = screen.getByText("Send");
 
-      if (checkbox) {
-        fireEvent.click(checkbox);
-      }
+      // Initially should show empty state
+      expect(
+        screen.getByText("Start a conversation with Claude..."),
+      ).toBeInTheDocument();
 
-      expect(mockActions.updateAllowAllTools).toHaveBeenCalledWith(true);
-    });
-
-    it("displays proper tool permissions label", () => {
-      render(<ChatPanelWithContext />);
+      // Send a message
+      fireEvent.change(input, { target: { value: "Hello!" } });
+      fireEvent.click(sendButton);
 
+      // User message should appear immediately
+      expect(screen.getByText("Hello!")).toBeInTheDocument();
       expect(
-        screen.getByText("Allow All Tools (--dangerously-skip-permissions)"),
-      ).toBeInTheDocument();
+        screen.queryByText("Start a conversation with Claude..."),
+      ).not.toBeInTheDocument();
+
+      // Input should be cleared
+      expect(input).toHaveValue("");
     });
 
-    it("handles Claude system errors gracefully", () => {
-      const state = createMockExtensionState({
-        claude: {
-          version: "Unknown",
-          isAvailable: false,
-          isInstalled: false,
-          error: "Connection failed",
-          loading: false,
-        },
-      });
+    it("has proper responsive layout structure", () => {
+      render(<ChatPanelWithContext />);
 
-      expect(() => {
-        render(<ChatPanelWithContext state={state} />);
-      }).not.toThrow();
+      // Chat container should exist (messages area)
+      const chatContainer = document.querySelector(".chat-container");
+      expect(chatContainer).toBeInTheDocument();
 
-      expect(screen.getByTestId("mock-claude-version")).toBeInTheDocument();
-    });
-  });
+      // Input container should exist (input area)
+      const inputContainer = document.querySelector(".chat-input-container");
+      expect(inputContainer).toBeInTheDocument();
 
-  describe("component integration and lifecycle", () => {
-    it("renders without crashing with minimal props", () => {
-      expect(() => {
-        render(<ChatPanelWithContext />);
-      }).not.toThrow();
-    });
+      // Input container should be outside chat container (fixed at bottom)
+      expect(chatContainer?.contains(inputContainer)).toBe(false);
 
-    it("maintains component structure with different states", () => {
-      const states = [
-        createMockExtensionState({ main: { showChatPrompt: false } }),
-        createMockExtensionState({
-          main: { showChatPrompt: true, chatPrompt: "Test" },
-        }),
-        createMockExtensionState({ claude: { loading: true } }),
-        createMockExtensionState({ claude: { error: "Error" } }),
-      ];
-
-      states.forEach((state) => {
-        const { unmount } = render(<ChatPanelWithContext state={state} />);
-        expect(
-          screen.getByText("Interactive Chat Session"),
-        ).toBeInTheDocument();
-        unmount();
-      });
+      // Messages area should be inside chat container
+      const messagesArea = document.querySelector(".chat-messages");
+      expect(chatContainer?.contains(messagesArea)).toBe(true);
     });
 
-    it("renders different prompt values correctly", () => {
-      // Test with initial state
-      const initialState = createMockExtensionState({
-        main: { chatPrompt: "Initial", showChatPrompt: true },
+    it("shows loading button when sending message", () => {
+      const stateWithSending = createMockExtensionState({
+        main: {
+          chatSending: true,
+          chatMessages: [
+            {
+              role: "user",
+              content: "Hello",
+              timestamp: new Date().toISOString(),
+            },
+          ],
+        },
       });
 
-      const { unmount } = render(<ChatPanelWithContext state={initialState} />);
-      expect(screen.getByDisplayValue("Initial")).toBeInTheDocument();
-      unmount();
+      render(<ChatPanelWithContext state={stateWithSending} />);
 
-      // Test with updated state in a new render
-      const updatedState = createMockExtensionState({
-        main: { chatPrompt: "Updated", showChatPrompt: true },
-      });
+      // Should show the sending text with spinner
+      expect(screen.getByText("Processing...")).toBeInTheDocument();
+
+      // Should show spinner element
+      const spinner = document.querySelector(".loading-spinner");
+      expect(spinner).toBeInTheDocument();
 
-      render(<ChatPanelWithContext state={updatedState} />);
-      expect(screen.getByDisplayValue("Updated")).toBeInTheDocument();
+      // Should show both user message and loading
+      expect(screen.getByText("Hello")).toBeInTheDocument();
     });
 
-    it("handles rapid action calls without errors", () => {
-      render(<ChatPanelWithContext actions={mockActions} />);
+    it("shows loading state during complete send flow", async () => {
+      // Create state with both chatSending and chatMessages set from the start
+      const stateWithLoading = createMockExtensionState({
+        main: {
+          chatSending: true,
+          chatMessages: [
+            {
+              role: "user",
+              content: "Test message",
+              timestamp: new Date().toISOString(),
+            },
+          ],
+        },
+      });
+
+      render(
+        <ChatPanelWithContext state={stateWithLoading} actions={mockActions} />,
+      );
 
-      const addButton = screen.getByText("Add Prompt");
+      // Should show sending text immediately
+      expect(screen.getByText("Processing...")).toBeInTheDocument();
 
-      // Simulate rapid clicks
-      fireEvent.click(addButton);
-      fireEvent.click(addButton);
-      fireEvent.click(addButton);
+      // Should show spinner element
+      const spinner = document.querySelector(".loading-spinner");
+      expect(spinner).toBeInTheDocument();
 
-      expect(mockActions.updateShowChatPrompt).toHaveBeenCalledTimes(3);
+      expect(screen.getByText("Test message")).toBeInTheDocument();
     });
   });
 });
diff --git a/tests/unit/services/ClaudeCodeService.chat.test.ts b/tests/unit/services/ClaudeCodeService.chat.test.ts
new file mode 100644
index 0000000..7808385
--- /dev/null
+++ b/tests/unit/services/ClaudeCodeService.chat.test.ts
@@ -0,0 +1,175 @@
+import { ClaudeCodeService } from "../../../src/services/ClaudeCodeService";
+import { ConfigurationService } from "../../../src/services/ConfigurationService";
+
+describe("ClaudeCodeService Chat JSON Processing", () => {
+  let claudeService: ClaudeCodeService;
+  let configService: ConfigurationService;
+
+  beforeEach(() => {
+    configService = new ConfigurationService();
+    claudeService = new ClaudeCodeService(configService);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("should build correct chat command for first message", () => {
+    const args = claudeService.buildTaskCommand(
+      "Hello Claude",
+      "claude-sonnet-4-20250514",
+      {
+        outputFormat: "json",
+        allowAllTools: false,
+      },
+    );
+
+    expect(args).toEqual([
+      "claude",
+      "-p",
+      "'Hello Claude'",
+      "--model",
+      "claude-sonnet-4-20250514",
+      "--output-format",
+      "json",
+    ]);
+  });
+
+  test("should build correct chat command for session continuation", () => {
+    const args = claudeService.buildTaskCommand(
+      "Tell me more",
+      "claude-sonnet-4-20250514",
+      {
+        outputFormat: "json",
+        resumeSessionId: "session-123",
+        allowAllTools: true,
+      },
+    );
+
+    expect(args).toEqual([
+      "claude",
+      "-r",
+      "session-123",
+      "-p",
+      "'Tell me more'",
+      "--model",
+      "claude-sonnet-4-20250514",
+      "--output-format",
+      "json",
+      "--dangerously-skip-permissions",
+    ]);
+  });
+
+  test("should handle real Claude CLI JSON output format", async () => {
+    const realClaudeOutput = `{"type":"result","subtype":"success","is_error":false,"duration_ms":2887,"duration_api_ms":4882,"num_turns":1,"result":"Hi! I'm Claude Code, ready to help you with your software engineering tasks. What would you like to work on today?","session_id":"31aeff6b-89bd-4c0a-b20e-236890bb7804","total_cost_usd":0.0634276,"usage":{"input_tokens":4,"cache_creation_input_tokens":16592,"cache_read_input_tokens":0,"output_tokens":30,"server_tool_use":{"web_search_requests":0},"service_tier":"standard"}}`;
+
+    jest.spyOn(claudeService, "executeCommand").mockResolvedValue({
+      success: true,
+      output: realClaudeOutput,
+      exitCode: 0,
+    });
+
+    const args = claudeService.buildTaskCommand(
+      "hi",
+      "claude-sonnet-4-20250514",
+      { outputFormat: "json" },
+    );
+
+    const result = await claudeService.executeCommand(args, "/workspace");
+
+    expect(result.success).toBe(true);
+
+    // Verify we can parse the raw output
+    const jsonResponse = JSON.parse(result.output);
+    expect(jsonResponse.result).toBe(
+      "Hi! I'm Claude Code, ready to help you with your software engineering tasks. What would you like to work on today?",
+    );
+    expect(jsonResponse.session_id).toBe(
+      "31aeff6b-89bd-4c0a-b20e-236890bb7804",
+    );
+    expect(jsonResponse.type).toBe("result");
+  });
+
+  test("should handle extraction of result from JSON when using runTask", async () => {
+    const realClaudeOutput = `{"type":"result","subtype":"success","is_error":false,"result":"This is the extracted result","session_id":"test-session"}`;
+
+    jest.spyOn(claudeService, "executeCommand").mockResolvedValue({
+      success: true,
+      output: realClaudeOutput,
+      exitCode: 0,
+    });
+
+    // When using runTask with JSON output format, it should extract only the result field
+    const result = await claudeService.runTask(
+      "test message",
+      "claude-sonnet-4-20250514",
+      "/workspace",
+      { outputFormat: "json" },
+    );
+
+    expect(result).toBe("This is the extracted result");
+  });
+
+  test("should handle JSON parsing errors gracefully in runTask", async () => {
+    jest.spyOn(claudeService, "executeCommand").mockResolvedValue({
+      success: true,
+      output: "This is not valid JSON",
+      exitCode: 0,
+    });
+
+    const result = await claudeService.runTask(
+      "test message",
+      "claude-sonnet-4-20250514",
+      "/workspace",
+      { outputFormat: "json" },
+    );
+
+    expect(result).toBe("This is not valid JSON");
+  });
+
+  test("should handle command execution failure", async () => {
+    jest.spyOn(claudeService, "executeCommand").mockResolvedValue({
+      success: false,
+      output: "",
+      error: "Claude CLI not found",
+      exitCode: 127,
+    });
+
+    await expect(
+      claudeService.runTask(
+        "test message",
+        "claude-sonnet-4-20250514",
+        "/workspace",
+        { outputFormat: "json" },
+      ),
+    ).rejects.toThrow("Claude CLI not found");
+  });
+
+  test("should handle command with special characters in message", () => {
+    const messageWithSpecialChars =
+      "Hello! How's it going? Let's test 'quotes' and \"double quotes\".";
+
+    const args = claudeService.buildTaskCommand(
+      messageWithSpecialChars,
+      "auto",
+      { outputFormat: "json" },
+    );
+
+    expect(args).toEqual([
+      "claude",
+      "-p",
+      "'Hello! How'\"'\"'s it going? Let'\"'\"'s test '\"'\"'quotes'\"'\"' and \"double quotes\".'",
+      "--output-format",
+      "json",
+    ]);
+  });
+
+  test("should not include model flag when model is auto", () => {
+    const args = claudeService.buildTaskCommand("test", "auto", {
+      outputFormat: "json",
+    });
+
+    expect(args).toEqual(["claude", "-p", "'test'", "--output-format", "json"]);
+    expect(args).not.toContain("--model");
+  });
+});