@marimo-team/islands 0.17.8 → 0.18.0

package/src/core/cells/__tests__/session.test.ts

@@ -446,9 +446,6 @@ describe("notebookStateFromSession", () => {
       const session = createSession([]);
       const result = notebookStateFromSession(session, null);
 
-      expect(Logger.warn).toHaveBeenCalledWith(
-        "Session and notebook must have at least one cell",
-      );
       expect(result).toBeNull();
     });
 
@@ -456,9 +453,6 @@ describe("notebookStateFromSession", () => {
       const notebook = createNotebook([]);
       const result = notebookStateFromSession(null, notebook);
 
-      expect(Logger.warn).toHaveBeenCalledWith(
-        "Session and notebook must have at least one cell",
-      );
       expect(result).toBeNull();
     });
 
@@ -467,9 +461,6 @@ describe("notebookStateFromSession", () => {
       const notebook = createNotebook([]);
       const result = notebookStateFromSession(session, notebook);
 
-      expect(Logger.warn).toHaveBeenCalledWith(
-        "Session and notebook must have at least one cell",
-      );
       expect(result).toBeNull();
     });
   });

package/src/core/cells/session.ts

@@ -246,7 +246,6 @@ export function notebookStateFromSession(
     mergeSessionAndNotebookCells(session, notebook);
 
   if (cellIds.length === 0) {
-    Logger.warn("Session and notebook must have at least one cell");
     return null;
   }
 

package/src/core/codemirror/copilot/client.ts

@@ -89,9 +89,29 @@ class LazyWebsocketTransport extends Transport {
     data: JSONRPCRequestData,
     timeout: number | null | undefined,
   ) {
+    // If delegate is undefined, try to reconnect
+    if (!this.delegate) {
+      Logger.log("Copilot#sendData: Delegate not initialized, reconnecting...");
+      try {
+        await this.tryConnect();
+      } catch (error) {
+        Logger.error("Copilot#sendData: Failed to reconnect transport", error);
+        throw new Error(
+          "Unable to connect to GitHub Copilot. Please check your settings and try again.",
+        );
+      }
+    }
+
+    // After reconnection, delegate should be initialized
+    if (!this.delegate) {
+      throw new Error(
+        "Failed to initialize GitHub Copilot connection. Please try again.",
+      );
+    }
+
     // Clamp timeout to 5 seconds
     timeout = Math.min(timeout ?? 5000, 5000);
-    return this.delegate?.sendData(data, timeout);
+    return this.delegate.sendData(data, timeout);
   }
 }
 

package/src/core/codemirror/copilot/copilot-config.tsx

@@ -24,13 +24,41 @@ export const CopilotConfig = memo(() => {
     evt.preventDefault();
     setLoading(true);
     try {
-      const { verificationUri, status, userCode } = await initiateSignIn();
+      const result = await initiateSignIn();
+
+      // Validate the response has required fields
+      if (!result || !result.verificationUri || !result.userCode) {
+        Logger.error("Copilot#trySignIn: Invalid response from sign-in", {
+          result,
+        });
+        setStep("connectionError");
+        toast({
+          title: "GitHub Copilot Connection Error",
+          description:
+            "Unable to connect to GitHub Copilot. Please check your settings and try again.",
+          variant: "danger",
+        });
+        return;
+      }
+
+      const { verificationUri, status, userCode } = result;
       if (isSignedIn(status)) {
         copilotChangeSignIn(true);
       } else {
         setStep("signingIn");
         setLocalData({ url: verificationUri, code: userCode });
       }
+    } catch (error) {
+      Logger.error("Copilot#trySignIn: Error during sign-in", error);
+      setStep("connectionError");
+      toast({
+        title: "GitHub Copilot Connection Error",
+        description:
+          error instanceof Error
+            ? error.message
+            : "Unable to connect to GitHub Copilot. Please check your settings and try again.",
+        variant: "danger",
+      });
     } finally {
       setLoading(false);
     }

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

@@ -87,6 +87,7 @@ test("default UserConfig - empty", () => {
         "default_auto_download": [],
         "default_sql_output": "auto",
         "on_cell_change": "autorun",
+        "reactive_tests": true,
         "watcher_on_save": "lazy",
       },
       "save": {
@@ -154,6 +155,7 @@ test("default UserConfig - one level", () => {
         "default_auto_download": [],
         "default_sql_output": "auto",
         "on_cell_change": "autorun",
+        "reactive_tests": true,
         "watcher_on_save": "lazy",
       },
       "save": {

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

@@ -119,6 +119,7 @@ export const UserConfigSchema = z
         auto_instantiate: z.boolean().prefault(true),
         on_cell_change: z.enum(["lazy", "autorun"]).prefault("autorun"),
         auto_reload: z.enum(["off", "lazy", "autorun"]).prefault("off"),
+        reactive_tests: z.boolean().prefault(true),
         watcher_on_save: z.enum(["lazy", "autorun"]).prefault("lazy"),
         default_sql_output: z.enum(VALID_SQL_OUTPUT_FORMATS).prefault("auto"),
         default_auto_download: z

package/src/core/packages/__tests__/package-input-utils.test.ts

@@ -0,0 +1,93 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { stripPackageManagerPrefix } from "../package-input-utils";
+
+describe("stripPackageManagerPrefix", () => {
+  it("should remove 'pip install' prefix", () => {
+    expect(stripPackageManagerPrefix("pip install httpx")).toBe("httpx");
+    expect(stripPackageManagerPrefix("pip install httpx requests")).toBe(
+      "httpx requests",
+    );
+  });
+
+  it("should remove 'pip3 install' prefix", () => {
+    expect(stripPackageManagerPrefix("pip3 install pandas")).toBe("pandas");
+  });
+
+  it("should remove 'uv add' prefix", () => {
+    expect(stripPackageManagerPrefix("uv add numpy")).toBe("numpy");
+    expect(stripPackageManagerPrefix("uv add pandas numpy")).toBe(
+      "pandas numpy",
+    );
+  });
+
+  it("should remove 'uv pip install' prefix", () => {
+    expect(stripPackageManagerPrefix("uv pip install scipy")).toBe("scipy");
+  });
+
+  it("should remove 'poetry add' prefix", () => {
+    expect(stripPackageManagerPrefix("poetry add flask")).toBe("flask");
+  });
+
+  it("should remove 'conda install' prefix", () => {
+    expect(stripPackageManagerPrefix("conda install matplotlib")).toBe(
+      "matplotlib",
+    );
+  });
+
+  it("should remove 'pipenv install' prefix", () => {
+    expect(stripPackageManagerPrefix("pipenv install django")).toBe("django");
+  });
+
+  it("should be case insensitive", () => {
+    expect(stripPackageManagerPrefix("PIP INSTALL httpx")).toBe("httpx");
+    expect(stripPackageManagerPrefix("Pip Install requests")).toBe("requests");
+    expect(stripPackageManagerPrefix("UV ADD numpy")).toBe("numpy");
+  });
+
+  it("should handle extra whitespace", () => {
+    expect(stripPackageManagerPrefix("  pip install   httpx  ")).toBe("httpx");
+    expect(stripPackageManagerPrefix("uv add    pandas   ")).toBe("pandas");
+  });
+
+  it("should return input unchanged if no prefix matches", () => {
+    expect(stripPackageManagerPrefix("httpx")).toBe("httpx");
+    expect(stripPackageManagerPrefix("pandas numpy")).toBe("pandas numpy");
+    expect(stripPackageManagerPrefix("httpx==0.27.0")).toBe("httpx==0.27.0");
+  });
+
+  it("should handle package specifications with versions", () => {
+    expect(stripPackageManagerPrefix("pip install httpx==0.27.0")).toBe(
+      "httpx==0.27.0",
+    );
+    expect(stripPackageManagerPrefix("uv add pandas>=2.0.0")).toBe(
+      "pandas>=2.0.0",
+    );
+  });
+
+  it("should handle git URLs", () => {
+    expect(
+      stripPackageManagerPrefix(
+        "pip install git+https://github.com/encode/httpx",
+      ),
+    ).toBe("git+https://github.com/encode/httpx");
+  });
+
+  it("should handle multiple packages", () => {
+    expect(stripPackageManagerPrefix("pip install httpx requests pandas")).toBe(
+      "httpx requests pandas",
+    );
+  });
+
+  it("should only remove the first matching prefix", () => {
+    // Edge case: input contains prefix-like text multiple times
+    expect(stripPackageManagerPrefix("pip install pip install httpx")).toBe(
+      "pip install httpx",
+    );
+  });
+
+  it("should handle empty string", () => {
+    expect(stripPackageManagerPrefix("")).toBe("");
+    expect(stripPackageManagerPrefix("   ")).toBe("");
+  });
+});

package/src/core/packages/package-input-utils.ts

@@ -0,0 +1,36 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+/**
+ * Removes common package manager command prefixes from an input string.
+ * This allows users to paste commands like "pip install httpx" and have
+ * the "pip install" prefix automatically removed.
+ *
+ * @param input - The raw input string that may contain a package manager prefix
+ * @returns The input with any recognized prefix removed and trimmed
+ *
+ * @example
+ * stripPackageManagerPrefix("pip install httpx") // returns "httpx"
+ * stripPackageManagerPrefix("uv add pandas numpy") // returns "pandas numpy"
+ * stripPackageManagerPrefix("httpx") // returns "httpx"
+ */
+export function stripPackageManagerPrefix(input: string): string {
+  const trimmedInput = input.trim();
+
+  const prefixes = [
+    "pip install",
+    "pip3 install",
+    "uv add",
+    "uv pip install",
+    "poetry add",
+    "conda install",
+    "pipenv install",
+  ];
+
+  for (const prefix of prefixes) {
+    if (trimmedInput.toLowerCase().startsWith(prefix.toLowerCase())) {
+      return trimmedInput.slice(prefix.length).trim();
+    }
+  }
+
+  return trimmedInput;
+}

package/src/css/md.css

@@ -78,6 +78,11 @@ a .markdown iconify-icon:first-child {
   margin-inline-end: 0.4em;
 }
 
+/* make links and their contents inline-flex to avoid extra gaps */
+a > .markdown > .paragraph {
+  display: inline-flex;
+}
+
 iconify-icon {
   display: inline-flex;
   align-items: center;

package/src/plugins/core/__test__/sanitize.test.ts

@@ -141,7 +141,7 @@ describe("sanitizeHtml", () => {
     const html =
       "<marimo-mermaid data-diagram='&quot;sequenceDiagram&#92;n    Alice-&gt;&gt;John&#92;n    John--&gt;&gt;Alice&#92;n    &quot;'></marimo-mermaid>";
     expect(sanitizeHtml(html)).toMatchInlineSnapshot(
-      `"<marimo-mermaid></marimo-mermaid>"`,
+      `"<marimo-mermaid data-diagram="&quot;sequenceDiagram\\n    Alice->>John\\n    John-->>Alice\\n    &quot;"></marimo-mermaid>"`,
     );
   });
 

package/src/plugins/core/sanitize.ts

@@ -80,7 +80,9 @@ export function sanitizeHtml(html: string) {
       tagNameCheck: /^(marimo-[A-Za-z][\w-]*|iconify-icon)$/,
       attributeNameCheck: /^[A-Za-z][\w-]*$/,
     },
-    SAFE_FOR_XML: html.includes("marimo-mermaid"),
+    // This flag means we should sanitize such that is it safe for XML,
+    // but this is only used for HTML content.
+    SAFE_FOR_XML: !html.includes("marimo-mermaid"),
   };
   return DOMPurify.sanitize(html, sanitizationOptions);
 }

package/src/plugins/impl/DataTablePlugin.tsx

@@ -63,6 +63,7 @@ import { type CellId, findCellId } from "@/core/cells/ids";
 import { slotsController } from "@/core/slots/slots";
 import { store } from "@/core/state/jotai";
 import { isStaticNotebook } from "@/core/static/static-state";
+import { isInVscodeExtension } from "@/core/vscode/is-in-vscode";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useEffectSkipFirstRender } from "@/hooks/useEffectSkipFirstRender";
@@ -179,6 +180,7 @@ interface Data<T> {
   showDataTypes: boolean;
   showPageSizeSelector: boolean;
   showColumnExplorer: boolean;
+  showRowExplorer: boolean;
   showChartBuilder: boolean;
   rowHeaders: FieldTypesWithExternalType;
   fieldTypes?: FieldTypesWithExternalType | null;
@@ -250,6 +252,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       showDataTypes: z.boolean().default(true),
       showPageSizeSelector: z.boolean().default(true),
       showColumnExplorer: z.boolean().default(true),
+      showRowExplorer: z.boolean().default(true),
       showChartBuilder: z.boolean().default(true),
       rowHeaders: columnToFieldTypesSchema,
       freezeColumnsLeft: z.array(z.string()).optional(),
@@ -718,6 +721,7 @@ const DataTableComponent = ({
   showDownload,
   showPageSizeSelector,
   showColumnExplorer,
+  showRowExplorer,
   showChartBuilder,
   showDataTypes,
   rowHeaders,
@@ -899,6 +903,8 @@ const DataTableComponent = ({
   const showColExplorer =
     showColumnExplorer && preview_column && isPanelOpen("column-explorer");
 
+  const isInVscode = isInVscodeExtension();
+
   return (
     <>
       {/* When the totalRows is "too_many" and the pageSize is the same as the
@@ -988,7 +994,10 @@ const DataTableComponent = ({
             toggleDisplayHeader={toggleDisplayHeader}
             showChartBuilder={showChartBuilder}
             showPageSizeSelector={showPageSizeSelector}
-            showColumnExplorer={showColumnExplorer}
+            // Hidden in VSCode (for now) because we don't have a panel to show
+            // the column/row explorer.
+            showColumnExplorer={showColumnExplorer && !isInVscode}
+            showRowExplorer={showRowExplorer && !isInVscode}
             togglePanel={togglePanel}
             isPanelOpen={isPanelOpen}
             viewedRowIdx={viewedRowIdx}

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -89,6 +89,7 @@ export const ChatPlugin = createPlugin<{ messages: ChatMessage[] }>(
           send_prompt={props.functions.send_prompt}
           value={props.value?.messages || Arrays.EMPTY}
           setValue={(messages) => props.setValue({ messages })}
+          host={props.host}
         />
       </Suspense>
     </TooltipProvider>

package/src/plugins/impl/chat/chat-ui.tsx

@@ -12,6 +12,7 @@ import {
   DownloadIcon,
   HelpCircleIcon,
   PaperclipIcon,
+  RotateCwIcon,
   SendIcon,
   SettingsIcon,
   Trash2Icon,
@@ -42,7 +43,12 @@ import {
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { moveToEndOfEditor } from "@/core/codemirror/utils";
+import { MarimoIncomingMessageEvent } from "@/core/dom/events";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import {
+  type HTMLElementNotDerivedFromRef,
+  useEventListener,
+} from "@/hooks/useEventListener";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
 import { Logger } from "@/utils/Logger";
@@ -63,6 +69,7 @@ interface Props extends PluginFunctions {
   allowAttachments: boolean | string[];
   value: ChatMessage[];
   setValue: (messages: ChatMessage[]) => void;
+  host: HTMLElement;
 }
 
 export const Chatbot: React.FC<Props> = (props) => {
@@ -74,6 +81,12 @@ export const Chatbot: React.FC<Props> = (props) => {
   const codeMirrorInputRef = useRef<ReactCodeMirrorRef>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
+  // Track streaming state - maps backend message_id to frontend message index
+  const streamingStateRef = useRef<{
+    backendMessageId: string | null;
+    frontendMessageIndex: number | null;
+  }>({ backendMessageId: null, frontendMessageIndex: null });
+
   const { data: initialMessages } = useAsyncData(async () => {
     const chatMessages = await props.get_chat_history({});
     const messages: UIMessage[] = chatMessages.messages.map((message, idx) => ({
@@ -113,6 +126,19 @@ export const Chatbot: React.FC<Props> = (props) => {
               .join("\n"),
             parts: m.parts,
           }));
+
+          // Create a placeholder message for streaming
+          const messageId = Date.now().toString();
+
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: messageId,
+              role: "assistant",
+              parts: [{ type: "text", text: "" }],
+            },
+          ]);
+
           const response = await props.send_prompt({
             messages: messages,
             config: {
@@ -124,18 +150,35 @@ export const Chatbot: React.FC<Props> = (props) => {
               presence_penalty: config.presence_penalty,
             },
           });
-          // Update local state with AI response
-          setMessages((prev) => [
-            ...prev,
-            {
-              id: Date.now().toString(),
-              role: "assistant",
-              parts: [{ type: "text", text: response }],
-            },
-          ]);
+
+          // If streaming didn't happen (non-generator response), update the message
+          // Check if streaming state is still set (meaning no chunks were received)
+          if (
+            streamingStateRef.current.backendMessageId === null &&
+            streamingStateRef.current.frontendMessageIndex === null
+          ) {
+            setMessages((prev) => {
+              const updated = [...prev];
+              const index = updated.findIndex((m) => m.id === messageId);
+              if (index !== -1) {
+                updated[index] = {
+                  ...updated[index],
+                  parts: [{ type: "text", text: response }],
+                };
+              }
+              return updated;
+            });
+          }
+
           return new Response(response);
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } catch (error: any) {
+          // Clear streaming state on error
+          streamingStateRef.current = {
+            backendMessageId: null,
+            frontendMessageIndex: null,
+          };
+
           // HACK: strip the error message to clean up the response
           const strippedError = error.message
             .split("failed with exception ")
@@ -152,12 +195,98 @@ export const Chatbot: React.FC<Props> = (props) => {
         fileInputRef.current.value = "";
       }
       Logger.debug("Finished streaming message:", message);
+
+      // Clear streaming state
+      streamingStateRef.current = {
+        backendMessageId: null,
+        frontendMessageIndex: null,
+      };
     },
     onError: (error) => {
       Logger.error("An error occurred:", error);
+      // Clear streaming state on error
+      streamingStateRef.current = {
+        backendMessageId: null,
+        frontendMessageIndex: null,
+      };
     },
   });
 
+  // Listen for streaming chunks from backend
+  useEventListener(
+    props.host as HTMLElementNotDerivedFromRef,
+    MarimoIncomingMessageEvent.TYPE,
+    (e) => {
+      const message = e.detail.message;
+      if (
+        typeof message === "object" &&
+        message !== null &&
+        "type" in message &&
+        message.type === "stream_chunk"
+      ) {
+        const chunkMessage = message as {
+          type: string;
+          message_id: string;
+          content: string;
+          is_final: boolean;
+        };
+
+        // Initialize streaming state on first chunk if not already set
+        if (streamingStateRef.current.backendMessageId === null) {
+          // Find the last assistant message (which should be the placeholder we created)
+          setMessages((prev) => {
+            const updated = [...prev];
+            // Find the last assistant message
+            for (let i = updated.length - 1; i >= 0; i--) {
+              if (updated[i].role === "assistant") {
+                streamingStateRef.current = {
+                  backendMessageId: chunkMessage.message_id,
+                  frontendMessageIndex: i,
+                };
+                break;
+              }
+            }
+            return updated;
+          });
+        }
+
+        // Only process chunks for the current streaming message
+        const frontendIndex = streamingStateRef.current.frontendMessageIndex;
+        if (
+          streamingStateRef.current.backendMessageId ===
+            chunkMessage.message_id &&
+          frontendIndex !== null
+        ) {
+          setMessages((prev) => {
+            const updated = [...prev];
+            const index = frontendIndex;
+
+            // Update the message at the tracked index
+            if (index < updated.length) {
+              const messageToUpdate = updated[index];
+              if (messageToUpdate.role === "assistant") {
+                updated[index] = {
+                  ...messageToUpdate,
+                  parts: [{ type: "text", text: chunkMessage.content }],
+                };
+              }
+            }
+
+            return updated;
+          });
+
+          // Clear streaming state when final chunk arrives
+          if (chunkMessage.is_final) {
+            streamingStateRef.current = {
+              backendMessageId: null,
+              frontendMessageIndex: null,
+            };
+          }
+        }
+      }
+    },
+  );
+
   const isLoading = status === "submitted" || status === "streaming";
 
   const handleDelete = (id: string) => {
@@ -283,13 +412,14 @@ export const Chatbot: React.FC<Props> = (props) => {
         <Button
           variant="text"
           size="icon"
+          disabled={messages.length === 0}
           onClick={() => {
             setMessages([]);
             props.setValue([]);
             props.delete_chat_history({});
           }}
         >
-          <Trash2Icon className="h-3 w-3" />
+          <RotateCwIcon className="h-3 w-3" />
         </Button>
       </div>
       <div

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -297,6 +297,7 @@ export const DataFrameComponent = memo(
           get_column_summaries={getColumnSummaries}
           showPageSizeSelector={(total_rows && total_rows > 5) || false}
           showColumnExplorer={false}
+          showRowExplorer={true}
           showChartBuilder={false}
           value={Arrays.EMPTY}
           setValue={Functions.NOOP}

package/src/plugins/layout/NavigationMenuPlugin.tsx

@@ -14,11 +14,13 @@ import {
 import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { cn } from "@/utils/cn";
+import { appendQueryParams } from "@/utils/urls";
 import type {
   IStatelessPlugin,
   IStatelessPluginProps,
 } from "../stateless-plugin";
 import "./navigation-menu.css";
+import { KnownQueryParams } from "@/core/constants";
 
 interface MenuItem {
   label: string;
@@ -99,6 +101,15 @@ const NavMenuComponent = ({
     return "_self";
   };
 
+  const preserveQueryParams = (href: string) => {
+    const currentUrl = new URL(globalThis.location.href);
+    return appendQueryParams({
+      href,
+      queryParams: currentUrl.search,
+      keys: [KnownQueryParams.filePath],
+    });
+  };
+
   const renderMenuItem = (item: MenuItem | MenuItemGroup) => {
     if ("items" in item) {
       return orientation === "horizontal" ? (
@@ -113,7 +124,7 @@ const NavMenuComponent = ({
                   <ListItem
                     key={subItem.label}
                     label={subItem.label}
-                    href={subItem.href}
+                    href={preserveQueryParams(subItem.href)}
                     target={target(subItem.href)}
                   >
                     {subItem.description &&
@@ -142,7 +153,7 @@ const NavMenuComponent = ({
                 {maybeWithTooltip(
                   <NavigationMenuLink
                     key={subItem.label}
-                    href={subItem.href}
+                    href={preserveQueryParams(subItem.href)}
                     target={target(subItem.href)}
                     className={navigationMenuTriggerStyle({
                       orientation: orientation,
@@ -162,7 +173,7 @@ const NavMenuComponent = ({
     return (
       <NavigationMenuItem key={item.label}>
         <NavigationMenuLink
-          href={item.href}
+          href={preserveQueryParams(item.href)}
           target={target(item.href)}
           className={navigationMenuTriggerStyle({
             orientation: orientation,

package/src/plugins/layout/ProgressPlugin.tsx

@@ -93,10 +93,13 @@ export const ProgressComponent = ({
 
     const elements: React.ReactNode[] = [];
     if (rate) {
-      elements.push(
-        <span key="rate">{rate} iter/s</span>,
-        <span key="spacer-rate">&middot;</span>,
-      );
+      if (rate < 1) {
+        elements.push(<span key="rate">{prettyTime(1 / rate)} per iter</span>);
+      } else {
+        elements.push(<span key="rate">{rate} iter/s</span>);
+      }
+
+      elements.push(<span key="spacer-rate">&middot;</span>);
     }
 
     if (!hasCompleted && eta) {
@@ -170,6 +173,6 @@ export function prettyTime(seconds: number): string {
     language: "shortEn",
     largest: 2,
     spacer: "",
-    maxDecimalPoints: 2,
+    maxDecimalPoints: seconds < 10 ? 2 : 0,
   });
 }