From 1bb265beef9a1ef125bd373e41b59060291381ce Mon Sep 17 00:00:00 2001
From: Mufeed VH <mufeedvh@gmail.com>
Date: Mon, 23 Jun 2025 00:30:31 +0530
Subject: [PATCH] perf: implement virtual scrolling for message lists

- Replace static rendering with @tanstack/react-virtual
- Optimize rendering for long conversation histories
- Maintain smooth auto-scroll behavior
- Integrate with enhanced message system from upstream

Significantly improves performance when handling extensive
agent execution outputs and long Claude sessions.
---
 src/components/AgentExecution.tsx    | 114 +++++---
 src/components/ClaudeCodeSession.tsx | 420 +++++++++++++++++++--------
 2 files changed, 372 insertions(+), 162 deletions(-)

diff --git a/src/components/AgentExecution.tsx b/src/components/AgentExecution.tsx
index e057640..115fb42 100644
--- a/src/components/AgentExecution.tsx
+++ b/src/components/AgentExecution.tsx
@@ -25,6 +25,7 @@ import { StreamMessage } from "./StreamMessage";
 import { ExecutionControlBar } from "./ExecutionControlBar";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { enhanceMessages, type EnhancedMessage } from "@/types/enhanced-messages";
+import { useVirtualizer } from "@tanstack/react-virtual";
 
 interface AgentExecutionProps {
   /**
@@ -94,6 +95,21 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
   const unlistenRefs = useRef<UnlistenFn[]>([]);
   const elapsedTimeIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
+  // Virtualizers for efficient, smooth scrolling of potentially very long outputs
+  const rowVirtualizer = useVirtualizer({
+    count: enhancedMessages.length,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => 150, // fallback estimate; dynamically measured afterwards
+    overscan: 5,
+  });
+
+  const fullscreenRowVirtualizer = useVirtualizer({
+    count: enhancedMessages.length,
+    getScrollElement: () => fullscreenScrollRef.current,
+    estimateSize: () => 150,
+    overscan: 5,
+  });
+
   useEffect(() => {
     // Clean up listeners on unmount
     return () => {
@@ -116,17 +132,19 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
   };
 
   useEffect(() => {
-    // Only auto-scroll if user hasn't manually scrolled OR if they're at the bottom
+    if (enhancedMessages.length === 0) return;
+
+    // Auto-scroll only if the user has not manually scrolled OR they are still at the bottom
     const shouldAutoScroll = !hasUserScrolled || isAtBottom();
-    
+
     if (shouldAutoScroll) {
-      const endRef = isFullscreenModalOpen ? fullscreenMessagesEndRef.current : messagesEndRef.current;
-      if (endRef) {
-        endRef.scrollIntoView({ behavior: "smooth" });
+      if (isFullscreenModalOpen) {
+        fullscreenRowVirtualizer.scrollToIndex(enhancedMessages.length - 1, { align: "end", behavior: "smooth" });
+      } else {
+        rowVirtualizer.scrollToIndex(enhancedMessages.length - 1, { align: "end", behavior: "smooth" });
       }
     }
-  }, [messages, hasUserScrolled, isFullscreenModalOpen]);
-
+  }, [enhancedMessages.length, hasUserScrolled, isFullscreenModalOpen, rowVirtualizer, fullscreenRowVirtualizer]);
 
   // Update elapsed time while running
   useEffect(() => {
@@ -621,21 +639,32 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
               </div>
             )}
 
-            <AnimatePresence>
-              {enhancedMessages.map((message, index) => (
-                <motion.div
-                  key={index}
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.2 }}
-                  className="mb-4"
-                >
-                  <ErrorBoundary>
-                    <StreamMessage message={message} streamMessages={enhancedMessages} />
-                  </ErrorBoundary>
-                </motion.div>
-              ))}
-            </AnimatePresence>
+            <div
+              className="relative w-full max-w-5xl mx-auto"
+              style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
+            >
+              <AnimatePresence>
+                {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+                  const message = enhancedMessages[virtualItem.index];
+                  return (
+                    <motion.div
+                      key={virtualItem.key}
+                      data-index={virtualItem.index}
+                      ref={(el) => el && rowVirtualizer.measureElement(el)}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.2 }}
+                      className="absolute inset-x-4 pb-4"
+                      style={{ top: virtualItem.start }}
+                    >
+                      <ErrorBoundary>
+                        <StreamMessage message={message} streamMessages={enhancedMessages} />
+                      </ErrorBoundary>
+                    </motion.div>
+                  );
+                })}
+              </AnimatePresence>
+            </div>
             
             <div ref={messagesEndRef} />
             </div>
@@ -751,21 +780,32 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
                 </div>
               )}
 
-              <AnimatePresence>
-                {enhancedMessages.map((message, index) => (
-                  <motion.div
-                    key={index}
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.2 }}
-                    className="mb-4"
-                  >
-                    <ErrorBoundary>
-                      <StreamMessage message={message} streamMessages={enhancedMessages} />
-                    </ErrorBoundary>
-                  </motion.div>
-                ))}
-              </AnimatePresence>
+              <div
+                className="relative w-full max-w-5xl mx-auto"
+                style={{ height: `${fullscreenRowVirtualizer.getTotalSize()}px` }}
+              >
+                <AnimatePresence>
+                  {fullscreenRowVirtualizer.getVirtualItems().map((virtualItem) => {
+                    const message = enhancedMessages[virtualItem.index];
+                    return (
+                      <motion.div
+                        key={virtualItem.key}
+                        data-index={virtualItem.index}
+                        ref={(el) => el && fullscreenRowVirtualizer.measureElement(el)}
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="absolute inset-x-4 pb-4"
+                        style={{ top: virtualItem.start }}
+                      >
+                        <ErrorBoundary>
+                          <StreamMessage message={message} streamMessages={enhancedMessages} />
+                        </ErrorBoundary>
+                      </motion.div>
+                    );
+                  })}
+                </AnimatePresence>
+              </div>
               
               <div ref={fullscreenMessagesEndRef} />
             </div>
diff --git a/src/components/ClaudeCodeSession.tsx b/src/components/ClaudeCodeSession.tsx
index a81cb52..b5956ba 100644
--- a/src/components/ClaudeCodeSession.tsx
+++ b/src/components/ClaudeCodeSession.tsx
@@ -8,7 +8,8 @@ import {
   Copy,
   ChevronDown,
   GitBranch,
-  Settings
+  Settings,
+  Globe
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -19,14 +20,19 @@ import { cn } from "@/lib/utils";
 import { open } from "@tauri-apps/plugin-dialog";
 import { listen, type UnlistenFn } from "@tauri-apps/api/event";
 import { StreamMessage } from "./StreamMessage";
-import { FloatingPromptInput } from "./FloatingPromptInput";
+import { FloatingPromptInput, type FloatingPromptInputRef } from "./FloatingPromptInput";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { TokenCounter } from "./TokenCounter";
 import { TimelineNavigator } from "./TimelineNavigator";
 import { CheckpointSettings } from "./CheckpointSettings";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { SplitPane } from "@/components/ui/split-pane";
+import { WebviewPreview } from "./WebviewPreview";
+import { PreviewPromptDialog } from "./PreviewPromptDialog";
 import type { ClaudeStreamMessage } from "./AgentExecution";
 import { enhanceMessages, type EnhancedMessage } from "@/types/enhanced-messages";
+import { useVirtualizer } from "@tanstack/react-virtual";
 
 interface ClaudeCodeSessionProps {
   /**
@@ -67,7 +73,6 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   const [rawJsonlOutput, setRawJsonlOutput] = useState<string[]>([]);
   const [copyPopoverOpen, setCopyPopoverOpen] = useState(false);
   const [isFirstPrompt, setIsFirstPrompt] = useState(!session);
-  const [currentModel, setCurrentModel] = useState<"sonnet" | "opus">("sonnet");
   const [totalTokens, setTotalTokens] = useState(0);
   const [extractedSessionInfo, setExtractedSessionInfo] = useState<{
     sessionId: string;
@@ -80,9 +85,18 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   const [forkCheckpointId, setForkCheckpointId] = useState<string | null>(null);
   const [forkSessionName, setForkSessionName] = useState("");
   
-  const messagesEndRef = useRef<HTMLDivElement>(null);
+  // New state for preview feature
+  const [showPreview, setShowPreview] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState("");
+  const [detectedUrl, setDetectedUrl] = useState("");
+  const [showPreviewPrompt, setShowPreviewPrompt] = useState(false);
+  const [splitPosition, setSplitPosition] = useState(50);
+  const [isPreviewMaximized, setIsPreviewMaximized] = useState(false);
+  
+  const parentRef = useRef<HTMLDivElement>(null);
   const unlistenRefs = useRef<UnlistenFn[]>([]);
   const hasActiveSessionRef = useRef(false);
+  const floatingPromptRef = useRef<FloatingPromptInputRef>(null);
 
   // Get effective session info (from prop or extracted) - use useMemo to ensure it updates
   const effectiveSession = useMemo(() => {
@@ -98,6 +112,13 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
     return null;
   }, [session, extractedSessionInfo, projectPath]);
 
+  const rowVirtualizer = useVirtualizer({
+    count: enhancedMessages.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 150, // Estimate, will be dynamically measured
+    overscan: 5,
+  });
+
   // Debug logging
   useEffect(() => {
     console.log('[ClaudeCodeSession] State update:', {
@@ -125,8 +146,10 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
 
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [enhancedMessages]);
+    if (enhancedMessages.length > 0) {
+      rowVirtualizer.scrollToIndex(enhancedMessages.length - 1, { align: 'end', behavior: 'smooth' });
+    }
+  }, [enhancedMessages.length, rowVirtualizer]);
 
   // Calculate total tokens from messages
   useEffect(() => {
@@ -195,7 +218,6 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
     try {
       setIsLoading(true);
       setError(null);
-      setCurrentModel(model);
       hasActiveSessionRef.current = true;
 
       // Add the user message immediately to the UI
@@ -453,6 +475,51 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
     }
   };
 
+  // Handle URL detection from terminal output
+  const handleLinkDetected = (url: string) => {
+    if (!showPreview && !showPreviewPrompt) {
+      setDetectedUrl(url);
+      setShowPreviewPrompt(true);
+    }
+  };
+
+  const handleOpenPreview = () => {
+    setPreviewUrl(detectedUrl);
+    setShowPreview(true);
+    setShowPreviewPrompt(false);
+  };
+
+  const handleClosePreview = () => {
+    setShowPreview(false);
+    setIsPreviewMaximized(false);
+    // Keep the previewUrl so it can be restored when reopening
+  };
+
+  const handlePreviewScreenshot = async (imagePath: string) => {
+    console.log("Screenshot captured:", imagePath);
+    
+    // Add the screenshot to the floating prompt input
+    if (floatingPromptRef.current) {
+      floatingPromptRef.current.addImage(imagePath);
+      
+      // Show a subtle animation/feedback that the image was added
+      // You could add a toast notification here if desired
+    }
+  };
+
+  const handlePreviewUrlChange = (url: string) => {
+    console.log('[ClaudeCodeSession] Preview URL changed to:', url);
+    setPreviewUrl(url);
+  };
+
+  const handleTogglePreviewMaximize = () => {
+    setIsPreviewMaximized(!isPreviewMaximized);
+    // Reset split position when toggling maximize
+    if (isPreviewMaximized) {
+      setSplitPosition(50);
+    }
+  };
+
   // Clean up listeners on component unmount
   useEffect(() => {
     return () => {
@@ -466,9 +533,132 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
     };
   }, []);
 
+  const messagesList = (
+    <div
+      ref={parentRef}
+      className="flex-1 overflow-y-auto relative"
+      style={{
+        contain: 'strict',
+      }}
+    >
+      <div
+        className="relative w-full max-w-5xl mx-auto px-4 py-4"
+        style={{
+          height: `${rowVirtualizer.getTotalSize()}px`,
+        }}
+      >
+        <AnimatePresence>
+          {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+            const message = enhancedMessages[virtualItem.index];
+            return (
+              <motion.div
+                key={virtualItem.key}
+                data-index={virtualItem.index}
+                ref={(el) => el && rowVirtualizer.measureElement(el)}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.3 }}
+                className="absolute inset-x-4 pb-4"
+                style={{
+                  top: virtualItem.start,
+                }}
+              >
+                <StreamMessage 
+                  message={message} 
+                  streamMessages={enhancedMessages}
+                  onLinkDetected={handleLinkDetected}
+                />
+              </motion.div>
+            );
+          })}
+        </AnimatePresence>
+      </div>
+
+      {/* Loading and Error indicators positioned relative to the scroll container */}
+      <div className="sticky bottom-0 w-full flex flex-col items-center pb-40">
+        {isLoading && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="flex items-center justify-center py-4 mt-4"
+          >
+            <Loader2 className="h-6 w-6 animate-spin text-primary" />
+          </motion.div>
+        )}
+        
+        {error && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive mt-4 w-full max-w-5xl mx-auto"
+          >
+            {error}
+          </motion.div>
+        )}
+      </div>
+    </div>
+  );
+
+  const projectPathInput = !session && (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay: 0.1 }}
+      className="p-4 border-b border-border flex-shrink-0"
+    >
+      <Label htmlFor="project-path" className="text-sm font-medium">
+        Project Directory
+      </Label>
+      <div className="flex items-center gap-2 mt-1">
+        <Input
+          id="project-path"
+          value={projectPath}
+          onChange={(e) => setProjectPath(e.target.value)}
+          placeholder="/path/to/your/project"
+          className="flex-1"
+          disabled={isLoading}
+        />
+        <Button
+          onClick={handleSelectPath}
+          size="icon"
+          variant="outline"
+          disabled={isLoading}
+        >
+          <FolderOpen className="h-4 w-4" />
+        </Button>
+      </div>
+    </motion.div>
+  );
+
+  // If preview is maximized, render only the WebviewPreview in full screen
+  if (showPreview && isPreviewMaximized) {
+    return (
+      <AnimatePresence>
+        <motion.div 
+          className="fixed inset-0 z-50 bg-background"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          <WebviewPreview
+            initialUrl={previewUrl}
+            onClose={handleClosePreview}
+            onScreenshot={handlePreviewScreenshot}
+            isMaximized={isPreviewMaximized}
+            onToggleMaximize={handleTogglePreviewMaximize}
+            onUrlChange={handlePreviewUrlChange}
+            className="h-full"
+          />
+        </motion.div>
+      </AnimatePresence>
+    );
+  }
+
   return (
     <div className={cn("flex flex-col h-full bg-background", className)}>
-      <div className="w-full max-w-5xl mx-auto h-full flex flex-col">
+      <div className="w-full h-full flex flex-col">
         {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
@@ -521,6 +711,36 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
               </>
             )}
             
+            {/* Preview Button */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      if (!showPreview) {
+                        // Open with current URL or empty URL to show the instruction state
+                        setShowPreview(true);
+                      } else {
+                        handleClosePreview();
+                      }
+                    }}
+                    className="flex items-center gap-2"
+                  >
+                    <Globe className="h-4 w-4" />
+                    {showPreview ? "Close Preview" : "Preview"}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {showPreview 
+                    ? "Close the preview pane" 
+                    : "Open a browser preview to test your web applications"
+                  }
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            
             {enhancedMessages.length > 0 && (
               <Popover
                 trigger={
@@ -539,148 +759,98 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                     <Button
                       variant="ghost"
                       size="sm"
+                      onClick={handleCopyAsMarkdown}
                       className="w-full justify-start"
-                      onClick={handleCopyAsJsonl}
                     >
-                      Copy as JSONL
+                      Copy as Markdown
                     </Button>
                     <Button
                       variant="ghost"
                       size="sm"
+                      onClick={handleCopyAsJsonl}
                       className="w-full justify-start"
-                      onClick={handleCopyAsMarkdown}
                     >
-                      Copy as Markdown
+                      Copy as JSONL
                     </Button>
                   </div>
                 }
                 open={copyPopoverOpen}
                 onOpenChange={setCopyPopoverOpen}
-                align="end"
               />
             )}
+            
+            <TokenCounter tokens={totalTokens} />
           </div>
         </motion.div>
 
-        {/* Timeline Navigator */}
-        {showTimeline && effectiveSession && (
-          <div className="border-b border-border">
-            <div className="p-4">
-              <TimelineNavigator
-                sessionId={effectiveSession.id}
-                projectId={effectiveSession.project_id}
-                projectPath={projectPath}
-                currentMessageIndex={messages.length - 1}
-                onCheckpointSelect={handleCheckpointSelect}
-                refreshVersion={timelineVersion}
-                onFork={handleFork}
-              />
-            </div>
-          </div>
-        )}
-
-        {/* Project Path Selection (only for new sessions) */}
-        {!session && (
-          <div className="p-4 border-b border-border space-y-4">
-            {/* Error display */}
-            {error && (
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-xs text-destructive"
-              >
-                {error}
-              </motion.div>
-            )}
-
-            {/* Project Path */}
-            <div className="space-y-2">
-              <Label>Project Path</Label>
-              <div className="flex gap-2">
-                <Input
-                  value={projectPath}
-                  onChange={(e) => setProjectPath(e.target.value)}
-                  placeholder="Select or enter project path"
-                  disabled={hasActiveSessionRef.current}
-                  className="flex-1"
+        {/* Main Content Area */}
+        <div className="flex-1 overflow-hidden">
+          {showPreview ? (
+            // Split pane layout when preview is active
+            <SplitPane
+              left={
+                <div className="h-full flex flex-col">
+                  {projectPathInput}
+                  {messagesList}
+                </div>
+              }
+              right={
+                <WebviewPreview
+                  initialUrl={previewUrl}
+                  onClose={handleClosePreview}
+                  onScreenshot={handlePreviewScreenshot}
+                  isMaximized={isPreviewMaximized}
+                  onToggleMaximize={handleTogglePreviewMaximize}
+                  onUrlChange={handlePreviewUrlChange}
                 />
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={handleSelectPath}
-                  disabled={hasActiveSessionRef.current}
-                >
-                  <FolderOpen className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Messages Display */}
-        <div className="flex-1 overflow-y-auto p-4 space-y-2 pb-40">
-          {enhancedMessages.length === 0 && !isLoading && (
-            <div className="flex flex-col items-center justify-center h-full text-center">
-              <Terminal className="h-16 w-16 text-muted-foreground mb-4" />
-              <h3 className="text-lg font-medium mb-2">Ready to Start</h3>
-              <p className="text-sm text-muted-foreground">
-                {session 
-                  ? "Send a message to continue this conversation" 
-                  : "Select a project path and send your first prompt"
-                }
-              </p>
+              }
+              initialSplit={splitPosition}
+              onSplitChange={setSplitPosition}
+              minLeftWidth={400}
+              minRightWidth={400}
+              className="h-full"
+            />
+          ) : (
+            // Original layout when no preview
+            <div className="h-full flex flex-col max-w-5xl mx-auto">
+              {projectPathInput}
+              {messagesList}
             </div>
           )}
-
-          {isLoading && enhancedMessages.length === 0 && (
-            <div className="flex items-center justify-center h-full">
-              <div className="flex items-center gap-3">
-                <Loader2 className="h-6 w-6 animate-spin" />
-                <span className="text-sm text-muted-foreground">
-                  {session ? "Loading session history..." : "Initializing Claude Code..."}
-                </span>
-              </div>
-            </div>
-          )}
-
-          <AnimatePresence>
-            {enhancedMessages.map((message, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.2 }}
-              >
-                <ErrorBoundary>
-                  <StreamMessage message={message} streamMessages={enhancedMessages} />
-                </ErrorBoundary>
-              </motion.div>
-            ))}
-          </AnimatePresence>
-          
-          {/* Show loading indicator when processing, even if there are messages */}
-          {isLoading && enhancedMessages.length > 0 && (
-            <div className="flex items-center gap-2 p-4">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-sm text-muted-foreground">Processing...</span>
-            </div>
-          )}
-          
-          <div ref={messagesEndRef} />
         </div>
+
+        {/* Floating Prompt Input - Always visible */}
+        <ErrorBoundary>
+          <FloatingPromptInput
+            ref={floatingPromptRef}
+            onSend={handleSendPrompt}
+            isLoading={isLoading}
+            disabled={!projectPath}
+            projectPath={projectPath}
+          />
+        </ErrorBoundary>
+
+        {/* Timeline */}
+        {showTimeline && effectiveSession && (
+          <TimelineNavigator
+            sessionId={effectiveSession.id}
+            projectId={effectiveSession.project_id}
+            projectPath={projectPath}
+            currentMessageIndex={messages.length - 1}
+            onCheckpointSelect={handleCheckpointSelect}
+            onFork={handleFork}
+            refreshVersion={timelineVersion}
+          />
+        )}
       </div>
 
-      {/* Floating Prompt Input */}
-      <FloatingPromptInput
-        onSend={handleSendPrompt}
-        isLoading={isLoading}
-        disabled={!projectPath && !session}
-        defaultModel={currentModel}
-        projectPath={projectPath}
+      {/* Preview Prompt Dialog */}
+      <PreviewPromptDialog
+        isOpen={showPreviewPrompt}
+        url={detectedUrl}
+        onConfirm={handleOpenPreview}
+        onCancel={() => setShowPreviewPrompt(false)}
       />
-      
-      {/* Token Counter */}
-      <TokenCounter tokens={totalTokens} />
 
       {/* Fork Dialog */}
       <Dialog open={showForkDialog} onOpenChange={setShowForkDialog}>