@marimo-team/islands 0.17.1 → 0.17.3

package/src/components/datasources/utils.ts

@@ -1,7 +1,11 @@
 /* Copyright 2024 Marimo. All rights reserved. */
+
+import { BigQueryDialect } from "@marimo-team/codemirror-sql/dialects";
+import { isKnownDialect } from "@/core/codemirror/language/languages/sql/utils";
 import type { SQLTableContext } from "@/core/datasets/data-source-connections";
 import { DUCKDB_ENGINE } from "@/core/datasets/engines";
 import type { DataTable, DataType } from "@/core/kernel/messages";
+import { logNever } from "@/utils/assertNever";
 import type { ColumnHeaderStatsKey } from "../data-table/types";
 
 // Some databases have no schemas, so we don't show it (eg. Clickhouse)
@@ -9,6 +13,79 @@ export function isSchemaless(schemaName: string) {
   return schemaName === "";
 }
 
+interface SqlCodeFormatter {
+  /**
+   * Format the table name based on dialect-specific rules
+   */
+  formatTableName: (tableName: string) => string;
+  /**
+   * Format the SELECT clause
+   */
+  formatSelectClause: (columnName: string, tableName: string) => string;
+}
+
+const defaultFormatter: SqlCodeFormatter = {
+  formatTableName: (tableName: string) => tableName,
+  formatSelectClause: (columnName: string, tableName: string) =>
+    `SELECT ${columnName} FROM ${tableName} LIMIT 100`,
+};
+
+function getFormatter(dialect: string): SqlCodeFormatter {
+  dialect = dialect.toLowerCase();
+  if (!isKnownDialect(dialect)) {
+    return defaultFormatter;
+  }
+
+  switch (dialect) {
+    case "bigquery": {
+      const quote = BigQueryDialect.spec.identifierQuotes;
+      return {
+        // BigQuery uses backticks for identifiers
+        formatTableName: (tableName: string) => `${quote}${tableName}${quote}`,
+        formatSelectClause: defaultFormatter.formatSelectClause,
+      };
+    }
+    case "mssql":
+    case "sqlserver":
+      return {
+        formatTableName: defaultFormatter.formatTableName,
+        formatSelectClause: (columnName: string, tableName: string) =>
+          `SELECT TOP 100 ${columnName} FROM ${tableName}`,
+      };
+    case "timescaledb":
+    case "postgres":
+    case "postgresql":
+    case "duckdb":
+      // Quote column and table names to avoid raising errors on weird characters
+      return {
+        formatTableName: (tableName: string) => {
+          const parts = tableName.split(".");
+          return parts.map((part) => `"${part}"`).join(".");
+        },
+        formatSelectClause: (columnName: string, tableName: string) =>
+          `SELECT ${columnName === "*" ? "*" : `"${columnName}"`} FROM ${tableName} LIMIT 100`,
+      };
+    case "db2":
+    case "mysql":
+    case "sqlite":
+    case "mariadb":
+    case "cassandra":
+    case "noql":
+    case "athena":
+    case "hive":
+    case "redshift":
+    case "snowflake":
+    case "flink":
+    case "mongodb":
+    case "oracle":
+    case "oracledb":
+      return defaultFormatter;
+    default:
+      logNever(dialect);
+      return defaultFormatter;
+  }
+}
+
 export function sqlCode({
   table,
   columnName,
@@ -19,8 +96,14 @@ export function sqlCode({
   sqlTableContext?: SQLTableContext;
 }) {
   if (sqlTableContext) {
-    const { engine, schema, defaultSchema, defaultDatabase, database } =
-      sqlTableContext;
+    const {
+      engine,
+      schema,
+      defaultSchema,
+      defaultDatabase,
+      database,
+      dialect,
+    } = sqlTableContext;
     let tableName = table.name;
 
     // Set the fully qualified table name based on schema and database
@@ -39,11 +122,18 @@ export function sqlCode({
       }
     }
 
+    const formatter = getFormatter(dialect);
+    const formattedTableName = formatter.formatTableName(tableName);
+    const selectClause = formatter.formatSelectClause(
+      columnName,
+      formattedTableName,
+    );
+
     if (engine === DUCKDB_ENGINE) {
-      return `_df = mo.sql(f"SELECT ${columnName} FROM ${tableName} LIMIT 100")`;
+      return `_df = mo.sql(f"""\n${selectClause}\n""")`;
     }
 
-    return `_df = mo.sql(f"SELECT ${columnName} FROM ${tableName} LIMIT 100", engine=${engine})`;
+    return `_df = mo.sql(f"""\n${selectClause}\n""", engine=${engine})`;
   }
 
   return `_df = mo.sql(f'SELECT "${columnName}" FROM ${table.name} LIMIT 100')`;

package/src/components/editor/Output.tsx

@@ -25,6 +25,7 @@ import {
   ChevronsUpDownIcon,
   ExpandIcon,
 } from "lucide-react";
+import { tooltipHandler } from "@/components/charts/tooltip";
 import { useExpandedOutput } from "@/core/cells/outputs";
 import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
 import { renderHTML } from "@/plugins/core/RenderHTML";
@@ -34,6 +35,7 @@ import { useTheme } from "@/theme/useTheme";
 import { Events } from "@/utils/events";
 import { invariant } from "@/utils/invariant";
 import { Objects } from "@/utils/objects";
+import { LazyVegaEmbed } from "../charts/lazy";
 import { ChartLoadingState } from "../data-table/charts/components/chart-states";
 import { Button } from "../ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
@@ -42,10 +44,6 @@ import { CsvViewer } from "./file-tree/renderers";
 import { MarimoTracebackOutput } from "./output/MarimoTracebackOutput";
 import { renderMimeIcon } from "./renderMimeIcon";
 
-const LazyVegaLite = React.lazy(() =>
-  import("react-vega").then((m) => ({ default: m.VegaLite })),
-);
-
 type MimeBundle = Record<OutputMessage["mimetype"], { [key: string]: unknown }>;
 type MimeBundleOrTuple = MimeBundle | [MimeBundle, { [key: string]: unknown }];
 
@@ -177,9 +175,14 @@ export const OutputRenderer: React.FC<{
     case "application/vnd.vega.v5+json":
       return (
         <Suspense fallback={<ChartLoadingState />}>
-          <LazyVegaLite
+          <LazyVegaEmbed
             spec={parsedJsonData as TopLevelFacetedUnitSpec}
-            theme={theme === "dark" ? "dark" : undefined}
+            options={{
+              theme: theme === "dark" ? "dark" : undefined,
+              mode: "vega-lite",
+              tooltip: tooltipHandler.call,
+              renderer: "canvas",
+            }}
           />
         </Suspense>
       );

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -409,14 +409,14 @@ const CompletionBanner: React.FC<CompletionBannerProps> = ({
       <div className="flex flex-row items-center gap-2">
         {isLoading ? (
           <Loader2Icon
-            className="animate-spin text-blue-600 mb-[1px]"
+            className="animate-spin text-blue-600 mb-px"
             size={15}
             strokeWidth={2}
             aria-label="Generating fix"
           />
         ) : (
           <CircleCheckIcon
-            className="text-green-600 mb-[1px]"
+            className="text-green-600 mb-px"
             size={15}
             strokeWidth={2}
             aria-label="Fix generated"

package/src/components/editor/code/readonly-diff.tsx

@@ -15,6 +15,10 @@ export const ReadonlyDiff = memo(
         unifiedMergeView({
           original: props.original,
           mergeControls: false,
+          collapseUnchanged: {
+            margin: 3,
+            minSize: 4,
+          },
         }),
       ];
     }, [props.original, props.modified, theme]);

package/src/components/editor/output/ConsoleOutput.tsx

@@ -115,17 +115,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
   const getOutputString = (): string => {
     const text = consoleOutputs
       .filter((output) => output.channel !== "pdb")
-      .map((output) => {
-        if (
-          output.mimetype.startsWith("application/vnd.marimo") ||
-          output.mimetype === "text/html"
-        ) {
-          return parseHtmlContent(Strings.asString(output.data));
-        }
-
-        // Convert ANSI to HTML, then parse as HTML
-        return ansiToPlainText(Strings.asString(output.data));
-      })
+      .map((output) => processOutput(output))
       .join("\n");
     return text;
   };
@@ -282,3 +272,16 @@ const renderText = (text: string | null) => {
     <span dangerouslySetInnerHTML={{ __html: ansiUp.ansi_to_html(text) }} />
   );
 };
+
+/** Convert cell or console output to a string, while handling html and ansi codes */
+export const processOutput = (output: OutputMessage): string => {
+  if (
+    output.mimetype.startsWith("application/vnd.marimo") ||
+    output.mimetype === "text/html"
+  ) {
+    return parseHtmlContent(Strings.asString(output.data));
+  }
+
+  // Convert ANSI to HTML, then parse as HTML
+  return ansiToPlainText(Strings.asString(output.data));
+};

package/src/components/editor/renderers/slides-layout/types.ts

@@ -5,7 +5,7 @@
  * The serialized form of a slides layout.
  * This must be backwards-compatible as it is stored on the user's disk.
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type SerializedSlidesLayout = {};
 
 export interface SlidesLayout extends SerializedSlidesLayout {

package/src/components/tracing/tracing-spec.ts

@@ -1,7 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import type { TopLevelSpec } from "vega-lite";
-import type { TimeUnit } from "vega-lite/build/src/timeunit";
+import type { TimeUnit } from "vega-typings";
 import type { CellId } from "@/core/cells/ids";
 import type { CellRun } from "@/core/cells/runs";
 import type { ResolvedTheme } from "@/theme/useTheme";
@@ -34,7 +34,7 @@ export function createGanttBaseSpec(
   // @ts-expect-error - Supported by vega/vega-lite but invalid "TimeUnit" option from exported type
   const timeUnit: TimeUnit = "hoursminutessecondsmilliseconds";
   return {
-    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+    $schema: "https://vega.github.io/schema/vega-lite/v6.json",
     background: theme === "dark" ? "black" : undefined,
     mark: {
       type: "bar",

package/src/components/tracing/tracing.test.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
-import { formatChartTime } from "./tracing";
+import { formatChartTime } from "./utils";
 
 describe("formatChartTime", () => {
   beforeAll(() => {

package/src/components/tracing/tracing.tsx

@@ -10,8 +10,8 @@ import {
   CirclePlayIcon,
   CircleX,
 } from "lucide-react";
-import React, { type JSX, Suspense, useRef, useState } from "react";
-import type { SignalListeners, VisualizationSpec } from "react-vega";
+import React, { type JSX, Suspense, useEffect, useRef, useState } from "react";
+import { useVegaEmbed } from "react-vega";
 import useResizeObserver from "use-resize-observer";
 import { compile } from "vega-lite";
 import { Tooltip } from "@/components/ui/tooltip";
@@ -28,6 +28,7 @@ import {
 import { type ResolvedTheme, useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 import { ClearButton } from "../buttons/clear-button";
+import type { SignalListener } from "../charts/types";
 import { ElapsedTime, formatElapsedTime } from "../editor/cell/CellStatus";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
 import { CellLink } from "../editor/links/cell-link";
@@ -37,6 +38,7 @@ import {
   createGanttBaseSpec,
   VEGA_HOVER_SIGNAL,
 } from "./tracing-spec";
+import { formatChartTime } from "./utils";
 
 const expandedRunsAtom = atom<Map<RunId, boolean>>(new Map<RunId, boolean>());
 
@@ -101,42 +103,13 @@ export const Tracing: React.FC = () => {
               />
             );
           }
+          return null;
         })}
       </div>
     </div>
   );
 };
 
-// Using vega instead of vegaLite as some parts of the spec get interpreted as vega & will throw warnings
-const LazyVega = React.lazy(() =>
-  import("react-vega").then((m) => ({ default: m.Vega })),
-);
-interface ChartProps {
-  className?: string;
-  height: number;
-  vegaSpec: VisualizationSpec;
-  signalListeners: SignalListeners;
-  theme: ResolvedTheme;
-}
-
-const Chart: React.FC<ChartProps> = (props: ChartProps) => {
-  const { ref, width = 300 } = useResizeObserver<HTMLDivElement>();
-  return (
-    <div className={props.className} ref={ref}>
-      <Suspense>
-        <LazyVega
-          spec={props.vegaSpec}
-          theme={props.theme === "dark" ? "dark" : undefined}
-          width={width - 50}
-          height={props.height}
-          signalListeners={props.signalListeners}
-          actions={false}
-        />
-      </Suspense>
-    </div>
-  );
-};
-
 interface VegaHoverCellSignal {
   cell: string[];
   vlPoint: unknown;
@@ -201,14 +174,8 @@ const TraceBlockBody: React.FC<{
   title: React.ReactNode;
 }> = ({ run, chartPosition, theme, title }) => {
   const [hoveredCellId, setHoveredCellId] = useState<CellId | null>();
-
-  const handleVegaSignal = {
-    [VEGA_HOVER_SIGNAL]: (_name: string, value: unknown) => {
-      const signalValue = value as VegaHoverCellSignal;
-      const hoveredCell = signalValue.cell?.[0] as CellId | undefined;
-      setHoveredCellId(hoveredCell ?? null);
-    },
-  };
+  const vegaRef = useRef<HTMLDivElement>(null);
+  const { ref, width = 300 } = useResizeObserver<HTMLDivElement>();
 
   const cellIds = useCellIds();
 
@@ -236,6 +203,43 @@ const TraceBlockBody: React.FC<{
     ),
   ).spec;
 
+  const embed = useVegaEmbed({
+    ref: vegaRef,
+    spec: vegaSpec,
+    options: {
+      theme: theme === "dark" ? "dark" : undefined,
+      width: width - 50,
+      height: chartPosition === "above" ? 120 : 100,
+      actions: false,
+      // Using vega instead of vegaLite as some parts of the spec get interpreted as vega & will throw warnings
+      mode: "vega",
+      renderer: "canvas",
+    },
+  });
+
+  useEffect(() => {
+    const signalListeners: SignalListener[] = [
+      {
+        signalName: VEGA_HOVER_SIGNAL,
+        handler: (_name: string, value: unknown) => {
+          const signalValue = value as VegaHoverCellSignal;
+          const hoveredCell = signalValue.cell?.[0] as CellId | undefined;
+          setHoveredCellId(hoveredCell ?? null);
+        },
+      },
+    ];
+
+    signalListeners.forEach(({ signalName, handler }) => {
+      embed?.view.addSignalListener(signalName, handler);
+    });
+
+    return () => {
+      signalListeners.forEach(({ signalName, handler }) => {
+        embed?.view.removeSignalListener(signalName, handler);
+      });
+    };
+  }, [embed]);
+
   const traceRows = (
     <TraceRows
       run={run}
@@ -244,17 +248,23 @@ const TraceBlockBody: React.FC<{
     />
   );
 
+  const chartElement = (
+    <div
+      className={chartPosition === "sideBySide" ? "-mt-0.5 flex-1" : ""}
+      ref={ref}
+    >
+      <Suspense>
+        <div ref={vegaRef} />
+      </Suspense>
+    </div>
+  );
+
   if (chartPosition === "above") {
     return (
       <div key={run.runId} className="flex flex-col">
         <pre className="font-mono font-semibold">
           {title}
-          <Chart
-            vegaSpec={vegaSpec}
-            height={120}
-            signalListeners={handleVegaSignal}
-            theme={theme}
-          />
+          {chartElement}
           {traceRows}
         </pre>
       </div>
@@ -267,13 +277,7 @@ const TraceBlockBody: React.FC<{
         {title}
         {traceRows}
       </pre>
-      <Chart
-        className="-mt-0.5 flex-1"
-        vegaSpec={vegaSpec}
-        height={100}
-        signalListeners={handleVegaSignal}
-        theme={theme}
-      />
+      {chartElement}
     </div>
   );
 };
@@ -387,24 +391,3 @@ const TraceRow: React.FC<TraceRowProps> = ({
     </div>
   );
 };
-
-export function formatChartTime(timestamp: number): string {
-  try {
-    // Multiply by 1000 to convert seconds to milliseconds
-    const date = new Date(timestamp * 1000);
-
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0"); // getMonth() is 0-indexed
-    const day = String(date.getDate()).padStart(2, "0");
-
-    const hours = String(date.getHours()).padStart(2, "0");
-    const minutes = String(date.getMinutes()).padStart(2, "0");
-    const seconds = String(date.getSeconds()).padStart(2, "0");
-
-    const milliseconds = String(date.getMilliseconds()).padStart(3, "0");
-
-    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
-  } catch {
-    return "";
-  }
-}

package/src/components/tracing/utils.ts

@@ -0,0 +1,22 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+export function formatChartTime(timestamp: number): string {
+  try {
+    // Multiply by 1000 to convert seconds to milliseconds
+    const date = new Date(timestamp * 1000);
+
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0"); // getMonth() is 0-indexed
+    const day = String(date.getDate()).padStart(2, "0");
+
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0");
+
+    const milliseconds = String(date.getMilliseconds()).padStart(3, "0");
+
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
+  } catch {
+    return "";
+  }
+}

package/src/components/ui/query-param-preserving-link.tsx

@@ -0,0 +1,48 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import React, { useRef } from "react";
+import { usePress } from "react-aria";
+
+interface QueryParamPreservingLinkProps
+  extends Omit<React.HTMLAttributes<HTMLAnchorElement>, "href"> {
+  href: string;
+  children: React.ReactNode;
+}
+
+export const QueryParamPreservingLink: React.FC<
+  QueryParamPreservingLinkProps
+> = ({ href, children, ...props }) => {
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  const navigateWithQueryParams = () => {
+    const currentUrl = new URL(globalThis.location.href);
+    // Preserve existing query parameters and update the hash
+    currentUrl.hash = href;
+    globalThis.history.pushState({}, "", currentUrl.toString());
+
+    // Scroll to the anchor
+    const targetId = href.slice(1);
+    const targetElement = document.getElementById(targetId);
+    if (targetElement) {
+      targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+
+  const { pressProps } = usePress({
+    onPress: () => {
+      navigateWithQueryParams();
+    },
+  });
+
+  // For anchor links, we need to prevent default navigation
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    navigateWithQueryParams();
+  };
+
+  return (
+    <a ref={ref} href={href} {...pressProps} onClick={handleClick} {...props}>
+      {children}
+    </a>
+  );
+};

package/src/core/ai/context/providers/__tests__/cell-output.test.ts

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Mocks } from "@/__mocks__/common";
 
 // Mock the external dependencies
@@ -320,8 +320,12 @@ describe("Cell output utility functions", () => {
   describe("HTML content parsing", () => {
     let provider: CellOutputContextProvider;
     let mockStore: JotaiStore;
+    let originalCreateElement: typeof document.createElement;
 
     beforeEach(() => {
+      // Save original createElement
+      originalCreateElement = document.createElement;
+
       // Mock DOM methods for HTML parsing
       const mockDiv = {
         innerHTML: "",
@@ -343,6 +347,13 @@ describe("Cell output utility functions", () => {
       provider = new CellOutputContextProvider(mockStore);
     });
 
+    afterEach(() => {
+      // Restore original createElement to prevent mock pollution
+      if (originalCreateElement) {
+        document.createElement = originalCreateElement;
+      }
+    });
+
     it("should extract text content from HTML", () => {
       const htmlContent = "<p>Hello <strong>world</strong>!</p>";
 

package/src/core/ai/context/providers/cell-output.ts

@@ -3,13 +3,13 @@
 import type { Completion } from "@codemirror/autocomplete";
 import type { FileUIPart } from "ai";
 import { toPng } from "html-to-image";
+import { processOutput } from "@/components/editor/output/ConsoleOutput";
 import { type NotebookState, notebookAtom } from "@/core/cells/cells";
 import { type CellId, CellOutputId } from "@/core/cells/ids";
 import { displayCellName } from "@/core/cells/names";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import type { OutputMessage } from "@/core/kernel/messages";
 import type { JotaiStore } from "@/core/state/jotai";
-import { parseHtmlContent } from "@/utils/dom";
 import { Logger } from "@/utils/Logger";
 import { type AIContextItem, AIContextProvider } from "../registry";
 import { contextToXml } from "../utils";
@@ -320,16 +320,10 @@ function getBaseOutput(output: OutputMessage): BaseOutput | null {
   const isMedia = isMediaMimetype(mimetype, String(output.data));
   const outputType = isMedia ? "media" : "text";
 
-  let processedContent: string | undefined;
+  const processedContent = processOutput(output);
   let imageUrl: string | undefined;
   let shouldDownloadImage = false;
 
-  // Process text content
-  if (outputType === "text" && typeof output.data === "string") {
-    processedContent =
-      mimetype === "text/html" ? parseHtmlContent(output.data) : output.data;
-  }
-
   // Process media content - for now, we'll just note that it's media
   if (outputType === "media") {
     if (typeof output.data === "string" && output.data.startsWith("data:")) {

package/src/core/ai/tools/__tests__/run-cells-tool.test.ts

@@ -44,7 +44,7 @@ describe("RunStaleCellsTool", () => {
       store,
     };
 
-    tool = new RunStaleCellsTool();
+    tool = new RunStaleCellsTool({ postExecutionDelay: 0 });
 
     cellId1 = "cell-1" as CellId;
     cellId2 = "cell-2" as CellId;

package/src/core/ai/tools/edit-notebook-tool.ts

@@ -109,15 +109,19 @@ export class EditNotebookTool
 
         scrollAndHighlightCell(cellId);
 
-        // If previous code exists, we don't want to replace it, it means there is a new edit on top of the previous edit
+        const existingStagedCell = store.get(stagedAICellsAtom).get(cellId);
+
+        // If previous edit was from a new cell, just replace editor code with the new code
+        if (existingStagedCell?.type === "add_cell") {
+          updateEditorCodeFromPython(editorView, code);
+          break;
+        }
+
+        // If previous code exists, we don't want to replace it, it means there is a new edit on top of the previous update
         // Keep the original code
-        const stagedCell = store.get(stagedAICellsAtom).get(cellId);
         const currentCellCode = editorView.state.doc.toString();
         const previousCode =
-          stagedCell?.type === "update_cell" ||
-          stagedCell?.type === "delete_cell"
-            ? stagedCell.previousCode
-            : currentCellCode;
+          existingStagedCell?.previousCode ?? currentCellCode;
 
         addStagedCell({
           cellId,
@@ -186,7 +190,11 @@ export class EditNotebookTool
     }
     return {
       status: "success",
-      next_steps: ["If you need to perform more edits, call this tool again."],
+      next_steps: [
+        "If you need to perform more edits, call this tool again.",
+        "You should use the lint notebook tool to check for errors and lint issues. Fix them by editing the notebook.",
+        "You should use the run stale cells tool to run the cells that have been edited or newly added. This allows you to see the output of the cells and fix any errors.",
+      ],
     };
   };