@marimo-team/frontend 0.16.0 → 0.16.1

package/src/components/editor/cell/CellStatus.tsx

@@ -5,6 +5,7 @@ import {
   RefreshCwIcon,
   WorkflowIcon,
 } from "lucide-react";
+import { useDateFormatter } from "react-aria";
 import { MultiIcon } from "@/components/icons/multi-icon";
 import { Logger } from "@/utils/Logger";
 import type { CellRuntimeState } from "../../../core/cells/types";
@@ -28,26 +29,6 @@ export interface CellStatusComponentProps
   uninstantiated: boolean;
 }
 
-// Looks like HH:MM:SS.SSS AM/PM
-const timeFormatter = new Intl.DateTimeFormat("en-US", {
-  hour: "numeric",
-  minute: "numeric",
-  second: "numeric",
-  fractionalSecondDigits: 3,
-  hour12: true,
-});
-
-// Looks like MM/DD HH:MM:SS.SSS AM/PM
-const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {
-  month: "numeric",
-  day: "numeric",
-  hour: "numeric",
-  minute: "numeric",
-  second: "numeric",
-  fractionalSecondDigits: 3,
-  hour12: true,
-});
-
 export const CellStatusComponent: React.FC<CellStatusComponentProps> = ({
   editing,
   status,
@@ -329,10 +310,32 @@ export const ElapsedTime = (props: { elapsedTime: string }) => {
 const LastRanTime = (props: { lastRanTime: number }) => {
   const date = new Date(props.lastRanTime * 1000);
   const today = new Date();
+
+  // Looks like HH:MM:SS.SSS AM/PM
+  const timeFormatter = useDateFormatter({
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    fractionalSecondDigits: 3,
+    hour12: true,
+  });
+
+  // Looks like MM/DD HH:MM:SS.SSS AM/PM
+  const dateTimeFormatter = useDateFormatter({
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    fractionalSecondDigits: 3,
+    hour12: true,
+  });
+
   const formatter =
     date.toDateString() === today.toDateString()
       ? timeFormatter
       : dateTimeFormatter;
+
   return (
     <span>
       Ran at{" "}

package/src/components/editor/cell/CreateCellButton.tsx

@@ -9,8 +9,7 @@ import {
 } from "@/components/ui/context-menu";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
-import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
+import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import {
   getConnectionTooltip,
   isAppInteractionDisabled,
@@ -103,7 +102,7 @@ const CreateCellButtonContextMenu = (props: {
             evt.stopPropagation();
             maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
             onClick({
-              code: new MarkdownLanguageAdapter().defaultCode,
+              code: LanguageAdapters.markdown.defaultCode,
               hideCode: true,
             });
           }}
@@ -118,7 +117,7 @@ const CreateCellButtonContextMenu = (props: {
           onSelect={(evt) => {
             evt.stopPropagation();
             maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
-            onClick({ code: new SQLLanguageAdapter().defaultCode });
+            onClick({ code: LanguageAdapters.sql.defaultCode });
           }}
         >
           <div className="mr-3 text-muted-foreground">

package/src/components/editor/cell/code/language-toggle.tsx

@@ -7,8 +7,7 @@ import { useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { switchLanguage } from "@/core/codemirror/language/extension";
-import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
+import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import type { LanguageAdapter } from "@/core/codemirror/language/types";
 import { Functions } from "@/utils/functions";
 import { MarkdownIcon, PythonIcon } from "./icons";
@@ -27,11 +26,11 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   onAfterToggle,
 }) => {
   const canUseMarkdown = useMemo(
-    () => new MarkdownLanguageAdapter().isSupported(code) || code.trim() === "",
+    () => LanguageAdapters.markdown.isSupported(code) || code.trim() === "",
     [code],
   );
   const canUseSQL = useMemo(
-    () => new SQLLanguageAdapter().isSupported(code) || code.trim() === "",
+    () => LanguageAdapters.sql.isSupported(code) || code.trim() === "",
     [code],
   );
 

package/src/components/editor/chrome/wrapper/footer-items/machine-stats.tsx

@@ -4,6 +4,7 @@ import { useAtomValue } from "jotai";
 import { CpuIcon, MemoryStickIcon, MicrochipIcon } from "lucide-react";
 import type React from "react";
 import { useState } from "react";
+import { useNumberFormatter } from "react-aria";
 import { Tooltip } from "@/components/ui/tooltip";
 import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
@@ -56,23 +57,42 @@ const MemoryUsageBar: React.FC<{
 }> = ({ memory, kernel, server }) => {
   const { percent, total, available } = memory;
   const roundedPercent = Math.round(percent);
+
+  const gbFormatter = useNumberFormatter({
+    maximumFractionDigits: 2,
+  });
+  const mbFormatter = useNumberFormatter({
+    maximumFractionDigits: 0,
+  });
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes > 1024 * 1024 * 1024) {
+      return `${gbFormatter.format(bytes / (1024 * 1024 * 1024))} GB`;
+    }
+    return `${mbFormatter.format(bytes / (1024 * 1024))} MB`;
+  };
+
+  const formatGB = (bytes: number): string => {
+    return gbFormatter.format(bytes / (1024 * 1024 * 1024));
+  };
+
   return (
     <Tooltip
       delayDuration={200}
       content={
         <div className="flex flex-col gap-1">
           <span>
-            <b>computer memory:</b> {asGB(total - available)} / {asGB(total)} GB
-            ({roundedPercent}%)
+            <b>computer memory:</b> {formatGB(total - available)} /{" "}
+            {formatGB(total)} GB ({roundedPercent}%)
           </span>
           {server?.memory && (
             <span>
-              <b>marimo server:</b> {asGBorMB(server.memory)}
+              <b>marimo server:</b> {formatBytes(server.memory)}
             </span>
           )}
           {kernel?.memory && (
             <span>
-              <b>kernel:</b> {asGBorMB(kernel.memory)}
+              <b>kernel:</b> {formatBytes(kernel.memory)}
             </span>
           )}
         </div>
@@ -122,6 +142,20 @@ const GPUBar: React.FC<{ gpus: GPU[] }> = ({ gpus }) => {
       gpus.length,
   );
 
+  const gbFormatter = useNumberFormatter({
+    maximumFractionDigits: 2,
+  });
+  const mbFormatter = useNumberFormatter({
+    maximumFractionDigits: 0,
+  });
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes > 1024 * 1024 * 1024) {
+      return `${gbFormatter.format(bytes / (1024 * 1024 * 1024))} GB`;
+    }
+    return `${mbFormatter.format(bytes / (1024 * 1024))} MB`;
+  };
+
   return (
     <Tooltip
       delayDuration={200}
@@ -132,7 +166,7 @@ const GPUBar: React.FC<{ gpus: GPU[] }> = ({ gpus }) => {
               <b>
                 GPU {gpu.index} ({gpu.name}):
               </b>{" "}
-              {asGBorMB(gpu.memory.used)} / {asGBorMB(gpu.memory.total)} GB (
+              {formatBytes(gpu.memory.used)} / {formatBytes(gpu.memory.total)} (
               {Math.round(gpu.memory.percent)}%)
             </span>
           ))}
@@ -160,26 +194,3 @@ const Bar: React.FC<{ percent: number; colorClassName?: string }> = ({
     </div>
   );
 };
-
-function asGBorMB(bytes: number): string {
-  if (bytes > 1024 * 1024 * 1024) {
-    return `${asGB(bytes)} GB`;
-  }
-  return `${asMB(bytes)} MB`;
-}
-
-function asMB(bytes: number) {
-  // 0 decimal places
-  const format = new Intl.NumberFormat("en-US", {
-    maximumFractionDigits: 0,
-  });
-  return format.format(bytes / (1024 * 1024));
-}
-
-function asGB(bytes: number) {
-  // At most 2 decimal places
-  const format = new Intl.NumberFormat("en-US", {
-    maximumFractionDigits: 2,
-  });
-  return format.format(bytes / (1024 * 1024 * 1024));
-}

package/src/components/editor/controls/notebook-menu-dropdown.tsx

@@ -2,6 +2,7 @@
 
 import { MenuIcon } from "lucide-react";
 import React from "react";
+import { useLocale } from "react-aria";
 import { Button } from "@/components/editor/inputs/Inputs";
 import {
   DropdownMenu,
@@ -33,7 +34,7 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
   tooltip = "Actions",
 }) => {
   const actions = useNotebookActions();
-
+  const { locale } = useLocale();
   // Create tooltip content with keyboard shortcut decoration
   const tooltipContent = (
     <div className="flex flex-col gap-2">
@@ -148,7 +149,8 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
           );
         })}
         <DropdownMenuSeparator />
-        <div className="flex-1 px-2 text-xs text-muted-foreground">
+        <div className="flex-1 px-2 text-xs text-muted-foreground flex flex-col gap-1">
+          <span>Locale: {locale}</span>
           <span>Version: {getMarimoVersion()}</span>
         </div>
       </DropdownMenuContent>

package/src/components/editor/file-tree/requesting-tree.tsx

@@ -13,15 +13,21 @@ import { type FilePath, PathBuilder } from "@/utils/paths";
 
 export class RequestingTree {
   private delegate = new SimpleTree<FileInfo>([]);
+  private callbacks: {
+    listFiles: EditRequests["sendListFiles"];
+    createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
+    deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
+    renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
+  };
 
-  constructor(
-    private callbacks: {
-      listFiles: EditRequests["sendListFiles"];
-      createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
-      deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
-      renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
-    },
-  ) {}
+  constructor(callbacks: {
+    listFiles: EditRequests["sendListFiles"];
+    createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
+    deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
+    renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
+  }) {
+    this.callbacks = callbacks;
+  }
 
   private rootPath: FilePath = "" as FilePath;
   private onChange: (data: FileInfo[]) => void = Functions.NOOP;

package/src/components/editor/renderers/CellArray.tsx

@@ -20,8 +20,7 @@ import { SortableCellsProvider } from "@/components/sort/SortableCellsProvider";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
+import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import { aiEnabledAtom } from "@/core/config/config";
 import { isConnectedAtom } from "@/core/network/connection";
 import { useBoolean } from "@/hooks/useBoolean";
@@ -288,7 +287,7 @@ const AddCellButtons: React.FC<{
             createNewCell({
               cellId: { type: "__end__", columnId },
               before: false,
-              code: new MarkdownLanguageAdapter().defaultCode,
+              code: LanguageAdapters.markdown.defaultCode,
               hideCode: true,
             });
           }}
@@ -307,7 +306,7 @@ const AddCellButtons: React.FC<{
             createNewCell({
               cellId: { type: "__end__", columnId },
               before: false,
-              code: new SQLLanguageAdapter().defaultCode,
+              code: LanguageAdapters.sql.defaultCode,
             });
           }}
         >

package/src/components/editor/renderers/slides-layout/slides-layout.tsx

@@ -24,7 +24,7 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   const isReading = mode === "read";
 
   const slides = (
-    <LazySlidesComponent forceKeyboardNavigation={true}>
+    <LazySlidesComponent forceKeyboardNavigation={true} className="flex-1">
       {cells.map((cell) => {
         const isOutputEmpty = cell.output == null || cell.output.data === "";
         if (isOutputEmpty) {
@@ -45,10 +45,10 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   );
 
   if (isReading) {
-    return <div className="p-4">{slides}</div>;
+    return <div className="p-4 flex flex-col flex-1 max-h-[95%]">{slides}</div>;
   }
 
-  return <div className="pr-9">{slides}</div>;
+  return <div className="pr-18 pb-5 flex-1 flex flex-col">{slides}</div>;
 };
 
 interface SlideProps extends Pick<CellRuntimeState, "output" | "status"> {

package/src/components/editor/renderers/slides-layout/types.ts

@@ -5,6 +5,7 @@
  * The serialized form of a slides layout.
  * This must be backwards-compatible as it is stored on the user's disk.
  */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export type SerializedSlidesLayout = {};
 
 export interface SlidesLayout extends SerializedSlidesLayout {

package/src/components/pages/home-page.tsx

@@ -21,6 +21,7 @@ import {
   Tree,
   type TreeApi,
 } from "react-arborist";
+import { useLocale } from "react-aria";
 import { MarkdownIcon } from "@/components/editor/cell/code/icons";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
@@ -383,6 +384,8 @@ const NotebookList: React.FC<{
 };
 
 const MarimoFileComponent = ({ file }: { file: MarimoFile }) => {
+  const { locale } = useLocale();
+
   // If path is a sessionId, then it has not been saved yet
   // We want to keep the sessionId in this case
   const isNewNotebook = isSessionId(file.path);
@@ -427,7 +430,7 @@ const MarimoFileComponent = ({ file }: { file: MarimoFile }) => {
         </div>
         {!!file.lastModified && (
           <div className="text-xs text-muted-foreground opacity-80">
-            {timeAgo(file.lastModified * 1000)}
+            {timeAgo(file.lastModified * 1000, locale)}
           </div>
         )}
       </div>

package/src/components/slides/slides-component.tsx

@@ -95,7 +95,7 @@ const SlidesComponent = ({
               }}
               className={cn(
                 "h-full w-full flex box-border overflow-y-auto overflow-x-hidden",
-                isFullscreen ? "p-20" : "p-6",
+                isFullscreen ? "p-20" : "p-6 pb-12",
               )}
             >
               <div className="mo-slide-content">{child}</div>

package/src/components/slides/slides.css

@@ -68,6 +68,7 @@ so we are resetting this back to initial. */
   width: 100%;
   display: flex;
   justify-content: center;
+  min-height: fit-content;
 
   /* width is normally set to 100%, but we want the content to be centered around
   the width needed. */
@@ -79,6 +80,11 @@ so we are resetting this back to initial. */
     width: unset;
   }
 
+  /* If the first output is the only child, make it flex 1 */
+  > *:only-child > .output:only-child {
+    flex: 1;
+  }
+
   /* Components that should be full width when in slides mode */
   div:has(> marimo-ui-element > marimo-vega) {
     display: block !important;

package/src/components/terminal/theme.tsx

@@ -1,3 +1,4 @@
+/* Copyright 2024 Marimo. All rights reserved. */
 import type { ResolvedTheme } from "@/theme/useTheme";
 
 // Terminal theme configuration

package/src/components/tracing/tracing-spec.ts

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import type { TopLevelSpec } from "vega-lite";
+import type { TimeUnit } from "vega-lite/build/src/timeunit";
 import type { CellId } from "@/core/cells/ids";
 import type { CellRun } from "@/core/cells/runs";
 import type { ResolvedTheme } from "@/theme/useTheme";
@@ -30,6 +31,8 @@ export function createGanttBaseSpec(
   chartPosition: ChartPosition,
   theme: ResolvedTheme,
 ): Readonly<TopLevelSpec> {
+  // @ts-expect-error - Supported by vega/vega-lite but invalid "TimeUnit" option from exported type
+  const timeUnit: TimeUnit = "hoursminutessecondsmilliseconds";
   return {
     $schema: "https://vega.github.io/schema/vega-lite/v5.json",
     background: theme === "dark" ? "black" : undefined,
@@ -76,15 +79,13 @@ export function createGanttBaseSpec(
         {
           field: startTimestampField,
           type: "temporal",
-          // @ts-expect-error - Supported by vega/vega-lite but invalid "TimeUnit" option from exported type
-          timeUnit: "hoursminutessecondsmilliseconds",
+          timeUnit: timeUnit,
           title: "Start",
         },
         {
           field: endTimestampField,
           type: "temporal",
-          // @ts-expect-error - Supported by vega/vega-lite but invalid "TimeUnit" option from exported type
-          timeUnit: "hoursminutessecondsmilliseconds",
+          timeUnit: timeUnit,
           title: "End",
         },
       ],

package/src/components/ui/range-slider.tsx

@@ -3,6 +3,7 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import * as React from "react";
+import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
 import { prettyScientificNumber } from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
@@ -20,6 +21,7 @@ const RangeSlider = React.forwardRef<
   }
 >(({ className, valueMap, ...props }, ref) => {
   const [open, openActions] = useBoolean(false);
+  const { locale } = useLocale();
 
   return (
     <SliderPrimitive.Root
@@ -66,7 +68,7 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[0]}>
-                {prettyScientificNumber(valueMap(props.value[0]))}
+                {prettyScientificNumber(valueMap(props.value[0]), { locale })}
               </TooltipContent>
             )}
           </TooltipPortal>
@@ -87,7 +89,7 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[1]}>
-                {prettyScientificNumber(valueMap(props.value[1]))}
+                {prettyScientificNumber(valueMap(props.value[1]), { locale })}
               </TooltipContent>
             )}
           </TooltipPortal>

package/src/components/ui/slider.tsx

@@ -3,6 +3,7 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import * as React from "react";
+import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
 import { prettyScientificNumber } from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
@@ -20,6 +21,7 @@ const Slider = React.forwardRef<
   }
 >(({ className, valueMap, ...props }, ref) => {
   const [open, openActions] = useBoolean(false);
+  const { locale } = useLocale();
 
   return (
     <SliderPrimitive.Root
@@ -66,7 +68,7 @@ const Slider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 1 && (
               <TooltipContent key={props.value[0]}>
-                {prettyScientificNumber(valueMap(props.value[0]))}
+                {prettyScientificNumber(valueMap(props.value[0]), { locale })}
               </TooltipContent>
             )}
           </TooltipPortal>

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

@@ -14,6 +14,7 @@ import {
 import { sortBy } from "lodash-es";
 import { SquareEqualIcon, WorkflowIcon } from "lucide-react";
 import React, { memo, useMemo } from "react";
+import { useLocale } from "react-aria";
 import { CellLink } from "@/components/editor/links/cell-link";
 import { getCellEditorView, useCellNames } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
@@ -233,6 +234,7 @@ export const VariableTable: React.FC<Props> = memo(
     const [sorting, setSorting] = React.useState<SortingState>([]);
     const [globalFilter, setGlobalFilter] = React.useState("");
     const cellNames = useCellNames();
+    const { locale } = useLocale();
 
     const resolvedVariables: ResolvedVariable[] = useMemo(() => {
       const getName = (id: CellId) => {
@@ -279,6 +281,7 @@ export const VariableTable: React.FC<Props> = memo(
       globalFilterFn: "auto",
       // sorting
       manualSorting: true,
+      locale: locale,
       onSortingChange: setSorting,
       getSortedRowModel: getSortedRowModel(),
       state: {

package/src/core/MarimoApp.tsx

@@ -15,6 +15,7 @@ import { ErrorBoundary } from "../components/editor/boundary/ErrorBoundary";
 import { ModalProvider } from "../components/modal/ImperativeModal";
 import { Toaster } from "../components/ui/toaster";
 import { TooltipProvider } from "../components/ui/tooltip";
+import { LocaleProvider } from "./i18n/locale-provider";
 import { slotsController } from "./slots/slots";
 
 // Force tailwind classnames
@@ -69,7 +70,7 @@ export const MarimoApp: React.FC = memo(() => {
       <CssVariables
         variables={{ "--marimo-code-editor-font-size": editorFontSize }}
       >
-        {renderBody()}
+        <LocaleProvider>{renderBody()}</LocaleProvider>
       </CssVariables>
     </Providers>
   );
@@ -85,11 +86,13 @@ const Providers = memo(({ children }: PropsWithChildren) => {
       <Suspense>
         <TooltipProvider>
           <SlotzProvider controller={slotsController}>
-            <ModalProvider>
-              {children}
-              <Toaster />
-              <TailwindIndicator />
-            </ModalProvider>
+            <LocaleProvider>
+              <ModalProvider>
+                {children}
+                <Toaster />
+                <TailwindIndicator />
+              </ModalProvider>
+            </LocaleProvider>
           </SlotzProvider>
         </TooltipProvider>
       </Suspense>

package/src/core/ai/context/__tests__/registry.test.ts

@@ -101,11 +101,13 @@ class AttachmentContextProvider extends AIContextProvider<MockContextItem> {
   readonly mentionPrefix = "@";
   readonly contextType = "attachment";
 
-  constructor(
-    private items: MockContextItem[] = [],
-    private attachments: FileUIPart[] = [],
-  ) {
+  private items: MockContextItem[];
+  private attachments: FileUIPart[];
+
+  constructor(items: MockContextItem[] = [], attachments: FileUIPart[] = []) {
     super();
+    this.items = items;
+    this.attachments = attachments;
   }
 
   getItems(): MockContextItem[] {

package/src/core/ai/context/providers/cell-output.ts

@@ -86,9 +86,10 @@ export class CellOutputContextProvider extends AIContextProvider<CellOutputConte
   readonly title = "Cell Outputs";
   readonly mentionPrefix = "@";
   readonly contextType = "cell-output";
-
-  constructor(private store: JotaiStore) {
+  private store: JotaiStore;
+  constructor(store: JotaiStore) {
     super();
+    this.store = store;
   }
 
   getItems(): CellOutputContextItem[] {

package/src/core/ai/context/providers/error.ts

@@ -64,9 +64,11 @@ export class ErrorContextProvider extends AIContextProvider<ErrorContextItem> {
   readonly title = "Errors";
   readonly mentionPrefix = "@";
   readonly contextType = "error";
+  private store: JotaiStore;
 
-  constructor(private store: JotaiStore) {
+  constructor(store: JotaiStore) {
     super();
+    this.store = store;
   }
 
   getItems(): ErrorContextItem[] {

package/src/core/ai/context/providers/file.ts

@@ -43,11 +43,16 @@ export class FileContextProvider extends AIContextProvider<FileContextItem> {
   readonly mentionPrefix = "#";
   readonly contextType = "file";
 
+  private apiRequests: EditRequests & RunRequests;
+  private config: FileSearchConfig;
+
   constructor(
-    private apiRequests: EditRequests & RunRequests,
-    private config: FileSearchConfig = DEFAULT_FILE_SEARCH_CONFIG,
+    apiRequests: EditRequests & RunRequests,
+    config: FileSearchConfig = DEFAULT_FILE_SEARCH_CONFIG,
   ) {
     super();
+    this.apiRequests = apiRequests;
+    this.config = config;
   }
 
   /**

package/src/core/ai/context/providers/tables.ts

@@ -17,9 +17,10 @@ export class TableContextProvider extends AIContextProvider<TableContextItem> {
   readonly title = "Tables";
   readonly mentionPrefix = "@";
   readonly contextType = "data";
-
-  constructor(private tablesMap: DatasetTablesMap) {
+  private tablesMap: DatasetTablesMap;
+  constructor(tablesMap: DatasetTablesMap) {
     super();
+    this.tablesMap = tablesMap;
   }
 
   getItems(): TableContextItem[] {