Release v0.0.60-beta.4

## What's New

### Improvements & Fixes
- **Plan sidebar in split view** — Fixed plan dialog staying open when switching between panes
- **Split view pane activation** — Clicking a pane now activates it immediately
- **Plan approval in split view** — Fixed plan approval flow in split view mode

Author: serafimcloud

package.json

@@ -1,6 +1,6 @@
 {
   "name": "21st-desktop",
-  "version": "0.0.60-beta.3",
+  "version": "0.0.60-beta.4",
   "private": true,
   "description": "1Code - UI for parallel work with AI agents",
   "author": {

src/renderer/features/agents/atoms/index.ts

@@ -780,6 +780,16 @@ export const agentsPlanSidebarWidthAtom = atomWithStorage<number>(
   { getOnInit: true },
 )
 
+// Plan sidebar display mode - sidebar (side peek) or center dialog
+export type PlanDisplayMode = "side-peek" | "center-peek"
+
+export const planDisplayModeAtom = atomWithStorage<PlanDisplayMode>(
+  "agents:planDisplayMode",
+  "side-peek",
+  undefined,
+  { getOnInit: true },
+)
+
 // Plan sidebar open state storage - stores per chatId (persisted)
 // Uses window-scoped storage so each window can have independent plan sidebar states
 const planSidebarOpenStorageAtom = atomWithWindowStorage<Record<string, boolean>>(

src/renderer/features/agents/main/active-chat.tsx

@@ -132,6 +132,7 @@ import {
   pendingPrMessageAtom,
   pendingReviewMessageAtom,
   pendingUserQuestionsAtom,
+  planDisplayModeAtom,
   planEditRefetchTriggerAtomFamily,
   planSidebarOpenAtomFamily,
   QUESTIONS_SKIPPED_MESSAGE,
@@ -145,6 +146,7 @@ import {
   undoStackAtom,
   workspaceDiffCacheAtomFamily,
   type AgentMode,
+  type PlanDisplayMode,
   type SelectedCommit
 } from "../atoms"
 import { BUILTIN_SLASH_COMMANDS } from "../commands"
@@ -3075,11 +3077,11 @@ const ChatViewInner = memo(function ChatViewInner({
   // Handle pending "Build plan" from sidebar
   useEffect(() => {
     // Only trigger if this is the target sub-chat and we're active
-    if (pendingBuildPlanSubChatId === subChatId && isActive && !isSplitPane) {
+    if (pendingBuildPlanSubChatId === subChatId && isActive) {
       setPendingBuildPlanSubChatId(null) // Clear immediately to prevent double-trigger
       handleApprovePlan()
     }
-  }, [pendingBuildPlanSubChatId, subChatId, isActive, isSplitPane, setPendingBuildPlanSubChatId, handleApprovePlan])
+  }, [pendingBuildPlanSubChatId, subChatId, isActive, setPendingBuildPlanSubChatId, handleApprovePlan])
 
   // Detect PR URLs in assistant messages and store them
   // Initialize with existing PR URL to prevent duplicate toast on re-mount
@@ -4710,12 +4712,20 @@ export function ChatView({
     [activeSubChatIdForPlan],
   )
   const [isPlanSidebarOpen, setIsPlanSidebarOpen] = useAtom(planSidebarAtom)
+  const [planDisplayMode, setPlanDisplayMode] = useAtom(planDisplayModeAtom)
   const currentPlanPathAtom = useMemo(
     () => currentPlanPathAtomFamily(activeSubChatIdForPlan || ""),
     [activeSubChatIdForPlan],
   )
   const [currentPlanPath, setCurrentPlanPath] = useAtom(currentPlanPathAtom)
 
+  // Effective plan display mode: force center-peek in split view, otherwise use user preference
+  // Computed early because mutual exclusion logic needs it
+  const isSplitViewForPlan = useAgentSubChatStore(
+    useShallow((state) => state.splitPaneIds.length >= 2 && state.splitPaneIds.includes(state.activeSubChatId))
+  )
+  const effectivePlanDisplayMode: PlanDisplayMode = isSplitViewForPlan ? "center-peek" : planDisplayMode
+
   // File viewer sidebar state - per-chat open file path
   const fileViewerAtom = useMemo(
     () => fileViewerOpenAtomFamily(chatId),
@@ -4736,16 +4746,16 @@ export function ChatView({
   const toggleTerminalHotkey = useResolvedHotkeyDisplay("toggle-terminal")
 
   // Close plan sidebar when switching to a sub-chat that has no plan
+  // Skip in split view — clicking between panes shouldn't close the plan dialog
   const prevSubChatIdRef = useRef(activeSubChatIdForPlan)
   useEffect(() => {
     if (prevSubChatIdRef.current !== activeSubChatIdForPlan) {
-      // Sub-chat changed - if new one has no plan path, close sidebar
-      if (!currentPlanPath) {
+      if (!currentPlanPath && !isSplitViewForPlan) {
         setIsPlanSidebarOpen(false)
       }
       prevSubChatIdRef.current = activeSubChatIdForPlan
     }
-  }, [activeSubChatIdForPlan, currentPlanPath, setIsPlanSidebarOpen])
+  }, [activeSubChatIdForPlan, currentPlanPath, isSplitViewForPlan, setIsPlanSidebarOpen])
   const setPendingBuildPlanSubChatId = useSetAtom(pendingBuildPlanSubChatIdAtom)
 
   // Read plan edit refetch trigger from atom (set by ChatViewInner when Edit completes)
@@ -4813,14 +4823,16 @@ export function ChatView({
   // Track previous states to detect opens/closes
   const prevSidebarStatesRef = useRef({
     details: isDetailsSidebarOpen,
-    plan: isPlanSidebarOpen && !!currentPlanPath,
+    plan: isPlanSidebarOpen && !!currentPlanPath && effectivePlanDisplayMode === "side-peek",
     terminal: isTerminalSidebarOpen,
   })
 
   useEffect(() => {
     const prev = prevSidebarStatesRef.current
     const auto = autoClosedStateRef.current
-    const isPlanOpen = isPlanSidebarOpen && !!currentPlanPath
+    // Only treat plan as a physical sidebar conflict when in side-peek mode
+    // In center-peek (dialog) mode, plan floats above everything — no conflict
+    const isPlanOpen = isPlanSidebarOpen && !!currentPlanPath && effectivePlanDisplayMode === "side-peek"
 
     // Detect state changes
     const detailsJustOpened = isDetailsSidebarOpen && !prev.details
@@ -4885,6 +4897,7 @@ export function ChatView({
     isDetailsSidebarOpen,
     isPlanSidebarOpen,
     currentPlanPath,
+    effectivePlanDisplayMode,
     isTerminalSidebarOpen,
     terminalDisplayMode,
     setIsDetailsSidebarOpen,
@@ -5102,6 +5115,12 @@ export function ChatView({
     }))
   )
 
+  // isSplitView alias using local splitPaneIds (for JSX rendering)
+  const isSplitView = splitPaneIds.length >= 2 && splitPaneIds.includes(activeSubChatId)
+  const handlePlanDisplayModeChange = useCallback((mode: PlanDisplayMode) => {
+    setPlanDisplayMode(mode)
+  }, [setPlanDisplayMode])
+
   // Clear sub-chat "unseen changes" indicator when sub-chat becomes active
   useEffect(() => {
     if (!activeSubChatId) return
@@ -7259,9 +7278,8 @@ Make sure to preserve all functionality from both branches when resolving confli
           )}
         </div>
 
-        {/* Plan Sidebar - shows plan files on the right (leftmost right sidebar) */}
-        {/* Only show when we have an active sub-chat with a plan */}
-        {!isMobileFullscreen && activeSubChatIdForPlan && (
+        {/* Plan Sidebar - side-peek mode (ResizableSidebar) */}
+        {!isMobileFullscreen && activeSubChatIdForPlan && effectivePlanDisplayMode === "side-peek" && (
           <ResizableSidebar
             isOpen={isPlanSidebarOpen && !!currentPlanPath}
             onClose={() => setIsPlanSidebarOpen(false)}
@@ -7283,9 +7301,30 @@ Make sure to preserve all functionality from both branches when resolving confli
               onBuildPlan={handleApprovePlanFromSidebar}
               refetchTrigger={planEditRefetchTrigger}
               mode={currentMode}
+              displayMode="side-peek"
+              onDisplayModeChange={handlePlanDisplayModeChange}
             />
           </ResizableSidebar>
         )}
+        {/* Plan Sidebar - center-peek mode (Dialog overlay) */}
+        {activeSubChatIdForPlan && effectivePlanDisplayMode === "center-peek" && isPlanSidebarOpen && !!currentPlanPath && (
+          <DiffCenterPeekDialog
+            isOpen={true}
+            onClose={() => setIsPlanSidebarOpen(false)}
+          >
+            <AgentPlanSidebar
+              chatId={activeSubChatIdForPlan}
+              planPath={currentPlanPath}
+              onClose={() => setIsPlanSidebarOpen(false)}
+              onBuildPlan={handleApprovePlanFromSidebar}
+              refetchTrigger={planEditRefetchTrigger}
+              mode={currentMode}
+              displayMode="center-peek"
+              onDisplayModeChange={handlePlanDisplayModeChange}
+              isSplitView={isSplitView}
+            />
+          </DiffCenterPeekDialog>
+        )}
 
         {/* Diff View - hidden on mobile fullscreen and when diff is not available */}
         {/* Supports three display modes: side-peek (sidebar), center-peek (dialog), full-page */}
@@ -7497,7 +7536,7 @@ Make sure to preserve all functionality from both branches when resolving confli
             onBuildPlan={handleApprovePlanFromSidebar}
             planRefetchTrigger={planEditRefetchTrigger}
             activeSubChatId={activeSubChatIdForPlan}
-            isPlanSidebarOpen={isPlanSidebarOpen && !!currentPlanPath}
+            isPlanSidebarOpen={isPlanSidebarOpen && !!currentPlanPath && effectivePlanDisplayMode === "side-peek"}
             isTerminalSidebarOpen={isTerminalSidebarOpen}
             isDiffSidebarOpen={isDiffSidebarOpen}
             diffDisplayMode={diffDisplayMode}

src/renderer/features/agents/main/isolated-message-group.tsx

@@ -197,11 +197,15 @@ export const IsolatedMessageGroup = memo(function IsolatedMessageGroup({
                   if (imageParts.length > 0) {
                     parts.push(imageParts.length === 1 ? "image" : `${imageParts.length} images`)
                   }
-                  const quoteCount = textMentions.filter(m => m.type === "quote" || m.type === "pasted").length
+                  const quoteCount = textMentions.filter(m => m.type === "quote").length
+                  const pastedCount = textMentions.filter(m => m.type === "pasted").length
                   const codeCount = textMentions.filter(m => m.type === "diff").length
                   if (quoteCount > 0) {
                     parts.push(quoteCount === 1 ? "selected text" : `${quoteCount} text selections`)
                   }
+                  if (pastedCount > 0) {
+                    parts.push(pastedCount === 1 ? "pasted text" : `${pastedCount} pasted texts`)
+                  }
                   if (codeCount > 0) {
                     parts.push(codeCount === 1 ? "code selection" : `${codeCount} code selections`)
                   }

src/renderer/features/agents/stores/message-store.ts

@@ -889,12 +889,16 @@ export const syncMessagesWithStatusAtom = atom(
     // 1. msg object itself is mutated in-place
     // 2. msg.parts array is mutated in-place
     // 3. Individual part objects inside parts are mutated in-place
+    const lastMessageId = newIds[newIds.length - 1] ?? null
     for (const msg of messages) {
       const currentAtomValue = get(messageAtomFamily(msg.id))
       const msgChanged = hasMessageChanged(currentSubChatId, msg.id, msg)
+      const isLastMessage = msg.id === lastMessageId
 
       // CRITICAL FIX: Also update if atom is null (not yet populated)
-      if (msgChanged || !currentAtomValue) {
+      // Always refresh the last message because AI SDK can mutate non-last parts
+      // of the current streaming assistant message without changing the last part.
+      if (msgChanged || !currentAtomValue || isLastMessage) {
         // Deep clone message with new parts array and new part objects
         const clonedMsg = {
           ...msg,

src/renderer/features/agents/ui/agent-plan-sidebar.tsx

@@ -1,16 +1,80 @@
 "use client"
 
 import { useCallback, useEffect, useMemo, useState } from "react"
-import { useAtomValue } from "jotai"
+import { Check, X } from "lucide-react"
 import { Button } from "../../../components/ui/button"
-import { IconDoubleChevronRight, IconSpinner, PlanIcon, MarkdownIcon, CodeIcon } from "../../../components/ui/icons"
+import { IconDoubleChevronRight, IconSpinner, PlanIcon, MarkdownIcon, CodeIcon, IconSidePeek, IconCenterPeek } from "../../../components/ui/icons"
 import { Kbd } from "../../../components/ui/kbd"
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/ui/tooltip"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../../components/ui/dropdown-menu"
 import { ChatMarkdownRenderer } from "../../../components/chat-markdown-renderer"
 import { cn } from "../../../lib/utils"
 import { trpc } from "../../../lib/trpc"
 import { CopyButton } from "./message-action-buttons"
-import type { AgentMode } from "../atoms"
+import type { AgentMode, PlanDisplayMode } from "../atoms"
+
+const PLAN_VIEW_MODES = [
+  { value: "side-peek" as const, label: "Sidebar", Icon: IconSidePeek },
+  { value: "center-peek" as const, label: "Dialog", Icon: IconCenterPeek },
+]
+
+function PlanViewModeSwitcher({
+  mode,
+  onModeChange,
+  isSplitView = false,
+}: {
+  mode: PlanDisplayMode
+  onModeChange: (mode: PlanDisplayMode) => void
+  isSplitView?: boolean
+}) {
+  const currentMode = PLAN_VIEW_MODES.find((m) => m.value === mode) ?? PLAN_VIEW_MODES[0]
+  const CurrentIcon = currentMode.Icon
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 w-6 p-0 flex-shrink-0 hover:bg-foreground/10"
+        >
+          <CurrentIcon className="size-4 text-muted-foreground" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="min-w-[160px]">
+        {PLAN_VIEW_MODES.map(({ value, label, Icon }) => {
+          const isDisabled = value === "side-peek" && isSplitView
+          return (
+            <DropdownMenuItem
+              key={value}
+              onClick={() => !isDisabled && onModeChange(value)}
+              className="flex items-center gap-2"
+              disabled={isDisabled}
+            >
+              <Icon className="size-4 text-muted-foreground" />
+              <span className="flex-1">
+                {label}
+                {isDisabled && (
+                  <span className="text-xs text-muted-foreground/60 ml-1">
+                    (split view)
+                  </span>
+                )}
+              </span>
+              {mode === value && !isDisabled && (
+                <Check className="size-4 text-muted-foreground ml-auto" />
+              )}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
 
 interface AgentPlanSidebarProps {
   chatId: string
@@ -21,6 +85,9 @@ interface AgentPlanSidebarProps {
   refetchTrigger?: number
   /** Current agent mode (plan or agent) */
   mode?: AgentMode
+  displayMode?: PlanDisplayMode
+  onDisplayModeChange?: (mode: PlanDisplayMode) => void
+  isSplitView?: boolean
 }
 
 export function AgentPlanSidebar({
@@ -30,6 +97,9 @@ export function AgentPlanSidebar({
   onBuildPlan,
   refetchTrigger,
   mode = "agent",
+  displayMode = "side-peek",
+  onDisplayModeChange,
+  isSplitView = false,
 }: AgentPlanSidebarProps) {
   // View mode: rendered markdown or plaintext
   const [viewMode, setViewMode] = useState<"rendered" | "plaintext">("rendered")
@@ -71,8 +141,19 @@ export function AgentPlanSidebar({
             className="h-6 w-6 p-0 hover:bg-foreground/10 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] text-foreground flex-shrink-0 rounded-md"
             aria-label="Close plan"
           >
-            <IconDoubleChevronRight className="h-4 w-4" />
+            {displayMode === "side-peek" ? (
+              <IconDoubleChevronRight className="h-4 w-4" />
+            ) : (
+              <X className="h-4 w-4" />
+            )}
           </Button>
+          {onDisplayModeChange && (
+            <PlanViewModeSwitcher
+              mode={displayMode}
+              onModeChange={onDisplayModeChange}
+              isSplitView={isSplitView}
+            />
+          )}
           <span className="text-sm font-medium truncate">{planTitle}</span>
         </div>
         <div className="flex items-center gap-1 flex-shrink-0">

src/renderer/features/agents/ui/split-view-container.tsx

@@ -54,6 +54,12 @@ export function SplitViewContainer({
           <div
             style={{ width: `${currentRatios[i] * 100}%` }}
             className="h-full overflow-hidden relative flex flex-col"
+            onPointerDown={() => {
+              const store = useAgentSubChatStore.getState()
+              if (store.activeSubChatId !== pane.id) {
+                store.setActiveSubChat(pane.id)
+              }
+            }}
           >
             {pane.content}
           </div>

src/renderer/features/agents/ui/sub-chat-context-menu.tsx

@@ -92,7 +92,6 @@ export function SubChatContextMenu({
   splitPaneIds,
 }: SubChatContextMenuProps) {
   const closeTabShortcut = useCloseTabShortcut()
-  const newAgentSplitHotkey = useResolvedHotkeyDisplay("new-agent-split")
 
   const handleExport = useCallback((format: ExportFormat) => {
     if (!chatId) return
@@ -138,11 +137,7 @@ export function SubChatContextMenu({
           </ContextMenuSubContent>
         </ContextMenuSub>
       )}
-      {isDesktopApp() && chatId && (
-        <ContextMenuItem onClick={() => openInNewWindow(chatId, subChat.id, isSplitTab ? splitPaneIds : undefined)}>
-          Open in new window
-        </ContextMenuItem>
-      )}
+      <ContextMenuSeparator />
       {isSplitTab ? (
         <>
           {splitPaneCount > 2 && onRemoveFromSplit && (
@@ -160,12 +155,15 @@ export function SubChatContextMenu({
         <ContextMenuItem
           onClick={() => onOpenInSplit(subChat.id)}
           disabled={isActiveTab || isOnlyChat || splitPaneCount >= 6}
-          className="justify-between"
         >
           Add as Split
-          {newAgentSplitHotkey && <Kbd>{newAgentSplitHotkey}</Kbd>}
         </ContextMenuItem>
       ) : null}
+      {isDesktopApp() && chatId && (
+        <ContextMenuItem onClick={() => openInNewWindow(chatId, subChat.id, isSplitTab ? splitPaneIds : undefined)}>
+          Open in new window
+        </ContextMenuItem>
+      )}
       <ContextMenuSeparator />
 
       {showCloseTabOptions ? (