@marimo-team/islands 0.23.11-dev12 → 0.23.11-dev18

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";
@@ -268,24 +269,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 +303,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>

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);
+  });
+});

package/src/components/datasources/datasources.tsx

@@ -83,6 +83,8 @@ import {
   areSchemasResolved,
   areTablesResolved,
   isSchemaless,
+  schemaSubtreeMatchesSearch,
+  shouldExpandDatabaseForSearch,
   sqlCode,
   tableUniqueId,
 } from "./utils";
@@ -360,7 +362,6 @@ export const DataSources: React.FC = () => {
                 key={database.name}
                 connection={connection}
                 database={database}
-                hasSearch={hasSearch}
                 searchValue={searchValue}
               />
             ))}
@@ -435,7 +436,6 @@ interface DataSourceTree {
   dialect: string;
   engineName: string;
   databaseName: string;
-  hasSearch: boolean;
   searchValue?: string;
 }
 
@@ -470,9 +470,8 @@ function buildSqlTableContext(
 const DatabaseTree: React.FC<{
   connection: DataSourceConnection;
   database: Database;
-  hasSearch: boolean;
   searchValue?: string;
-}> = ({ connection, database, hasSearch, searchValue }) => {
+}> = ({ connection, database, searchValue }) => {
   const tree = React.useMemo<DataSourceTree>(
     () => ({
       engineName: connection.name,
@@ -480,7 +479,6 @@ const DatabaseTree: React.FC<{
       dialect: connection.dialect,
       defaultSchema: connection.default_schema,
       defaultDatabase: connection.default_database,
-      hasSearch,
       searchValue,
     }),
     [
@@ -489,7 +487,6 @@ const DatabaseTree: React.FC<{
       connection.default_schema,
       connection.default_database,
       database.name,
-      hasSearch,
       searchValue,
     ],
   );
@@ -498,7 +495,7 @@ const DatabaseTree: React.FC<{
     <DatabaseItem
       engineName={connection.name}
       database={database}
-      hasSearch={hasSearch}
+      searchValue={searchValue}
     >
       <DataSourceTreeContext.Provider value={tree}>
         <SchemaList
@@ -513,18 +510,30 @@ const DatabaseTree: React.FC<{
 };
 
 const DatabaseItem: React.FC<{
-  hasSearch: boolean;
+  searchValue?: string;
   engineName: string;
   database: Database;
   children: React.ReactNode;
-}> = ({ hasSearch, engineName, database, children }) => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+}> = ({ searchValue, engineName, database, children }) => {
+  // Auto-expand during search only when a loaded schema under this database
+  // contains a matching table.
+  const expandForSearch = shouldExpandDatabaseForSearch(database, searchValue);
+  const [isExpanded, setIsExpanded] = React.useState(expandForSearch);
   const [isSelected, setIsSelected] = React.useState(false);
-  const [prevHasSearch, setPrevHasSearch] = React.useState(hasSearch);
-
-  if (prevHasSearch !== hasSearch) {
-    setPrevHasSearch(hasSearch);
-    setIsExpanded(hasSearch);
+  const [prevSearchValue, setPrevSearchValue] = React.useState(searchValue);
+  const [prevExpandForSearch, setPrevExpandForSearch] =
+    React.useState(expandForSearch);
+
+  // Re-sync when the query changes or when newly resolved data turns this
+  // branch into a match under the same query (deferred subtrees resolve
+  // asynchronously, so the decision can flip without the query changing).
+  if (
+    prevSearchValue !== searchValue ||
+    prevExpandForSearch !== expandForSearch
+  ) {
+    setPrevSearchValue(searchValue);
+    setPrevExpandForSearch(expandForSearch);
+    setIsExpanded(expandForSearch);
   }
 
   return (
@@ -657,12 +666,30 @@ interface SchemaNodeProps {
 const SchemaNode: React.FC<SchemaNodeProps> = (props) => {
   const { schema, schemaPath, depth } = props;
   const tree = useDataSourceTree();
-  const { databaseName, hasSearch, searchValue } = tree;
-  const [isExpanded, setIsExpanded] = React.useState(hasSearch);
+  const { databaseName, searchValue } = tree;
+  // Auto-expand during search only when this schema's loaded subtree contains a
+  // matching table.
+  const expandForSearch = schemaSubtreeMatchesSearch(schema, searchValue);
+  const [isExpanded, setIsExpanded] = React.useState(expandForSearch);
   const [isSelected, setIsSelected] = React.useState(false);
+  const [prevSearchValue, setPrevSearchValue] = React.useState(searchValue);
+  const [prevExpandForSearch, setPrevExpandForSearch] =
+    React.useState(expandForSearch);
   const uniqueValue = `${databaseName}:${schemaPath.join(".")}`;
   const childSchemas = schema.child_schemas ?? [];
 
+  // Re-sync when the query changes or when newly resolved data turns this
+  // subtree into a match under the same query (deferred tables/child schemas
+  // resolve asynchronously, so the decision can flip without the query changing).
+  if (
+    prevSearchValue !== searchValue ||
+    prevExpandForSearch !== expandForSearch
+  ) {
+    setPrevSearchValue(searchValue);
+    setPrevExpandForSearch(expandForSearch);
+    setIsExpanded(expandForSearch);
+  }
+
   return (
     <>
       <CommandItem

package/src/components/datasources/utils.ts

@@ -52,6 +52,51 @@ export function areChildSchemasResolved(schema: DatabaseSchema): boolean {
   return schema.child_schemas_resolved !== false;
 }
 
+/**
+ * Whether a loaded schema subtree contains a table whose name matches
+ * `searchValue`. Deferred (not-yet-fetched) tables and child schemas are
+ * treated as non-matching, so searching never triggers a lazy catalog fetch on
+ * large/remote connections.
+ */
+export function schemaSubtreeMatchesSearch(
+  schema: DatabaseSchema,
+  searchValue: string | undefined,
+): boolean {
+  const query = searchValue?.trim().toLowerCase();
+  if (!query) {
+    return false;
+  }
+  if (
+    areTablesResolved(schema) &&
+    schema.tables.some((table) => table.name.toLowerCase().includes(query))
+  ) {
+    return true;
+  }
+  if (areChildSchemasResolved(schema)) {
+    return (schema.child_schemas ?? []).some((child) =>
+      schemaSubtreeMatchesSearch(child, query),
+    );
+  }
+  return false;
+}
+
+/**
+ * Auto-expand a database row during search only when one of its loaded schemas
+ * contains a matching table. Returns false when the schema list itself is
+ * deferred.
+ */
+export function shouldExpandDatabaseForSearch(
+  database: Database,
+  searchValue: string | undefined,
+): boolean {
+  if (!searchValue?.trim() || !areSchemasResolved(database)) {
+    return false;
+  }
+  return database.schemas.some((schema) =>
+    schemaSubtreeMatchesSearch(schema, searchValue),
+  );
+}
+
 interface SqlCodeFormatter {
   /**
    * Format the table path based on dialect-specific rules

package/src/core/config/config-schema.ts

@@ -45,7 +45,12 @@ export const DEFAULT_AI_MODEL = "openai/gpt-4o";
 const AUTO_DOWNLOAD_FORMATS = ["html", "markdown", "ipynb"] as const;
 
 export type CopilotMode = NonNullable<schemas["AiConfig"]["mode"]>;
-export const COPILOT_MODES: CopilotMode[] = ["manual", "ask", "agent"];
+export const COPILOT_MODES: CopilotMode[] = [
+  "manual",
+  "ask",
+  "agent",
+  "code_mode",
+];
 
 const AiConfigSchema = z
   .object({

package/src/css/md.css

@@ -49,6 +49,18 @@
 .markdown h6 {
   font-weight: inherit;
   font-family: var(--heading-font);
+
+  /*
+  Anchor heading spacing to GitHub's markdown rhythm (Primer): a uniform
+  24px top / 16px bottom margin and 1.25 line-height across every level,
+  letting font-size — not margin — carry the hierarchy. Tailwind Typography's
+  prose defaults scale heading margins per-level up to ~2em (≈48px on h2),
+  which is tuned for long-form articles and reads as too airy in a notebook.
+  Ref: https://github.com/sindresorhus/github-markdown-css
+  */
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  line-height: 1.25;
 }
 
 .markdown hr {

package/dist/assets/__vite-browser-external-eshhtsgZ.js

@@ -1 +0,0 @@
-import{t as e}from"./worker-CC0Oul9k.js";var t=e(((e,t)=>{t.exports={}}));export default t();