diff --git a/src/components/ChatMessagesPanel/ChatAlerts.tsx b/src/components/ChatMessagesPanel/ChatAlerts.tsx
new file mode 100644
index 00000000..1907d914
--- /dev/null
+++ b/src/components/ChatMessagesPanel/ChatAlerts.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { Icon } from '../ui/Icon';
+
+interface ChatAlertsProps {
+  chatError: string | null;
+  isServerConnected: boolean;
+  onClose?: () => void;
+}
+
+export const ChatAlerts: React.FC<ChatAlertsProps> = ({
+  chatError,
+  isServerConnected,
+  onClose,
+}) => (
+  <>
+    {chatError && (
+      <div className="py-sm px-md bg-danger/10 border border-danger rounded-sm text-danger text-sm shrink-0">
+        {chatError}
+      </div>
+    )}
+
+    {!isServerConnected && (
+      <div className="flex items-center justify-between gap-md py-sm px-md bg-[var(--color-warning-alpha,rgba(255,193,7,0.1))] border border-[var(--color-warning,#ffc107)] rounded-sm text-[var(--color-warning-text,#856404)] text-sm shrink-0">
+        <span className="inline-flex items-center gap-2">
+          <Icon icon={AlertTriangle} size={16} />
+          Server not running — Chat is read-only
+        </span>
+        {onClose && (
+          <Button variant="secondary" size="sm" onClick={onClose}>
+            Close
+          </Button>
+        )}
+      </div>
+    )}
+  </>
+);
diff --git a/src/components/ChatMessagesPanel/ChatComposer.tsx b/src/components/ChatMessagesPanel/ChatComposer.tsx
new file mode 100644
index 00000000..253854db
--- /dev/null
+++ b/src/components/ChatMessagesPanel/ChatComposer.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import {
+  ComposerPrimitive,
+  useComposerRuntime,
+} from '@assistant-ui/react';
+import { Button } from '../ui/Button';
+import { DeepResearchToggle } from '../DeepResearch';
+import type { UseDeepResearchReturn } from '../../hooks/useDeepResearch';
+
+interface ChatComposerProps {
+  isServerConnected: boolean;
+  isThreadRunning: boolean;
+  isDeepResearchEnabled: boolean;
+  toggleDeepResearch: () => void;
+  deepResearch: Pick<UseDeepResearchReturn, 'isRunning' | 'requestWrapUp' | 'state'>;
+  stopDeepResearch: () => void;
+  onDeepResearchSubmit: (query: string) => void;
+  onStopGeneration: () => void;
+}
+
+export const ChatComposer: React.FC<ChatComposerProps> = ({
+  isServerConnected,
+  isThreadRunning,
+  isDeepResearchEnabled,
+  toggleDeepResearch,
+  deepResearch,
+  stopDeepResearch,
+  onDeepResearchSubmit,
+  onStopGeneration,
+}) => {
+  const composerRuntime = useComposerRuntime({ optional: true });
+
+  return (
+    <div className="border-t border-border p-md shrink-0">
+      {isThreadRunning && !deepResearch.isRunning && (
+        <div className="text-sm text-primary mb-sm animate-research-pulse">Assistant is thinking…</div>
+      )}
+      {deepResearch.isRunning && (
+        <div className="text-sm text-primary mb-sm animate-research-pulse">Researching… This may take a few minutes.</div>
+      )}
+      <ComposerPrimitive.Root className="flex gap-sm items-end">
+        <ComposerPrimitive.Input
+          className="flex-1 py-sm px-md border border-border rounded-base bg-surface text-text text-sm font-[inherit] resize-none min-h-[40px] max-h-[150px] focus:outline-none focus:border-primary disabled:opacity-50 disabled:cursor-not-allowed"
+          placeholder={
+            isServerConnected
+              ? isDeepResearchEnabled
+                ? 'Ask a research question (Deep Research mode)'
+                : 'Type your message. Shift + Enter for newline'
+              : 'Server not connected'
+          }
+          disabled={!isServerConnected || deepResearch.isRunning}
+        />
+        <div className="flex gap-sm shrink-0">
+          <DeepResearchToggle
+            isEnabled={isDeepResearchEnabled}
+            onToggle={toggleDeepResearch}
+            isRunning={deepResearch.isRunning}
+            onStop={stopDeepResearch}
+            onWrapUp={deepResearch.requestWrapUp}
+            researchPhase={deepResearch.state?.phase}
+            disabled={!isServerConnected || isThreadRunning}
+            disabledReason={
+              !isServerConnected
+                ? 'Server not connected'
+                : isThreadRunning
+                ? 'Wait for current response'
+                : undefined
+            }
+          />
+          {isThreadRunning && !deepResearch.isRunning && (
+            <Button
+              variant="danger"
+              size="sm"
+              onClick={onStopGeneration}
+              title="Stop generation"
+            >
+              Stop
+            </Button>
+          )}
+          {isDeepResearchEnabled ? (
+            <Button
+              variant="primary"
+              size="sm"
+              disabled={!isServerConnected || deepResearch.isRunning}
+              onClick={() => {
+                if (!composerRuntime) return;
+                const text = composerRuntime.getState().text.trim();
+                if (!text) return;
+                composerRuntime.setText('');
+                onDeepResearchSubmit(text);
+              }}
+            >
+              Research ↵
+            </Button>
+          ) : (
+            <ComposerPrimitive.Send asChild>
+              <Button
+                variant="primary"
+                size="sm"
+                disabled={!isServerConnected}
+              >
+                Send ↵
+              </Button>
+            </ComposerPrimitive.Send>
+          )}
+        </div>
+      </ComposerPrimitive.Root>
+    </div>
+  );
+};
diff --git a/src/components/ChatMessagesPanel/ChatHeader.tsx b/src/components/ChatMessagesPanel/ChatHeader.tsx
new file mode 100644
index 00000000..af836f76
--- /dev/null
+++ b/src/components/ChatMessagesPanel/ChatHeader.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { Download, Mic, MicOff, Pencil, RotateCcw, Sparkles } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { Icon } from '../ui/Icon';
+import { Input } from '../ui/Input';
+import { ToolsPopover } from '../ToolsPopover';
+import { ToolSupportIndicator } from '../ToolSupportIndicator';
+import { cn } from '../../utils/cn';
+import { getToolRegistry } from '../../services/tools';
+import type { UseVoiceModeReturn } from '../../hooks/useVoiceMode';
+
+interface ChatHeaderProps {
+  title: string | undefined;
+  isRenaming: boolean;
+  titleDraft: string;
+  setTitleDraft: (value: string) => void;
+  startRenaming: () => void;
+  commitRename: () => void;
+  cancelRenaming: () => void;
+  isGeneratingTitle: boolean;
+  generateTitle: () => void;
+  isThreadRunning: boolean;
+  activeConversationId: number | null;
+  serverPort: number;
+  supportsToolCalls: boolean | null;
+  toolFormat: string | null | undefined;
+  voice: UseVoiceModeReturn | undefined;
+  onClearConversation: () => void;
+  onExportConversation: () => void;
+}
+
+export const ChatHeader: React.FC<ChatHeaderProps> = ({
+  title,
+  isRenaming,
+  titleDraft,
+  setTitleDraft,
+  startRenaming,
+  commitRename,
+  cancelRenaming,
+  isGeneratingTitle,
+  generateTitle,
+  isThreadRunning,
+  activeConversationId,
+  serverPort,
+  supportsToolCalls,
+  toolFormat,
+  voice,
+  onClearConversation,
+  onExportConversation,
+}) => (
+  <div className="p-base border-b border-border bg-background shrink-0 flex flex-wrap justify-between items-center gap-md phone:flex-nowrap">
+    <div className="flex items-center gap-sm min-w-0 basis-full phone:basis-auto phone:flex-1">
+      {isRenaming ? (
+        <Input
+          className="text-lg font-semibold bg-background border border-primary rounded-sm py-xs px-sm text-text min-w-[150px]"
+          value={titleDraft}
+          autoFocus
+          onChange={(e) => setTitleDraft(e.target.value)}
+          onBlur={commitRename}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') commitRename();
+            else if (e.key === 'Escape') cancelRenaming();
+          }}
+        />
+      ) : (
+        <h2 className="text-lg font-semibold m-0 overflow-hidden text-ellipsis whitespace-nowrap">{title || 'New Chat'}</h2>
+      )}
+      <Button variant="ghost" size="sm" title="Rename conversation" onClick={startRenaming} iconOnly>
+        <Icon icon={Pencil} size={14} />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(isGeneratingTitle && 'pointer-events-none')}
+        title={
+          !activeConversationId
+            ? 'No active conversation'
+            : !serverPort
+              ? 'Start a server to generate titles'
+              : 'Generate title with AI'
+        }
+        onClick={() => generateTitle()}
+        disabled={!activeConversationId || !serverPort || isGeneratingTitle || isThreadRunning}
+        iconOnly
+      >
+        {isGeneratingTitle ? (
+          <span className="inline-block w-[14px] h-[14px] border-2 border-text-muted border-t-primary rounded-full animate-spin-360" aria-label="Generating title…" />
+        ) : (
+          <Icon icon={Sparkles} size={14} />
+        )}
+      </Button>
+      <span className={cn('text-xs py-xs px-sm rounded-full bg-background text-text-muted shrink-0', isThreadRunning && 'bg-primary/10 text-primary animate-research-pulse')}>
+        {isThreadRunning ? 'Responding…' : 'Idle'}
+      </span>
+      <ToolSupportIndicator
+        supports={supportsToolCalls}
+        hasToolsConfigured={getToolRegistry().getEnabledDefinitions().length > 0}
+        toolFormat={toolFormat}
+      />
+    </div>
+    <div className="flex gap-sm shrink-0">
+      <ToolsPopover />
+      {voice?.isSupported && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn(voice.isActive && 'text-error')}
+          onClick={() => voice.isActive ? voice.stop() : voice.start()}
+          title={voice.isActive ? 'Stop voice mode' : 'Start voice mode'}
+          iconOnly
+        >
+          <Icon icon={voice.isActive ? MicOff : Mic} size={14} />
+        </Button>
+      )}
+      <Button variant="ghost" size="sm" onClick={onClearConversation} title="Restart conversation" iconOnly>
+        <Icon icon={RotateCcw} size={14} />
+      </Button>
+      <Button variant="ghost" size="sm" onClick={onExportConversation} title="Export conversation" iconOnly>
+        <Icon icon={Download} size={14} />
+      </Button>
+    </div>
+  </div>
+);
diff --git a/src/components/ChatMessagesPanel/ChatMessagesPanel.tsx b/src/components/ChatMessagesPanel/ChatMessagesPanel.tsx
index c5466076..61322ab9 100644
--- a/src/components/ChatMessagesPanel/ChatMessagesPanel.tsx
+++ b/src/components/ChatMessagesPanel/ChatMessagesPanel.tsx
@@ -3,22 +3,14 @@ import 'highlight.js/styles/github-dark.css';
 import { appLogger } from '../../services/platform';
 import {
   ThreadPrimitive,
-  ComposerPrimitive,
   useThreadRuntime,
   useThread,
-  useComposerRuntime,
 } from '@assistant-ui/react';
 import type { ThreadMessageLike } from '@assistant-ui/react';
-import { AlertTriangle, Download, Mic, MicOff, Pencil, RotateCcw, Sparkles } from 'lucide-react';
-import { Button } from '../ui/Button';
 import { getMessages, deleteMessage, saveMessage, updateMessage } from '../../services/clients/chat';
 import type { ConversationSummary } from '../../services/clients/chat';
 import type { ToastType } from '../Toast';
 import { ConfirmDeleteModal } from './ConfirmDeleteModal';
-import { ToolsPopover } from '../ToolsPopover';
-import { Icon } from '../ui/Icon';
-import { Input } from '../ui/Input';
-import { Textarea } from '../ui/Textarea';
 import {
   MessageActionsContext,
   AssistantMessageBubble,
@@ -35,13 +27,13 @@ import { DeepResearchProvider } from './context/DeepResearchContext';
 import { VoiceProvider, useVoiceContextValue } from './context/VoiceContext';
 import type { ReasoningTimingTracker } from '../../hooks/useGglibRuntime/reasoningTiming';
 import type { UseVoiceModeReturn } from '../../hooks/useVoiceMode';
-import { DeepResearchToggle } from '../DeepResearch';
 import { useDeepResearch } from '../../hooks/useDeepResearch';
 import type { ResearchState } from '../../hooks/useDeepResearch/types';
-import { cn } from '../../utils/cn';
 import { DEFAULT_SYSTEM_PROMPT } from '../../hooks/useGglibRuntime';
-import { ToolSupportIndicator } from '../ToolSupportIndicator';
-import { getToolRegistry } from '../../services/tools';
+import { ChatHeader } from './ChatHeader';
+import { SystemPromptCard } from './SystemPromptCard';
+import { ChatAlerts } from './ChatAlerts';
+import { ChatComposer } from './ChatComposer';
 
 
 interface ChatMessagesPanelProps {
@@ -96,7 +88,6 @@ const ChatMessagesPanel: React.FC<ChatMessagesPanelProps> = ({
   toolFormat,
 }) => {
   const threadRuntime = useThreadRuntime({ optional: true });
-  const composerRuntime = useComposerRuntime({ optional: true });
   const threadState = useThread({ optional: true });
   const isThreadRunning = threadState?.isRunning ?? false;
 
@@ -554,177 +545,47 @@ const ChatMessagesPanel: React.FC<ChatMessagesPanelProps> = ({
   // ─────────────────────────────────────────────────────────────────────────────
   return (
     <div className="flex flex-col overflow-y-auto overflow-x-hidden relative flex-1 bg-surface md:h-full md:min-h-0">
-      {/* Header */}
-      <div className="p-base border-b border-border bg-background shrink-0 flex flex-wrap justify-between items-center gap-md phone:flex-nowrap">
-        <div className="flex items-center gap-sm min-w-0 basis-full phone:basis-auto phone:flex-1">
-          {isRenaming ? (
-            <Input
-              className="text-lg font-semibold bg-background border border-primary rounded-sm py-xs px-sm text-text min-w-[150px]"
-              value={titleDraft}
-              autoFocus
-              onChange={(e) => setTitleDraft(e.target.value)}
-              onBlur={commitRename}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') commitRename();
-                else if (e.key === 'Escape') cancelRenaming();
-              }}
-            />
-          ) : (
-            <h2 className="text-lg font-semibold m-0 overflow-hidden text-ellipsis whitespace-nowrap">{activeConversation?.title || 'New Chat'}</h2>
-          )}
-          <Button
-            variant="ghost"
-            size="sm"
-            title="Rename conversation"
-            onClick={startRenaming}
-            iconOnly
-          >
-            <Icon icon={Pencil} size={14} />
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className={cn(isGeneratingTitle && 'pointer-events-none')}
-            title={
-              !activeConversationId
-                ? 'No active conversation'
-                : !serverPort
-                  ? 'Start a server to generate titles'
-                  : 'Generate title with AI'
-            }
-            onClick={() => generateTitle()}
-            disabled={!activeConversationId || !serverPort || isGeneratingTitle || isThreadRunning}
-            iconOnly
-          >
-            {isGeneratingTitle ? (
-              <span className="inline-block w-[14px] h-[14px] border-2 border-text-muted border-t-primary rounded-full animate-spin-360" aria-label="Generating title…" />
-            ) : (
-              <Icon icon={Sparkles} size={14} />
-            )}
-          </Button>
-          <span className={cn('text-xs py-xs px-sm rounded-full bg-background text-text-muted shrink-0', isThreadRunning && 'bg-primary/10 text-primary animate-research-pulse')}>
-            {isThreadRunning ? 'Responding…' : 'Idle'}
-          </span>
-          <ToolSupportIndicator
-            supports={supportsToolCalls ?? null}
-            hasToolsConfigured={getToolRegistry().getEnabledDefinitions().length > 0}
-            toolFormat={toolFormat}
-          />
-        </div>
-        <div className="flex gap-sm shrink-0">
-          <ToolsPopover />
-          {voice?.isSupported && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className={cn(voice.isActive && 'text-error')}
-              onClick={() => voice.isActive ? voice.stop() : voice.start()}
-              title={voice.isActive ? 'Stop voice mode' : 'Start voice mode'}
-              iconOnly
-            >
-              <Icon icon={voice.isActive ? MicOff : Mic} size={14} />
-            </Button>
-          )}
-          <Button variant="ghost" size="sm" onClick={onClearConversation} title="Restart conversation" iconOnly>
-            <Icon icon={RotateCcw} size={14} />
-          </Button>
-          <Button variant="ghost" size="sm" onClick={onExportConversation} title="Export conversation" iconOnly>
-            <Icon icon={Download} size={14} />
-          </Button>
-        </div>
-      </div>
+      <ChatHeader
+        title={activeConversation?.title}
+        isRenaming={isRenaming}
+        titleDraft={titleDraft}
+        setTitleDraft={setTitleDraft}
+        startRenaming={startRenaming}
+        commitRename={commitRename}
+        cancelRenaming={cancelRenaming}
+        isGeneratingTitle={isGeneratingTitle}
+        generateTitle={generateTitle}
+        isThreadRunning={isThreadRunning}
+        activeConversationId={activeConversationId}
+        serverPort={serverPort}
+        supportsToolCalls={supportsToolCalls ?? null}
+        toolFormat={toolFormat}
+        voice={voice}
+        onClearConversation={onClearConversation}
+        onExportConversation={onExportConversation}
+      />
 
       {/* Content */}
       <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden flex flex-col">
-        {/* System prompt card */}
-        <section className="border border-border rounded-base p-md bg-background flex flex-col gap-sm shrink-0">
-          <div className="flex justify-between gap-md items-start">
-            <div>
-              <p className="text-xs uppercase tracking-[1px] text-text-muted m-0 mb-xs">System prompt</p>
-              {!isEditingPrompt && (
-                <p className="m-0 text-text text-sm leading-[1.5] line-clamp-2">{promptPreview}</p>
-              )}
-            </div>
-            <div className="flex gap-sm items-center shrink-0">
-              {isEditingPrompt ? (
-                <span className="text-xs text-primary">Editing…</span>
-              ) : (
-                <Button
-                  variant="secondary"
-                  size="sm"
-                  onClick={() => {
-                    setSystemPromptDraft(activeConversation?.system_prompt ?? DEFAULT_SYSTEM_PROMPT);
-                    setIsEditingPrompt(true);
-                  }}
-                  disabled={!activeConversation}
-                >
-                  Edit
-                </Button>
-              )}
-            </div>
-          </div>
-          {isEditingPrompt && (
-            <>
-              <Textarea
-                ref={promptTextareaRef}
-                className="w-full p-sm border border-border rounded-sm bg-surface text-text text-sm font-[inherit] resize-y min-h-[80px] focus:outline-none focus:border-primary"
-                value={systemPromptDraft}
-                onChange={(e) => setSystemPromptDraft(e.target.value)}
-                placeholder={DEFAULT_SYSTEM_PROMPT}
-                rows={4}
-                onKeyDown={handlePromptKeyDown}
-              />
-              <div className="flex justify-between items-center gap-sm">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setSystemPromptDraft(DEFAULT_SYSTEM_PROMPT)}
-                >
-                  Reset
-                </Button>
-                <div className="flex gap-sm">
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => {
-                      setIsEditingPrompt(false);
-                      setSystemPromptDraft(activeConversation?.system_prompt ?? DEFAULT_SYSTEM_PROMPT);
-                    }}
-                    disabled={savingSystemPrompt}
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    variant="primary"
-                    size="sm"
-                    onClick={handleSaveSystemPrompt}
-                    disabled={savingSystemPrompt || !promptHasChanges}
-                  >
-                    {savingSystemPrompt ? 'Saving…' : 'Save'}
-                  </Button>
-                </div>
-              </div>
-            </>
-          )}
-        </section>
-
-        {/* Error banner */}
-        {chatError && <div className="py-sm px-md bg-danger/10 border border-danger rounded-sm text-danger text-sm shrink-0">{chatError}</div>}
-
-        {/* Server stopped banner */}
-        {!isServerConnected && (
-          <div className="flex items-center justify-between gap-md py-sm px-md bg-[var(--color-warning-alpha,rgba(255,193,7,0.1))] border border-[var(--color-warning,#ffc107)] rounded-sm text-[var(--color-warning-text,#856404)] text-sm shrink-0">
-            <span className="inline-flex items-center gap-2">
-              <Icon icon={AlertTriangle} size={16} />
-              Server not running — Chat is read-only
-            </span>
-            {onClose && (
-              <Button variant="secondary" size="sm" onClick={onClose}>
-                Close
-              </Button>
-            )}
-          </div>
-        )}
+        <SystemPromptCard
+          activeConversation={activeConversation}
+          isEditingPrompt={isEditingPrompt}
+          setIsEditingPrompt={setIsEditingPrompt}
+          systemPromptDraft={systemPromptDraft}
+          setSystemPromptDraft={setSystemPromptDraft}
+          promptPreview={promptPreview}
+          promptHasChanges={promptHasChanges}
+          savingSystemPrompt={savingSystemPrompt}
+          onSave={handleSaveSystemPrompt}
+          onKeyDown={handlePromptKeyDown}
+          promptTextareaRef={promptTextareaRef}
+        />
+
+        <ChatAlerts
+          chatError={chatError}
+          isServerConnected={isServerConnected}
+          onClose={onClose}
+        />
 
         {/* Messages area */}
         <div className="flex-1 min-h-0 flex flex-col border border-border rounded-base bg-background overflow-hidden">
@@ -757,82 +618,16 @@ const ChatMessagesPanel: React.FC<ChatMessagesPanelProps> = ({
                   </ThreadPrimitive.ScrollToBottom>
                 </ThreadPrimitive.Viewport>
 
-                <div className="border-t border-border p-md shrink-0">
-                  {isThreadRunning && !deepResearch.isRunning && (
-                    <div className="text-sm text-primary mb-sm animate-research-pulse">Assistant is thinking…</div>
-                  )}
-                  {deepResearch.isRunning && (
-                    <div className="text-sm text-primary mb-sm animate-research-pulse">Researching… This may take a few minutes.</div>
-                  )}
-                  <ComposerPrimitive.Root className="flex gap-sm items-end">
-                    <ComposerPrimitive.Input
-                      className="flex-1 py-sm px-md border border-border rounded-base bg-surface text-text text-sm font-[inherit] resize-none min-h-[40px] max-h-[150px] focus:outline-none focus:border-primary disabled:opacity-50 disabled:cursor-not-allowed"
-                      placeholder={
-                        isServerConnected
-                          ? isDeepResearchEnabled
-                            ? 'Ask a research question (Deep Research mode)'
-                            : 'Type your message. Shift + Enter for newline'
-                          : 'Server not connected'
-                      }
-                      disabled={!isServerConnected || deepResearch.isRunning}
-                    />
-                    <div className="flex gap-sm shrink-0">
-                      <DeepResearchToggle
-                        isEnabled={isDeepResearchEnabled}
-                        onToggle={toggleDeepResearch}
-                        isRunning={deepResearch.isRunning}
-                        onStop={stopDeepResearch}
-                        onWrapUp={deepResearch.requestWrapUp}
-                        researchPhase={deepResearch.state?.phase}
-                        disabled={!isServerConnected || isThreadRunning}
-                        disabledReason={
-                          !isServerConnected
-                            ? 'Server not connected'
-                            : isThreadRunning
-                            ? 'Wait for current response'
-                            : undefined
-                        }
-                      />
-                      {isThreadRunning && !deepResearch.isRunning && (
-                        <Button
-                          variant="danger"
-                          size="sm"
-                          onClick={() => threadRuntime?.cancelRun()}
-                          title="Stop generation"
-                        >
-                          Stop
-                        </Button>
-                      )}
-                      {isDeepResearchEnabled ? (
-                        <Button
-                          variant="primary"
-                          size="sm"
-                          disabled={!isServerConnected || deepResearch.isRunning}
-                          onClick={() => {
-                            const composer = composerRuntime;
-                            if (!composer) return;
-                            const text = composer.getState().text.trim();
-                            if (!text) return;
-                            composer.setText('');
-                            handleDeepResearchSubmit(text);
-                          }}
-                        >
-                          Research ↵
-                        </Button>
-                      ) : (
-                        <ComposerPrimitive.Send asChild>
-                          <Button
-                            variant="primary"
-                            size="sm"
-                            disabled={!isServerConnected}
-                          >
-                            Send ↵
-                          </Button>
-                        </ComposerPrimitive.Send>
-                      )}
-                    </div>
-                  </ComposerPrimitive.Root>
-                </div>
+                <ChatComposer
+                  isServerConnected={isServerConnected}
+                  isThreadRunning={isThreadRunning}
+                  isDeepResearchEnabled={isDeepResearchEnabled}
+                  toggleDeepResearch={toggleDeepResearch}
+                  deepResearch={deepResearch}
+                  stopDeepResearch={stopDeepResearch}
+                  onDeepResearchSubmit={handleDeepResearchSubmit}
+                  onStopGeneration={() => threadRuntime?.cancelRun()}
+                />
               </ThreadPrimitive.Root>
               </VoiceProvider>
               </ThinkingTimingProvider>
diff --git a/src/components/ChatMessagesPanel/SystemPromptCard.tsx b/src/components/ChatMessagesPanel/SystemPromptCard.tsx
new file mode 100644
index 00000000..27828861
--- /dev/null
+++ b/src/components/ChatMessagesPanel/SystemPromptCard.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { Button } from '../ui/Button';
+import { Textarea } from '../ui/Textarea';
+import { DEFAULT_SYSTEM_PROMPT } from '../../hooks/useGglibRuntime';
+import type { ConversationSummary } from '../../services/clients/chat';
+
+interface SystemPromptCardProps {
+  activeConversation: ConversationSummary | null;
+  isEditingPrompt: boolean;
+  setIsEditingPrompt: (editing: boolean) => void;
+  systemPromptDraft: string;
+  setSystemPromptDraft: (draft: string) => void;
+  promptPreview: string;
+  promptHasChanges: boolean;
+  savingSystemPrompt: boolean;
+  onSave: () => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  promptTextareaRef: React.RefObject<HTMLTextAreaElement | null>;
+}
+
+export const SystemPromptCard: React.FC<SystemPromptCardProps> = ({
+  activeConversation,
+  isEditingPrompt,
+  setIsEditingPrompt,
+  systemPromptDraft,
+  setSystemPromptDraft,
+  promptPreview,
+  promptHasChanges,
+  savingSystemPrompt,
+  onSave,
+  onKeyDown,
+  promptTextareaRef,
+}) => (
+  <section className="border border-border rounded-base p-md bg-background flex flex-col gap-sm shrink-0">
+    <div className="flex justify-between gap-md items-start">
+      <div>
+        <p className="text-xs uppercase tracking-[1px] text-text-muted m-0 mb-xs">System prompt</p>
+        {!isEditingPrompt && (
+          <p className="m-0 text-text text-sm leading-[1.5] line-clamp-2">{promptPreview}</p>
+        )}
+      </div>
+      <div className="flex gap-sm items-center shrink-0">
+        {isEditingPrompt ? (
+          <span className="text-xs text-primary">Editing…</span>
+        ) : (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => {
+              setSystemPromptDraft(activeConversation?.system_prompt ?? DEFAULT_SYSTEM_PROMPT);
+              setIsEditingPrompt(true);
+            }}
+            disabled={!activeConversation}
+          >
+            Edit
+          </Button>
+        )}
+      </div>
+    </div>
+    {isEditingPrompt && (
+      <>
+        <Textarea
+          ref={promptTextareaRef}
+          className="w-full p-sm border border-border rounded-sm bg-surface text-text text-sm font-[inherit] resize-y min-h-[80px] focus:outline-none focus:border-primary"
+          value={systemPromptDraft}
+          onChange={(e) => setSystemPromptDraft(e.target.value)}
+          placeholder={DEFAULT_SYSTEM_PROMPT}
+          rows={4}
+          onKeyDown={onKeyDown}
+        />
+        <div className="flex justify-between items-center gap-sm">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setSystemPromptDraft(DEFAULT_SYSTEM_PROMPT)}
+          >
+            Reset
+          </Button>
+          <div className="flex gap-sm">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => {
+                setIsEditingPrompt(false);
+                setSystemPromptDraft(activeConversation?.system_prompt ?? DEFAULT_SYSTEM_PROMPT);
+              }}
+              disabled={savingSystemPrompt}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={onSave}
+              disabled={savingSystemPrompt || !promptHasChanges}
+            >
+              {savingSystemPrompt ? 'Saving…' : 'Save'}
+            </Button>
+          </div>
+        </div>
+      </>
+    )}
+  </section>
+);
diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
index 55169a48..690ddfe5 100644
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -393,12 +393,10 @@ export default function ChatPage({
         {/* Tool UI Components - render tool calls in chat messages */}
         <GenericToolUI />
         
+        <div className={cn("flex-1 flex flex-col min-h-0", activeTab !== 'chat' && "hidden")}>
         <TwoPanelLayout
           ref={activeTab === 'chat' ? layoutRef : undefined}
-          className={cn(
-            "flex-1 min-h-0",
-            activeTab !== 'chat' && "hidden"
-          )}
+          className="h-full"
           leftWidth={leftPanelWidth}
           onResizeStart={handlePointerDown}
           onKeyboardResize={handleKeyboardResize}
@@ -445,18 +443,17 @@ export default function ChatPage({
             />
           }
         />
+        </div>
 
         {/* Voice overlay (floating controls when voice mode is active) */}
         <VoiceOverlay voice={voice} onTranscript={handleVoiceTranscript} />
       </AssistantRuntimeProvider>
 
       {/* Console Tab Content - always mounted, hidden when not active */}
+      <div className={cn("flex-1 flex flex-col min-h-0", activeTab !== 'console' && "hidden")}>
       <TwoPanelLayout
         ref={activeTab === 'console' ? layoutRef : undefined}
-        className={cn(
-          "flex-1 min-h-0",
-          activeTab !== 'console' && "hidden"
-        )}
+        className="h-full"
         leftWidth={leftPanelWidth}
         onResizeStart={handlePointerDown}
         onKeyboardResize={handleKeyboardResize}
@@ -475,6 +472,7 @@ export default function ChatPage({
         }
         right={<ConsoleLogPanel serverPort={serverPort} />}
       />
+      </div>
 
       {/* New Conversation Modal */}
       {isNewConversationModalOpen && (