fix: render cells in markdown and fix resizable panels

.env.sample

@@ -1,4 +1,3 @@
-OPENAI_API_KEY=
 
 BACKEND_ALLOW_ORIGINS=
 BACKEND_HOST=localhost

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()

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

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 = (

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"
     );
   }, []);
 

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"