diff --git a/frontend/components/code-component.tsx b/frontend/components/code-component.tsx
index e612484d..b16fbe18 100644
--- a/frontend/components/code-component.tsx
+++ b/frontend/components/code-component.tsx
@@ -1,7 +1,6 @@
-import { Check, Copy } from "lucide-react";
-import { useState } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { Check, ChevronDown, ChevronUp, Copy } from "lucide-react";
+import { memo, useMemo, useState } from "react";
+import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 
 type CodeComponentProps = {
@@ -9,8 +8,23 @@ type CodeComponentProps = {
   language: string;
 };
 
-export default function CodeComponent({ code, language }: CodeComponentProps) {
+const CodeComponent = memo(function CodeComponent({
+  code,
+  language,
+}: CodeComponentProps) {
   const [isCopied, setIsCopied] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+
+  const { lineCount, shouldCollapse, previewCode } = useMemo(() => {
+    const lines = code.split("\n");
+    const lineCount = lines.length;
+    const shouldCollapse = lineCount > 10;
+    const previewCode = shouldCollapse
+      ? lines.slice(0, 8).join("\n") + "\n..."
+      : code;
+
+    return { lineCount, shouldCollapse, previewCode };
+  }, [code]);
 
   const copyToClipboard = () => {
     if (!navigator.clipboard || !navigator.clipboard.writeText) {
@@ -26,31 +40,111 @@ export default function CodeComponent({ code, language }: CodeComponentProps) {
     });
   };
 
+  const displayCode = shouldCollapse && !isExpanded ? previewCode : code;
+  const maxHeight = isExpanded ? "600px" : shouldCollapse ? "200px" : "400px";
+
   return (
     <div
-      className="mt-2 relative flex w-full flex-col overflow-hidden rounded-md text-left dark"
+      className="mt-2 mb-4 relative flex w-full max-w-full flex-col overflow-hidden rounded-lg border border-border bg-muted/30 text-left"
       data-testid="chat-code-tab"
     >
-      <Button
-        variant="ghost"
-        size="icon"
-        className="text-muted-foreground hover:bg-card absolute top-2 right-2"
-        data-testid="copy-code-button"
-        onClick={copyToClipboard}
-      >
-        {isCopied ? (
-          <Check className="h-4 w-4" />
-        ) : (
-          <Copy className="h-4 w-4" />
+      {/* Header with language and controls */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border bg-muted/50">
+        <div className="flex items-center gap-2">
+          {language && (
+            <Badge variant="secondary" className="text-xs font-mono">
+              {language.toLowerCase()}
+            </Badge>
+          )}
+          <span className="text-xs text-muted-foreground">
+            {lineCount} line{lineCount !== 1 ? "s" : ""}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {shouldCollapse && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+              onClick={() => setIsExpanded(!isExpanded)}
+            >
+              {isExpanded ? (
+                <>
+                  <ChevronUp className="h-3 w-3 mr-1" />
+                  Collapse
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="h-3 w-3 mr-1" />
+                  Expand
+                </>
+              )}
+            </Button>
+          )}
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-muted-foreground hover:text-foreground"
+            data-testid="copy-code-button"
+            onClick={copyToClipboard}
+          >
+            {isCopied ? (
+              <>
+                <Check className="h-3 w-3 mr-1" />
+                Copied
+              </>
+            ) : (
+              <>
+                <Copy className="h-3 w-3 mr-1" />
+                Copy
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Code content */}
+      <div className="relative overflow-hidden" style={{ maxHeight }}>
+        <div
+          className="overflow-auto max-h-full"
+          style={{
+            maxHeight: maxHeight,
+            scrollBehavior: "auto",
+            overscrollBehavior: "auto",
+            scrollbarGutter: "stable",
+            backgroundColor: "hsl(var(--muted))",
+          }}
+        >
+          <div
+            className="text-sm font-mono leading-relaxed whitespace-pre-wrap text-foreground"
+            style={{
+              fontSize: "13px",
+              lineHeight: "1.6",
+              fontFamily:
+                'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+              wordWrap: "break-word",
+              overflowWrap: "anywhere",
+              whiteSpace: "pre-wrap",
+              overflowAnchor: "none",
+              padding: "12px 16px 12px 16px",
+              margin: "0",
+              backgroundColor: "hsl(var(--muted))",
+              color: "hsl(var(--foreground))",
+            }}
+          >
+            {displayCode}
+          </div>
+        </div>
+
+        {/* Fade overlay for collapsed state */}
+        {shouldCollapse && !isExpanded && (
+          <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-muted/30 to-transparent pointer-events-none" />
         )}
-      </Button>
-      <SyntaxHighlighter
-        language={language.toLowerCase()}
-        style={tomorrow}
-        className="!mt-0 h-full w-full overflow-scroll !rounded-b-md !rounded-t-none border border-border text-left !custom-scroll !text-sm"
-      >
-        {code}
-      </SyntaxHighlighter>
+      </div>
     </div>
   );
-}
+});
+
+export default CodeComponent;
diff --git a/frontend/components/markdown-renderer.tsx b/frontend/components/markdown-renderer.tsx
index d6c8c81a..a9a710ad 100644
--- a/frontend/components/markdown-renderer.tsx
+++ b/frontend/components/markdown-renderer.tsx
@@ -1,8 +1,9 @@
+import { cn } from "@/lib/utils";
+import { useMemo } from "react";
 import Markdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import { cn } from "@/lib/utils";
 import CodeComponent from "./code-component";
 
 type MarkdownRendererProps = {
@@ -48,92 +49,176 @@ export const cleanupTableEmptyCells = (text: string): string => {
     })
     .join("\n");
 };
+
 export const MarkdownRenderer = ({ chatMessage }: MarkdownRendererProps) => {
   // Process the chat message to handle <think> tags and clean up tables
   const processedChatMessage = preprocessChatMessage(chatMessage);
 
+  // Memoize the components object to prevent CodeComponent recreation
+  const markdownComponents = useMemo(
+    () => ({
+      p({ node, ...props }: { node?: any; [key: string]: any }) {
+        return (
+          <p className="leading-relaxed mb-2 last:mb-0">{props.children}</p>
+        );
+      },
+      ol({ node, ...props }: { node?: any; [key: string]: any }) {
+        return <ol className="max-w-full space-y-1">{props.children}</ol>;
+      },
+      ul({ node, ...props }: { node?: any; [key: string]: any }) {
+        return <ul className="max-w-full space-y-1">{props.children}</ul>;
+      },
+      li({ node, ...props }: { node?: any; [key: string]: any }) {
+        return <li className="leading-relaxed">{props.children}</li>;
+      },
+      h1({ node, ...props }: { node?: any; [key: string]: any }) {
+        return (
+          <h1 className="text-2xl font-semibold mb-4 mt-6 first:mt-0">
+            {props.children}
+          </h1>
+        );
+      },
+      h2({ node, ...props }: { node?: any; [key: string]: any }) {
+        return (
+          <h2 className="text-xl font-semibold mb-3 mt-5 first:mt-0">
+            {props.children}
+          </h2>
+        );
+      },
+      h3({ node, ...props }: { node?: any; [key: string]: any }) {
+        return (
+          <h3 className="text-lg font-semibold mb-2 mt-4 first:mt-0">
+            {props.children}
+          </h3>
+        );
+      },
+      h4({ node, ...props }: { node?: any; [key: string]: any }) {
+        return (
+          <h4 className="text-base font-semibold mb-2 mt-3 first:mt-0">
+            {props.children}
+          </h4>
+        );
+      },
+      hr({ node, ...props }: { node?: any; [key: string]: any }) {
+        return <hr className="w-full my-6 border-border" />;
+      },
+      blockquote({ node, ...props }: { node?: any; [key: string]: any }) {
+        return (
+          <blockquote className="border-l-4 border-primary/30 bg-muted/50 px-4 py-3 my-4 rounded-r-md italic">
+            {props.children}
+          </blockquote>
+        );
+      },
+      pre({ node, ...props }: { node?: any; [key: string]: any }) {
+        return <>{props.children}</>;
+      },
+      table: ({ node, ...props }: { node?: any; [key: string]: any }) => {
+        return (
+          <div className="my-6 max-w-full overflow-hidden rounded-lg border border-border bg-muted/30">
+            <div className="max-h-[600px] w-full overflow-auto">
+              <table className="w-full text-sm">{props.children}</table>
+            </div>
+          </div>
+        );
+      },
+      thead: ({ node, ...props }: { node?: any; [key: string]: any }) => {
+        return (
+          <thead className="bg-muted/70 border-b border-border">
+            {props.children}
+          </thead>
+        );
+      },
+      tbody: ({ node, ...props }: { node?: any; [key: string]: any }) => {
+        return (
+          <tbody className="divide-y divide-border">{props.children}</tbody>
+        );
+      },
+      th: ({ node, ...props }: { node?: any; [key: string]: any }) => {
+        return (
+          <th className="px-4 py-3 text-left font-medium text-foreground">
+            {props.children}
+          </th>
+        );
+      },
+      td: ({ node, ...props }: { node?: any; [key: string]: any }) => {
+        return (
+          <td className="px-4 py-3 text-muted-foreground">{props.children}</td>
+        );
+      },
+      code: ({
+        node,
+        className,
+        inline,
+        children,
+        ...props
+      }: {
+        node?: any;
+        [key: string]: any;
+      }) => {
+        let content = children as string;
+        if (
+          Array.isArray(children) &&
+          children.length === 1 &&
+          typeof children[0] === "string"
+        ) {
+          content = children[0] as string;
+        }
+        if (typeof content === "string") {
+          if (content.length) {
+            if (content[0] === "▍") {
+              return <span className="form-modal-markdown-span"></span>;
+            }
+
+            // Specifically handle <think> tags that were wrapped in backticks
+            if (content === "<think>" || content === "</think>") {
+              return (
+                <span className="text-muted-foreground font-mono text-sm">
+                  {content}
+                </span>
+              );
+            }
+          }
+
+          const match = /language-(\w+)/.exec(className || "");
+
+          return !inline ? (
+            <CodeComponent
+              key={`${content.slice(0, 50)}-${(match && match[1]) || ""}`}
+              language={(match && match[1]) || ""}
+              code={String(content).replace(/\n$/, "")}
+            />
+          ) : (
+            <code
+              className="bg-muted/60 text-foreground px-1.5 py-0.5 rounded text-sm font-mono border border-border/50"
+              {...props}
+            >
+              {content}
+            </code>
+          );
+        }
+      },
+    }),
+    []
+  );
+
   return (
     <div
       className={cn(
         "markdown prose flex w-full max-w-full flex-col items-baseline text-base font-normal word-break-break-word dark:prose-invert",
-        !chatMessage ? "text-muted-foreground" : "text-primary",
+        !chatMessage ? "text-muted-foreground" : "text-foreground",
+        // Chat-optimized prose styling
+        "prose-sm md:prose-base prose-pre:!m-0 prose-pre:!p-0",
+        "prose-headings:font-semibold prose-headings:tracking-tight",
+        "prose-p:leading-relaxed prose-p:mb-4",
+        "prose-li:my-1 prose-ul:my-2 prose-ol:my-2",
+        "prose-blockquote:border-l-primary/30 prose-blockquote:bg-muted/50 prose-blockquote:px-4 prose-blockquote:py-2 prose-blockquote:rounded-r-md"
       )}
     >
       <Markdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeMathjax, rehypeRaw]}
         linkTarget="_blank"
-        components={{
-          p({ node, ...props }) {
-            return <p className="w-fit max-w-full">{props.children}</p>;
-          },
-          ol({ node, ...props }) {
-            return <ol className="max-w-full">{props.children}</ol>;
-          },
-          h1({ node, ...props }) {
-            return <h1 className="mb-6 mt-4">{props.children}</h1>;
-          },
-          h2({ node, ...props }) {
-            return <h2 className="mb-4 mt-4">{props.children}</h2>;
-          },
-          h3({ node, ...props }) {
-            return <h3 className="mb-2 mt-4">{props.children}</h3>;
-          },
-          hr({ node, ...props }) {
-            return <hr className="w-full mt-4 mb-8" />;
-          },
-          ul({ node, ...props }) {
-            return <ul className="max-w-full mb-2">{props.children}</ul>;
-          },
-          pre({ node, ...props }) {
-            return <>{props.children}</>;
-          },
-          table: ({ node, ...props }) => {
-            return (
-              <div className="max-w-full overflow-hidden rounded-md border bg-muted">
-                <div className="max-h-[600px] w-full overflow-auto p-4">
-                  <table className="!my-0 w-full">{props.children}</table>
-                </div>
-              </div>
-            );
-          },
-
-          code: ({ node, className, inline, children, ...props }) => {
-            let content = children as string;
-            if (
-              Array.isArray(children) &&
-              children.length === 1 &&
-              typeof children[0] === "string"
-            ) {
-              content = children[0] as string;
-            }
-            if (typeof content === "string") {
-              if (content.length) {
-                if (content[0] === "▍") {
-                  return <span className="form-modal-markdown-span"></span>;
-                }
-
-                // Specifically handle <think> tags that were wrapped in backticks
-                if (content === "<think>" || content === "</think>") {
-                  return <span>{content}</span>;
-                }
-              }
-
-              const match = /language-(\w+)/.exec(className || "");
-
-              return !inline ? (
-                <CodeComponent
-                  language={(match && match[1]) || ""}
-                  code={String(content).replace(/\n$/, "")}
-                />
-              ) : (
-                <code className={className} {...props}>
-                  {content}
-                </code>
-              );
-            }
-          },
-        }}
+        components={markdownComponents}
       >
         {processedChatMessage}
       </Markdown>
diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx
index 072567ba..38e8b2c4 100644
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@@ -1,5 +1,14 @@
 "use client";
 
+import { MarkdownRenderer } from "@/components/markdown-renderer";
+import { ProtectedRoute } from "@/components/protected-route";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/contexts/auth-context";
+import { type EndpointType, useChat } from "@/contexts/chat-context";
+import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
+import { useTask } from "@/contexts/task-context";
+import { useLoadingStore } from "@/stores/loadingStore";
 import {
   AtSign,
   Bot,
@@ -15,15 +24,6 @@ import {
   Zap,
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { MarkdownRenderer } from "@/components/markdown-renderer";
-import { ProtectedRoute } from "@/components/protected-route";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { useAuth } from "@/contexts/auth-context";
-import { type EndpointType, useChat } from "@/contexts/chat-context";
-import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
-import { useTask } from "@/contexts/task-context";
-import { useLoadingStore } from "@/stores/loadingStore";
 import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
 import Nudges from "./nudges";
 
@@ -194,7 +194,7 @@ function ChatPage() {
           "Upload failed with status:",
           response.status,
           "Response:",
-          errorText,
+          errorText
         );
         throw new Error("Failed to process document");
       }
@@ -448,7 +448,7 @@ function ChatPage() {
       console.log(
         "Loading conversation with",
         conversationData.messages.length,
-        "messages",
+        "messages"
       );
       // Convert backend message format to frontend Message interface
       const convertedMessages: Message[] = conversationData.messages.map(
@@ -576,7 +576,7 @@ function ChatPage() {
                       ) === "string"
                         ? toolCall.function?.arguments || toolCall.arguments
                         : JSON.stringify(
-                            toolCall.function?.arguments || toolCall.arguments,
+                            toolCall.function?.arguments || toolCall.arguments
                           ),
                     result: toolCall.result,
                     status: "completed",
@@ -595,7 +595,7 @@ function ChatPage() {
           }
 
           return message;
-        },
+        }
       );
 
       setMessages(convertedMessages);
@@ -684,7 +684,7 @@ function ChatPage() {
       console.log(
         "Chat page received file upload error event:",
         filename,
-        error,
+        error
       );
 
       // Replace the last message with error message
@@ -698,37 +698,37 @@ function ChatPage() {
 
     window.addEventListener(
       "fileUploadStart",
-      handleFileUploadStart as EventListener,
+      handleFileUploadStart as EventListener
     );
     window.addEventListener(
       "fileUploaded",
-      handleFileUploaded as EventListener,
+      handleFileUploaded as EventListener
     );
     window.addEventListener(
       "fileUploadComplete",
-      handleFileUploadComplete as EventListener,
+      handleFileUploadComplete as EventListener
     );
     window.addEventListener(
       "fileUploadError",
-      handleFileUploadError as EventListener,
+      handleFileUploadError as EventListener
     );
 
     return () => {
       window.removeEventListener(
         "fileUploadStart",
-        handleFileUploadStart as EventListener,
+        handleFileUploadStart as EventListener
       );
       window.removeEventListener(
         "fileUploaded",
-        handleFileUploaded as EventListener,
+        handleFileUploaded as EventListener
       );
       window.removeEventListener(
         "fileUploadComplete",
-        handleFileUploadComplete as EventListener,
+        handleFileUploadComplete as EventListener
       );
       window.removeEventListener(
         "fileUploadError",
-        handleFileUploadError as EventListener,
+        handleFileUploadError as EventListener
       );
     };
   }, [endpoint, setPreviousResponseIds]);
@@ -755,7 +755,7 @@ function ChatPage() {
   }, [isFilterDropdownOpen]);
 
   const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
-    previousResponseIds[endpoint],
+    previousResponseIds[endpoint]
   );
 
   const handleSSEStream = async (userMessage: Message) => {
@@ -860,7 +860,7 @@ function ChatPage() {
                 console.log(
                   "Received chunk:",
                   chunk.type || chunk.object,
-                  chunk,
+                  chunk
                 );
 
                 // Extract response ID if present
@@ -876,14 +876,14 @@ function ChatPage() {
                   if (chunk.delta.function_call) {
                     console.log(
                       "Function call in delta:",
-                      chunk.delta.function_call,
+                      chunk.delta.function_call
                     );
 
                     // Check if this is a new function call
                     if (chunk.delta.function_call.name) {
                       console.log(
                         "New function call:",
-                        chunk.delta.function_call.name,
+                        chunk.delta.function_call.name
                       );
                       const functionCall: FunctionCall = {
                         name: chunk.delta.function_call.name,
@@ -899,7 +899,7 @@ function ChatPage() {
                     else if (chunk.delta.function_call.arguments) {
                       console.log(
                         "Function call arguments delta:",
-                        chunk.delta.function_call.arguments,
+                        chunk.delta.function_call.arguments
                       );
                       const lastFunctionCall =
                         currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -911,14 +911,14 @@ function ChatPage() {
                           chunk.delta.function_call.arguments;
                         console.log(
                           "Accumulated arguments:",
-                          lastFunctionCall.argumentsString,
+                          lastFunctionCall.argumentsString
                         );
 
                         // Try to parse arguments if they look complete
                         if (lastFunctionCall.argumentsString.includes("}")) {
                           try {
                             const parsed = JSON.parse(
-                              lastFunctionCall.argumentsString,
+                              lastFunctionCall.argumentsString
                             );
                             lastFunctionCall.arguments = parsed;
                             lastFunctionCall.status = "completed";
@@ -926,7 +926,7 @@ function ChatPage() {
                           } catch (e) {
                             console.log(
                               "Arguments not yet complete or invalid JSON:",
-                              e,
+                              e
                             );
                           }
                         }
@@ -959,7 +959,7 @@ function ChatPage() {
                         else if (toolCall.function.arguments) {
                           console.log(
                             "Tool call arguments delta:",
-                            toolCall.function.arguments,
+                            toolCall.function.arguments
                           );
                           const lastFunctionCall =
                             currentFunctionCalls[
@@ -973,7 +973,7 @@ function ChatPage() {
                               toolCall.function.arguments;
                             console.log(
                               "Accumulated tool arguments:",
-                              lastFunctionCall.argumentsString,
+                              lastFunctionCall.argumentsString
                             );
 
                             // Try to parse arguments if they look complete
@@ -982,7 +982,7 @@ function ChatPage() {
                             ) {
                               try {
                                 const parsed = JSON.parse(
-                                  lastFunctionCall.argumentsString,
+                                  lastFunctionCall.argumentsString
                                 );
                                 lastFunctionCall.arguments = parsed;
                                 lastFunctionCall.status = "completed";
@@ -990,7 +990,7 @@ function ChatPage() {
                               } catch (e) {
                                 console.log(
                                   "Tool arguments not yet complete or invalid JSON:",
-                                  e,
+                                  e
                                 );
                               }
                             }
@@ -1022,7 +1022,7 @@ function ChatPage() {
                           console.log(
                             "Error parsing function call on finish:",
                             fc,
-                            e,
+                            e
                           );
                         }
                       }
@@ -1038,12 +1038,12 @@ function ChatPage() {
                   console.log(
                     "🟢 CREATING function call (added):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name,
+                    chunk.item.tool_name || chunk.item.name
                   );
 
                   // Try to find an existing pending call to update (created by earlier deltas)
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id,
+                    (fc) => fc.id === chunk.item.id
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
@@ -1052,7 +1052,7 @@ function ChatPage() {
                         (fc) =>
                           fc.status === "pending" &&
                           !fc.id &&
-                          fc.name === (chunk.item.tool_name || chunk.item.name),
+                          fc.name === (chunk.item.tool_name || chunk.item.name)
                       );
                   }
 
@@ -1065,7 +1065,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟢 UPDATED existing pending function call with id:",
-                      existing.id,
+                      existing.id
                     );
                   } else {
                     const functionCall: FunctionCall = {
@@ -1083,7 +1083,7 @@ function ChatPage() {
                       currentFunctionCalls.map((fc) => ({
                         id: fc.id,
                         name: fc.name,
-                      })),
+                      }))
                     );
                   }
                 }
@@ -1094,7 +1094,7 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args delta (Realtime API):",
-                    chunk.delta,
+                    chunk.delta
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -1105,7 +1105,7 @@ function ChatPage() {
                     lastFunctionCall.argumentsString += chunk.delta || "";
                     console.log(
                       "Accumulated arguments (Realtime API):",
-                      lastFunctionCall.argumentsString,
+                      lastFunctionCall.argumentsString
                     );
                   }
                 }
@@ -1116,26 +1116,26 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args done (Realtime API):",
-                    chunk.arguments,
+                    chunk.arguments
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
                   if (lastFunctionCall) {
                     try {
                       lastFunctionCall.arguments = JSON.parse(
-                        chunk.arguments || "{}",
+                        chunk.arguments || "{}"
                       );
                       lastFunctionCall.status = "completed";
                       console.log(
                         "Parsed function arguments (Realtime API):",
-                        lastFunctionCall.arguments,
+                        lastFunctionCall.arguments
                       );
                     } catch (e) {
                       lastFunctionCall.arguments = { raw: chunk.arguments };
                       lastFunctionCall.status = "error";
                       console.log(
                         "Error parsing function arguments (Realtime API):",
-                        e,
+                        e
                       );
                     }
                   }
@@ -1149,14 +1149,14 @@ function ChatPage() {
                   console.log(
                     "🔵 UPDATING function call (done):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name,
+                    chunk.item.tool_name || chunk.item.name
                   );
                   console.log(
                     "🔵 Looking for existing function calls:",
                     currentFunctionCalls.map((fc) => ({
                       id: fc.id,
                       name: fc.name,
-                    })),
+                    }))
                   );
 
                   // Find existing function call by ID or name
@@ -1164,14 +1164,14 @@ function ChatPage() {
                     (fc) =>
                       fc.id === chunk.item.id ||
                       fc.name === chunk.item.tool_name ||
-                      fc.name === chunk.item.name,
+                      fc.name === chunk.item.name
                   );
 
                   if (functionCall) {
                     console.log(
                       "🔵 FOUND existing function call, updating:",
                       functionCall.id,
-                      functionCall.name,
+                      functionCall.name
                     );
                     // Update existing function call with completion data
                     functionCall.status =
@@ -1194,7 +1194,7 @@ function ChatPage() {
                       "🔴 WARNING: Could not find existing function call to update:",
                       chunk.item.id,
                       chunk.item.tool_name,
-                      chunk.item.name,
+                      chunk.item.name
                     );
                   }
                 }
@@ -1215,7 +1215,7 @@ function ChatPage() {
                       fc.name === chunk.item.name ||
                       fc.name === chunk.item.type ||
                       fc.name.includes(chunk.item.type.replace("_call", "")) ||
-                      chunk.item.type.includes(fc.name),
+                      chunk.item.type.includes(fc.name)
                   );
 
                   if (functionCall) {
@@ -1259,12 +1259,12 @@ function ChatPage() {
                     "🟡 CREATING tool call (added):",
                     chunk.item.id,
                     chunk.item.tool_name || chunk.item.name,
-                    chunk.item.type,
+                    chunk.item.type
                   );
 
                   // Dedupe by id or pending with same name
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id,
+                    (fc) => fc.id === chunk.item.id
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
@@ -1276,7 +1276,7 @@ function ChatPage() {
                           fc.name ===
                             (chunk.item.tool_name ||
                               chunk.item.name ||
-                              chunk.item.type),
+                              chunk.item.type)
                       );
                   }
 
@@ -1292,7 +1292,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟡 UPDATED existing pending tool call with id:",
-                      existing.id,
+                      existing.id
                     );
                   } else {
                     const functionCall = {
@@ -1313,7 +1313,7 @@ function ChatPage() {
                         id: fc.id,
                         name: fc.name,
                         type: fc.type,
-                      })),
+                      }))
                     );
                   }
                 }
@@ -1591,7 +1591,7 @@ function ChatPage() {
 
   const handleForkConversation = (
     messageIndex: number,
-    event?: React.MouseEvent,
+    event?: React.MouseEvent
   ) => {
     // Prevent any default behavior and stop event propagation
     if (event) {
@@ -1656,7 +1656,7 @@ function ChatPage() {
 
   const renderFunctionCalls = (
     functionCalls: FunctionCall[],
-    messageIndex?: number,
+    messageIndex?: number
   ) => {
     if (!functionCalls || functionCalls.length === 0) return null;
 
@@ -1734,7 +1734,7 @@ function ChatPage() {
                   {(fc.arguments || fc.argumentsString) && (
                     <div className="text-xs text-muted-foreground mb-3">
                       <span className="font-medium">Arguments:</span>
-                      <pre className="mt-1 p-2 bg-muted/30 rounded text-xs overflow-x-auto">
+                      <pre className="my-1 p-2 bg-muted/30 rounded text-xs overflow-x-auto">
                         {fc.arguments
                           ? JSON.stringify(fc.arguments, null, 2)
                           : fc.argumentsString || "..."}
@@ -1870,7 +1870,7 @@ function ChatPage() {
                           </div>
                         </div>
                       ) : (
-                        <pre className="mt-1 p-2 bg-muted/30 rounded text-xs overflow-x-auto">
+                        <pre className="my-1 p-2 bg-muted/30 rounded text-xs overflow-x-auto">
                           {JSON.stringify(fc.result, null, 2)}
                         </pre>
                       )}
@@ -2024,7 +2024,7 @@ function ChatPage() {
                         <div className="flex-1 min-w-0">
                           {renderFunctionCalls(
                             message.functionCalls || [],
-                            index,
+                            index
                           )}
                           <MarkdownRenderer chatMessage={message.content} />
                         </div>
@@ -2053,7 +2053,7 @@ function ChatPage() {
                     <div className="flex-1">
                       {renderFunctionCalls(
                         streamingMessage.functionCalls,
-                        messages.length,
+                        messages.length
                       )}
                       <MarkdownRenderer
                         chatMessage={streamingMessage.content}
@@ -2196,7 +2196,7 @@ function ChatPage() {
                     const filteredFilters = availableFilters.filter((filter) =>
                       filter.name
                         .toLowerCase()
-                        .includes(filterSearchTerm.toLowerCase()),
+                        .includes(filterSearchTerm.toLowerCase())
                     );
 
                     if (e.key === "Escape") {
@@ -2214,7 +2214,7 @@ function ChatPage() {
                     if (e.key === "ArrowDown") {
                       e.preventDefault();
                       setSelectedFilterIndex((prev) =>
-                        prev < filteredFilters.length - 1 ? prev + 1 : 0,
+                        prev < filteredFilters.length - 1 ? prev + 1 : 0
                       );
                       return;
                     }
@@ -2222,7 +2222,7 @@ function ChatPage() {
                     if (e.key === "ArrowUp") {
                       e.preventDefault();
                       setSelectedFilterIndex((prev) =>
-                        prev > 0 ? prev - 1 : filteredFilters.length - 1,
+                        prev > 0 ? prev - 1 : filteredFilters.length - 1
                       );
                       return;
                     }
@@ -2240,7 +2240,7 @@ function ChatPage() {
                       ) {
                         e.preventDefault();
                         handleFilterSelect(
-                          filteredFilters[selectedFilterIndex],
+                          filteredFilters[selectedFilterIndex]
                         );
                         return;
                       }
@@ -2259,7 +2259,7 @@ function ChatPage() {
                       ) {
                         e.preventDefault();
                         handleFilterSelect(
-                          filteredFilters[selectedFilterIndex],
+                          filteredFilters[selectedFilterIndex]
                         );
                         return;
                       }
@@ -2339,7 +2339,7 @@ function ChatPage() {
                         .filter((filter) =>
                           filter.name
                             .toLowerCase()
-                            .includes(filterSearchTerm.toLowerCase()),
+                            .includes(filterSearchTerm.toLowerCase())
                         )
                         .map((filter, index) => (
                           <button
@@ -2365,7 +2365,7 @@ function ChatPage() {
                       {availableFilters.filter((filter) =>
                         filter.name
                           .toLowerCase()
-                          .includes(filterSearchTerm.toLowerCase()),
+                          .includes(filterSearchTerm.toLowerCase())
                       ).length === 0 &&
                         filterSearchTerm && (
                           <div className="px-2 py-3 text-sm text-muted-foreground">