UI nits

website/src/app/api/getInputOutput/route.ts

@@ -43,7 +43,13 @@ export async function POST(request: Request) {
       operation_id,
       name,
       homeDir,
-      sample_size
+      sample_size,
+      false,
+      false,
+      { datasetDescription: null, persona: null },
+      [],
+      "",
+      false
     );
 
     // Check if files exist using FastAPI endpoints

website/src/app/api/getPipelineConfig/route.ts

@@ -39,7 +39,12 @@ export async function POST(request: Request) {
       name,
       homeDir,
       sample_size,
-      system_prompt
+      false,
+      false,
+      system_prompt,
+      [],
+      "",
+      false
     );
 
     return NextResponse.json({ pipelineConfig: yamlString });

website/src/app/api/utils.ts

@@ -49,7 +49,8 @@ export function generatePipelineConfig(
     persona: string | null;
   } | null = null,
   apiKeys: APIKey[] = [],
-  docetl_encryption_key: string = ""
+  docetl_encryption_key: string = "",
+  enable_observability: boolean = true
 ) {
   const datasets = {
     input: {
@@ -166,7 +167,7 @@ export function generatePipelineConfig(
 
       return {
         ...newOp,
-        enable_observability: true,
+        ...(enable_observability && { enable_observability }),
         output: {
           schema: op.output.schema.reduce(
             (acc: Record<string, string>, item: SchemaItem) => {

website/src/app/api/writePipelineConfig/route.ts

@@ -54,7 +54,8 @@ export async function POST(request: Request) {
       clear_intermediate,
       system_prompt,
       apiKeys,
-      docetl_encryption_key
+      docetl_encryption_key,
+      true
     );
 
     // Use the FastAPI endpoint to write the pipeline config

website/src/app/page.tsx

@@ -37,19 +37,9 @@ export default function Home() {
   const [showVision, setShowVision] = useState(false);
 
   useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth >= 640) {
-        setShowDemo(true);
-      } else {
-        setShowDemo(false);
-      }
-    };
-
-    handleResize();
-
-    window.addEventListener("resize", handleResize);
-
-    return () => window.removeEventListener("resize", handleResize);
+    if (window.innerWidth >= 640) {
+      setShowDemo(true);
+    }
   }, []);
 
   const toggleDemo = () => {
@@ -114,7 +104,7 @@ export default function Home() {
             <span className="logo-text text-2xl sm:text-3xl">docetl</span>
           </div>
           <p className="text-lg sm:text-xl mb-4 sm:mb-6">
-            Powering complex document processing pipelines
+            A system for LLM-powered data processing
           </p>
 
           <div className="max-w-lg mx-auto flex flex-col items-center mb-6">

website/src/app/playground/page.tsx

@@ -245,6 +245,12 @@ const CodeEditorPipelineApp: React.FC = () => {
     return () => window.removeEventListener("resize", checkScreenSize);
   }, []);
 
+  useEffect(() => {
+    if (isMounted && !namespace) {
+      setShowNamespaceDialog(true);
+    }
+  }, [isMounted, namespace]);
+
   if (isLoading) {
     return <LoadingScreen />;
   }
@@ -329,6 +335,15 @@ const CodeEditorPipelineApp: React.FC = () => {
     }
   };
 
+  const handleNew = () => {
+    clearPipelineState();
+    if (!namespace) {
+      setShowNamespaceDialog(true);
+    } else {
+      window.location.reload();
+    }
+  };
+
   const topBarStyles =
     "p-2 flex justify-between items-center border-b bg-white shadow-sm";
   const controlGroupStyles = "flex items-center gap-2";
@@ -374,12 +389,7 @@ const CodeEditorPipelineApp: React.FC = () => {
                       </AlertDialogHeader>
                       <AlertDialogFooter>
                         <AlertDialogCancel>Cancel</AlertDialogCancel>
-                        <AlertDialogAction
-                          onClick={() => {
-                            clearPipelineState();
-                            window.location.reload();
-                          }}
-                        >
+                        <AlertDialogAction onClick={handleNew}>
                           Clear
                         </AlertDialogAction>
                       </AlertDialogFooter>

website/src/components/APIKeysDialog.tsx

@@ -190,7 +190,6 @@ export function APIKeysDialog({ open, onOpenChange }: APIKeysDialogProps) {
                     </Label>
                     <Input
                       id={`key-value-${index}`}
-                      type="password"
                       value={key.value}
                       onChange={(e) =>
                         handleInputChange(index, "value", e.target.value)

website/src/components/BookmarksPanel.tsx

@@ -123,7 +123,7 @@ const BookmarksPanel: React.FC = () => {
       <div className="text-xs mb-2 bg-muted/50 p-2 rounded-md">
         <span className="text-muted-foreground font-medium">Tip: </span>
         Click <Maximize2 className="h-3 w-3 inline-block mx-0.5 text-primary" />{" "}
-        in any output column to leave feedback
+        in any output column to leave notes on outputs
       </div>
       <div className="text-xs mb-4 bg-yellow-100/50 p-2 rounded-md">
         <span className="text-muted-foreground font-medium">Note: </span>

website/src/components/PipelineGui.tsx

@@ -88,7 +88,7 @@ const OperationMenuItem: React.FC<OperationMenuItemProps> = ({
   onClick,
 }) => {
   return (
-    <HoverCard openDelay={200}>
+    <HoverCard openDelay={0} closeDelay={0}>
       <HoverCardTrigger asChild>
         <div className="relative w-full">
           <DropdownMenuItem
@@ -153,7 +153,6 @@ const PipelineGUI: React.FC = () => {
     setPipelineName,
     sampleSize,
     setSampleSize,
-    numOpRun,
     setNumOpRun,
     currentFile,
     setCurrentFile,
@@ -1025,7 +1024,9 @@ const PipelineGUI: React.FC = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
-                  <DropdownMenuLabel>Add LLM Operation</DropdownMenuLabel>
+                  <DropdownMenuLabel className="font-bold text-sm bg-muted/50 py-2">
+                    Add LLM Operation
+                  </DropdownMenuLabel>
                   <OperationMenuItem
                     name="Map"
                     description="Transforms each input item for complex data processing and insight extraction. 1 to 1 operation (each document gets one result, but the output of the operation can be any type, like a list)."
@@ -1066,37 +1067,41 @@ const PipelineGUI: React.FC = () => {
                     }
                   />
                   <DropdownMenuSeparator />
-                  <DropdownMenuLabel>Add Non-LLM Operation</DropdownMenuLabel>
-                  <DropdownMenuItem
+                  <DropdownMenuLabel className="font-bold text-sm bg-muted/50 py-2">
+                    Add Non-LLM Operation
+                  </DropdownMenuLabel>
+                  <OperationMenuItem
+                    name="Unnest"
+                    description="Flattens nested arrays or objects in your documents, creating new documents for each nested item."
                     onClick={() =>
                       handleAddOperation("non-LLM", "unnest", "Untitled Unnest")
                     }
-                  >
-                    Unnest
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
+                  />
+                  <OperationMenuItem
+                    name="Split"
+                    description="Divides documents into multiple parts based on specified criteria, creating new documents for each part."
                     onClick={() =>
                       handleAddOperation("non-LLM", "split", "Untitled Split")
                     }
-                  >
-                    Split
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
+                  />
+                  <OperationMenuItem
+                    name="Gather"
+                    description="Collects and groups related data from multiple documents into a single document based on a common key."
                     onClick={() =>
                       handleAddOperation("non-LLM", "gather", "Untitled Gather")
                     }
-                  >
-                    Gather
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
+                  />
+                  <OperationMenuItem
+                    name="Sample"
+                    description="Randomly selects a subset of documents from your dataset for testing or analysis."
                     onClick={() =>
                       handleAddOperation("non-LLM", "sample", "Untitled Sample")
                     }
-                  >
-                    Sample
-                  </DropdownMenuItem>
+                  />
                   <DropdownMenuSeparator />
-                  <DropdownMenuLabel>Code Operations</DropdownMenuLabel>
+                  <DropdownMenuLabel className="font-bold text-sm bg-muted/50 py-2">
+                    Code Operations
+                  </DropdownMenuLabel>
                   <OperationMenuItem
                     name="Code Map"
                     description="Like the LLM Map operation, but uses a Python function instead of an LLM. Write custom Python code to transform each document."