Add plan mode and plan view with per-session agent context (#210)

* feat: add plan/build mode switching and Plan view tab

Add PlanView view and integrate plan tab into main layout
Introduce plan_enter and plan_exit tools with icons and status strings
Persist per-session agent selections in context to reduce UI flicker during mode switches

* feat: enchanced plan discovery checks in header and plan view

* fix(ui): align PlanView and Header with sessionDirectory logic

Remove dependency on context store in header and compute sessionDirectory from session or currentDirectory
Compute display and repo paths using sessionDirectory for PlanView and update path resolution
Poll plan content every 3 seconds to reflect changes without heavy retries

* feat(ui): improve header tab switching and add copy buttons for plan

Switch header tab navigation to central UI store and auto-switch when plan is unavailable
Show checkmark icon after copying file contents or path with auto-hide timeout
Extend plan view path resolution to prefer session directory when present

packages/ui/src/components/chat/ChatMessage.tsx

@@ -8,6 +8,7 @@ import { useSessionStore } from '@/stores/useSessionStore';
 import { useMessageStore } from '@/stores/messageStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useUIStore } from '@/stores/useUIStore';
+import { useContextStore } from '@/stores/contextStore';
 import { useDeviceInfo } from '@/lib/device';
 import { useThemeSystem } from '@/contexts/useThemeSystem';
 import { generateSyntaxTheme } from '@/lib/theme/syntaxThemeGenerator';
@@ -34,8 +35,10 @@ const isDetailedDefaultTool = (toolName: unknown): boolean =>
 function useStickyDisplayValue<T>(value: T | null | undefined): T | null | undefined {
     const ref = React.useRef<{ hasValue: boolean; value: T | null | undefined }>({ hasValue: false, value: undefined as T | null | undefined });
 
-    if (!ref.current.hasValue && value !== undefined && value !== null) {
-        ref.current = { hasValue: true, value };
+    if (value !== undefined && value !== null) {
+        if (!ref.current.hasValue || ref.current.value !== value) {
+            ref.current = { hasValue: true, value };
+        }
     }
 
     return ref.current.hasValue ? ref.current.value : value;
@@ -91,8 +94,6 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                 return (state.streamingMessageIds.get(sessionId) ?? null) === message.info.id;
             })(),
             currentSessionId: state.currentSessionId,
-            getCurrentAgent: state.getCurrentAgent,
-            getSessionAgentSelection: state.getSessionAgentSelection,
             getAgentModelForSession: state.getAgentModelForSession,
             getSessionModelSelection: state.getSessionModelSelection,
         }))
@@ -102,8 +103,6 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         lifecyclePhase,
         isStreamingMessage,
         currentSessionId,
-        getCurrentAgent,
-        getSessionAgentSelection,
         getAgentModelForSession,
         getSessionModelSelection,
     } = sessionState;
@@ -134,12 +133,37 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
     const messageRole = React.useMemo(() => deriveMessageRole(message.info), [message.info]);
     const isUser = messageRole.isUser;
 
+    const sessionId = message.info.sessionID;
+
+    // Subscribe to context changes so badges update immediately on mode switches.
+    const currentContextAgent = useContextStore(
+        (state) => (sessionId ? state.currentAgentContext.get(sessionId) : undefined)
+    );
+    const savedSessionAgentSelection = useContextStore(
+        (state) => (sessionId ? state.sessionAgentSelections.get(sessionId) : undefined)
+    );
+
     const normalizedParts = React.useMemo(() => {
         if (!isUser) {
             return message.parts;
         }
 
-        return message.parts.map((part) => {
+        const keepSyntheticUserText = (text: string): boolean => {
+            const trimmed = text.trim();
+            if (trimmed.startsWith('User has requested to enter plan mode')) return true;
+            if (trimmed.startsWith('The plan at ')) return true;
+            return false;
+        };
+
+        return message.parts
+            .filter((part) => {
+                const synthetic = (part as unknown as { synthetic?: boolean })?.synthetic === true;
+                if (!synthetic) return true;
+                if (part.type !== 'text') return false;
+                const text = (part as unknown as { text?: unknown })?.text;
+                return typeof text === 'string' ? keepSyntheticUserText(text) : false;
+            })
+            .map((part) => {
             const rawPart = part as Record<string, unknown>;
             if (rawPart.type === 'compaction') {
                 return { type: 'text', text: '/compact' } as Part;
@@ -161,10 +185,14 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         }
 
         const mode = getMessageInfoProp(previousMessage.info, 'mode');
+        const agent = getMessageInfoProp(previousMessage.info, 'agent');
         const providerID = getMessageInfoProp(previousMessage.info, 'providerID');
         const modelID = getMessageInfoProp(previousMessage.info, 'modelID');
         const variant = getMessageInfoProp(previousMessage.info, 'variant');
-        const resolvedAgent = typeof mode === 'string' && mode.trim().length > 0 ? mode : undefined;
+        const resolvedAgent =
+            typeof mode === 'string' && mode.trim().length > 0
+                ? mode
+                : (typeof agent === 'string' && agent.trim().length > 0 ? agent : undefined);
         const resolvedProvider = typeof providerID === 'string' && providerID.trim().length > 0 ? providerID : undefined;
         const resolvedModel = typeof modelID === 'string' && modelID.trim().length > 0 ? modelID : undefined;
         const resolvedVariant = typeof variant === 'string' && variant.trim().length > 0 ? variant : undefined;
@@ -181,33 +209,57 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         };
     }, [isUser, previousMessage]);
 
+    const previousIsModeSwitchMessage = React.useMemo(() => {
+        if (isUser || !previousMessage) return false;
+        const parts = Array.isArray(previousMessage.parts) ? previousMessage.parts : [];
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i] as unknown as { type?: string; text?: string; synthetic?: boolean };
+            if (part?.type !== 'text') continue;
+            if (part?.synthetic !== true) continue;
+            const text = typeof part.text === 'string' ? part.text.trim() : '';
+            if (text.startsWith('User has requested to enter plan mode') || text.startsWith('The plan at ')) {
+                return true;
+            }
+        }
+        return false;
+    }, [isUser, previousMessage]);
+
     const agentName = React.useMemo(() => {
         if (isUser) return undefined;
 
+        // While the assistant message is streaming, if the immediately previous user message is a
+        // synthetic mode switch, trust that mode for the badge.
+        const timeInfo = message.info.time as { completed?: number } | undefined;
+        const isCompleted = typeof timeInfo?.completed === 'number' && timeInfo.completed > 0;
+        if (!isCompleted && previousIsModeSwitchMessage && previousUserMetadata?.agentName) {
+            return previousUserMetadata.agentName;
+        }
+
         const messageMode = getMessageInfoProp(message.info, 'mode');
         if (typeof messageMode === 'string' && messageMode.trim().length > 0) {
             return messageMode;
         }
 
+        const messageAgent = getMessageInfoProp(message.info, 'agent');
+        if (typeof messageAgent === 'string' && messageAgent.trim().length > 0) {
+            return messageAgent;
+        }
+
         if (previousUserMetadata?.agentName) {
             return previousUserMetadata.agentName;
         }
 
-        const sessionId = message.info.sessionID;
         if (!sessionId) {
             return undefined;
         }
 
-        const currentContextAgent = getCurrentAgent(sessionId);
         if (currentContextAgent) {
             return currentContextAgent;
         }
 
-        const savedSelection = getSessionAgentSelection(sessionId);
-        return savedSelection ?? undefined;
-    }, [isUser, message.info, previousUserMetadata, getCurrentAgent, getSessionAgentSelection]);
+        return savedSessionAgentSelection ?? undefined;
+    }, [isUser, message.info, previousIsModeSwitchMessage, previousUserMetadata, sessionId, currentContextAgent, savedSessionAgentSelection]);
 
-    const sessionId = message.info.sessionID;
     const messageProviderID = !isUser ? getMessageInfoProp(message.info, 'providerID') : null;
     const messageModelID = !isUser ? getMessageInfoProp(message.info, 'modelID') : null;
 
@@ -324,6 +376,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         return isMessageCompleted ? visibleParts : [];
     }, [isUser, isMessageCompleted, visibleParts]);
 
+
     const assistantTextParts = React.useMemo(() => {
         if (isUser) {
             return [];
@@ -835,12 +888,13 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
             >
                 <div className="chat-message-column relative">
                     {isUser ? (
+                        displayParts.length === 0 ? null : (
                         <FadeInOnReveal>
                             <div className="flex justify-end">
                                 <div className="max-w-[85%] rounded-2xl rounded-br-sm bg-primary/10 dark:bg-primary/10 px-5 py-3 shadow-sm border border-primary/5">
                                     <MessageBody
                                         messageId={message.info.id}
-                                        parts={visibleParts}
+                                        parts={displayParts}
                                         isUser={isUser}
                                         isMessageCompleted={isMessageCompleted}
                                         messageFinish={messageFinish}
@@ -869,6 +923,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                                 </div>
                             </div>
                         </FadeInOnReveal>
+                        )
                     ) : (
                         <div className="relative pl-4 ml-1">
                             {shouldShowHeader && (

packages/ui/src/components/chat/ModelControls.tsx

@@ -295,7 +295,6 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         currentSessionId,
         messages,
         saveSessionAgentSelection,
-        getSessionAgentSelection,
         saveAgentModelForSession,
         getAgentModelForSession,
         saveAgentModelVariantForSession,
@@ -306,6 +305,28 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
     } = useSessionStore();
 
     const contextHydrated = useContextStore((state) => state.hasHydrated);
+
+    const sessionSavedAgentName = useContextStore((state) =>
+        currentSessionId ? state.sessionAgentSelections.get(currentSessionId) ?? null : null
+    );
+
+    const stickySessionAgentRef = React.useRef<string | null>(null);
+    React.useEffect(() => {
+        if (!currentSessionId) {
+            stickySessionAgentRef.current = null;
+            return;
+        }
+        if (sessionSavedAgentName) {
+            stickySessionAgentRef.current = sessionSavedAgentName;
+        }
+    }, [currentSessionId, sessionSavedAgentName]);
+
+    const stickySessionAgentName = currentSessionId ? stickySessionAgentRef.current : null;
+
+    // Prefer per-session selection over global config to avoid flicker during server-driven mode switches.
+    const uiAgentName = currentSessionId
+        ? (sessionSavedAgentName || stickySessionAgentName || currentAgentName)
+        : currentAgentName;
     const { toggleFavoriteModel, isFavoriteModel, addRecentModel, isModelSelectorOpen, setModelSelectorOpen } = useUIStore();
     const { favoriteModelsList, recentModelsList } = useModelLists();
 
@@ -416,9 +437,9 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
 
     const { cascadeDefaultMode, modeAvailability, autoApproveAvailable } = permissionUiState;
 
-    const selectionContextReady = Boolean(currentSessionId && currentAgentName);
-    const sessionMode = selectionContextReady && currentSessionId && currentAgentName
-        ? getSessionAgentEditMode(currentSessionId, currentAgentName, cascadeDefaultMode)
+    const selectionContextReady = Boolean(currentSessionId && uiAgentName);
+    const sessionMode = selectionContextReady && currentSessionId && uiAgentName
+        ? getSessionAgentEditMode(currentSessionId, uiAgentName, cascadeDefaultMode)
         : cascadeDefaultMode;
 
     const editModeShortLabels: Record<EditPermissionMode, string> = {
@@ -535,6 +556,23 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         inFlight: boolean;
     } | null>(null);
 
+    // If we have an explicit per-session agent selection (eg. server-injected mode switch),
+    // treat the session as resolved and don't run inference/fallback that could cause flicker.
+    React.useEffect(() => {
+        if (!currentSessionId) {
+            return;
+        }
+        const refState = sessionInitializationRef.current;
+        if (!refState || refState.sessionId !== currentSessionId) {
+            return;
+        }
+
+        if (sessionSavedAgentName && agents.some((agent) => agent.name === sessionSavedAgentName)) {
+            refState.resolved = true;
+            refState.inFlight = false;
+        }
+    }, [agents, currentSessionId, sessionSavedAgentName]);
+
     const tryApplyModelSelection = React.useCallback(
         (providerId: string, modelId: string, agentName?: string): ModelApplyResult => {
             if (!providerId || !modelId) {
@@ -597,7 +635,9 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         };
 
         const applySavedSelections = (): 'resolved' | 'waiting' | 'continue' => {
-            const savedAgentName = getSessionAgentSelection(currentSessionId);
+            const savedAgentName = currentSessionId
+                ? (useContextStore.getState().getSessionAgentSelection(currentSessionId) || stickySessionAgentRef.current)
+                : null;
             if (savedAgentName) {
                 if (currentAgentName !== savedAgentName) {
                     setAgent(savedAgentName);
@@ -627,7 +667,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                     setAgent(agent.name);
                 }
 
-                saveSessionAgentSelection(currentSessionId, agent.name);
+                const existingSelection = useContextStore.getState().getSessionAgentSelection(currentSessionId) || stickySessionAgentRef.current;
+                if (!existingSelection) {
+                    saveSessionAgentSelection(currentSessionId, agent.name);
+                }
                 const result = tryApplyModelSelection(selection.providerId, selection.modelId, agent.name);
                 if (result === 'applied') {
                     return 'resolved';
@@ -645,13 +688,33 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                 return;
             }
 
+            const existingSelection = currentSessionId
+                ? (useContextStore.getState().getSessionAgentSelection(currentSessionId) || stickySessionAgentRef.current)
+                : null;
+
+            // If we already have a valid agent selected (often from server-injected mode switch),
+            // don't override it with a fallback.
+            const preferred =
+                (currentSessionId
+                    ? (useContextStore.getState().getSessionAgentSelection(currentSessionId) || stickySessionAgentRef.current)
+                    : null) ||
+                currentAgentName;
+            if (preferred && agents.some((agent) => agent.name === preferred)) {
+                if (currentAgentName !== preferred) {
+                    setAgent(preferred);
+                }
+                return;
+            }
+
             const primaryAgents = agents.filter(agent => isPrimaryMode(agent.mode));
             const fallbackAgent = agents.find(agent => agent.name === 'build') || primaryAgents[0] || agents[0];
             if (!fallbackAgent) {
                 return;
             }
 
-            saveSessionAgentSelection(currentSessionId, fallbackAgent.name);
+            if (!existingSelection) {
+                saveSessionAgentSelection(currentSessionId, fallbackAgent.name);
+            }
 
             if (currentAgentName !== fallbackAgent.name) {
                 setAgent(fallbackAgent.name);
@@ -697,7 +760,17 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                             }
 
                             if (latestAgent) {
-                                saveSessionAgentSelection(currentSessionId, latestAgent);
+                                // If server/user already selected an agent for this session, don't override
+                                // with heuristic inference mid-stream.
+                                const latestSaved = useContextStore.getState().getSessionAgentSelection(currentSessionId) || stickySessionAgentRef.current;
+                                if (latestSaved && latestSaved !== latestAgent) {
+                                    finalize();
+                                    return;
+                                }
+
+                                if (!latestSaved) {
+                                    saveSessionAgentSelection(currentSessionId, latestAgent);
+                                }
                                 if (currentAgentName !== latestAgent) {
                                     setAgent(latestAgent);
                                 }
@@ -736,6 +809,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                     }
                 }
 
+                if (isCancelled) {
+                    return;
+                }
+
                 applyFallbackAgent();
                 finalize();
             } catch (error) {
@@ -755,7 +832,6 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         currentSessionMessageCount,
         agents,
         currentAgentName,
-        getSessionAgentSelection,
         getAgentModelForSession,
         setAgent,
         tryApplyModelSelection,
@@ -763,6 +839,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         saveSessionAgentSelection,
         contextHydrated,
         providers,
+        sessionSavedAgentName,
     ]);
 
     React.useEffect(() => {
@@ -770,8 +847,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
             return;
         }
 
-        const savedAgentName = getSessionAgentSelection(currentSessionId);
-        const preferredAgent = savedAgentName || currentAgentName;
+        const preferredAgent = sessionSavedAgentName || currentAgentName;
         if (!preferredAgent) {
             return;
         }
@@ -812,10 +888,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         currentModelId,
         providers,
         agents,
-        getSessionAgentSelection,
         getAgentModelForSession,
         tryApplyModelSelection,
         setAgent,
+        sessionSavedAgentName,
     ]);
 
     React.useEffect(() => {
@@ -1008,14 +1084,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
     };
 
     const getAgentDisplayName = () => {
-        if (!currentAgentName) {
+        if (!uiAgentName) {
             const primaryAgents = agents.filter(agent => isPrimaryMode(agent.mode));
             const buildAgent = primaryAgents.find(agent => agent.name === 'build');
             const defaultAgent = buildAgent || primaryAgents[0];
             return defaultAgent ? capitalizeAgentName(defaultAgent.name) : 'Select Agent';
         }
-        const agent = agents.find(a => a.name === currentAgentName);
-        return agent ? capitalizeAgentName(agent.name) : capitalizeAgentName(currentAgentName);
+        const agent = agents.find(a => a.name === uiAgentName);
+        return agent ? capitalizeAgentName(agent.name) : capitalizeAgentName(uiAgentName);
     };
 
     const capitalizeAgentName = (name: string) => {
@@ -1630,7 +1706,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
             >
                 <div className="flex flex-col gap-1.5">
                     {primaryAgents.map((agent) => {
-                        const isSelected = agent.name === currentAgentName;
+                        const isSelected = agent.name === uiAgentName;
                         const agentColor = getAgentColor(agent.name);
                         return (
                             <button
@@ -2418,10 +2494,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                             className={cn(
                                                 controlIconSize,
                                                 'flex-shrink-0',
-                                                currentAgentName ? '' : 'text-muted-foreground'
-                                            )}
-                                            style={currentAgentName ? { color: `var(${getAgentColor(currentAgentName).var})` } : undefined}
-                                        />
+                                        uiAgentName ? '' : 'text-muted-foreground'
+                                    )}
+                                    style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
+                                />
                                         <span
                                             className={cn(
                                                 'model-controls__agent-label',
@@ -2429,7 +2505,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                                 'font-medium min-w-0 truncate',
                                                 isDesktopRuntime ? 'max-w-[220px]' : undefined
                                             )}
-                                            style={currentAgentName ? { color: `var(${getAgentColor(currentAgentName).var})` } : undefined}
+                                            style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
                                         >
                                             {getAgentDisplayName()}
                                         </span>
@@ -2573,14 +2649,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                     'cursor-pointer hover:opacity-70',
                 )}
             >
-                <RiAiAgentLine
-                    className={cn(
-                        controlIconSize,
-                        'flex-shrink-0',
-                        currentAgentName ? '' : 'text-muted-foreground'
-                    )}
-                    style={currentAgentName ? { color: `var(${getAgentColor(currentAgentName).var})` } : undefined}
-                />
+                                        <RiAiAgentLine
+                                            className={cn(
+                                                controlIconSize,
+                                                'flex-shrink-0',
+                                                uiAgentName ? '' : 'text-muted-foreground'
+                                            )}
+                                            style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
+                                        />
                 <span
                     className={cn(
                         'model-controls__agent-label',
@@ -2588,10 +2664,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                         'font-medium truncate min-w-0',
                         isMobile && 'max-w-[60px]'
                     )}
-                    style={currentAgentName ? { color: `var(${getAgentColor(currentAgentName).var})` } : undefined}
-                >
-                    {getAgentDisplayName()}
-                </span>
+                                            style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
+                                        >
+                                            {getAgentDisplayName()}
+                                        </span>
             </button>
         );
     };

packages/ui/src/components/chat/QuestionCard.tsx

@@ -26,6 +26,11 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
   const isSummaryTab = activeTab === SUMMARY_TAB;
   const activeIndex = isSummaryTab ? -1 : Math.max(0, Math.min(questions.length - 1, Number(activeTab) || 0));
   const activeQuestion = isSummaryTab ? null : questions[activeIndex];
+  const activeHeader = React.useMemo(() => {
+    if (isSummaryTab) return null;
+    const header = activeQuestion?.header?.trim();
+    return header && header.length > 0 ? header : null;
+  }, [activeQuestion?.header, isSummaryTab]);
 
   React.useEffect(() => {
     setActiveTab('0');
@@ -163,6 +168,11 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
             <div className="flex items-center gap-2">
               <RiQuestionLine className="h-3.5 w-3.5 text-primary" />
               <span className="typography-meta font-medium text-muted-foreground">Input needed</span>
+              {activeHeader ? (
+                <span className="ml-auto typography-micro font-medium text-foreground/70 px-1.5 py-0.5 rounded bg-muted/30 border border-border/20">
+                  {activeHeader}
+                </span>
+              ) : null}
             </div>
           </div>
 

packages/ui/src/components/chat/message/ToolOutputDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
-import { RiBrainAi3Line, RiFileImageLine, RiFilePdfLine, RiFileSearchLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiPencilAiLine, RiSearchLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
+import { RiBrainAi3Line, RiFileImageLine, RiFileList2Line, RiFilePdfLine, RiFileSearchLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiPencilAiLine, RiSearchLine, RiTaskLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 
 import { cn } from '@/lib/utils';
@@ -69,6 +69,12 @@ const getToolIcon = (toolName: string) => {
     if (tool === 'todowrite' || tool === 'todoread') {
         return <RiListCheck3 className={iconClass} />;
     }
+    if (tool === 'plan_enter') {
+        return <RiFileList2Line className={iconClass} />;
+    }
+    if (tool === 'plan_exit') {
+        return <RiTaskLine className={iconClass} />;
+    }
     if (tool.startsWith('git')) {
         return <RiGitBranchLine className={iconClass} />;
     }

packages/ui/src/components/chat/message/partUtils.ts

@@ -37,6 +37,14 @@ export const filterVisibleParts = (parts: Part[], options: VisibleFilterOptions
     return parts.filter((part) => {
         const partWithSynthetic = part as PartWithSynthetic;
         const isSynthetic = Boolean(partWithSynthetic.synthetic);
+
+        if (isSynthetic && part.type === 'text') {
+            const text = extractTextContent(part);
+            if (text.includes('<system-reminder>')) {
+                return false;
+            }
+        }
+
         // Only filter out synthetic parts if there are non-synthetic parts present
         // Otherwise, show synthetic parts so the message is displayed
         if (isSynthetic && hasNonSynthetic) {

packages/ui/src/components/chat/message/parts/ToolPart.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
-import { RiArrowDownSLine, RiArrowRightSLine, RiBookLine, RiExternalLinkLine, RiFileEditLine, RiFileSearchLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiMenuSearchLine, RiPencilLine, RiSurveyLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
+import { RiArrowDownSLine, RiArrowRightSLine, RiBookLine, RiExternalLinkLine, RiFileEditLine, RiFileList2Line, RiFileSearchLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiMenuSearchLine, RiPencilLine, RiSurveyLine, RiTaskLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import { SimpleMarkdownRenderer } from '../../MarkdownRenderer';
 import { getToolMetadata, getLanguageFromExtension, isImageFile, getImageMimeType } from '@/lib/toolHelpers';
@@ -88,6 +88,12 @@ export const getToolIcon = (toolName: string) => {
     if (tool === 'question') {
         return <RiSurveyLine className={iconClass} />;
     }
+    if (tool === 'plan_enter') {
+        return <RiFileList2Line className={iconClass} />;
+    }
+    if (tool === 'plan_exit') {
+        return <RiTaskLine className={iconClass} />;
+    }
     if (tool.startsWith('git')) {
         return <RiGitBranchLine className={iconClass} />;
     }
@@ -221,6 +227,14 @@ const getToolDescription = (part: ToolPartType, state: ToolStateUnion, isMobile:
         return input.name;
     }
 
+    if (part.tool === 'plan_enter') {
+        return 'Switching to planning';
+    }
+
+    if (part.tool === 'plan_exit') {
+        return 'Switching to building';
+    }
+
     const desc = input?.description || metadata?.description || ('title' in state && state.title) || '';
     return typeof desc === 'string' ? desc : '';
 };

packages/ui/src/components/layout/Header.tsx

@@ -5,17 +5,52 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 
-import { RiArrowLeftSLine, RiChat4Line, RiCodeLine, RiCommandLine, RiFolder6Line, RiGitBranchLine, RiLayoutLeftLine, RiPlayListAddLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
+import { RiArrowLeftSLine, RiChat4Line, RiCodeLine, RiCommandLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiLayoutLeftLine, RiPlayListAddLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
 import { useUIStore, type MainTab } from '@/stores/useUIStore';
 import { useUpdateStore } from '@/stores/useUpdateStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useSessionStore } from '@/stores/useSessionStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
 import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
 import { useDeviceInfo } from '@/lib/device';
 import { cn, getModifierLabel, hasModifier } from '@/lib/utils';
 import { useDiffFileCount } from '@/components/views/DiffView';
 import { McpDropdown } from '@/components/mcp/McpDropdown';
 
+const normalize = (value: string): string => {
+  if (!value) return '';
+  const replaced = value.replace(/\\/g, '/');
+  return replaced === '/' ? '/' : replaced.replace(/\/+$/, '');
+};
+
+const joinPath = (base: string, segment: string): string => {
+  const normalizedBase = normalize(base);
+  const cleanSegment = segment.replace(/\\/g, '/').replace(/^\/+/, '').replace(/\/+$/, '');
+  if (!normalizedBase || normalizedBase === '/') {
+    return `/${cleanSegment}`;
+  }
+  return `${normalizedBase}/${cleanSegment}`;
+};
+
+const buildRepoPlansDirectory = (directory: string): string => {
+  return joinPath(joinPath(directory, '.opencode'), 'plans');
+};
+
+const buildHomePlansDirectory = (): string => {
+  return '~/.opencode/plans';
+};
+
+const resolveTilde = (path: string, homeDir: string | null): string => {
+  const trimmed = path.trim();
+  if (!trimmed.startsWith('~')) return trimmed;
+  if (trimmed === '~') return homeDir || trimmed;
+  if (trimmed.startsWith('~/') || trimmed.startsWith('~\\')) {
+    return homeDir ? `${homeDir}${trimmed.slice(1)}` : trimmed;
+  }
+  return trimmed;
+};
+
 interface TabConfig {
   id: MainTab;
   label: string;
@@ -34,8 +69,12 @@ export const Header: React.FC = () => {
   const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
 
   const { getCurrentModel } = useConfigStore();
+  const runtimeApis = useRuntimeAPIs();
 
   const getContextUsage = useSessionStore((state) => state.getContextUsage);
+  const currentSessionId = useSessionStore((state) => state.currentSessionId);
+  const sessions = useSessionStore((state) => state.sessions);
+  const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
   const { isMobile } = useDeviceInfo();
   const diffFileCount = useDiffFileCount();
   const updateAvailable = useUpdateStore((state) => state.available);
@@ -73,6 +112,90 @@ export const Header: React.FC = () => {
   const contextUsage = getContextUsage(contextLimit, outputLimit);
   const isSessionSwitcherOpen = useUIStore((state) => state.isSessionSwitcherOpen);
 
+  const currentSession = React.useMemo(() => {
+    if (!currentSessionId) return null;
+    return sessions.find((s) => s.id === currentSessionId) ?? null;
+  }, [currentSessionId, sessions]);
+
+  const sessionDirectory = React.useMemo(() => {
+    const raw = typeof currentSession?.directory === 'string' ? currentSession.directory : '';
+    return normalize(raw || '');
+  }, [currentSession?.directory]);
+
+
+  const [planTabAvailable, setPlanTabAvailable] = React.useState(false);
+  const showPlanTab = planTabAvailable;
+  const lastPlanSessionKeyRef = React.useRef<string>('');
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    const checkExists = async (directory: string, fileName: string): Promise<boolean> => {
+      if (!directory || !fileName) return false;
+      if (!runtimeApis.files?.listDirectory) return false;
+
+      try {
+        const listing = await runtimeApis.files.listDirectory(directory);
+        const entries = Array.isArray(listing?.entries) ? listing.entries : [];
+        return entries.some((entry) => entry?.name === fileName && !entry?.isDirectory);
+      } catch {
+        return false;
+      }
+    };
+
+    const runOnce = async () => {
+      if (cancelled) return;
+
+      if (!currentSession?.slug || !currentSession?.time?.created || !sessionDirectory) {
+        setPlanTabAvailable(false);
+        if (useUIStore.getState().activeMainTab === 'plan') {
+          useUIStore.getState().setActiveMainTab('chat');
+        }
+        return;
+      }
+
+      const fileName = `${currentSession.time.created}-${currentSession.slug}.md`;
+      const repoDir = buildRepoPlansDirectory(sessionDirectory);
+      const homeDir = resolveTilde(buildHomePlansDirectory(), homeDirectory || null);
+
+      const [repoExists, homeExists] = await Promise.all([
+        checkExists(repoDir, fileName),
+        checkExists(homeDir, fileName),
+      ]);
+
+      if (cancelled) return;
+
+      const available = repoExists || homeExists;
+      setPlanTabAvailable(available);
+      if (!available && useUIStore.getState().activeMainTab === 'plan') {
+        useUIStore.getState().setActiveMainTab('chat');
+      }
+    };
+
+    const sessionKey = `${currentSessionId || 'none'}:${sessionDirectory || 'none'}:${currentSession?.time?.created || 0}:${currentSession?.slug || 'none'}`;
+    if (lastPlanSessionKeyRef.current !== sessionKey) {
+      lastPlanSessionKeyRef.current = sessionKey;
+      setPlanTabAvailable(false);
+    }
+    void runOnce();
+
+    const interval = window.setInterval(() => {
+      void runOnce();
+    }, 3000);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [
+    sessionDirectory,
+    currentSession?.slug,
+    currentSession?.time?.created,
+    currentSessionId,
+    homeDirectory,
+    runtimeApis.files,
+  ]);
+
   const blurActiveElement = React.useCallback(() => {
     if (typeof document === 'undefined') {
       return;
@@ -193,23 +316,34 @@ export const Header: React.FC = () => {
     }
   }, [isDesktopApp]);
 
-  const tabs: TabConfig[] = React.useMemo(() => [
-    { id: 'chat', label: 'Chat', icon: RiChat4Line },
-    {
-      id: 'diff',
-      label: 'Diff',
-      icon: RiCodeLine,
-      badge: !isMobile && diffFileCount > 0 ? diffFileCount : undefined,
-    },
-    { id: 'files', label: 'Files', icon: RiFolder6Line },
-    { id: 'terminal', label: 'Terminal', icon: RiTerminalBoxLine },
-    {
-      id: 'git',
-      label: 'Git',
-      icon: RiGitBranchLine,
-      showDot: isMobile && diffFileCount > 0,
-    },
-  ], [diffFileCount, isMobile]);
+  const tabs: TabConfig[] = React.useMemo(() => {
+    const base: TabConfig[] = [
+      { id: 'chat', label: 'Chat', icon: RiChat4Line },
+    ];
+
+    if (showPlanTab) {
+      base.push({ id: 'plan', label: 'Plan', icon: RiFileTextLine });
+    }
+
+    base.push(
+      {
+        id: 'diff',
+        label: 'Diff',
+        icon: RiCodeLine,
+        badge: !isMobile && diffFileCount > 0 ? diffFileCount : undefined,
+      },
+      { id: 'files', label: 'Files', icon: RiFolder6Line },
+      { id: 'terminal', label: 'Terminal', icon: RiTerminalBoxLine },
+      {
+        id: 'git',
+        label: 'Git',
+        icon: RiGitBranchLine,
+        showDot: isMobile && diffFileCount > 0,
+      },
+    );
+
+    return base;
+  }, [diffFileCount, isMobile, showPlanTab]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {

packages/ui/src/components/layout/MainLayout.tsx

@@ -15,7 +15,7 @@ import { useDeviceInfo } from '@/lib/device';
 import { useEdgeSwipe } from '@/hooks/useEdgeSwipe';
 import { cn } from '@/lib/utils';
 
-import { ChatView, GitView, DiffView, TerminalView, FilesView, SettingsView } from '@/components/views';
+import { ChatView, PlanView, GitView, DiffView, TerminalView, FilesView, SettingsView } from '@/components/views';
 
 export const MainLayout: React.FC = () => {
     const {
@@ -298,6 +298,8 @@ export const MainLayout: React.FC = () => {
 
     const secondaryView = React.useMemo(() => {
         switch (activeMainTab) {
+            case 'plan':
+                return <PlanView />;
             case 'git':
                 return <GitView />;
             case 'diff':

packages/ui/src/components/views/FilesView.tsx

@@ -8,6 +8,7 @@ import {
   RiFileImageLine,
   RiFileTextLine,
   RiFileCopy2Line,
+  RiCheckLine,
   RiFolder3Fill,
   RiFolderOpenFill,
   RiLoader4Line,
@@ -285,12 +286,16 @@ export const FilesView: React.FC = () => {
   const pendingSelectFileRef = React.useRef<FileNode | null>(null);
   const pendingTabRef = React.useRef<import('@/stores/useUIStore').MainTab | null>(null);
   const skipDirtyOnceRef = React.useRef(false);
+  const copiedContentTimeoutRef = React.useRef<number | null>(null);
+  const copiedPathTimeoutRef = React.useRef<number | null>(null);
 
   const [activeDialog, setActiveDialog] = React.useState<'createFile' | 'createFolder' | 'rename' | 'delete' | null>(null);
   const [dialogData, setDialogData] = React.useState<{ path: string; name?: string; type?: 'file' | 'directory' } | null>(null);
   const [dialogInputValue, setDialogInputValue] = React.useState('');
   const [isDialogSubmitting, setIsDialogSubmitting] = React.useState(false);
   const [contextMenuPath, setContextMenuPath] = React.useState<string | null>(null);
+  const [copiedContent, setCopiedContent] = React.useState(false);
+  const [copiedPath, setCopiedPath] = React.useState(false);
 
   const canCreateFile = Boolean(files.writeFile);
   const canCreateFolder = Boolean(files.createDirectory);
@@ -341,6 +346,17 @@ export const FilesView: React.FC = () => {
     setIsSaving(false);
   }, [selectedFile?.path, setMainTabGuard]);
 
+  React.useEffect(() => {
+    return () => {
+      if (copiedContentTimeoutRef.current !== null) {
+        window.clearTimeout(copiedContentTimeoutRef.current);
+      }
+      if (copiedPathTimeoutRef.current !== null) {
+        window.clearTimeout(copiedPathTimeoutRef.current);
+      }
+    };
+  }, []);
+
   // Click outside to dismiss selection
   React.useEffect(() => {
     if (!lineSelection) return;
@@ -1403,7 +1419,13 @@ export const FilesView: React.FC = () => {
               onClick={async () => {
                 try {
                   await navigator.clipboard.writeText(fileContent);
-                  toast.success('Copied');
+                  setCopiedContent(true);
+                  if (copiedContentTimeoutRef.current !== null) {
+                    window.clearTimeout(copiedContentTimeoutRef.current);
+                  }
+                  copiedContentTimeoutRef.current = window.setTimeout(() => {
+                    setCopiedContent(false);
+                  }, 1200);
                 } catch {
                   toast.error('Copy failed');
                 }
@@ -1412,7 +1434,11 @@ export const FilesView: React.FC = () => {
               title="Copy file contents"
               aria-label="Copy file contents"
             >
-              <RiClipboardLine className="h-4 w-4" />
+              {copiedContent ? (
+                <RiCheckLine className="h-4 w-4 text-[color:var(--status-success)]" />
+              ) : (
+                <RiClipboardLine className="h-4 w-4" />
+              )}
             </Button>
           )}
 
@@ -1423,7 +1449,13 @@ export const FilesView: React.FC = () => {
               onClick={async () => {
                 try {
                   await navigator.clipboard.writeText(displaySelectedPath);
-                  toast.success('Copied');
+                  setCopiedPath(true);
+                  if (copiedPathTimeoutRef.current !== null) {
+                    window.clearTimeout(copiedPathTimeoutRef.current);
+                  }
+                  copiedPathTimeoutRef.current = window.setTimeout(() => {
+                    setCopiedPath(false);
+                  }, 1200);
                 } catch {
                   toast.error('Copy failed');
                 }
@@ -1432,7 +1464,11 @@ export const FilesView: React.FC = () => {
               title={`Copy file path (${displaySelectedPath})`}
               aria-label={`Copy file path (${displaySelectedPath})`}
             >
-              <RiFileCopy2Line className="h-4 w-4" />
+              {copiedPath ? (
+                <RiCheckLine className="h-4 w-4 text-[color:var(--status-success)]" />
+              ) : (
+                <RiFileCopy2Line className="h-4 w-4" />
+              )}
             </Button>
           )}
         </div>

packages/ui/src/components/views/PlanView.tsx

@@ -0,0 +1,591 @@
+import React from 'react';
+import { CodeMirrorEditor } from '@/components/ui/CodeMirrorEditor';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useContextStore } from '@/stores/contextStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { cn, getModifierLabel } from '@/lib/utils';
+import { getLanguageFromExtension } from '@/lib/toolHelpers';
+import { useDeviceInfo } from '@/lib/device';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { generateSyntaxTheme } from '@/lib/theme/syntaxThemeGenerator';
+import { createFlexokiCodeMirrorTheme } from '@/lib/codemirror/flexokiTheme';
+import { languageByExtension } from '@/lib/codemirror/languageByExtension';
+import { RiCheckLine, RiClipboardLine, RiFileCopy2Line, RiSendPlane2Line } from '@remixicon/react';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import { EditorView } from '@codemirror/view';
+
+const normalize = (value: string): string => {
+  if (!value) return '';
+  const replaced = value.replace(/\\/g, '/');
+  return replaced === '/' ? '/' : replaced.replace(/\/+$/, '');
+};
+
+const joinPath = (base: string, segment: string): string => {
+  const normalizedBase = normalize(base);
+  const cleanSegment = segment.replace(/\\/g, '/').replace(/^\/+/, '').replace(/\/+$/, '');
+  if (!normalizedBase || normalizedBase === '/') {
+    return `/${cleanSegment}`;
+  }
+  return `${normalizedBase}/${cleanSegment}`;
+};
+
+const buildRepoPlanPath = (directory: string, created: number, slug: string): string => {
+  return joinPath(joinPath(joinPath(directory, '.opencode'), 'plans'), `${created}-${slug}.md`);
+};
+
+const buildHomePlanPath = (created: number, slug: string): string => {
+  return `~/.opencode/plans/${created}-${slug}.md`;
+};
+
+const resolveTilde = (path: string, homeDir: string | null): string => {
+  const trimmed = path.trim();
+  if (!trimmed.startsWith('~')) return trimmed;
+  if (trimmed === '~') return homeDir || trimmed;
+  if (trimmed.startsWith('~/') || trimmed.startsWith('~\\')) {
+    return homeDir ? `${homeDir}${trimmed.slice(1)}` : trimmed;
+  }
+  return trimmed;
+};
+
+const toDisplayPath = (resolvedPath: string, options: { currentDirectory: string; homeDirectory: string }): string => {
+  const current = normalize(options.currentDirectory);
+  const home = normalize(options.homeDirectory);
+  const normalized = normalize(resolvedPath);
+
+  if (current && normalized.startsWith(current + '/')) {
+    return normalized.slice(current.length + 1);
+  }
+
+  if (home && normalized === home) {
+    return '~';
+  }
+
+  if (home && normalized.startsWith(home + '/')) {
+    return `~${normalized.slice(home.length)}`;
+  }
+
+  return normalized;
+};
+
+type SelectedLineRange = {
+  start: number;
+  end: number;
+};
+
+export const PlanView: React.FC = () => {
+  const currentSessionId = useSessionStore((state) => state.currentSessionId);
+  const sessions = useSessionStore((state) => state.sessions);
+  const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
+  const runtimeApis = useRuntimeAPIs();
+  const sendMessage = useSessionStore((state) => state.sendMessage);
+  const { currentProviderId, currentModelId, currentAgentName, currentVariant } = useConfigStore();
+  const getSessionAgentSelection = useContextStore((state) => state.getSessionAgentSelection);
+  const getAgentModelForSession = useContextStore((state) => state.getAgentModelForSession);
+  const getAgentModelVariantForSession = useContextStore((state) => state.getAgentModelVariantForSession);
+  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
+  const { inputBarOffset, isKeyboardOpen } = useUIStore();
+  const { isMobile } = useDeviceInfo();
+  const { currentTheme } = useThemeSystem();
+  React.useMemo(() => generateSyntaxTheme(currentTheme), [currentTheme]);
+
+  const session = React.useMemo(() => {
+    if (!currentSessionId) return null;
+    return sessions.find((s) => s.id === currentSessionId) ?? null;
+  }, [currentSessionId, sessions]);
+
+  const sessionDirectory = React.useMemo(() => {
+    const raw = typeof session?.directory === 'string' ? session.directory : '';
+    return normalize(raw || '');
+  }, [session?.directory]);
+
+  const [resolvedPath, setResolvedPath] = React.useState<string | null>(null);
+  const displayPath = React.useMemo(() => {
+    if (!resolvedPath || !sessionDirectory || !homeDirectory) {
+      return resolvedPath;
+    }
+    return toDisplayPath(resolvedPath, { currentDirectory: sessionDirectory, homeDirectory });
+  }, [resolvedPath, sessionDirectory, homeDirectory]);
+  const [content, setContent] = React.useState<string>('');
+  const [loading, setLoading] = React.useState(false);
+  const [copiedPath, setCopiedPath] = React.useState(false);
+  const [copiedContent, setCopiedContent] = React.useState(false);
+  const copiedTimeoutRef = React.useRef<number | null>(null);
+  const copiedContentTimeoutRef = React.useRef<number | null>(null);
+
+  const [lineSelection, setLineSelection] = React.useState<SelectedLineRange | null>(null);
+  const [commentText, setCommentText] = React.useState('');
+  const isSelectingRef = React.useRef(false);
+  const selectionStartRef = React.useRef<number | null>(null);
+
+  React.useEffect(() => {
+    const handleGlobalMouseUp = () => {
+      isSelectingRef.current = false;
+      selectionStartRef.current = null;
+    };
+    document.addEventListener('mouseup', handleGlobalMouseUp);
+    return () => document.removeEventListener('mouseup', handleGlobalMouseUp);
+  }, []);
+
+  React.useEffect(() => {
+    setLineSelection(null);
+    setCommentText('');
+  }, [content]);
+
+  React.useEffect(() => {
+    if (!lineSelection) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const commentUI = document.querySelector('[data-comment-ui]');
+      if (commentUI?.contains(target)) return;
+      if (target.closest('.cm-gutterElement')) return;
+      if (target.closest('[data-sonner-toast]') || target.closest('[data-sonner-toaster]')) return;
+      setLineSelection(null);
+      setCommentText('');
+    };
+
+    const timeoutId = window.setTimeout(() => {
+      document.addEventListener('click', handleClickOutside);
+    }, 100);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [lineSelection]);
+
+  const extractSelectedCode = React.useCallback((text: string, range: SelectedLineRange): string => {
+    const lines = text.split('\n');
+    const startLine = Math.max(1, range.start);
+    const endLine = Math.min(lines.length, range.end);
+    if (startLine > endLine) return '';
+    return lines.slice(startLine - 1, endLine).join('\n');
+  }, []);
+
+  const handleSendComment = React.useCallback(async () => {
+    if (!lineSelection || !commentText.trim()) return;
+    if (!currentSessionId) return;
+
+    const sessionAgent = getSessionAgentSelection(currentSessionId) || currentAgentName;
+    const sessionModel = sessionAgent ? getAgentModelForSession(currentSessionId, sessionAgent) : null;
+    const effectiveProviderId = sessionModel?.providerId || currentProviderId;
+    const effectiveModelId = sessionModel?.modelId || currentModelId;
+
+    if (!effectiveProviderId || !effectiveModelId) {
+      return;
+    }
+
+    const effectiveVariant = sessionAgent && effectiveProviderId && effectiveModelId
+      ? getAgentModelVariantForSession(currentSessionId, sessionAgent, effectiveProviderId, effectiveModelId) ?? currentVariant
+      : currentVariant;
+
+    const startLine = lineSelection.start;
+    const endLine = lineSelection.end;
+    const code = extractSelectedCode(content, lineSelection);
+    const fileLabel = displayPath ? displayPath.split('/').pop() || 'plan' : 'plan';
+    const language = resolvedPath ? getLanguageFromExtension(resolvedPath) || 'markdown' : 'markdown';
+
+    const message = `Comment on \`${fileLabel}\` lines ${startLine}-${endLine}:\n\n\`\`\`${language}\n${code}\n\`\`\`\n\n${commentText}`;
+
+    setCommentText('');
+    setLineSelection(null);
+    setActiveMainTab('chat');
+
+    void sendMessage(
+      message,
+      effectiveProviderId,
+      effectiveModelId,
+      sessionAgent,
+      undefined,
+      undefined,
+      undefined,
+      effectiveVariant
+    ).catch(() => {
+      // ignore
+    });
+  }, [
+    lineSelection,
+    commentText,
+    currentSessionId,
+    currentProviderId,
+    currentModelId,
+    currentAgentName,
+    currentVariant,
+    content,
+    resolvedPath,
+    displayPath,
+    extractSelectedCode,
+    sendMessage,
+    setActiveMainTab,
+    getSessionAgentSelection,
+    getAgentModelForSession,
+    getAgentModelVariantForSession,
+  ]);
+
+  const editorExtensions = React.useMemo(() => {
+    const extensions = [createFlexokiCodeMirrorTheme(currentTheme)];
+    const language = languageByExtension(resolvedPath || 'plan.md');
+    if (language) {
+      extensions.push(language);
+    }
+    extensions.push(EditorView.lineWrapping);
+    return extensions;
+  }, [currentTheme, resolvedPath]);
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    const readText = async (path: string): Promise<string> => {
+      if (runtimeApis.files?.readFile) {
+        const result = await runtimeApis.files.readFile(path);
+        return result?.content ?? '';
+      }
+
+      const response = await fetch(`/api/fs/read?path=${encodeURIComponent(path)}`);
+      if (!response.ok) {
+        throw new Error(`Failed to read plan file (${response.status})`);
+      }
+      return response.text();
+    };
+
+    const run = async (showLoading: boolean) => {
+      if (showLoading) {
+        setResolvedPath(null);
+        setContent('');
+      }
+
+      if (!session?.slug || !session?.time?.created || !sessionDirectory) {
+        setResolvedPath(null);
+        setContent('');
+        return;
+      }
+
+      if (showLoading) {
+        setLoading(true);
+      }
+
+      try {
+        const repoPath = buildRepoPlanPath(sessionDirectory, session.time.created, session.slug);
+        const homePath = resolveTilde(buildHomePlanPath(session.time.created, session.slug), homeDirectory || null);
+
+        let resolved: string | null = null;
+        let text: string | null = null;
+
+        try {
+          text = await readText(repoPath);
+          resolved = repoPath;
+        } catch {
+          // ignore
+        }
+
+        if (!resolved) {
+          try {
+            text = await readText(homePath);
+            resolved = homePath;
+          } catch {
+            // ignore
+          }
+        }
+
+        if (cancelled) return;
+
+        if (!resolved || text === null) {
+          setResolvedPath(null);
+          setContent('');
+          return;
+        }
+
+        setResolvedPath(resolved);
+        setContent(text);
+      } catch {
+        if (cancelled) return;
+        setResolvedPath(null);
+        setContent('');
+      } finally {
+        if (!cancelled && showLoading) setLoading(false);
+      }
+    };
+
+    void run(true);
+
+    const interval = window.setInterval(() => {
+      void run(false);
+    }, 3000);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [sessionDirectory, session?.slug, session?.time?.created, homeDirectory, runtimeApis.files]);
+
+  React.useEffect(() => {
+    return () => {
+      if (copiedTimeoutRef.current !== null) {
+        window.clearTimeout(copiedTimeoutRef.current);
+      }
+      if (copiedContentTimeoutRef.current !== null) {
+        window.clearTimeout(copiedContentTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const renderCommentUI = () => {
+    if (!lineSelection) return null;
+    return (
+      <div
+        data-comment-ui
+        className="flex flex-col items-center gap-2 px-4"
+        style={{ width: 'min(100vw - 1rem, 42rem)' }}
+      >
+        <div className="w-full rounded-xl border bg-background flex flex-col relative shadow-lg" style={{ borderColor: 'var(--primary)' }}>
+          <Textarea
+            value={commentText}
+            onChange={(e) => {
+              setCommentText(e.target.value);
+              const textarea = e.target;
+              textarea.style.height = 'auto';
+              const lineHeight = 20;
+              const maxHeight = lineHeight * 5 + 8;
+              textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+            }}
+            placeholder="Type your comment..."
+            className="min-h-[28px] max-h-[108px] resize-none border-0 px-3 pt-2 pb-1 shadow-none rounded-none appearance-none focus:shadow-none focus-visible:shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent hover:border-transparent bg-transparent dark:bg-transparent focus-visible:outline-none overflow-y-auto"
+            autoFocus={!isMobile}
+            rows={1}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                handleSendComment();
+              }
+              if (e.key === 'Escape') {
+                e.preventDefault();
+                setLineSelection(null);
+                setCommentText('');
+              }
+            }}
+          />
+          <div className="px-2.5 py-1 flex items-center justify-between gap-x-1.5">
+            <span className="text-xs text-muted-foreground">
+              Plan:{lineSelection.start}-{lineSelection.end}
+            </span>
+            <div className="flex items-center gap-x-1.5">
+              {!isMobile && (
+                <span className="text-xs text-muted-foreground">
+                  {getModifierLabel()}+⏎
+                </span>
+              )}
+              <button
+                type="button"
+                onTouchEnd={(e) => {
+                  if (commentText.trim()) {
+                    e.preventDefault();
+                    handleSendComment();
+                  }
+                }}
+                onClick={() => {
+                  if (!isMobile) {
+                    handleSendComment();
+                  }
+                }}
+                disabled={!commentText.trim()}
+                className={cn(
+                  "h-7 w-7 flex items-center justify-center text-muted-foreground transition-none outline-none focus:outline-none flex-shrink-0",
+                  commentText.trim() ? "text-primary hover:text-primary" : "opacity-30"
+                )}
+                aria-label="Send comment"
+              >
+                <RiSendPlane2Line className="h-[18px] w-[18px]" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="relative flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden bg-background">
+      <div className="flex min-w-0 items-center gap-2 border-b border-border/40 px-3 py-1.5 flex-shrink-0">
+        <div className="min-w-0 flex-1">
+          <div className="typography-ui-label font-medium truncate">Plan</div>
+          {resolvedPath ? (
+            <div className="typography-meta text-muted-foreground truncate" title={displayPath ?? resolvedPath}>
+              {displayPath ?? resolvedPath}
+            </div>
+          ) : null}
+        </div>
+        {resolvedPath ? (
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={async () => {
+                try {
+                  await navigator.clipboard.writeText(content);
+                  setCopiedContent(true);
+                  if (copiedContentTimeoutRef.current !== null) {
+                    window.clearTimeout(copiedContentTimeoutRef.current);
+                  }
+                  copiedContentTimeoutRef.current = window.setTimeout(() => {
+                    setCopiedContent(false);
+                  }, 1200);
+                } catch {
+                  // ignored
+                }
+              }}
+              className="h-5 w-5 p-0"
+              title="Copy plan contents"
+              aria-label="Copy plan contents"
+            >
+              {copiedContent ? (
+                <RiCheckLine className="h-4 w-4 text-[color:var(--status-success)]" />
+              ) : (
+                <RiClipboardLine className="h-4 w-4" />
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={async () => {
+                try {
+                  await navigator.clipboard.writeText(displayPath ?? resolvedPath);
+                  setCopiedPath(true);
+                  if (copiedTimeoutRef.current !== null) {
+                    window.clearTimeout(copiedTimeoutRef.current);
+                  }
+                  copiedTimeoutRef.current = window.setTimeout(() => {
+                    setCopiedPath(false);
+                  }, 1200);
+                } catch {
+                  // ignored
+                }
+              }}
+              className="h-5 w-5 p-0"
+              title={`Copy plan path (${displayPath ?? resolvedPath})`}
+              aria-label={`Copy plan path (${displayPath ?? resolvedPath})`}
+            >
+              {copiedPath ? (
+                <RiCheckLine className="h-4 w-4 text-[color:var(--status-success)]" />
+              ) : (
+                <RiFileCopy2Line className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="flex-1 min-h-0 min-w-0 relative">
+        <ScrollableOverlay outerClassName="h-full min-w-0" className="h-full min-w-0">
+          {loading ? (
+            <div className="p-3 typography-ui text-muted-foreground">Loading…</div>
+          ) : (
+            <div className="relative h-full">
+              <div
+                className="h-full"
+                style={{
+                  ['--oc-plan-comment-pad' as string]: lineSelection
+                    ? (isMobile
+                      ? 'calc(var(--oc-keyboard-inset, 0px) + 140px)'
+                      : '140px')
+                    : '0px',
+                }}
+              >
+                <div className="h-full oc-plan-editor">
+                  <CodeMirrorEditor
+                    value={content}
+                    onChange={() => {
+                      // read-only
+                    }}
+                    readOnly={true}
+                    className="h-full [&_.cm-scroller]:pb-[var(--oc-plan-comment-pad)]"
+                    extensions={editorExtensions}
+                    highlightLines={lineSelection
+                      ? {
+                        start: Math.min(lineSelection.start, lineSelection.end),
+                        end: Math.max(lineSelection.start, lineSelection.end),
+                      }
+                      : undefined}
+                    lineNumbersConfig={{
+                      domEventHandlers: {
+                        mousedown: (view, line, event) => {
+                          if (!(event instanceof MouseEvent)) return false;
+                          if (event.button !== 0) return false;
+                          event.preventDefault();
+                          const lineNumber = view.state.doc.lineAt(line.from).number;
+
+                          if (isMobile && lineSelection && !event.shiftKey) {
+                            const start = Math.min(lineSelection.start, lineSelection.end, lineNumber);
+                            const end = Math.max(lineSelection.start, lineSelection.end, lineNumber);
+                            setLineSelection({ start, end });
+                            isSelectingRef.current = false;
+                            selectionStartRef.current = null;
+                            return true;
+                          }
+
+                          isSelectingRef.current = true;
+                          selectionStartRef.current = lineNumber;
+
+                          if (lineSelection && event.shiftKey) {
+                            const start = Math.min(lineSelection.start, lineNumber);
+                            const end = Math.max(lineSelection.end, lineNumber);
+                            setLineSelection({ start, end });
+                          } else {
+                            setLineSelection({ start: lineNumber, end: lineNumber });
+                          }
+
+                          return true;
+                        },
+                        mouseover: (view, line, event) => {
+                          if (!(event instanceof MouseEvent)) return false;
+                          if (event.buttons !== 1) return false;
+                          if (!isSelectingRef.current || selectionStartRef.current === null) return false;
+                          const lineNumber = view.state.doc.lineAt(line.from).number;
+                          const start = Math.min(selectionStartRef.current, lineNumber);
+                          const end = Math.max(selectionStartRef.current, lineNumber);
+                          setLineSelection({ start, end });
+                          return false;
+                        },
+                        mouseup: () => {
+                          isSelectingRef.current = false;
+                          selectionStartRef.current = null;
+                          return false;
+                        },
+                      },
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+        </ScrollableOverlay>
+      </div>
+
+      {lineSelection && (
+        <div
+          className="pointer-events-none absolute inset-0 z-50 flex flex-col justify-end"
+          style={{ paddingBottom: isMobile ? 'var(--oc-keyboard-inset, 0px)' : '0px' }}
+        >
+          <div
+            className={cn(
+              "pointer-events-auto pb-2 transition-none w-full flex justify-center",
+              isMobile && isKeyboardOpen ? "ios-keyboard-safe-area" : "bottom-safe-area"
+            )}
+            style={{
+              marginBottom: isMobile
+                ? (!isKeyboardOpen && inputBarOffset > 0 ? `${inputBarOffset}px` : '16px')
+                : '16px'
+            }}
+            data-keyboard-avoid="true"
+          >
+            {renderCommentUI()}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

packages/ui/src/components/views/index.ts

@@ -1,4 +1,5 @@
 export { ChatView } from './ChatView';
+export { PlanView } from './PlanView';
 export { GitView } from './GitView';
 export { DiffView, useDiffFileCount } from './DiffView';
 export { TerminalView } from './TerminalView';