@marimo-team/frontend 0.23.12-dev0 → 0.23.12-dev10

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

@@ -45,7 +45,7 @@ export const SimpleAccordion: React.FC<SimpleAccordionProps> = ({
       case "error":
         return <XCircleIcon className="h-3 w-3 text-destructive" />;
       case "success":
-        return <CheckCircleIcon className="h-3 w-3 text-[var(--blue-9)]" />;
+        return <CheckCircleIcon className="h-3 w-3 text-(--blue-9)" />;
       default:
         return defaultIcon;
     }
@@ -63,7 +63,7 @@ export const SimpleAccordion: React.FC<SimpleAccordionProps> = ({
           className={cn(
             "py-1 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180",
             status === "error" && "text-destructive/80",
-            status === "success" && "text-[var(--blue-8)]",
+            status === "success" && "text-(--blue-8)",
           )}
         >
           <span className="flex items-center gap-1">
@@ -105,32 +105,28 @@ export const ConnectionStatus: React.FC<ConnectionStatusProps> = memo(
             icon: <WifiIcon className="h-3 w-3" />,
             label: "Connected",
             variant: "default" as const,
-            className:
-              "bg-[var(--blue-3)] text-[var(--blue-11)] border-[var(--blue-5)]",
+            className: "bg-(--blue-3) text-(--blue-11) border-(--blue-5)",
           };
         case "connecting":
           return {
             icon: <PlugIcon className="h-3 w-3 animate-pulse" />,
             label: "Connecting",
             variant: "secondary" as const,
-            className:
-              "bg-[var(--yellow-3)] text-[var(--yellow-11)] border-[var(--yellow-5)]",
+            className: "bg-(--yellow-3) text-(--yellow-11) border-(--yellow-5)",
           };
         case "disconnected":
           return {
             icon: <WifiOffIcon className="h-3 w-3" />,
             label: "Disconnected",
             variant: "outline" as const,
-            className:
-              "bg-[var(--red-3)] text-[var(--red-11)] border-[var(--red-5)]",
+            className: "bg-(--red-3) text-(--red-11) border-(--red-5)",
           };
         default:
           return {
             icon: <WifiOffIcon className="h-3 w-3" />,
             label: status || "Unknown",
             variant: "outline" as const,
-            className:
-              "bg-[var(--gray-3)] text-[var(--gray-11)] border-[var(--gray-5)]",
+            className: "bg-(--gray-3) text-(--gray-11) border-(--gray-5)",
           };
       }
     };
@@ -158,14 +154,14 @@ interface PermissionRequestProps {
 export const PermissionRequest: React.FC<PermissionRequestProps> = memo(
   ({ permission, onResolve }) => {
     return (
-      <div className="border border-[var(--amber-8)] bg-[var(--amber-2)] rounded-lg p-2">
+      <div className="border border-(--amber-8) bg-(--amber-2) rounded-lg p-2">
         <div className="flex items-center gap-2 mb-3">
-          <ShieldCheckIcon className="h-4 w-4 text-[var(--amber-11)]" />
-          <h3 className="text-sm font-medium text-[var(--amber-11)]">
+          <ShieldCheckIcon className="h-4 w-4 text-(--amber-11)" />
+          <h3 className="text-sm font-medium text-(--amber-11)">
             Permission Request
           </h3>
         </div>
-        <p className="text-sm text-[var(--amber-11)] mb-3">
+        <p className="text-sm text-(--amber-11) mb-3">
           The AI agent is requesting permission to proceed:
         </p>
         <ToolBodyBlock data={permission.toolCall} />
@@ -177,8 +173,8 @@ export const PermissionRequest: React.FC<PermissionRequestProps> = memo(
               variant="text"
               className={
                 option.kind.startsWith("allow")
-                  ? "text-[var(--blue-10)]"
-                  : "text-[var(--red-10)]"
+                  ? "text-(--blue-10)"
+                  : "text-(--red-10)"
               }
               onClick={() =>
                 onResolve({

package/src/components/chat/acp/scroll-to-bottom-button.tsx

@@ -35,7 +35,7 @@ const ScrollToBottomButton = memo<ScrollToBottomButtonProps>(
             "shadow-md shadow-black/10",
             "hover:bg-background hover:shadow-black/15",
             "transition-all duration-200",
-            "focus:outline-none focus:ring-2 focus:ring-primary/50",
+            "focus:outline-hidden focus:ring-2 focus:ring-primary/50",
           )}
         >
           <ArrowDownIcon className="h-4 w-4" />

package/src/components/chat/acp/session-tabs.tsx

@@ -45,7 +45,7 @@ const SessionTab: React.FC<SessionTabProps> = memo(
         <Button
           variant="ghost"
           size="sm"
-          className="h-4 w-4 p-0 hover:bg-destructive/20 hover:text-destructive flex-shrink-0"
+          className="h-4 w-4 p-0 hover:bg-destructive/20 hover:text-destructive shrink-0"
           onClick={(e) => {
             e.stopPropagation();
             onClose(session.tabId);
@@ -131,7 +131,7 @@ export const SessionTabs: React.FC<SessionTabsProps> = memo(({ className }) => {
         onSelectSession={handleSelectSession}
         onCloseSession={handleCloseSession}
       />
-      <AgentSelector className="h-6 flex-shrink-0" />
+      <AgentSelector className="h-6 shrink-0" />
     </div>
   );
 });

package/src/components/chat/chat-history-popover.tsx

@@ -107,7 +107,7 @@ export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
                       <div className="flex-1 min-w-0">
                         <div className="text-sm truncate">{chat.title}</div>
                       </div>
-                      <div className="text-xs text-muted-foreground/60 ml-2 flex-shrink-0">
+                      <div className="text-xs text-muted-foreground/60 ml-2 shrink-0">
                         {timeAgo(chat.updatedAt, locale)}
                       </div>
                     </button>

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

@@ -67,6 +67,8 @@ import { PromptInput } from "../editor/ai/add-cell-with-ai";
 import {
   addContextCompletion,
   CONTEXT_TRIGGER,
+  isContextAttachment,
+  resolveChatContext,
 } from "../editor/ai/completion-utils";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
 import { CopyClipboardIcon } from "../icons/copy-icon";
@@ -83,7 +85,6 @@ import {
 import { renderUIMessage } from "./chat-display";
 import { ChatHistoryPopover } from "./chat-history-popover";
 import {
-  buildCompletionRequestBody,
   convertToFileUIPart,
   generateChatTitle,
   handleToolCall,
@@ -92,6 +93,7 @@ import {
   PROVIDERS_THAT_SUPPORT_ATTACHMENTS,
   useFileState,
 } from "./chat-utils";
+import { getCodes } from "@/core/codemirror/copilot/getCodes";
 
 // Default mode for the AI
 const DEFAULT_MODE = "manual";
@@ -281,16 +283,13 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
         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);
@@ -538,9 +537,10 @@ const ChatPanelBody = () => {
           );
         }
 
-        const completionBody = await buildCompletionRequestBody(
-          options.messages,
-        );
+        const completionBody = {
+          uiMessages: options.messages,
+          includeOtherCode: getCodes(""),
+        };
 
         // Call this here to ensure the value is not stale
         const chatMode = store.get(aiAtom)?.mode || DEFAULT_MODE;
@@ -629,6 +629,8 @@ const ChatPanelBody = () => {
       initialAttachments && initialAttachments.length > 0
         ? await convertToFileUIPart(initialAttachments)
         : undefined;
+    const { contextPart, attachments } =
+      await resolveChatContext(initialMessage);
 
     // Trigger AI conversation with append
     sendMessage({
@@ -638,7 +640,9 @@ const ChatPanelBody = () => {
           type: "text" as const,
           text: initialMessage,
         },
+        ...(contextPart ? [contextPart] : []),
         ...(fileParts ?? []),
+        ...attachments,
       ],
     });
     clearFiles();
@@ -656,17 +660,31 @@ const ChatPanelBody = () => {
     openModal(<PairWithAgentModal onClose={closeModal} />);
   });
 
-  const handleMessageEdit = useEvent((index: number, newValue: string) => {
-    const editedMessage = messages[index];
-    const fileParts = editedMessage.parts?.filter((p) => p.type === "file");
-
-    const messageId = editedMessage.id;
-    sendMessage({
-      messageId: messageId, // replace the message
-      role: "user",
-      parts: [{ type: "text", text: newValue }, ...fileParts],
-    });
-  });
+  const handleMessageEdit = useEvent(
+    async (index: number, newValue: string) => {
+      const editedMessage = messages[index];
+      // Keep the user's own uploaded files, but drop the previous @-context
+      // snapshot (data part + its attachments) so we can re-resolve a fresh,
+      // point-in-time snapshot from the edited text below.
+      const userFileParts =
+        editedMessage.parts?.filter(
+          (p) => p.type === "file" && !isContextAttachment(p),
+        ) ?? [];
+      const { contextPart, attachments } = await resolveChatContext(newValue);
+
+      const messageId = editedMessage.id;
+      sendMessage({
+        messageId: messageId, // replace the message
+        role: "user",
+        parts: [
+          { type: "text", text: newValue },
+          ...(contextPart ? [contextPart] : []),
+          ...userFileParts,
+          ...attachments,
+        ],
+      });
+    },
+  );
 
   const handleChatInputSubmit = useEvent(
     async (e: KeyboardEvent | undefined, newValue: string): Promise<void> => {
@@ -677,11 +695,17 @@ const ChatPanelBody = () => {
         storePrompt(newMessageInputRef.current.view);
       }
       const fileParts = files ? await convertToFileUIPart(files) : undefined;
+      const { contextPart, attachments } = await resolveChatContext(newValue);
 
       e?.preventDefault();
       sendMessage({
-        text: newValue,
-        files: fileParts,
+        role: "user",
+        parts: [
+          { type: "text", text: newValue },
+          ...(contextPart ? [contextPart] : []),
+          ...(fileParts ?? []),
+          ...attachments,
+        ],
       });
       setInput("");
       clearFiles();

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

@@ -3,6 +3,7 @@
 
 import type { RowSelectionState, Table } from "@tanstack/react-table";
 import { useLocale } from "react-aria";
+import { isStaticNotebook } from "@/core/static/static-state";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
@@ -40,6 +41,8 @@ export const TableBottomBar = <TData,>({
   className,
 }: TableBottomBarProps<TData>) => {
   const { locale } = useLocale();
+  // Pagination fetches each page via a kernel RPC, absent in static exports.
+  const isStatic = isStaticNotebook();
   const handleSelectAllRows = (value: boolean) => {
     if (!onRowSelectionChange) {
       return;
@@ -171,7 +174,7 @@ export const TableBottomBar = <TData,>({
         <CellSelectionStats table={table} className="lg:hidden" />
       </div>
       <div className="ml-auto lg:ml-0 lg:justify-self-center flex items-center shrink-0">
-        {pagination && (
+        {pagination && !isStatic && (
           <DataTablePagination
             table={table}
             tableLoading={tableLoading}

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

@@ -503,7 +503,7 @@ function getCellStyleClass({
     isNumeric && "tabular-nums",
     justify === "center" && "text-center",
     justify === "right" && "text-right",
-    wrapped && `${COLUMN_WRAPPING_STYLES} break-words`,
+    wrapped && `${COLUMN_WRAPPING_STYLES} wrap-break-word`,
   );
 }
 
@@ -651,7 +651,7 @@ export function renderCellValue<TData, TValue>({
         selectCell={selectCell}
         rawStringValue={stringValue}
         edges={{ leading, trailing }}
-        contentClassName="max-h-64 overflow-auto whitespace-pre-wrap break-words text-sm w-96"
+        contentClassName="max-h-64 overflow-auto whitespace-pre-wrap wrap-break-word text-sm w-96"
         buttonText="X"
         wrapped={isWrapped}
       >

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

@@ -25,6 +25,7 @@ import { useLocale } from "react-aria";
 
 import { Button } from "@/components/ui/button";
 import { Table } from "@/components/ui/table";
+import { isStaticNotebook } from "@/core/static/static-state";
 import { Banner } from "@/plugins/impl/common/error-banner";
 import type {
   CalculateTopKRows,
@@ -182,6 +183,11 @@ const DataTableInternal = <TData,>({
   onViewedRowChange,
   renderTableExplorerPanel,
 }: DataTableProps<TData>) => {
+  // The top bar's controls (search, filters, column explorer, chart builder)
+  // all require a live kernel, which static exports don't have.
+  const isStatic = isStaticNotebook();
+  const showTableTopBar = !isStatic;
+
   const [showLoadingBar, setShowLoadingBar] = React.useState<boolean>(false);
   const { locale } = useLocale();
 
@@ -267,11 +273,12 @@ const DataTableInternal = <TData,>({
         }
       : {}),
     manualSorting: manualSorting,
+    enableSorting: !isStatic,
     enableMultiSort: true,
     getSortedRowModel: getSortedRowModel(),
     // filtering
     manualFiltering: true,
-    enableColumnFilters: showFilters,
+    enableColumnFilters: showFilters && !isStatic,
     getFilteredRowModel: getFilteredRowModel(),
     onColumnFiltersChange: onFiltersChange,
     // selection
@@ -355,22 +362,24 @@ const DataTableInternal = <TData,>({
             part="table-wrapper"
             className={cn(className || "rounded-md border overflow-hidden")}
           >
-            <TableTopBar
-              table={table}
-              showSearch={showSearch}
-              searchQuery={searchQuery}
-              onSearchQueryChange={onSearchQueryChange}
-              reloading={reloading}
-              showChartBuilder={showChartBuilder}
-              isChartBuilderOpen={isChartBuilderOpen}
-              toggleDisplayHeader={toggleDisplayHeader}
-              showTableExplorer={showTableExplorer}
-              togglePanel={togglePanel}
-              isAnyPanelOpen={isAnyPanelOpen}
-              downloadAs={downloadAs}
-              sizeBytes={sizeBytes}
-              sizeBytesIsLoading={sizeBytesIsLoading}
-            />
+            {showTableTopBar && (
+              <TableTopBar
+                table={table}
+                showSearch={showSearch}
+                searchQuery={searchQuery}
+                onSearchQueryChange={onSearchQueryChange}
+                reloading={reloading}
+                showChartBuilder={showChartBuilder}
+                isChartBuilderOpen={isChartBuilderOpen}
+                toggleDisplayHeader={toggleDisplayHeader}
+                showTableExplorer={showTableExplorer}
+                togglePanel={togglePanel}
+                isAnyPanelOpen={isAnyPanelOpen}
+                downloadAs={downloadAs}
+                sizeBytes={sizeBytes}
+                sizeBytesIsLoading={sizeBytesIsLoading}
+              />
+            )}
             {allUserColumnsHidden && (
               <Banner className="mb-1 mx-2 rounded flex items-center justify-between">
                 <span>All columns are hidden.</span>

package/src/components/data-table/filter-pill-editor.tsx

@@ -435,7 +435,7 @@ const ValueSlot = <TData, TValue>({
     const v =
       value.kind === "multi-values" ? value : { kind: "multi-values" as const };
     return (
-      <div className="min-w-[14rem] w-fit max-w-[24rem]">
+      <div className="min-w-56 w-fit max-w-[24rem]">
         <FilterByValuesPicker
           column={column}
           calculateTopKRows={calculateTopKRows}

package/src/components/dependency-graph/minimap-content.tsx

@@ -107,7 +107,7 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
       <svg
         className={cn(
           "absolute overflow-visible top-[10.5px] left-[calc(var(--spacing-extra-small,8px)+31px)] pointer-events-none",
-          isSelected ? "z-[1]" : "z-0",
+          isSelected ? "z-1" : "z-0",
           getTextColor({ cell, selectedCell }),
         )}
         width="1"

package/src/components/editor/RecoveryButton.tsx

@@ -76,7 +76,7 @@ const RecoveryModal = (props: {
           Download unsaved changes?
         </DialogTitle>
         <DialogDescription
-          className="markdown break-words"
+          className="markdown wrap-break-word"
           style={{ wordBreak: "break-word" }}
         >
           <div className="prose dark:prose-invert">

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -234,7 +234,7 @@ const CommandBlock: React.FC<{
   if (multiline) {
     return (
       <div className="relative rounded-md bg-muted">
-        <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words px-3 py-2 pr-10 font-mono text-xs select-all">
+        <pre className="max-h-64 overflow-auto whitespace-pre-wrap wrap-break-word px-3 py-2 pr-10 font-mono text-xs select-all">
           {display ?? command}
         </pre>
         <Tooltip content="Copied!" open={copied}>
@@ -257,7 +257,7 @@ const CommandBlock: React.FC<{
 
   return (
     <div className="flex items-center gap-2 rounded-md bg-muted px-3 py-2 font-mono text-xs">
-      <code className="flex-1 select-all break-words">
+      <code className="flex-1 select-all wrap-break-word">
         {display ?? command}
       </code>
       <Tooltip content="Copied!" open={copied}>

package/src/components/editor/actions/useNotebookActions.tsx

@@ -21,7 +21,6 @@ import {
   Files,
   FileTextIcon,
   FolderDownIcon,
-  GithubIcon,
   GlobeIcon,
   HardDrive,
   Home,
@@ -39,7 +38,6 @@ import {
   SparklesIcon,
   Undo2Icon,
   XCircleIcon,
-  YoutubeIcon,
   ZapIcon,
 } from "lucide-react";
 import {
@@ -47,7 +45,9 @@ import {
   useOpenSettingsToTab,
 } from "@/components/app-config/state";
 import { MarkdownIcon } from "@/components/editor/cell/code/icons";
+import { GitHubIcon } from "@/components/icons/github";
 import { MarimoPlusIcon } from "@/components/icons/marimo-icons";
+import { YouTubeIcon } from "@/components/icons/youtube";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { PairWithAgentModal } from "@/components/editor/actions/pair-with-agent-modal";
@@ -655,7 +655,7 @@ export function useNotebookActions() {
           },
         },
         {
-          icon: <GithubIcon size={14} strokeWidth={1.5} />,
+          icon: <GitHubIcon className="h-3.5 w-3.5" />,
           label: "GitHub",
           handle: () => {
             window.open(Constants.githubPage, "_blank");
@@ -669,7 +669,7 @@ export function useNotebookActions() {
           },
         },
         {
-          icon: <YoutubeIcon size={14} strokeWidth={1.5} />,
+          icon: <YouTubeIcon className="h-3.5 w-3.5" />,
           label: "YouTube",
           handle: () => {
             window.open(Constants.youtube, "_blank");

package/src/components/editor/ai/__tests__/completion-utils.test.ts

@@ -8,7 +8,14 @@ import { datasetsAtom } from "@/core/datasets/state";
 import type { DatasetsState } from "@/core/datasets/types";
 import { store } from "@/core/state/jotai";
 import { variablesAtom } from "@/core/variables/state";
-import { codeToCells, getAICompletionBody } from "../completion-utils";
+import type { UIMessage } from "ai";
+import {
+  codeToCells,
+  getAICompletionBody,
+  isContextAttachment,
+  MARIMO_CONTEXT_PART_TYPE,
+  resolveChatContext,
+} from "../completion-utils";
 
 // Mock getCodes function
 vi.mock("@/core/codemirror/copilot/getCodes", () => ({
@@ -350,6 +357,89 @@ describe("getAICompletionBody", () => {
   });
 });
 
+describe("resolveChatContext", () => {
+  beforeEach(() => {
+    store.set(datasetsAtom, {
+      tables: [],
+    } as unknown as DatasetsState);
+    store.set(dataSourceConnectionsAtom, {
+      latestEngineSelected: DUCKDB_ENGINE,
+      connectionsMap: new Map(),
+    });
+    store.set(variablesAtom, {});
+  });
+
+  it("returns no context when the input has no @-mentions", async () => {
+    const result = await resolveChatContext("just a plain question");
+    expect(result).toEqual({ contextPart: null, attachments: [] });
+  });
+
+  it("returns no context part when @-mentions resolve to nothing", async () => {
+    const result = await resolveChatContext("look at @variable://ghost");
+    expect(result.contextPart).toBeNull();
+    expect(result.attachments).toEqual([]);
+  });
+
+  it("captures resolved @-context into a data part", async () => {
+    store.set(variablesAtom, {
+      [variableName("var1")]: {
+        name: variableName("var1"),
+        value: "string value",
+        dataType: "string",
+        declaredBy: [],
+        usedBy: [],
+      },
+    });
+
+    const result = await resolveChatContext("inspect @variable://var1");
+
+    expect(result.contextPart?.type).toBe(MARIMO_CONTEXT_PART_TYPE);
+    expect(result.contextPart?.data.contextIds).toEqual(["variable://var1"]);
+    expect(result.contextPart?.data.plainText).toMatchInlineSnapshot(
+      `"<variable name="var1" dataType="string">"string value"</variable>"`,
+    );
+  });
+});
+
+describe("isContextAttachment", () => {
+  type Part = UIMessage["parts"][number];
+
+  it("is true for a file part tagged as context", () => {
+    const part = {
+      type: "file",
+      mediaType: "image/png",
+      url: "data:image/png;base64,abc",
+      providerMetadata: { marimo: { source: "context" } },
+    } as Part;
+    expect(isContextAttachment(part)).toBe(true);
+  });
+
+  it("is false for a user-uploaded file part (no marker)", () => {
+    const part = {
+      type: "file",
+      mediaType: "image/png",
+      url: "data:image/png;base64,abc",
+    } as Part;
+    expect(isContextAttachment(part)).toBe(false);
+  });
+
+  it("is false for a file part with unrelated provider metadata", () => {
+    const part = {
+      type: "file",
+      mediaType: "image/png",
+      url: "data:image/png;base64,abc",
+      providerMetadata: { openai: { foo: "bar" } },
+    } as Part;
+    expect(isContextAttachment(part)).toBe(false);
+  });
+
+  it("is false for non-file parts", () => {
+    expect(isContextAttachment({ type: "text", text: "hi" } as Part)).toBe(
+      false,
+    );
+  });
+});
+
 describe("codeToCells", () => {
   it("should return empty array for empty string", () => {
     const code = "";

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -222,7 +222,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
         showInputPrompt={showInputPrompt}
         setShowInputPrompt={setShowInputPrompt}
         runCell={runCell}
-        className="mt-4 mb-3 w-128"
+        className="mt-4 mb-3 w-lg"
       />
     </div>
   );