@marimo-team/frontend 0.16.0-dev96986 → 0.16.0

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 polars for data manipulation
+  - Use pandas 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. Add tooltips where appropriate. You can pass polars dataframes directly to altair.
+  - For altair: return the chart object directly
   - 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(f"""<your query>""") for DuckDB, or df = mo.sql(f"""<your query>""", engine=engine) for other SQL engines.
+  - When writing duckdb, prefer using marimo's SQL cells, which start with _df = mo.sql(query)
   - 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,8 +146,7 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   @app.cell
   def _():
       import marimo as mo
-      import altair as alt
-      import polars as pl
+      import matplotlib.pyplot as plt
       import numpy as np
       return
   
@@ -162,18 +161,12 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
       x = np.random.rand(n_points.value)
       y = np.random.rand(n_points.value)
 
-      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
+      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()
       return
   
   </example>
@@ -183,13 +176,13 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   @app.cell
   def _():
       import marimo as mo
-      import polars as pl
+      import pandas as pd
       from vega_datasets import data
       return
   
   @app.cell
   def _():
-      cars_df = pl.DataFrame(data.cars())
+      cars_df = data.cars()
       mo.ui.data_explorer(cars_df)
       return
   
@@ -200,50 +193,49 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   @app.cell
   def _():
       import marimo as mo
-      import polars as pl
-      import altair as alt
+      import pandas as pd
+      import matplotlib.pyplot as plt
+      import seaborn as sns
       return
   
   @app.cell
   def _():
-      iris = pl.read_csv("hf://datasets/scikit-learn/iris/Iris.csv")
+      iris = sns.load_dataset('iris')
       return
   
   @app.cell
   def _():
       species_selector = mo.ui.dropdown(
-          options=["All"] + iris["Species"].unique().to_list(),
+          options=["All"] + iris["species"].unique().tolist(),
           value="All",
-          label="Species",
+          label="Species"
       )
       x_feature = mo.ui.dropdown(
-          options=iris.select(pl.col(pl.Float64, pl.Int64)).columns,
-          value="SepalLengthCm",
-          label="X Feature",
+          options=iris.select_dtypes('number').columns.tolist(),
+          value="sepal_length",
+          label="X Feature"
       )
       y_feature = mo.ui.dropdown(
-          options=iris.select(pl.col(pl.Float64, pl.Int64)).columns,
-          value="SepalWidthCm",
-          label="Y Feature",
+          options=iris.select_dtypes('number').columns.tolist(),
+          value="sepal_width",
+          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.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
+      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"
       )
-
-      chart
+      plt.title(f"{y_feature.value} vs {x_feature.value}")
+      plt.gca()
       return
   
   </example>
@@ -268,24 +260,17 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   def _():
       import marimo as mo
       import altair as alt
-      import polars as pl
+      import pandas as pd
       return
   
   @app.cell
   def _():
       # Load dataset
-      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",
-          )
+      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',
       )
       return
   
@@ -334,21 +319,17 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   @app.cell
   def _():
       import marimo as mo
-      import polars as pl
+    import pandas as pd
       return
   
   @app.cell
   def _():
-      weather = pl.read_csv('https://raw.githubusercontent.com/vega/vega-datasets/refs/heads/main/data/weather.csv')
+      cars_df = pd.read_csv('<https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json>')
       return
   
   @app.cell
   def _():
-      seattle_weather_df = mo.sql(
-          f"""
-          SELECT * FROM weather WHERE location = 'Seattle';
-          """
-      )
+      _df = mo.sql("SELECT * from cars_df WHERE Miles_per_Gallon > 20")
       return
   
   </example>"

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

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

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

@@ -383,29 +383,31 @@ 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"
@@ -842,7 +844,8 @@ const AgentPanel: React.FC = () => {
       // Parse context from the prompt
       const { contextBlocks, attachmentBlocks } =
         await parseContextFromPrompt(prompt);
-      promptBlocks.push(...contextBlocks, ...attachmentBlocks);
+      promptBlocks.push(...contextBlocks);
+      promptBlocks.push(...attachmentBlocks);
 
       // Add manually uploaded files as resource links
       if (files && files.length > 0) {

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

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