@marimo-team/frontend 0.16.0 → 0.16.2

package/src/components/chat/acp/__tests__/__snapshots__/prompt.test.ts.snap

@@ -52,7 +52,7 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   ## Best Practices
 
   <data_handling>
-  - Use pandas for data manipulation
+  - Use polars for data manipulation
   - Implement proper data validation
   - Handle missing values appropriately
   - Use efficient data structures
@@ -62,7 +62,7 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   <visualization>
   - For matplotlib: use plt.gca() as the last expression instead of plt.show()
   - For plotly: return the figure object directly
-  - For altair: return the chart object directly
+  - For altair: return the chart object directly. Add tooltips where appropriate. You can pass polars dataframes directly to altair.
   - Include proper labels, titles, and color schemes
   - Make visualizations interactive where appropriate
   </visualization>
@@ -76,7 +76,7 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   </ui_elements>
 
   <sql>
-  - When writing duckdb, prefer using marimo's SQL cells, which start with _df = mo.sql(query)
+  - When writing duckdb, prefer using marimo's SQL cells, which start with df = mo.sql(f"""<your query>""") for DuckDB, or df = mo.sql(f"""<your query>""", engine=engine) for other SQL engines.
   - See the SQL with duckdb example for an example on how to do this
   - Don't add comments in cells that use mo.sql()
   - Consider using \`vega_datasets\` for common example datasets
@@ -146,7 +146,8 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   @app.cell
   def _():
       import marimo as mo
-      import matplotlib.pyplot as plt
+      import altair as alt
+      import polars as pl
       import numpy as np
       return
   
@@ -161,12 +162,18 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
       x = np.random.rand(n_points.value)
       y = np.random.rand(n_points.value)
 
-      plt.figure(figsize=(8, 6))
-      plt.scatter(x, y, alpha=0.7)
-      plt.title(f"Scatter plot with {n_points.value} points")
-      plt.xlabel("X axis")
-      plt.ylabel("Y axis")
-      plt.gca()
+      df = pl.DataFrame({"x": x, "y": y})
+
+      chart = alt.Chart(df).mark_circle(opacity=0.7).encode(
+          x=alt.X('x', title='X axis'),
+          y=alt.Y('y', title='Y axis')
+      ).properties(
+          title=f"Scatter plot with {n_points.value} points",
+          width=400,
+          height=300
+      )
+
+      chart
       return
   
   </example>
@@ -176,13 +183,13 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   @app.cell
   def _():
       import marimo as mo
-      import pandas as pd
+      import polars as pl
       from vega_datasets import data
       return
   
   @app.cell
   def _():
-      cars_df = data.cars()
+      cars_df = pl.DataFrame(data.cars())
       mo.ui.data_explorer(cars_df)
       return
   
@@ -193,49 +200,50 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   @app.cell
   def _():
       import marimo as mo
-      import pandas as pd
-      import matplotlib.pyplot as plt
-      import seaborn as sns
+      import polars as pl
+      import altair as alt
       return
   
   @app.cell
   def _():
-      iris = sns.load_dataset('iris')
+      iris = pl.read_csv("hf://datasets/scikit-learn/iris/Iris.csv")
       return
   
   @app.cell
   def _():
       species_selector = mo.ui.dropdown(
-          options=["All"] + iris["species"].unique().tolist(),
+          options=["All"] + iris["Species"].unique().to_list(),
           value="All",
-          label="Species"
+          label="Species",
       )
       x_feature = mo.ui.dropdown(
-          options=iris.select_dtypes('number').columns.tolist(),
-          value="sepal_length",
-          label="X Feature"
+          options=iris.select(pl.col(pl.Float64, pl.Int64)).columns,
+          value="SepalLengthCm",
+          label="X Feature",
       )
       y_feature = mo.ui.dropdown(
-          options=iris.select_dtypes('number').columns.tolist(),
-          value="sepal_width",
-          label="Y Feature"
+          options=iris.select(pl.col(pl.Float64, pl.Int64)).columns,
+          value="SepalWidthCm",
+          label="Y Feature",
       )
       mo.hstack([species_selector, x_feature, y_feature])
       return
   
   @app.cell
   def _():
-      filtered_data = iris if species_selector.value == "All" else iris[iris["species"] == species_selector.value]
-
-      plt.figure(figsize=(10, 6))
-      sns.scatterplot(
-          data=filtered_data,
-          x=x_feature.value,
-          y=y_feature.value,
-          hue="species"
+      filtered_data = iris if species_selector.value == "All" else iris.filter(pl.col("Species") == species_selector.value)
+
+      chart = alt.Chart(filtered_data).mark_circle().encode(
+          x=alt.X(x_feature.value, title=x_feature.value),
+          y=alt.Y(y_feature.value, title=y_feature.value),
+          color='Species'
+      ).properties(
+          title=f"{y_feature.value} vs {x_feature.value}",
+          width=500,
+          height=400
       )
-      plt.title(f"{y_feature.value} vs {x_feature.value}")
-      plt.gca()
+
+      chart
       return
   
   </example>
@@ -260,17 +268,24 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   def _():
       import marimo as mo
       import altair as alt
-      import pandas as pd
+      import polars as pl
       return
   
   @app.cell
   def _():
       # Load dataset
-      cars_df = pd.read_csv('<https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json>')
-      _chart = alt.Chart(cars_df).mark_point().encode(
-          x='Horsepower',
-          y='Miles_per_Gallon',
-          color='Origin',
+      weather = pl.read_csv("https://raw.githubusercontent.com/vega/vega-datasets/refs/heads/main/data/weather.csv")
+      weather_dates = weather.with_columns(
+          pl.col("date").str.strptime(pl.Date, format="%Y-%m-%d")
+      )
+      _chart = (
+          alt.Chart(weather_dates)
+          .mark_point()
+          .encode(
+              x="date:T",
+              y="temp_max",
+              color="location",
+          )
       )
       return
   
@@ -319,17 +334,21 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   @app.cell
   def _():
       import marimo as mo
-    import pandas as pd
+      import polars as pl
       return
   
   @app.cell
   def _():
-      cars_df = pd.read_csv('<https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json>')
+      weather = pl.read_csv('https://raw.githubusercontent.com/vega/vega-datasets/refs/heads/main/data/weather.csv')
       return
   
   @app.cell
   def _():
-      _df = mo.sql("SELECT * from cars_df WHERE Miles_per_Gallon > 20")
+      seattle_weather_df = mo.sql(
+          f"""
+          SELECT * FROM weather WHERE location = 'Seattle';
+          """
+      )
       return
   
   </example>"

package/src/components/chat/acp/__tests__/atoms.test.ts

@@ -1,4 +1,4 @@
-/* Copyright 2025 Marimo. All rights reserved. */
+/* Copyright 2024 Marimo. All rights reserved. */
 
 import { createStore } from "jotai";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

package/src/components/chat/acp/__tests__/state.test.ts

@@ -1,4 +1,4 @@
-/* Copyright 2025 Marimo. All rights reserved. */
+/* Copyright 2024 Marimo. All rights reserved. */
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
@@ -100,8 +100,8 @@ describe("state utility functions", () => {
         agentId: "gemini",
         tabId: "tab_existing" as TabId,
         title: "Existing gemini session",
-        createdAt: 1735689600000,
-        lastUsedAt: 1735689600000,
+        createdAt: 1_735_689_600_000,
+        lastUsedAt: 1_735_689_600_000,
         externalAgentSessionId: null,
       };
       const initialState: AgentSessionState = {
@@ -139,8 +139,8 @@ describe("state utility functions", () => {
         agentId: "claude",
         tabId: "tab_existing" as TabId,
         title: "Existing claude session",
-        createdAt: 1735689600000,
-        lastUsedAt: 1735689600000,
+        createdAt: 1_735_689_600_000,
+        lastUsedAt: 1_735_689_600_000,
         externalAgentSessionId: null,
       };
       const initialState: AgentSessionState = {
@@ -194,24 +194,24 @@ describe("state utility functions", () => {
           agentId: "claude",
           tabId: "tab_1" as TabId,
           title: "Claude session 1",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "gemini",
           tabId: "tab_2" as TabId,
           title: "Gemini session",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "claude",
           tabId: "tab_3" as TabId,
           title: "Claude session 2",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
       ];
@@ -264,8 +264,8 @@ describe("state utility functions", () => {
         agentId: "claude",
         tabId: "tab_single" as TabId,
         title: "Single session",
-        createdAt: 1735689600000,
-        lastUsedAt: 1735689600000,
+        createdAt: 1_735_689_600_000,
+        lastUsedAt: 1_735_689_600_000,
         externalAgentSessionId: null,
       };
       const singleSessionState: AgentSessionState = {
@@ -297,16 +297,16 @@ describe("state utility functions", () => {
           agentId: "claude",
           tabId: "tab_1" as TabId,
           title: "Original title",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "gemini",
           tabId: "tab_2" as TabId,
           title: "Another title",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
       ];
@@ -361,16 +361,16 @@ describe("state utility functions", () => {
           agentId: "claude",
           tabId: "tab_1" as TabId,
           title: "Claude session",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "gemini",
           tabId: "tab_2" as TabId,
           title: "Gemini session",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
       ];
@@ -384,7 +384,7 @@ describe("state utility functions", () => {
       const originalTimestamp = sessions[0].lastUsedAt;
 
       // Advance time by 1 hour
-      vi.advanceTimersByTime(3600000);
+      vi.advanceTimersByTime(3_600_000);
 
       const newState = updateSessionLastUsed(state, sessions[0].tabId);
 
@@ -405,7 +405,7 @@ describe("state utility functions", () => {
       const fakeId = "fake_session_id" as TabId;
       const originalTimestamp = sessions[0].lastUsedAt;
 
-      vi.advanceTimersByTime(3600000);
+      vi.advanceTimersByTime(3_600_000);
 
       const newState = updateSessionLastUsed(state, fakeId);
 
@@ -424,16 +424,16 @@ describe("state utility functions", () => {
           agentId: "claude",
           tabId: "tab_1" as TabId,
           title: "Claude session",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "gemini",
           tabId: "tab_2" as TabId,
           title: "Gemini session",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
       ];
@@ -448,7 +448,7 @@ describe("state utility functions", () => {
       const agentSessionId = "agent_session_123" as ExternalAgentSessionId;
 
       // Advance time by 1 hour
-      vi.advanceTimersByTime(3600000);
+      vi.advanceTimersByTime(3_600_000);
 
       const newState = updateSessionExternalAgentSessionId(
         state,
@@ -498,32 +498,32 @@ describe("state utility functions", () => {
           agentId: "claude",
           tabId: "tab_1" as TabId,
           title: "First claude",
-          createdAt: 1735689600000, // 2025-01-01T00:00:00Z
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000, // 2025-01-01T00:00:00Z
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "gemini",
           tabId: "tab_2" as TabId,
           title: "First gemini",
-          createdAt: 1735693200000, // 2025-01-01T01:00:00Z
-          lastUsedAt: 1735693200000,
+          createdAt: 1_735_693_200_000, // 2025-01-01T01:00:00Z
+          lastUsedAt: 1_735_693_200_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "claude",
           tabId: "tab_3" as TabId,
           title: "Second claude",
-          createdAt: 1735696800000, // 2025-01-01T02:00:00Z
-          lastUsedAt: 1735696800000,
+          createdAt: 1_735_696_800_000, // 2025-01-01T02:00:00Z
+          lastUsedAt: 1_735_696_800_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "claude",
           tabId: "tab_4" as TabId,
           title: "Third claude",
-          createdAt: 1735700400000, // 2025-01-01T03:00:00Z
-          lastUsedAt: 1735700400000,
+          createdAt: 1_735_700_400_000, // 2025-01-01T03:00:00Z
+          lastUsedAt: 1_735_700_400_000,
           externalAgentSessionId: null,
         },
       ];

package/src/components/chat/acp/agent-panel.tsx

@@ -383,31 +383,29 @@ const PromptArea = memo<PromptAreaProps>(
                   <AtSignIcon className="h-3.5 w-3.5" />
                 </Button>
               </Tooltip>
-              <>
-                <Tooltip content="Attach a file">
-                  <Button
-                    variant="text"
-                    size="icon"
-                    className="cursor-pointer"
-                    onClick={() => fileInputRef.current?.click()}
-                    title="Attach a file"
-                  >
-                    <PaperclipIcon className="h-3.5 w-3.5" />
-                  </Button>
-                </Tooltip>
-                <Input
-                  ref={fileInputRef}
-                  type="file"
-                  multiple={true}
-                  hidden={true}
-                  onChange={(event) => {
-                    if (event.target.files) {
-                      onAddFiles([...event.target.files]);
-                    }
-                  }}
-                  accept={SUPPORTED_ATTACHMENT_TYPES.join(",")}
-                />
-              </>
+              <Tooltip content="Attach a file">
+                <Button
+                  variant="text"
+                  size="icon"
+                  className="cursor-pointer"
+                  onClick={() => fileInputRef.current?.click()}
+                  title="Attach a file"
+                >
+                  <PaperclipIcon className="h-3.5 w-3.5" />
+                </Button>
+              </Tooltip>
+              <Input
+                ref={fileInputRef}
+                type="file"
+                multiple={true}
+                hidden={true}
+                onChange={(event) => {
+                  if (event.target.files) {
+                    onAddFiles([...event.target.files]);
+                  }
+                }}
+                accept={SUPPORTED_ATTACHMENT_TYPES.join(",")}
+              />
               <Tooltip content={isLoading ? "Stop" : "Submit"}>
                 <Button
                   variant="text"
@@ -844,8 +842,7 @@ const AgentPanel: React.FC = () => {
       // Parse context from the prompt
       const { contextBlocks, attachmentBlocks } =
         await parseContextFromPrompt(prompt);
-      promptBlocks.push(...contextBlocks);
-      promptBlocks.push(...attachmentBlocks);
+      promptBlocks.push(...contextBlocks, ...attachmentBlocks);
 
       // Add manually uploaded files as resource links
       if (files && files.length > 0) {

package/src/components/chat/acp/blocks.tsx

@@ -501,11 +501,9 @@ export const SessionNotificationsBlock = <
     }
     if (kind === "current_mode_update") {
       const lastItem = items.at(-1);
-      if (lastItem?.sessionUpdate !== "current_mode_update") {
-        return null;
-      } else {
-        return <CurrentModeBlock data={lastItem} />;
-      }
+      return lastItem?.sessionUpdate === "current_mode_update" ? (
+        <CurrentModeBlock data={lastItem} />
+      ) : null;
     }
 
     return (
@@ -673,7 +671,9 @@ export const ToolBodyBlock = (props: {
     );
   }
 
-  if (content?.length && hasLocations) {
+  const noContent = !textContent || textContent.length === 0;
+  const noDiffs = !diffs || diffs.length === 0;
+  if (noContent && noDiffs && hasLocations) {
     return (
       <div className="flex flex-col gap-2 pr-2">
         <span className="text-xs text-muted-foreground">