@marimo-team/frontend 0.23.11-dev9 → 0.23.12-dev0

package/src/components/chat/chat-display.tsx

@@ -20,11 +20,14 @@ export const renderUIMessage = ({
   message,
   isStreamingReasoning,
   isLast,
+  isActive,
   addToolApprovalResponse,
 }: {
   message: UIMessage;
   isStreamingReasoning: boolean;
   isLast: boolean;
+  /** Whether the chat is currently streaming/submitting a response. */
+  isActive: boolean;
   addToolApprovalResponse?: ChatAddToolApproveResponseFunction;
 }) => {
   return (
@@ -49,6 +52,7 @@ export const renderUIMessage = ({
           approval={part.approval}
           onApprove={addToolApprovalResponse}
           isLive={isLast}
+          isActive={isActive}
         />
       );
     }
@@ -102,6 +106,7 @@ export const renderUIMessage = ({
             approval={part.approval}
             onApprove={addToolApprovalResponse}
             isLive={isLast}
+            isActive={isActive}
           />
         );
       case "source-document":

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

@@ -23,6 +23,7 @@ import {
   PlusIcon,
   SparklesIcon,
   SettingsIcon,
+  CodeIcon,
 } from "lucide-react";
 import { memo, useEffect, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
@@ -142,6 +143,7 @@ interface ChatMessageProps {
   onEdit: (index: number, newValue: string) => void;
   isStreamingReasoning: boolean;
   isLast: boolean;
+  isActive: boolean;
   addToolApprovalResponse?: ChatAddToolApproveResponseFunction;
 }
 
@@ -152,6 +154,7 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
     onEdit,
     isStreamingReasoning,
     isLast,
+    isActive,
     addToolApprovalResponse,
   }) => {
     const renderUserMessage = (message: UIMessage) => {
@@ -204,6 +207,7 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
             message,
             isStreamingReasoning,
             isLast,
+            isActive,
             addToolApprovalResponse,
           })}
         </div>
@@ -268,24 +272,32 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
       {
         value: "ask",
         label: "Ask",
-        subtitle:
-          "Use AI with access to read-only tools like documentation search",
+        subtitle: "AI with access to read-only tools like documentation search",
         Icon: NotebookText,
       },
       {
         value: "agent",
-        label: "Agent (beta)",
-        subtitle: "Use AI with access to read and write tools",
+        label: "Agent",
+        subtitle: "AI with access to read and write tools",
         Icon: HatGlasses,
       },
     ];
 
+    if (import.meta.env.DEV) {
+      modeOptions.push({
+        value: "code_mode",
+        label: "Code Mode (experimental)",
+        subtitle: "AI with access to the notebook's kernel. Use with caution.",
+        Icon: CodeIcon,
+      });
+    }
+
     const isAttachmentSupported =
       PROVIDERS_THAT_SUPPORT_ATTACHMENTS.has(currentProvider);
 
-    const CurrentModeIcon = modeOptions.find(
-      (o) => o.value === currentMode,
-    )?.Icon;
+    const currentModeOption = modeOptions.find((o) => o.value === currentMode);
+    const CurrentModeIcon = currentModeOption?.Icon;
+    const CurrentModeLabel = currentModeOption?.label;
 
     return (
       <TooltipProvider>
@@ -294,7 +306,7 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
             <Select value={currentMode} onValueChange={saveModeChange}>
               <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1.5">
                 {CurrentModeIcon && <CurrentModeIcon className="h-3 w-3" />}
-                <span className="capitalize">{currentMode}</span>
+                <span>{CurrentModeLabel}</span>
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
@@ -771,6 +783,7 @@ const ChatPanelBody = () => {
             onEdit={handleMessageEdit}
             isStreamingReasoning={isStreamingReasoning}
             isLast={idx === messages.length - 1}
+            isActive={isLoading}
             addToolApprovalResponse={addToolApprovalResponse}
           />
         ))}

package/src/components/chat/tool-call/tool-call-view.tsx

@@ -24,6 +24,7 @@ interface ToolCallViewProps {
    * (the user has moved on).
    */
   isLive?: boolean;
+  isActive?: boolean;
 }
 
 export const ToolCallView: React.FC<ToolCallViewProps> = ({
@@ -37,6 +38,7 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
   index,
   className,
   isLive = true,
+  isActive = true,
 }) => {
   switch (state) {
     case "approval-requested":
@@ -61,6 +63,7 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
           input={input}
           index={index}
           className={className}
+          isActive={isActive}
         />
       );
 
@@ -89,6 +92,7 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
           approval={approval}
           index={index}
           className={className}
+          isActive={isActive}
         />
       );
 

package/src/components/chat/tool-call/tool-history-row.tsx

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { BanIcon, CheckCircleIcon, Loader2, WrenchIcon } from "lucide-react";
+import {
+  BanIcon,
+  CheckCircleIcon,
+  CircleSlashIcon,
+  Loader2,
+  WrenchIcon,
+} from "lucide-react";
 import React from "react";
 import {
   Accordion,
@@ -29,7 +35,19 @@ const STATUS_LABEL: Record<HistoryState, string> = {
   "output-denied": "Denied",
 };
 
-const StatusIcon: React.FC<{ state: HistoryState }> = ({ state }) => {
+const PENDING_STATES = new Set<HistoryState>([
+  "input-streaming",
+  "input-available",
+  "approval-responded",
+]);
+
+const StatusIcon: React.FC<{ state: HistoryState; interrupted: boolean }> = ({
+  state,
+  interrupted,
+}) => {
+  if (interrupted) {
+    return <CircleSlashIcon className="h-3 w-3 text-muted-foreground" />;
+  }
   switch (state) {
     case "input-streaming":
     case "input-available":
@@ -69,6 +87,7 @@ interface ToolHistoryRowProps {
   approval?: ToolApproval;
   index?: number;
   className?: string;
+  isActive?: boolean;
 }
 
 export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
@@ -79,7 +98,9 @@ export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
   approval,
   index = 0,
   className,
+  isActive = true,
 }) => {
+  const interrupted = !isActive && PENDING_STATES.has(state);
   return (
     <Accordion
       key={`tool-${index}`}
@@ -91,12 +112,12 @@ export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
         <AccordionTrigger
           className={cn(
             "h-6 text-xs border-border shadow-none! ring-0! bg-muted/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline",
-            getTriggerToneClass(state),
+            interrupted ? "text-muted-foreground" : getTriggerToneClass(state),
           )}
         >
           <span className="flex items-center gap-1">
-            <StatusIcon state={state} />
-            {STATUS_LABEL[state]}:
+            <StatusIcon state={state} interrupted={interrupted} />
+            {interrupted ? "Interrupted" : STATUS_LABEL[state]}:
             <code className="font-mono text-xs">
               {formatToolName(toolName)}
             </code>

package/src/components/data-table/TableTopBar.tsx

@@ -27,7 +27,7 @@ const NOOP_ON_SEARCH = () => {
 
 interface TableTopBarProps<TData> extends Partial<ExportActionProps> {
   table: Table<TData>;
-  enableSearch: boolean;
+  showSearch: boolean;
   searchQuery?: string;
   onSearchQueryChange?: (query: string) => void;
   reloading?: boolean;
@@ -43,7 +43,7 @@ interface TableTopBarProps<TData> extends Partial<ExportActionProps> {
 
 export const TableTopBar = <TData,>({
   table,
-  enableSearch,
+  showSearch,
   searchQuery,
   onSearchQueryChange,
   reloading,
@@ -68,7 +68,7 @@ export const TableTopBar = <TData,>({
 
   return (
     <div className="flex items-center h-10 px-2 border-b gap-2">
-      {onSearchQueryChange && enableSearch && (
+      {onSearchQueryChange && showSearch && (
         <div className="flex flex-1 items-center gap-1 px-2 rounded-sm focus-within:ring-1 focus-within:ring-border transition-shadow">
           <SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
           <input
@@ -99,7 +99,7 @@ export const TableTopBar = <TData,>({
         </div>
       )}
 
-      <div className="flex items-center shrink-0">
+      <div className="flex items-center shrink-0 ml-auto">
         <ColumnVisibilityDropdown table={table} />
         {showChartBuilder && (
           <Button

package/src/components/data-table/__tests__/columns.test.tsx

@@ -1082,3 +1082,23 @@ describe("renderCellValue with datetime values", () => {
     });
   });
 });
+
+test("column_widths sets fixed size and meta.width", () => {
+  const cols = generateColumns({
+    rowHeaders: [],
+    selection: null,
+    fieldTypes: [
+      ["a", ["number", "int64"]],
+      ["b", ["string", "str"]],
+    ],
+    columnWidths: { a: 120 },
+  });
+  const a = cols.find((c) => c.id === "a");
+  const b = cols.find((c) => c.id === "b");
+  expect(a?.size).toBe(120);
+  expect(a?.minSize).toBe(120);
+  expect(a?.maxSize).toBe(120);
+  expect(a?.meta?.width).toBe(120);
+  expect(b?.size).toBeUndefined();
+  expect(b?.meta?.width).toBeUndefined();
+});

package/src/components/data-table/__tests__/data-table.test.tsx

@@ -69,6 +69,34 @@ describe("DataTable", () => {
     expect(commonProps.rowSelection).toEqual(initialRowSelection);
   });
 
+  it("hides the search bar when showSearch is false", () => {
+    const columns: ColumnDef<TestData>[] = [
+      { accessorKey: "name", header: "Name" },
+    ];
+    const commonProps = {
+      data: [{ id: 1, name: "Test 1" }] as TestData[],
+      columns,
+      totalRows: 1,
+      totalColumns: 1,
+      pagination: false,
+      onSearchQueryChange: () => {},
+    };
+
+    const { rerender } = render(
+      <TooltipProvider>
+        <DataTable {...commonProps} showSearch={true} />
+      </TooltipProvider>,
+    );
+    expect(screen.queryByPlaceholderText("Search...")).not.toBeNull();
+
+    rerender(
+      <TooltipProvider>
+        <DataTable {...commonProps} showSearch={false} />
+      </TooltipProvider>,
+    );
+    expect(screen.queryByPlaceholderText("Search...")).toBeNull();
+  });
+
   it("shows the hoverTemplate text as a styled tooltip on hover", async () => {
     vi.useFakeTimers();
     interface RowData {

package/src/components/data-table/columns.tsx

@@ -118,6 +118,7 @@ export function generateColumns<T>({
   showDataTypes,
   calculateTopKRows,
   fractionDigitsByColumn,
+  columnWidths,
 }: {
   rowHeaders: FieldTypesWithExternalType;
   selection: DataTableSelection;
@@ -129,6 +130,7 @@ export function generateColumns<T>({
   showDataTypes?: boolean;
   calculateTopKRows?: CalculateTopKRows;
   fractionDigitsByColumn?: Record<string, number>;
+  columnWidths?: Record<string, number>;
 }): ColumnDef<T>[] {
   // Row-headers are typically index columns
   const rowHeadersSet = new Set(rowHeaders.map(([columnName]) => columnName));
@@ -311,7 +313,20 @@ export function generateColumns<T>({
       // Can only sort if key is defined
       // For example, unnamed index columns, won't be sortable
       enableSorting: !!key,
-      meta: getMeta(key),
+      meta: {
+        ...getMeta(key),
+        width: columnWidths?.[key],
+      },
+      // size seeds the width before measurement; minSize/maxSize pin
+      // getSize() to the fixed width so the per-paint measurement writeback
+      // cannot drift the header width or sticky-pin offsets.
+      ...(columnWidths?.[key] !== undefined
+        ? {
+            size: columnWidths[key],
+            minSize: columnWidths[key],
+            maxSize: columnWidths[key],
+          }
+        : {}),
     }),
   );
 

package/src/components/data-table/data-table.tsx

@@ -104,7 +104,7 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   onCellSelectionChange?: OnChangeFn<CellSelectionState>;
   getRowIds?: GetRowIds;
   // Search
-  enableSearch?: boolean;
+  showSearch?: boolean;
   searchQuery?: string;
   onSearchQueryChange?: (query: string) => void;
   showFilters?: boolean;
@@ -159,7 +159,7 @@ const DataTableInternal = <TData,>({
   onRowSelectionChange,
   onCellSelectionChange,
   getRowIds,
-  enableSearch = false,
+  showSearch = false,
   searchQuery,
   onSearchQueryChange,
   showFilters = false,
@@ -357,7 +357,7 @@ const DataTableInternal = <TData,>({
           >
             <TableTopBar
               table={table}
-              enableSearch={enableSearch}
+              showSearch={showSearch}
               searchQuery={searchQuery}
               onSearchQueryChange={onSearchQueryChange}
               reloading={reloading}

package/src/components/data-table/filters/types.ts

@@ -11,6 +11,7 @@ declare module "@tanstack/react-table" {
     dataType?: DataType;
     filterType?: FilterType;
     minFractionDigits?: number;
+    width?: number;
   }
 }
 

package/src/components/data-table/renderers.tsx

@@ -141,6 +141,7 @@ export const DataTableBody = <TData,>({
   const renderCells = (cells: Cell<TData, unknown>[]) => {
     return cells.map((cell) => {
       const { className, style: pinningstyle } = getPinningStyles(cell.column);
+      const fixedWidth = cell.column.columnDef.meta?.width;
       const style = Object.assign(
         {},
         cell.getUserStyling?.() || {},
@@ -153,7 +154,8 @@ export const DataTableBody = <TData,>({
           {...getCellDomProps(cell.id)}
           key={cell.id}
           className={cn(
-            "whitespace-pre truncate max-w-[300px] outline-hidden border-r border-r-border/75",
+            "whitespace-pre truncate outline-hidden border-r border-r-border/75",
+            !fixedWidth && "max-w-[300px]",
             cell.column.getColumnWrapping &&
               cell.column.getColumnWrapping?.() === "wrap" &&
               COLUMN_WRAPPING_STYLES,
@@ -297,6 +299,7 @@ function getPinningStyles<TData>(
     isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn =
     isPinned === "right" && column.getIsFirstColumn("right");
+  const fixedWidth = column.columnDef.meta?.width;
 
   return {
     className: cn(isPinned && "bg-inherit", "shadow-r z-10"),
@@ -313,6 +316,7 @@ function getPinningStyles<TData>(
       position: isPinned ? "sticky" : "relative",
       zIndex: isPinned ? 1 : 0,
       width: column.getSize(),
+      ...(fixedWidth ? { minWidth: fixedWidth, maxWidth: fixedWidth } : {}),
     },
   };
 }

package/src/components/datasources/__tests__/install-package-button.test.tsx

@@ -5,6 +5,7 @@ import { Provider } from "jotai";
 import React from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
+import { viewStateAtom } from "@/core/mode";
 import { requestClientAtom } from "@/core/network/requests";
 import { store } from "@/core/state/jotai";
 import { InstallPackageButton } from "../install-package-button";
@@ -48,6 +49,7 @@ describe("InstallPackageButton", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     store.set(requestClientAtom, MockRequestClient.create());
+    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
   });
 
   it("should not render when packages is undefined", () => {
@@ -82,4 +84,13 @@ describe("InstallPackageButton", () => {
     );
     expect(screen.getByText("Install altair")).toBeInTheDocument();
   });
+
+  it("should not render in read mode, where installs are not allowed", () => {
+    store.set(viewStateAtom, { mode: "read", cellAnchor: null });
+    const { container } = render(
+      <InstallPackageButton packages={["altair"]} />,
+      { wrapper },
+    );
+    expect(container.firstChild).toBeNull();
+  });
 });

package/src/components/datasources/__tests__/utils.test.ts

@@ -3,8 +3,18 @@
 import { describe, expect, it } from "vitest";
 import type { SQLTableContext } from "@/core/datasets/data-source-connections";
 import { DUCKDB_ENGINE } from "@/core/datasets/engines";
-import type { DataTable, DataTableColumn } from "@/core/kernel/messages";
-import { sqlCode, tableUniqueId } from "../utils";
+import type {
+  Database,
+  DatabaseSchema,
+  DataTable,
+  DataTableColumn,
+} from "@/core/kernel/messages";
+import {
+  schemaSubtreeMatchesSearch,
+  shouldExpandDatabaseForSearch,
+  sqlCode,
+  tableUniqueId,
+} from "../utils";
 
 describe("sqlCode", () => {
   const mockTable: DataTable = {
@@ -519,3 +529,118 @@ describe("tableUniqueId", () => {
     );
   });
 });
+
+function makeTable(name: string): DataTable {
+  return {
+    name,
+    columns: [],
+    source: "memory",
+    source_type: "local",
+    type: "table",
+    engine: null,
+    indexes: null,
+    num_columns: null,
+    num_rows: null,
+    variable_name: null,
+    primary_keys: null,
+  };
+}
+
+function makeSchema(opts: {
+  name: string;
+  tables: DataTable[];
+  tables_resolved?: boolean;
+  child_schemas?: DatabaseSchema[];
+  child_schemas_resolved?: boolean;
+}): DatabaseSchema {
+  return {
+    name: opts.name,
+    tables: opts.tables,
+    tables_resolved: opts.tables_resolved ?? true,
+    child_schemas: opts.child_schemas ?? [],
+    child_schemas_resolved: opts.child_schemas_resolved ?? true,
+  };
+}
+
+function makeDatabase(
+  name: string,
+  schemas: DatabaseSchema[],
+  schemas_resolved = true,
+): Database {
+  return { name, dialect: "duckdb", schemas, schemas_resolved, engine: null };
+}
+
+describe("schemaSubtreeMatchesSearch", () => {
+  it("returns false for an empty query", () => {
+    const schema = makeSchema({ name: "main", tables: [makeTable("users")] });
+    expect(schemaSubtreeMatchesSearch(schema, "")).toBe(false);
+    expect(schemaSubtreeMatchesSearch(schema, "   ")).toBe(false);
+    expect(schemaSubtreeMatchesSearch(schema, undefined)).toBe(false);
+  });
+
+  it("matches a table name case-insensitively", () => {
+    const schema = makeSchema({ name: "main", tables: [makeTable("Users")] });
+    expect(schemaSubtreeMatchesSearch(schema, "user")).toBe(true);
+    expect(schemaSubtreeMatchesSearch(schema, "orders")).toBe(false);
+  });
+
+  it("matches a table in a resolved child schema", () => {
+    const schema = makeSchema({
+      name: "parent",
+      tables: [],
+      child_schemas: [
+        makeSchema({ name: "child", tables: [makeTable("orders")] }),
+      ],
+    });
+    expect(schemaSubtreeMatchesSearch(schema, "orders")).toBe(true);
+  });
+
+  it("ignores deferred tables so search never triggers a fetch", () => {
+    const schema = makeSchema({
+      name: "main",
+      tables: [makeTable("users")],
+      tables_resolved: false,
+    });
+    expect(schemaSubtreeMatchesSearch(schema, "users")).toBe(false);
+  });
+
+  it("ignores deferred child schemas", () => {
+    const schema = makeSchema({
+      name: "parent",
+      tables: [],
+      child_schemas: [
+        makeSchema({ name: "child", tables: [makeTable("orders")] }),
+      ],
+      child_schemas_resolved: false,
+    });
+    expect(schemaSubtreeMatchesSearch(schema, "orders")).toBe(false);
+  });
+});
+
+describe("shouldExpandDatabaseForSearch", () => {
+  it("returns false for an empty query", () => {
+    const db = makeDatabase("memory", [
+      makeSchema({ name: "main", tables: [makeTable("users")] }),
+    ]);
+    expect(shouldExpandDatabaseForSearch(db, "")).toBe(false);
+    expect(shouldExpandDatabaseForSearch(db, undefined)).toBe(false);
+  });
+
+  it("expands when a loaded schema contains a matching table", () => {
+    const db = makeDatabase("memory", [
+      makeSchema({ name: "main", tables: [makeTable("users")] }),
+      makeSchema({ name: "other", tables: [makeTable("orders")] }),
+    ]);
+    expect(shouldExpandDatabaseForSearch(db, "user")).toBe(true);
+    expect(shouldExpandDatabaseForSearch(db, "nomatch")).toBe(false);
+  });
+
+  it("does not expand when the schema list itself is deferred", () => {
+    const db = makeDatabase(
+      "memory",
+      [makeSchema({ name: "main", tables: [makeTable("users")] })],
+      /* schemas_resolved */ false,
+    );
+    expect(shouldExpandDatabaseForSearch(db, "users")).toBe(false);
+  });
+});