diff --git a/.env.sample b/.env.sample
index 7579b324..6ec5c103 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1,4 +1,3 @@
-OPENAI_API_KEY=
 
 BACKEND_ALLOW_ORIGINS=
 BACKEND_HOST=localhost
diff --git a/docetl/console.py b/docetl/console.py
index da389f44..da1d6aa8 100644
--- a/docetl/console.py
+++ b/docetl/console.py
@@ -89,7 +89,14 @@ def get_console():
             highlight=False,
         )
     else:
-        return Console()
+        class NoOpConsole(Console):
+            def post_optimizer_status(self, *args, **kwargs):
+                pass
+
+            def post_optimizer_rationale(self, *args, **kwargs):
+                pass
+
+        return NoOpConsole()
 
 
 DOCETL_CONSOLE = get_console()
diff --git a/docetl/optimizers/map_optimizer/optimizer.py b/docetl/optimizers/map_optimizer/optimizer.py
index d27872e9..a4eaabdc 100644
--- a/docetl/optimizers/map_optimizer/optimizer.py
+++ b/docetl/optimizers/map_optimizer/optimizer.py
@@ -223,8 +223,10 @@ def optimize(
         )
         self.console.post_optimizer_rationale(
             assessment.get("needs_improvement", True),
-            "\n".join(assessment.get("reasons", [])),
-            validator_prompt
+            "\n".join(assessment.get("reasons", []))
+            + "\n\n"
+            + "\n".join(assessment.get("improvements", [])),
+            validator_prompt,
         )
 
         # Check if improvement is needed based on the assessment
diff --git a/docetl/optimizers/map_optimizer/prompt_generators.py b/docetl/optimizers/map_optimizer/prompt_generators.py
index 91e18834..0b3aeae4 100644
--- a/docetl/optimizers/map_optimizer/prompt_generators.py
+++ b/docetl/optimizers/map_optimizer/prompt_generators.py
@@ -387,17 +387,17 @@ def _get_combine_prompt(
         combine_prompt = result["combine_prompt"]
 
         # Confirm with the user that this prompt is good & ask them to edit
-        if self.runner.status:
-            self.runner.status.stop()
+        # if self.runner.status:
+        #     self.runner.status.stop()
 
-        combine_prompt = Prompt.ask(
-            f"Here is the prompt generated for the reduce operation:\n```\n{combine_prompt}\n```\n\nPress enter to confirm, or type in the prompt you would like to use instead.",
-            default=combine_prompt,
-            console=self.console,
-        )
+        # combine_prompt = Prompt.ask(
+        #     f"Here is the prompt generated for the reduce operation:\n```\n{combine_prompt}\n```\n\nPress enter to confirm, or type in the prompt you would like to use instead.",
+        #     default=combine_prompt,
+        #     console=self.console,
+        # )
 
-        if self.runner.status:
-            self.runner.status.start()
+        # if self.runner.status:
+        #     self.runner.status.start()
 
         # Determine if the combine operation is associative
         system_prompt_associative = (
diff --git a/website/src/app/playground/page.tsx b/website/src/app/playground/page.tsx
index a7c11e56..232484bd 100644
--- a/website/src/app/playground/page.tsx
+++ b/website/src/app/playground/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 import { Scroll, Info, Save } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -433,12 +433,18 @@ const CodeEditorPipelineApp: React.FC = () => {
         </div>
         {showChat && <AIChatPanel onClose={() => setShowChat(false)} />}
         {/* Main content */}
-        <ResizablePanelGroup direction="horizontal" className="flex-grow">
-          {/* File Explorer and Bookmarks */}
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="flex-grow overflow-hidden"
+        >
           {showFileExplorer && (
-            <ResizablePanel defaultSize={10} minSize={6}>
-              <ResizablePanelGroup direction="vertical">
-                <ResizablePanel defaultSize={40} minSize={20}>
+            <ResizablePanel defaultSize={10} minSize={6} className="h-full">
+              <ResizablePanelGroup direction="vertical" className="h-full">
+                <ResizablePanel
+                  defaultSize={40}
+                  minSize={20}
+                  className="overflow-auto"
+                >
                   <FileExplorer
                     files={files}
                     onFileClick={(file) => {
@@ -461,7 +467,11 @@ const CodeEditorPipelineApp: React.FC = () => {
                   withHandle
                   className="h-2 bg-gray-200 hover:bg-gray-300 transition-colors duration-200"
                 />
-                <ResizablePanel defaultSize={60} minSize={20}>
+                <ResizablePanel
+                  defaultSize={60}
+                  minSize={20}
+                  className="overflow-auto"
+                >
                   <BookmarksPanel />
                 </ResizablePanel>
               </ResizablePanelGroup>
@@ -474,10 +484,13 @@ const CodeEditorPipelineApp: React.FC = () => {
             />
           )}
 
-          {/* Pipeline GUI and Output */}
-          <ResizablePanel defaultSize={60} minSize={30}>
-            <ResizablePanelGroup direction="vertical">
-              <ResizablePanel defaultSize={70} minSize={5}>
+          <ResizablePanel defaultSize={60} minSize={30} className="h-full">
+            <ResizablePanelGroup direction="vertical" className="h-full">
+              <ResizablePanel
+                defaultSize={70}
+                minSize={5}
+                className="overflow-auto"
+              >
                 <PipelineGUI />
               </ResizablePanel>
               {showOutput && (
@@ -487,24 +500,31 @@ const CodeEditorPipelineApp: React.FC = () => {
                 />
               )}
               {showOutput && (
-                <ResizablePanel defaultSize={105} minSize={20}>
+                <ResizablePanel
+                  defaultSize={105}
+                  minSize={20}
+                  className="overflow-auto"
+                >
                   <Output />
                 </ResizablePanel>
               )}
             </ResizablePanelGroup>
           </ResizablePanel>
 
-          {/* Dataset View */}
-          {showDatasetView && (
-            <ResizableHandle
-              withHandle
-              className="w-2 bg-gray-200 hover:bg-gray-300 transition-colors duration-200"
-            />
-          )}
           {showDatasetView && currentFile && (
-            <ResizablePanel defaultSize={20} minSize={10}>
-              <DatasetView file={currentFile} />
-            </ResizablePanel>
+            <>
+              <ResizableHandle
+                withHandle
+                className="w-2 bg-gray-200 hover:bg-gray-300 transition-colors duration-200"
+              />
+              <ResizablePanel
+                defaultSize={20}
+                minSize={10}
+                className="h-full overflow-auto"
+              >
+                <DatasetView file={currentFile} />
+              </ResizablePanel>
+            </>
           )}
         </ResizablePanelGroup>
       </div>
@@ -518,7 +538,7 @@ const WrappedCodeEditorPipelineApp: React.FC = () => {
   useEffect(() => {
     setIsLocalhost(
       window.location.hostname === "localhost" ||
-      window.location.hostname === "127.0.0.1"
+        window.location.hostname === "127.0.0.1"
     );
   }, []);
 
diff --git a/website/src/components/AnsiRenderer.tsx b/website/src/components/AnsiRenderer.tsx
index 4e261333..56611caf 100644
--- a/website/src/components/AnsiRenderer.tsx
+++ b/website/src/components/AnsiRenderer.tsx
@@ -50,24 +50,17 @@ const AnsiRenderer: React.FC<AnsiRendererProps> = ({
 
   return (
     <div
-      className={`flex flex-col w-full h-[420px] bg-black text-white font-mono rounded-lg overflow-hidden ${
+      className={`flex flex-col h-full bg-black text-white font-mono rounded-lg overflow-hidden ${
         isWebSocketClosed ? "opacity-50" : ""
       }`}
     >
-      <div
-        ref={scrollRef}
-        className="flex-grow overflow-auto p-4"
-        style={{
-          height: "400px", // Reduced height to accommodate input field
-          maxHeight: "400px",
-        }}
-      >
+      <div ref={scrollRef} className="flex-1 min-h-0 overflow-auto p-4">
         <pre
           className="m-0 whitespace-pre-wrap break-words"
           dangerouslySetInnerHTML={{ __html: html }}
         />
       </div>
-      <div className="p-2 border-t border-gray-700">
+      <div className="flex-none p-2 border-t border-gray-700">
         <div className="flex mb-2">
           <input
             type="text"
diff --git a/website/src/components/Output.tsx b/website/src/components/Output.tsx
index 1c3e88c6..61c1ce37 100644
--- a/website/src/components/Output.tsx
+++ b/website/src/components/Output.tsx
@@ -17,6 +17,7 @@ import {
 } from "@/components/ui/tooltip";
 import { useWebSocket } from "@/contexts/WebSocketContext";
 import AnsiRenderer from "./AnsiRenderer";
+import clsx from "clsx";
 
 export const ConsoleContent: React.FC = () => {
   const { terminalOutput, setTerminalOutput, optimizerProgress } =
@@ -24,9 +25,9 @@ export const ConsoleContent: React.FC = () => {
   const { readyState } = useWebSocket();
 
   return (
-    <div className="flex flex-col h-full w-full">
+    <div className="flex flex-col h-full p-4">
       {optimizerProgress && (
-        <div className="mb-4 p-[6px] rounded-lg relative">
+        <div className="flex-none mb-4 p-[6px] rounded-lg relative">
           {/* Animated gradient border */}
           <div
             className="absolute inset-0 rounded-lg opacity-80"
@@ -98,23 +99,13 @@ export const ConsoleContent: React.FC = () => {
         </div>
       )}
 
-      <div className="flex-1">
+      <div className="flex-1 overflow-auto">
         <AnsiRenderer
           text={terminalOutput || ""}
           readyState={readyState}
           setTerminalOutput={setTerminalOutput}
         />
       </div>
-
-      <style>
-        {`
-          @keyframes gradient {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-          }
-        `}
-      </style>
     </div>
   );
 };
@@ -253,14 +244,14 @@ export const Output: React.FC = () => {
   }, [outputs, operation?.output?.schema]);
 
   const TableContent = () => (
-    <div className="flex-grow overflow-y-auto">
+    <div className="flex-1 min-h-0">
       {isLoadingOutputs ? (
         <div className="flex items-center justify-center h-full">
           <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
           <span className="ml-2 text-muted-foreground">Loading outputs...</span>
         </div>
       ) : outputs.length > 0 ? (
-        <BookmarkableText source="output">
+        <BookmarkableText source="output" className="h-full">
           <ResizableDataTable
             data={outputs}
             columns={columns}
@@ -273,9 +264,9 @@ export const Output: React.FC = () => {
           />
         </BookmarkableText>
       ) : (
-        <p className="text-center text-muted-foreground">
-          No outputs available.
-        </p>
+        <div className="flex items-center justify-center h-full">
+          <p className="text-muted-foreground">No outputs available.</p>
+        </div>
       )}
     </div>
   );
@@ -294,16 +285,18 @@ export const Output: React.FC = () => {
 
     if (!visualizationColumn || !operation) {
       return (
-        <p className="text-center text-muted-foreground">
-          No visualization data available.
-        </p>
+        <div className="flex items-center justify-center h-full">
+          <p className="text-muted-foreground">
+            No visualization data available.
+          </p>
+        </div>
       );
     }
 
     if (operation.type === "reduce") {
       const reduceKeys = operation.otherKwargs?.reduce_key || [];
       return (
-        <div className="flex-grow overflow-y-auto h-full">
+        <div className="h-full overflow-auto p-4">
           {outputs
             .sort(
               (a, b) =>
@@ -354,7 +347,7 @@ export const Output: React.FC = () => {
       }, [outputs, visualizationColumn.name]);
 
       return (
-        <div className="flex-grow overflow-y-auto h-full">
+        <div className="h-full overflow-auto p-4">
           {Object.entries(groupedData)
             .sort(([, groupA], [, groupB]) => groupB.length - groupA.length)
             .map(([key, group]: [string, any[]]) => (
@@ -394,9 +387,11 @@ export const Output: React.FC = () => {
       );
     } else {
       return (
-        <p className="text-center text-muted-foreground">
-          Visualization not supported for this operation type.
-        </p>
+        <div className="flex items-center justify-center h-full">
+          <p className="text-muted-foreground">
+            Visualization not supported for this operation type.
+          </p>
+        </div>
       );
     }
   };
@@ -428,67 +423,119 @@ export const Output: React.FC = () => {
     inputCount > 0 ? (outputCount / inputCount).toFixed(2) : "N/A";
 
   return (
-    <div className="h-full p-4 bg-white flex flex-col">
-      <div className="flex justify-between items-center mb-2">
-        <h2 className="text-sm font-bold mb-2 flex items-center uppercase">
-          Output{" "}
-          {opName && <span className="text-gray-500 ml-1">- {opName}</span>}
-        </h2>
-        <div className="flex items-center space-x-2">
-          <span className="text-sm text-gray-500">
-            {inputCount} inputs | {outputCount} outputs | Selectivity:{" "}
-            {selectivityFactor}x
-          </span>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="p-1"
-            onClick={downloadCSV}
-            disabled={outputs.length === 0}
-          >
-            <Download size={16} />
-          </Button>
-          {/* <Dialog>
-            <DialogTrigger asChild>
-              <Button variant="ghost" size="sm" className="p-1">
-                <Maximize2 size={16} />
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-[90vw] w-[90vw] max-h-[90vh] h-[90vh] flex flex-col pointer-events-auto bg-white">
-            <div className="spotlight-overlay-target">
-              <h2 className="text-lg font-bold mb-2">Output</h2>
-              <OutputContent />
+    <div className="flex flex-col h-full bg-white">
+      <div className="flex-none p-4 pb-2">
+        <div className="flex justify-between items-center">
+          <h2 className="text-sm font-bold flex items-center uppercase">
+            Output{" "}
+            {opName && <span className="text-gray-500 ml-1">- {opName}</span>}
+          </h2>
+          <div className="flex items-center space-x-2">
+            <div className="flex items-center gap-2 text-sm">
+              <div className="flex items-center px-2 py-1 border border-gray-200 rounded-md">
+                <span className="text-gray-900 font-medium">{inputCount}</span>
+                <span className="text-gray-500 ml-1">in</span>
+              </div>
+              <span className="text-gray-400">→</span>
+              <div className="flex items-center px-2 py-1 border border-gray-200 rounded-md">
+                <span className="text-gray-900 font-medium">{outputCount}</span>
+                <span className="text-gray-500 ml-1">out</span>
+              </div>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <div className="flex items-center px-2 py-1 border border-gray-200 rounded-md">
+                      <span
+                        className={clsx(
+                          "font-medium",
+                          selectivityFactor !== "N/A" &&
+                            Number(selectivityFactor) > 1 &&
+                            "text-emerald-600",
+                          selectivityFactor !== "N/A" &&
+                            Number(selectivityFactor) < 1 &&
+                            "text-rose-600",
+                          selectivityFactor === "N/A" && "text-gray-900"
+                        )}
+                      >
+                        {selectivityFactor}×
+                      </span>
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="font-medium">Output to input ratio</p>
+                    {selectivityFactor !== "N/A" && (
+                      <p className="text-xs mt-1">
+                        {Number(selectivityFactor) > 1
+                          ? "Operation increases data volume"
+                          : Number(selectivityFactor) < 1
+                          ? "Operation reduces data volume"
+                          : "Operation maintains data volume"}
+                      </p>
+                    )}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </div>
-            </DialogContent>
-          </Dialog> */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="p-1"
+                    onClick={downloadCSV}
+                    disabled={outputs.length === 0}
+                  >
+                    <Download size={16} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Download as CSV</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
         </div>
       </div>
-      <Tabs defaultValue={defaultTab} className="w-full">
-        <TabsList>
-          <TabsTrigger value="console" className="flex items-center">
-            Console
-            {readyState === WebSocket.OPEN && (
-              <span className="ml-2">
-                <Loader2 className="h-4 w-4 animate-spin" />
-              </span>
-            )}
-          </TabsTrigger>
-          <TabsTrigger value="table">Table</TabsTrigger>
-          <TabsTrigger value="visualize" disabled={!isResolveOrReduce}>
-            Visualize Input Distribution
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="table">
-          <TableContent />
-        </TabsContent>
-        <TabsContent value="console">
-          <ConsoleContent />
-        </TabsContent>
-        <TabsContent value="visualize">
-          <div>
+
+      <Tabs defaultValue={defaultTab} className="flex-1 flex flex-col min-h-0">
+        <div className="flex-none px-4">
+          <TabsList>
+            <TabsTrigger value="console" className="flex items-center">
+              Console
+              {readyState === WebSocket.OPEN && (
+                <span className="ml-2">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                </span>
+              )}
+            </TabsTrigger>
+            <TabsTrigger value="table">Table</TabsTrigger>
+            <TabsTrigger value="visualize" disabled={!isResolveOrReduce}>
+              Visualize Input Distribution
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        <div className="flex-1 min-h-0">
+          <TabsContent
+            value="table"
+            className="h-full data-[state=active]:flex flex-col"
+          >
+            <TableContent />
+          </TabsContent>
+          <TabsContent
+            value="console"
+            className="h-full data-[state=active]:flex flex-col"
+          >
+            <ConsoleContent />
+          </TabsContent>
+          <TabsContent
+            value="visualize"
+            className="h-full data-[state=active]:flex flex-col"
+          >
             <VisualizeContent />
-          </div>
-        </TabsContent>
+          </TabsContent>
+        </div>
       </Tabs>
     </div>
   );
diff --git a/website/src/components/PipelineGui.tsx b/website/src/components/PipelineGui.tsx
index def89e4c..80d23593 100644
--- a/website/src/components/PipelineGui.tsx
+++ b/website/src/components/PipelineGui.tsx
@@ -87,7 +87,7 @@ const PipelineGUI: React.FC = () => {
   } = usePipelineContext();
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [tempPipelineName, setTempPipelineName] = useState(pipelineName);
-  const [tempOptimizerModel, setTempOptimizerModel] = useState(defaultModel);
+  const [tempOptimizerModel, setTempOptimizerModel] = useState(optimizerModel);
   const [tempSampleSize, setTempSampleSize] = useState(
     sampleSize?.toString() || ""
   );
@@ -518,7 +518,7 @@ const PipelineGUI: React.FC = () => {
   };
 
   return (
-    <div className="h-[calc(70vh-2rem)] flex flex-col">
+    <div className="flex flex-col h-full">
       <div className="flex-none p-2 bg-white border-b sticky top-0 z-10">
         <div className="flex justify-between items-center">
           <div className="flex items-center space-x-2">
diff --git a/website/src/components/ResizableDataTable.tsx b/website/src/components/ResizableDataTable.tsx
index 0adf7a87..3846208c 100644
--- a/website/src/components/ResizableDataTable.tsx
+++ b/website/src/components/ResizableDataTable.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useMemo,
+} from "react";
 import {
   flexRender,
   getCoreRowModel,
@@ -28,8 +34,10 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { TABLE_SETTINGS_KEY } from "@/app/localStorageKeys";
+import ReactMarkdown from "react-markdown";
+import debounce from "lodash/debounce";
 
-export type DataType = Record<string, any>;
+export type DataType = Record<string, unknown>;
 export type ColumnType<T extends DataType> = ColumnDef<T> & {
   initialWidth?: number;
 };
@@ -57,13 +65,7 @@ interface ResizableRow<T extends DataType> extends Row<T> {
   setSize: (size: number) => void;
 }
 
-const RowResizer = <T extends DataType>({
-  row,
-  saveSettings,
-}: {
-  row: ResizableRow<T>;
-  saveSettings: () => void;
-}) => {
+const RowResizer = <T extends DataType>({ row }: { row: ResizableRow<T> }) => {
   return (
     <tr>
       <td colSpan={100}>
@@ -104,6 +106,39 @@ interface ResizableDataTableProps<T extends DataType> {
   startingRowHeight?: number;
 }
 
+interface MarkdownCellProps {
+  content: string;
+}
+
+const MarkdownCell = React.memo(({ content }: MarkdownCellProps) => {
+  return (
+    <ReactMarkdown
+      components={{
+        h1: ({ children }) => (
+          <div style={{ fontWeight: "bold", fontSize: "1.5rem" }}>
+            {children}
+          </div>
+        ),
+        h2: ({ children }) => (
+          <div style={{ fontWeight: "bold", fontSize: "1.25rem" }}>
+            {children}
+          </div>
+        ),
+        h3: ({ children }) => (
+          <div style={{ fontWeight: "bold", fontSize: "1.1rem" }}>
+            {children}
+          </div>
+        ),
+        h4: ({ children }) => (
+          <div style={{ fontWeight: "bold" }}>{children}</div>
+        ),
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+});
+
 function ResizableDataTable<T extends DataType>({
   data,
   columns,
@@ -169,6 +204,12 @@ function ResizableDataTable<T extends DataType>({
     return 0;
   });
 
+  const [isResizing, setIsResizing] = useState(false);
+  const debouncedSetIsResizing = useMemo(
+    () => debounce((value: boolean) => setIsResizing(value), 150),
+    []
+  );
+
   const table = useReactTable({
     data,
     // Replace columns with sortedColumns here
@@ -196,6 +237,8 @@ function ResizableDataTable<T extends DataType>({
         pageSize: 5,
       },
     },
+    onColumnSizingStart: () => setIsResizing(true),
+    onColumnSizingEnd: () => debouncedSetIsResizing(false),
   });
 
   return (
@@ -203,7 +246,7 @@ function ResizableDataTable<T extends DataType>({
       <div className="mb-4 flex justify-between items-center">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="flex items-center">
+            <Button variant="ghost" className="flex items-center ml-4">
               Show/Hide Columns
               <ChevronDown className="ml-2 h-4 w-4" />
             </Button>
@@ -224,7 +267,7 @@ function ResizableDataTable<T extends DataType>({
         </DropdownMenu>
         <div className="flex items-center space-x-2">
           {data.length > 0 && (
-            <div className="flex items-center justify-end space-x-2 py-4">
+            <div className="flex items-center justify-end space-x-2 py-4 mr-4">
               <Button
                 variant="outline"
                 size="sm"
@@ -318,9 +361,17 @@ function ResizableDataTable<T extends DataType>({
                         fontWeight: "normal",
                       }}
                     >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
+                      {typeof cell.getValue() === "string" ? (
+                        isResizing ? (
+                          <div>{cell.getValue() as string}</div>
+                        ) : (
+                          <MarkdownCell content={cell.getValue() as string} />
+                        )
+                      ) : (
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )
                       )}
                     </div>
                   </TableCell>
@@ -338,7 +389,6 @@ function ResizableDataTable<T extends DataType>({
                     });
                   },
                 }}
-                saveSettings={saveSettings}
               />
             </React.Fragment>
           ))}