@marimo-team/frontend 0.15.4 → 0.16.0-dev96986

package/src/components/app-config/user-config-form.tsx

@@ -13,6 +13,7 @@ import {
   PackageIcon,
 } from "lucide-react";
 import React, { useId, useRef } from "react";
+import { useLocale } from "react-aria";
 import { useForm } from "react-hook-form";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -108,6 +109,7 @@ export const activeUserConfigCategoryAtom = atom<SettingCategoryId>(
 );
 
 const FORM_DEBOUNCE = 100; // ms;
+const LOCALE_SYSTEM_VALUE = "__system__";
 
 export const UserConfigForm: React.FC = () => {
   const [config, setConfig] = useUserConfig();
@@ -118,6 +120,7 @@ export const UserConfigForm: React.FC = () => {
   );
   const capabilities = useAtomValue(capabilitiesAtom);
   const marimoVersion = useAtomValue(marimoVersionAtom);
+  const { locale } = useLocale();
   const { saveUserConfig } = useRequestClient();
 
   // Create form
@@ -746,6 +749,47 @@ export const UserConfigForm: React.FC = () => {
                   </FormItem>
                 )}
               />
+              <FormField
+                control={form.control}
+                name="display.locale"
+                render={({ field }) => (
+                  <div className="flex flex-col space-y-1">
+                    <FormItem className={formItemClasses}>
+                      <FormLabel>Locale</FormLabel>
+                      <FormControl>
+                        <NativeSelect
+                          data-testid="locale-select"
+                          onChange={(e) => {
+                            if (e.target.value === LOCALE_SYSTEM_VALUE) {
+                              field.onChange(undefined);
+                            } else {
+                              field.onChange(e.target.value);
+                            }
+                          }}
+                          value={field.value || LOCALE_SYSTEM_VALUE}
+                          disabled={field.disabled}
+                          className="inline-flex mr-2"
+                        >
+                          <option value={LOCALE_SYSTEM_VALUE}>System</option>
+                          {navigator.languages.map((option) => (
+                            <option value={option} key={option}>
+                              {option}
+                            </option>
+                          ))}
+                        </NativeSelect>
+                      </FormControl>
+                      <FormMessage />
+                      <IsOverridden userConfig={config} name="display.locale" />
+                    </FormItem>
+
+                    <FormDescription>
+                      The locale to use for the notebook. If your desired locale
+                      is not listed, you can change it manually via{" "}
+                      <Kbd className="inline">marimo config show</Kbd>.
+                    </FormDescription>
+                  </div>
+                )}
+              />
               <FormField
                 control={form.control}
                 name="display.reference_highlighting"
@@ -1283,6 +1327,38 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
+            <FormField
+              control={form.control}
+              name="experimental.external_agents"
+              render={({ field }) => (
+                <div className="flex flex-col gap-y-1">
+                  <FormItem className={formItemClasses}>
+                    <FormLabel className="font-normal">
+                      External Agents
+                    </FormLabel>
+                    <FormControl>
+                      <Checkbox
+                        data-testid="external-agents-checkbox"
+                        checked={field.value === true}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                  <IsOverridden
+                    userConfig={config}
+                    name="experimental.external_agents"
+                  />
+                  <FormDescription>
+                    Enable experimental external agents such as Claude Code and
+                    Gemini CLI. Learn more in the{" "}
+                    <ExternalLink href="https://docs.marimo.io/guides/editor_features/agents/">
+                      docs
+                    </ExternalLink>
+                    .
+                  </FormDescription>
+                </div>
+              )}
+            />
           </SettingGroup>
         );
     }
@@ -1333,8 +1409,9 @@ export const UserConfigForm: React.FC = () => {
               </TabsTrigger>
             ))}
 
-            <div className="p-2 text-xs text-muted-foreground self-start">
+            <div className="p-2 text-xs text-muted-foreground self-start flex flex-col gap-1">
               <span>Version: {marimoVersion}</span>
+              <span>Locale: {locale}</span>
             </div>
 
             <div className="flex-1" />

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

@@ -3,7 +3,7 @@
 exports[`getAgentPrompt > should generate complete agent prompt with default filename 1`] = `
 "
   I am currently editing a marimo notebook.
-  You can read or write to the notebook at @test-notebook.py
+  You can read or write to the notebook at test-notebook.py
 
   If you make edits to the notebook, only edit the contents inside the function decorator with @app.cell.
   marimo will automatically handle adding the parameters and return statement of the function. For example,
@@ -11,7 +11,7 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
 
   \`\`\`
   @app.cell
-  def __():
+  def _():
     <your code here>
     return
   \`\`\`
@@ -37,6 +37,7 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   7. The last expression in a cell is automatically displayed, just like in Jupyter notebooks.
   8. Don't include comments in markdown cells
   9. Don't include comments in SQL cells
+  10. Never define anything using \`global\`.
 
   ## Reactivity
 
@@ -46,11 +47,12 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   - UI elements trigger updates when their values change without explicit callbacks
   - UI element values are accessed through \`.value\` attribute
   - You cannot access a UI element's value in the same cell where it's defined
+  - Cells prefixed with an underscore (e.g. _my_var) are local to the cell and cannot be accessed by other cells
 
   ## 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
@@ -60,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>
@@ -74,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
@@ -115,40 +117,63 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
 
   - \`mo.md(text)\` - display markdown
   - \`mo.stop(predicate, output=None)\` - stop execution conditionally
+  - \`mo.output.append(value)\` - append to the output when it is not the last expression
+  - \`mo.output.replace(value)\` - replace the output when it is not the last expression
   - \`mo.Html(html)\` - display HTML
   - \`mo.image(image)\` - display an image
   - \`mo.hstack(elements)\` - stack elements horizontally
   - \`mo.vstack(elements)\` - stack elements vertically
   - \`mo.tabs(elements)\` - create a tabbed interface
 
+
+
   ## Examples
 
+  <example title="Markdown ccell">
+  
+  @app.cell
+  def _():
+      mo.md("""
+      # Hello world
+      This is a _markdown_ **cell**.
+      """)
+      return
+  
+  </example>
+
   <example title="Basic UI with reactivity">
   
   @app.cell
-  def __():
+  def _():
       import marimo as mo
-      import matplotlib.pyplot as plt
+      import altair as alt
+      import polars as pl
       import numpy as np
       return
   
   @app.cell
-  def __():
+  def _():
       n_points = mo.ui.slider(10, 100, value=50, label="Number of points")
       n_points
       return
   
   @app.cell
-  def __():
+  def _():
       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>
@@ -156,15 +181,15 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   <example title="Data explorer">
   
   @app.cell
-  def __():
+  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()
+  def _():
+      cars_df = pl.DataFrame(data.cars())
       mo.ui.data_explorer(cars_df)
       return
   
@@ -173,51 +198,66 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   <example title="Multiple UI elements">
   
   @app.cell
-  def __():
+  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')
+  def _():
+      iris = pl.read_csv("hf://datasets/scikit-learn/iris/Iris.csv")
       return
   
   @app.cell
-  def __():
+  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"
+  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
       )
-      plt.title(f"{y_feature.value} vs {x_feature.value}")
-      plt.gca()
+
+      chart
+      return
+  
+  </example>
+
+  <example title="Conditional Outputs">
+  
+  @app.cell
+  def _():
+      mo.stop(not data.value, mo.md("No data to display"))
+
+      if mode.value == "scatter":
+        mo.output.replace(render_scatter(data.value))
+      else:
+        mo.output.replace(render_bar_chart(data.value))
       return
   
   </example>
@@ -225,31 +265,38 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   <example title="Interactive chart with Altair">
   
   @app.cell
-  def __():
+  def _():
       import marimo as mo
       import altair as alt
-      import pandas as pd
+      import polars as pl
       return
   
   @app.cell
-  def __():
+  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
   
   @app.cell
-  def __():
+  def _():
       chart = mo.ui.altair_chart(_chart)
     chart
       return
   
   @app.cell
-  def __():
+  def _():
       # Display the selection
       chart.value
       return
@@ -259,19 +306,19 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   <example title="Run Button Example">
   
   @app.cell
-  def __():
+  def _():
       import marimo as mo
       return
   
   @app.cell
-  def __():
+  def _():
       first_button = mo.ui.run_button(label="Option 1")
       second_button = mo.ui.run_button(label="Option 2")
       [first_button, second_button]
       return
   
   @app.cell
-  def __():
+  def _():
       if first_button.value:
           print("You chose option 1!")
       elif second_button.value:
@@ -285,19 +332,23 @@ exports[`getAgentPrompt > should generate complete agent prompt with default fil
   <example title="SQL with duckdb">
   
   @app.cell
-  def __():
+  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>')
+  def _():
+      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")
+  def _():
+      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";