@marimo-team/frontend 0.23.9-dev2 → 0.23.9-dev20

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

@@ -20,13 +20,17 @@ import {
   RotateCwIcon,
   SendHorizontalIcon,
   SettingsIcon,
+  SquareIcon,
   Trash2Icon,
   X,
 } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 import { renderUIMessage } from "@/components/chat/chat-display";
-import { convertToFileUIPart } from "@/components/chat/chat-utils";
+import {
+  convertToFileUIPart,
+  hasPendingToolCalls,
+} from "@/components/chat/chat-utils";
 import {
   type AdditionalCompletions,
   PromptInput,
@@ -60,6 +64,7 @@ import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
 import { Objects } from "@/utils/objects";
 import { Strings } from "@/utils/strings";
+import { generateUUID } from "@/utils/uuid";
 import { ErrorBanner } from "../common/error-banner";
 import type { PluginFunctions } from "./ChatPlugin";
 import type { ChatConfig } from "./types";
@@ -86,6 +91,48 @@ const ChatMessageIncomingSchema = z.object({
   is_final: z.boolean().optional(),
 });
 
+type ChatMessageIncoming = z.infer<typeof ChatMessageIncomingSchema>;
+
+export interface IncomingChatChunkRefs {
+  controllerRef: {
+    current: ReadableStreamDefaultController<UIMessageChunk> | null;
+  };
+  activeRequestIdRef: { current: string | null };
+}
+
+/**
+ * Route a single incoming chunk to the active stream controller, dropping it
+ * if it belongs to a stale (aborted-but-not-yet-cancelled) backend run.
+ */
+export function routeIncomingChatChunk(
+  message: ChatMessageIncoming,
+  refs: IncomingChatChunkRefs,
+): "enqueued" | "closed" | "dropped-no-controller" | "dropped-stale" {
+  const { controllerRef, activeRequestIdRef } = refs;
+  const controller = controllerRef.current;
+  if (controller === null) {
+    return "dropped-no-controller";
+  }
+  const activeRequestId = activeRequestIdRef.current;
+  if (activeRequestId !== null && message.message_id !== activeRequestId) {
+    Logger.debug("Dropping stale chat chunk", {
+      chunkRequestId: message.message_id,
+      activeRequestId,
+    });
+    return "dropped-stale";
+  }
+  if (message.content) {
+    controller.enqueue(message.content);
+  }
+  if (message.is_final) {
+    controller.close();
+    controllerRef.current = null;
+    activeRequestIdRef.current = null;
+    return "closed";
+  }
+  return "enqueued";
+}
+
 export const Chatbot: React.FC<Props> = (props) => {
   const [input, setInput] = useState("");
   const [config, setConfig] = useState<ChatConfig>(props.config);
@@ -113,16 +160,15 @@ export const Chatbot: React.FC<Props> = (props) => {
   const configRef = useRef<ChatConfig>(config);
   configRef.current = config;
 
-  // Track streaming state - maps backend message_id to frontend message index
-  const streamingStateRef = useRef<{
-    backendMessageId: string | null;
-    frontendMessageIndex: number | null;
-  }>({ backendMessageId: null, frontendMessageIndex: null });
-
   // For frontend-managed streaming, create a controller to enqueue chunks to.
   const frontendStreamControllerRef =
     useRef<ReadableStreamDefaultController<UIMessageChunk> | null>(null);
 
+  // The request_id of the currently-active prompt run. Chunks arriving with a
+  // different message_id are stale (from an aborted-but-not-yet-cancelled run
+  // on the kernel) and must be dropped
+  const activeRequestIdRef = useRef<string | null>(null);
+
   const { data: backendMessages } = useAsyncData(async () => {
     const response = await props.get_chat_history({});
     return response.messages;
@@ -143,7 +189,9 @@ export const Chatbot: React.FC<Props> = (props) => {
     error,
     regenerate,
     clearError,
+    addToolApprovalResponse,
   } = useChat({
+    sendAutomaticallyWhen: ({ messages }) => hasPendingToolCalls(messages),
     transport: new DefaultChatTransport({
       fetch: async (
         request: RequestInfo | URL,
@@ -180,17 +228,33 @@ export const Chatbot: React.FC<Props> = (props) => {
             };
           });
 
+          // Client-generated id used to (a) route chunks back to this stream
+          // and (b) ask the kernel to cancel just this run on Stop.
+          const requestId = generateUUID();
+
           const stream = new ReadableStream<UIMessageChunk>({
             start(controller) {
               frontendStreamControllerRef.current = controller;
+              activeRequestIdRef.current = requestId;
 
               const abortHandler = () => {
+                // Close the local controller first so the chat status flips to
+                // "ready" immediately and any racing chunks are dropped; then
+                // fire-and-forget the backend cancel so the kernel stops the
+                // model and we don't waste tokens / leak chunks to the next
+                // run.
                 try {
                   controller.close();
                 } catch (error) {
                   Logger.debug("Controller may already be closed", { error });
                 }
                 frontendStreamControllerRef.current = null;
+                activeRequestIdRef.current = null;
+                void props
+                  .cancel_prompt({ request_id: requestId })
+                  .catch((error: Error) => {
+                    Logger.debug("cancel_prompt failed", { error });
+                  });
               };
               signal?.addEventListener("abort", abortHandler);
 
@@ -200,28 +264,25 @@ export const Chatbot: React.FC<Props> = (props) => {
             },
             cancel() {
               frontendStreamControllerRef.current = null;
+              activeRequestIdRef.current = null;
             },
           });
 
           // Start the prompt, chunks will be sent via events
           void props
             .send_prompt({
+              request_id: requestId,
               messages: messages,
               config: chatConfig,
             })
             .catch((error: Error) => {
               frontendStreamControllerRef.current?.error(error);
               frontendStreamControllerRef.current = null;
+              activeRequestIdRef.current = null;
             });
 
           return createUIMessageStreamResponse({ stream });
         } catch (error: unknown) {
-          // Clear streaming state on error
-          streamingStateRef.current = {
-            backendMessageId: null,
-            frontendMessageIndex: null,
-          };
-
           // Handle abort gracefully without showing an error
           if (error instanceof Error && error.name === "AbortError") {
             return new Response("Aborted", { status: 499 });
@@ -244,21 +305,10 @@ export const Chatbot: React.FC<Props> = (props) => {
       }
       Logger.debug("Finished streaming message:", message);
 
-      // Clear streaming state
-      streamingStateRef.current = {
-        backendMessageId: null,
-        frontendMessageIndex: null,
-      };
-
       props.setValue(message.messages);
     },
     onError: (error) => {
       Logger.error("An error occurred:", error);
-      // Clear streaming state on error
-      streamingStateRef.current = {
-        backendMessageId: null,
-        frontendMessageIndex: null,
-      };
     },
   });
 
@@ -273,23 +323,10 @@ export const Chatbot: React.FC<Props> = (props) => {
       if (!parsedMessage.success) {
         return;
       }
-      const message = parsedMessage.data;
-
-      // Push to the stream for useChat to process
-      const controller = frontendStreamControllerRef.current;
-      if (!controller) {
-        return;
-      }
-
-      if (message.content) {
-        controller.enqueue(message.content);
-      }
-      if (message.is_final) {
-        controller.close();
-        frontendStreamControllerRef.current = null;
-      }
-
-      return;
+      routeIncomingChatChunk(parsedMessage.data, {
+        controllerRef: frontendStreamControllerRef,
+        activeRequestIdRef,
+      });
     },
   );
 
@@ -408,6 +445,9 @@ export const Chatbot: React.FC<Props> = (props) => {
                   message,
                   isStreamingReasoning: status === "streaming",
                   isLast,
+                  addToolApprovalResponse: isLast
+                    ? addToolApprovalResponse
+                    : undefined,
                 })}
               </div>
               <div className="flex justify-end text-xs gap-2 invisible group-hover:visible">
@@ -429,16 +469,8 @@ export const Chatbot: React.FC<Props> = (props) => {
         })}
 
         {isLoading && (
-          <div className="flex items-center justify-center space-x-2 mb-4">
+          <div className="flex items-center justify-center mb-4">
             <Spinner size="small" />
-            <Button
-              variant="link"
-              size="sm"
-              onClick={() => stop()}
-              className="text-(--red-9) hover:text-(--red-11)"
-            >
-              Stop
-            </Button>
           </div>
         )}
 
@@ -569,15 +601,30 @@ export const Chatbot: React.FC<Props> = (props) => {
             />
           </>
         )}
-        <Button
-          type="submit"
-          disabled={isLoading || !input}
-          variant="outline"
-          size="xs"
-          className="text-(--slate-11)"
-        >
-          <SendHorizontalIcon className="h-4 w-4" />
-        </Button>
+        {isLoading ? (
+          <Tooltip content="Stop generating">
+            <Button
+              type="button"
+              variant="link"
+              size="xs"
+              onClick={() => stop()}
+              className="text-(--red-9) hover:text-(--red-11)"
+            >
+              <SquareIcon className="h-4 w-4 fill-current" />
+            </Button>
+          </Tooltip>
+        ) : (
+          <Button
+            type="submit"
+            disabled={!input}
+            variant="outline"
+            size="xs"
+            className="text-(--slate-11)"
+            aria-label="Send message"
+          >
+            <SendHorizontalIcon className="h-4 w-4" />
+          </Button>
+        )}
       </form>
     </div>
   );

package/src/plugins/impl/chat/types.ts

@@ -22,6 +22,11 @@ export interface ChatConfig {
 }
 
 export interface SendMessageRequest {
+  request_id: string;
   messages: ChatMessage[];
   config: ChatConfig;
 }
+
+export interface CancelPromptRequest {
+  request_id: string;
+}

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

@@ -64,7 +64,6 @@ type PluginFunctions = {
     column_types_per_step: FieldTypesWithExternalType[];
     python_code?: string | null;
     sql_code?: string | null;
-    size_bytes?: number | null;
   }>;
   get_column_values: (req: { column: string }) => Promise<{
     values: unknown[];
@@ -82,9 +81,11 @@ type PluginFunctions = {
   }) => Promise<{
     data: TableData<T>;
     total_rows: number;
-    size_bytes?: number | null;
   }>;
   download_as: DownloadAsArgs;
+  get_size_bytes: (opts: Record<string, never>) => Promise<{
+    size_bytes?: number | null;
+  }>;
 };
 
 // Value is selection, but it is not currently exposed to the user
@@ -120,7 +121,6 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
         column_types_per_step: z.array(columnToFieldTypesSchema),
         python_code: z.string().nullish(),
         sql_code: z.string().nullish(),
-        size_bytes: z.number().nullish(),
       }),
     ),
     get_column_values: rpc.input(z.object({ column: z.string() })).output(
@@ -150,10 +150,12 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
         z.object({
           data: z.union([z.string(), z.array(z.object({}).passthrough())]),
           total_rows: z.number(),
-          size_bytes: z.number().nullish(),
         }),
       ),
     download_as: DownloadAsSchema,
+    get_size_bytes: rpc
+      .input(z.object({}))
+      .output(z.object({ size_bytes: z.number().nullish() })),
   })
   .renderer((props) => (
     <TableProviders>
@@ -192,6 +194,7 @@ export const DataFrameComponent = memo(
     get_column_values,
     search,
     download_as,
+    get_size_bytes,
     host,
   }: DataTableProps): JSX.Element => {
     const { data, error, isPending } = useAsyncData(
@@ -207,7 +210,6 @@ export const DataFrameComponent = memo(
       column_types_per_step,
       python_code,
       sql_code,
-      size_bytes,
     } = data || {};
 
     const totalColumns = field_types?.length;
@@ -327,7 +329,6 @@ export const DataFrameComponent = memo(
           data={url || ""}
           hasStableRowId={false}
           totalRows={total_rows ?? 0}
-          sizeBytes={size_bytes ?? null}
           totalColumns={totalColumns ?? 0}
           maxColumns="all"
           pageSize={pageSize}
@@ -336,6 +337,7 @@ export const DataFrameComponent = memo(
           rowHeaders={row_headers || Arrays.EMPTY}
           showDownload={showDownload}
           download_as={download_as}
+          get_size_bytes={get_size_bytes}
           enableSearch={false}
           showFilters={false}
           search={search}

package/src/stories/dataframe.stories.tsx

@@ -42,6 +42,7 @@ export const DataFrame: StoryObj = {
         host={document.body}
         showDownload={false}
         download_as={async () => ({ url: "", filename: "" })}
+        get_size_bytes={async () => ({ size_bytes: null })}
         lazy={false}
       />
     );

package/src/utils/__tests__/local-variables.test.ts

@@ -0,0 +1,132 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import {
+  containsMangledLocal,
+  splitMangledLocals,
+  unmangleLocal,
+} from "../local-variables";
+
+describe("unmangleLocal", () => {
+  it("extracts the cell id and original name", () => {
+    expect(unmangleLocal("_cell_Hbol_a")).toEqual({
+      cellId: "Hbol",
+      name: "_a",
+    });
+  });
+
+  it("handles names with multiple underscore segments", () => {
+    expect(unmangleLocal("_cell_Hbol_a_b")).toEqual({
+      cellId: "Hbol",
+      name: "_a_b",
+    });
+  });
+
+  it("returns null for non-mangled strings", () => {
+    expect(unmangleLocal("just_a_variable")).toBeNull();
+    expect(unmangleLocal("_private")).toBeNull();
+  });
+
+  it("handles the single-underscore local", () => {
+    // `_` is a valid local name (variables.py:62-63), mangling to
+    // `_cell_<id>_` with no trailing suffix.
+    expect(unmangleLocal("_cell_Hbol_")).toEqual({
+      cellId: "Hbol",
+      name: "_",
+    });
+  });
+
+  it("handles UUID-style cell ids", () => {
+    // External / VSCode notebooks use `external_prefix()` which is a
+    // `uuid4()` (hyphenated).
+    expect(
+      unmangleLocal("_cell_c9bf9e57-1685-4c89-bafb-ff5af830be8a_a"),
+    ).toEqual({
+      cellId: "c9bf9e57-1685-4c89-bafb-ff5af830be8a",
+      name: "_a",
+    });
+  });
+
+  it("does not match marimo cell file paths", () => {
+    // The compiled cell file is `__marimo__cell_<id>_.py` (two leading
+    // underscores, trailing `_` with no name); it must not be confused with a
+    // mangled local.
+    expect(unmangleLocal("__marimo__cell_Hbol_.py")).toBeNull();
+    expect(unmangleLocal("/tmp/marimo_42/__marimo__cell_Hbol_.py")).toBeNull();
+  });
+});
+
+describe("splitMangledLocals", () => {
+  it("returns a single text segment when nothing matches", () => {
+    expect(splitMangledLocals("plain text")).toEqual(["plain text"]);
+  });
+
+  it("splits a NameError message", () => {
+    expect(splitMangledLocals("name '_cell_Hbol_a' is not defined")).toEqual([
+      "name '",
+      { cellId: "Hbol", name: "_a" },
+      "' is not defined",
+    ]);
+  });
+
+  it("handles multiple mangled names in one string", () => {
+    expect(splitMangledLocals("_cell_AAAA_x and _cell_BBBB_y")).toEqual([
+      { cellId: "AAAA", name: "_x" },
+      " and ",
+      { cellId: "BBBB", name: "_y" },
+    ]);
+  });
+
+  it("leaves the cell file path alone", () => {
+    const path = "/tmp/marimo_42/__marimo__cell_Hbol_.py";
+    expect(splitMangledLocals(path)).toEqual([path]);
+  });
+
+  it("ignores `_cell_...` substrings preceded by `_`", () => {
+    // Mirrors `(?<!_)` in `variables.py`: a leading `_` (e.g. inside
+    // `__marimo__cell_<id>_<...>`) means this is not a mangle the compiler
+    // produced, so we must not demangle it.
+    const text = "see __marimo__cell_Hbol_a for details";
+    expect(splitMangledLocals(text)).toEqual([text]);
+  });
+
+  it("splits a UUID-style cell id", () => {
+    expect(
+      splitMangledLocals(
+        "name '_cell_c9bf9e57-1685-4c89-bafb-ff5af830be8a_a' is not defined",
+      ),
+    ).toEqual([
+      "name '",
+      {
+        cellId: "c9bf9e57-1685-4c89-bafb-ff5af830be8a",
+        name: "_a",
+      },
+      "' is not defined",
+    ]);
+  });
+
+  it("splits the single-underscore local", () => {
+    expect(splitMangledLocals("name '_cell_Hbol_' is not defined")).toEqual([
+      "name '",
+      { cellId: "Hbol", name: "_" },
+      "' is not defined",
+    ]);
+  });
+});
+
+describe("containsMangledLocal", () => {
+  it("detects mangled names", () => {
+    expect(containsMangledLocal("name '_cell_Hbol_a' is not defined")).toBe(
+      true,
+    );
+  });
+
+  it("ignores the cell file path", () => {
+    expect(containsMangledLocal("/tmp/marimo_42/__marimo__cell_Hbol_.py")).toBe(
+      false,
+    );
+  });
+
+  it("ignores `_cell_...` substrings preceded by `_`", () => {
+    expect(containsMangledLocal("see __marimo__cell_Hbol_a")).toBe(false);
+  });
+});

package/src/utils/dates.ts

@@ -134,6 +134,45 @@ export function timeAgo(
   return value.toString();
 }
 
+function pad2(n: number): string {
+  return n.toString().padStart(2, "0");
+}
+
+function pad4(n: number): string {
+  return n.toString().padStart(4, "0");
+}
+
+/**
+ * Format a Date as `YYYY-MM-DD` using the date's local-time fields.
+ *
+ * The output reflects what the user sees in their own timezone (the calendar
+ * day on their clock), not the UTC day. Use this when round-tripping values
+ * that originated from local-time inputs — date pickers, "filter on this
+ * day", calendar UI — so the displayed and serialized days agree.
+ *
+ * Not suitable for cross-timezone storage; use `Date.toISOString()` for that.
+ */
+export function dateToLocalISODate(d: Date): string {
+  return `${pad4(d.getFullYear())}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+
+/**
+ * Format a Date as `HH:MM:SS` using the date's local-time fields.
+ *
+ * See `dateToLocalISODate` for the rationale on local vs UTC.
+ */
+export function dateToLocalISOTime(d: Date): string {
+  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+
+/**
+ * Format a Date as `YYYY-MM-DDTHH:MM:SS` (no timezone suffix) using local
+ * fields. See `dateToLocalISODate` for the rationale on local vs UTC.
+ */
+export function dateToLocalISODateTime(d: Date): string {
+  return `${dateToLocalISODate(d)}T${dateToLocalISOTime(d)}`;
+}
+
 export const supportedDateFormats = ["yyyy", "yyyy-MM", "yyyy-MM-dd"] as const;
 export type DateFormat = (typeof supportedDateFormats)[number];
 

package/src/utils/local-variables.ts

@@ -0,0 +1,67 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { CellId } from "@/core/cells/ids";
+
+/**
+ * The marimo compiler rewrites underscore-prefixed references inside a cell
+ * (which Python would treat as module-private) into `_cell_<cell_id>_<name>`
+ * so each cell gets its own private namespace. When such a reference fails at
+ * runtime (`NameError: name '_cell_Hbol_a' is not defined`), the mangled name
+ * leaks into the error UI. These helpers undo that mangling for display.
+ *
+ * Mirrors `marimo/_ast/variables.py`.
+ */
+
+// Matches `_cell_<cell_id><name>` for normal ids and UUIDs. The `[\w-]`
+// id class admits hyphens; the `_\w*` name group admits the bare `_`
+// local; the `(?<!_)` lookbehind skips `__marimo__cell_...` paths.
+// Mirrors `_MANGLED_LOCAL_IN_TEXT_RE` in `variables.py`.
+const MANGLED_LOCAL_BODY = String.raw`_cell_([^\W_][\w-]*?)(_\w*)`;
+const MANGLED_LOCAL_PATTERN = String.raw`(?<!_)${MANGLED_LOCAL_BODY}`;
+// Strict (whole-string) form for `unmangleLocal`; the leading `^` makes the
+// lookbehind trivially satisfied, so use the bare body.
+const ANCHORED_RE = new RegExp(`^${MANGLED_LOCAL_BODY}$`);
+const UNANCHORED_RE = new RegExp(MANGLED_LOCAL_PATTERN);
+const GLOBAL_RE = new RegExp(MANGLED_LOCAL_PATTERN, "g");
+
+export interface UnmangledLocal {
+  cellId: CellId;
+  /** The original underscore-prefixed name, e.g. "_a". */
+  name: string;
+}
+
+export function unmangleLocal(mangled: string): UnmangledLocal | null {
+  const match = ANCHORED_RE.exec(mangled);
+  if (!match) {
+    return null;
+  }
+  return { cellId: match[1] as CellId, name: match[2] };
+}
+
+export type MangledSegment = string | UnmangledLocal;
+
+/**
+ * Split a plain text string into alternating literal text and unmangled-local
+ * segments, so callers can render mixed React content.
+ */
+export function splitMangledLocals(text: string): MangledSegment[] {
+  const segments: MangledSegment[] = [];
+  GLOBAL_RE.lastIndex = 0;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null = GLOBAL_RE.exec(text);
+  while (match !== null) {
+    if (match.index > lastIndex) {
+      segments.push(text.slice(lastIndex, match.index));
+    }
+    segments.push({ cellId: match[1] as CellId, name: match[2] });
+    lastIndex = match.index + match[0].length;
+    match = GLOBAL_RE.exec(text);
+  }
+  if (lastIndex < text.length) {
+    segments.push(text.slice(lastIndex));
+  }
+  return segments;
+}
+
+export function containsMangledLocal(text: string): boolean {
+  return UNANCHORED_RE.test(text);
+}

package/dist/assets/CellStatus-DGBvmSvq.js

@@ -1 +0,0 @@
-import{s as $}from"./chunk-LvLJmgfZ.js";import{t as O}from"./react-Bj1aDYRI.js";import{pt as F}from"./cells-Dnu4nDoy.js";import{t as z}from"./compiler-runtime-B3qBwwSJ.js";import{_ as B}from"./useEventListener-DvoEXWke.js";import{t as L}from"./jsx-runtime-BqBOg78p.js";import{t as _}from"./tooltip-DTV9tlSr.js";import{t as k}from"./ban-0fKnt00i.js";import{c as V,l as A,n as G,t as M}from"./toDate-B5A0DFEz.js";import{t as J}from"./ellipsis-KAhMaCIV.js";import{t as R}from"./refresh-cw-a_9k9BK7.js";import{t as K}from"./workflow-CgnDnnoN.js";import{i as Q,n as Y,r as C,t as U}from"./en-US-C7vnqfgk.js";import{t as E}from"./useDateFormatter-d3yglQmW.js";import{t as I}from"./multi-icon-NVkxesVZ.js";function X(n,e){let t=M(n)-+M(e);return t<0?-1:t>0?1:t}function Z(n){return G(n,Date.now())}function ee(n,e,t){let[d,l]=Y(t==null?void 0:t.in,n,e),h=d.getFullYear()-l.getFullYear(),o=d.getMonth()-l.getMonth();return h*12+o}function te(n){return e=>{let t=(n?Math[n]:Math.trunc)(e);return t===0?0:t}}function se(n,e){return M(n)-+M(e)}function ae(n,e){let t=M(n,e==null?void 0:e.in);return t.setHours(23,59,59,999),t}function le(n,e){let t=M(n,e==null?void 0:e.in),d=t.getMonth();return t.setFullYear(t.getFullYear(),d+1,0),t.setHours(23,59,59,999),t}function ne(n,e){let t=M(n,e==null?void 0:e.in);return+ae(t,e)==+le(t,e)}function re(n,e,t){let[d,l,h]=Y(t==null?void 0:t.in,n,n,e),o=X(l,h),b=Math.abs(ee(l,h));if(b<1)return 0;l.getMonth()===1&&l.getDate()>27&&l.setDate(30),l.setMonth(l.getMonth()-o*b);let m=X(l,h)===-o;ne(d)&&b===1&&X(d,h)===1&&(m=!1);let x=o*(b-+m);return x===0?0:x}function ie(n,e,t){let d=se(n,e)/1e3;return te(t==null?void 0:t.roundingMethod)(d)}function ce(n,e,t){let d=Q(),l=(t==null?void 0:t.locale)??d.locale??U,h=X(n,e);if(isNaN(h))throw RangeError("Invalid time value");let o=Object.assign({},t,{addSuffix:t==null?void 0:t.addSuffix,comparison:h}),[b,m]=Y(t==null?void 0:t.in,...h>0?[e,n]:[n,e]),x=ie(m,b),D=(C(m)-C(b))/1e3,p=Math.round((x-D)/60),T;if(p<2)return t!=null&&t.includeSeconds?x<5?l.formatDistance("lessThanXSeconds",5,o):x<10?l.formatDistance("lessThanXSeconds",10,o):x<20?l.formatDistance("lessThanXSeconds",20,o):x<40?l.formatDistance("halfAMinute",0,o):x<60?l.formatDistance("lessThanXMinutes",1,o):l.formatDistance("xMinutes",1,o):p===0?l.formatDistance("lessThanXMinutes",1,o):l.formatDistance("xMinutes",p,o);if(p<45)return l.formatDistance("xMinutes",p,o);if(p<90)return l.formatDistance("aboutXHours",1,o);if(p<1440){let g=Math.round(p/60);return l.formatDistance("aboutXHours",g,o)}else{if(p<2520)return l.formatDistance("xDays",1,o);if(p<43200){let g=Math.round(p/V);return l.formatDistance("xDays",g,o)}else if(p<43200*2)return T=Math.round(p/A),l.formatDistance("aboutXMonths",T,o)}if(T=re(m,b),T<12){let g=Math.round(p/A);return l.formatDistance("xMonths",g,o)}else{let g=T%12,u=Math.trunc(T/12);return g<3?l.formatDistance("aboutXYears",u,o):g<9?l.formatDistance("overXYears",u,o):l.formatDistance("almostXYears",u+1,o)}}function oe(n,e){return ce(n,Z(n),e)}var q=$(O(),1);function ue(n){let e=(0,q.useRef)(n),[t,d]=(0,q.useState)(n);return(0,q.useEffect)(()=>{let l=setInterval(()=>{d(F.now().toMilliseconds())},17);return()=>clearInterval(l)},[]),t-e.current}var P=z(),s=$(L(),1);const de=n=>{let e=(0,P.c)(79),{editing:t,status:d,disabled:l,staleInputs:h,edited:o,interrupted:b,elapsedTime:m,runStartTimestamp:x,lastRunStartTimestamp:D,uninstantiated:p}=n;if(!t)return null;let T=x??D,g;e[0]===T?g=e[1]:(g=T?(0,s.jsx)(me,{lastRanTime:T}):null,e[0]=T,e[1]=g);let u=g;if(l&&d==="running")return B.error("CellStatusComponent: disabled and running"),null;if(l&&h){let c;e[2]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is stale, but it's disabled and can't be run"}),e[2]=c):c=e[2];let a;e[3]===u?a=e[4]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[3]=u,e[4]=a);let i;e[5]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-stale","data-testid":"cell-status","data-status":"stale",children:(0,s.jsxs)(I,{children:[(0,s.jsx)(k,{className:"h-5 w-5",strokeWidth:1.5}),(0,s.jsx)(R,{className:"h-3 w-3",strokeWidth:2.5})]})}),e[5]=i):i=e[5];let r;return e[6]===a?r=e[7]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[6]=a,e[7]=r),r}if(l){let c;e[8]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is disabled"}),e[8]=c):c=e[8];let a;e[9]===u?a=e[10]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[9]=u,e[10]=a);let i;e[11]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-disabled","data-testid":"cell-status","data-status":"disabled",children:(0,s.jsx)(k,{className:"h-5 w-5",strokeWidth:1.5})}),e[11]=i):i=e[11];let r;return e[12]===a?r=e[13]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[12]=a,e[13]=r),r}if(!h&&d==="disabled-transitively"){let c;e[14]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"An ancestor of this cell is disabled, so it can't be run"}),e[14]=c):c=e[14];let a;e[15]===u?a=e[16]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[15]=u,e[16]=a);let i;e[17]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-stale","data-testid":"cell-status","data-status":"disabled-transitively",children:(0,s.jsxs)(I,{layerTop:!0,children:[(0,s.jsx)(K,{className:"h-5 w-5",strokeWidth:1.5}),(0,s.jsx)(k,{className:"h-3 w-3",strokeWidth:2.5})]})}),e[17]=i):i=e[17];let r;return e[18]===a?r=e[19]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[18]=a,e[19]=r),r}if(h&&d==="disabled-transitively"){let c;e[20]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is stale, but an ancestor is disabled so it can't be run"}),e[20]=c):c=e[20];let a;e[21]===u?a=e[22]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[21]=u,e[22]=a);let i;e[23]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-stale","data-testid":"cell-status","data-status":"stale",children:(0,s.jsxs)(I,{children:[(0,s.jsx)(R,{className:"h-5 w-5",strokeWidth:1}),(0,s.jsx)(k,{className:"h-3 w-3",strokeWidth:2.5})]})}),e[23]=i):i=e[23];let r;return e[24]===a?r=e[25]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[24]=a,e[25]=r),r}if(d==="running"){let c;e[26]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is running"}),e[26]=c):c=e[26];let a;e[27]===u?a=e[28]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[27]=u,e[28]=a);let i;e[29]===x?i=e[30]:(i=F.fromSeconds(x)||F.now(),e[29]=x,e[30]=i);let r;e[31]===i?r=e[32]:(r=(0,s.jsx)("div",{className:"cell-status-icon elapsed-time running","data-testid":"cell-status","data-status":"running",children:(0,s.jsx)(he,{startTime:i})}),e[31]=i,e[32]=r);let f;return e[33]!==a||e[34]!==r?(f=(0,s.jsx)(_,{content:a,usePortal:!0,children:r}),e[33]=a,e[34]=r,e[35]=f):f=e[35],f}if(d==="queued"){let c;e[36]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is queued to run"}),e[36]=c):c=e[36];let a;e[37]===u?a=e[38]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[37]=u,e[38]=a);let i;e[39]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-queued","data-testid":"cell-status","data-status":"queued",children:(0,s.jsx)(J,{className:"h-5 w-5",strokeWidth:1.5})}),e[39]=i):i=e[39];let r;return e[40]===a?r=e[41]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[40]=a,e[41]=r),r}if(o||b||h||p){let c;e[42]===m?c=e[43]:(c=W(m),e[42]=m,e[43]=c);let a=c,i;e[44]!==m||e[45]!==a?(i=m?(0,s.jsx)(H,{elapsedTime:a}):null,e[44]=m,e[45]=a,e[46]=i):i=e[46];let r=i,f,v="";if(p)f="This cell has not yet been run";else if(b){f="This cell was interrupted when it was last run";let j;e[47]===r?j=e[48]:(j=(0,s.jsxs)("span",{children:["This cell ran for ",r," before being interrupted"]}),e[47]=r,e[48]=j),v=j}else if(o){f="This cell has been modified since it was last run";let j;e[49]===r?j=e[50]:(j=(0,s.jsxs)("span",{children:["This cell took ",r," to run"]}),e[49]=r,e[50]=j),v=j}else{f="This cell has not been run with the latest inputs";let j;e[51]===r?j=e[52]:(j=(0,s.jsxs)("span",{children:["This cell took ",r," to run"]}),e[51]=r,e[52]=j),v=j}let N;e[53]===Symbol.for("react.memo_cache_sentinel")?(N=(0,s.jsx)("div",{className:"cell-status-stale","data-testid":"cell-status","data-status":"outdated",children:(0,s.jsx)(R,{className:"h-5 w-5",strokeWidth:1.5})}),e[53]=N):N=e[53];let S;e[54]===f?S=e[55]:(S=(0,s.jsx)(_,{content:f,usePortal:!0,children:N}),e[54]=f,e[55]=S);let y;e[56]!==m||e[57]!==a||e[58]!==u||e[59]!==v?(y=m&&(0,s.jsx)(_,{content:(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[v,u]}),usePortal:!0,children:(0,s.jsx)("div",{className:"elapsed-time hover-action","data-testid":"cell-status","data-status":"outdated",children:(0,s.jsx)("span",{children:a})})}),e[56]=m,e[57]=a,e[58]=u,e[59]=v,e[60]=y):y=e[60];let w;return e[61]!==S||e[62]!==y?(w=(0,s.jsxs)("div",{className:"cell-status-icon flex items-center gap-2",children:[S,y]}),e[61]=S,e[62]=y,e[63]=w):w=e[63],w}if(m!==null){let c;e[64]===m?c=e[65]:(c=W(m),e[64]=m,e[65]=c);let a=c,i;e[66]!==m||e[67]!==a?(i=m?(0,s.jsx)(H,{elapsedTime:a}):null,e[66]=m,e[67]=a,e[68]=i):i=e[68];let r=i,f;e[69]===r?f=e[70]:(f=(0,s.jsxs)("span",{children:["This cell took ",r," to run"]}),e[69]=r,e[70]=f);let v;e[71]!==u||e[72]!==f?(v=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[f,u]}),e[71]=u,e[72]=f,e[73]=v):v=e[73];let N;e[74]===a?N=e[75]:(N=(0,s.jsx)("div",{className:"cell-status-icon elapsed-time hover-action","data-testid":"cell-status","data-status":"idle",children:(0,s.jsx)("span",{children:a})}),e[74]=a,e[75]=N);let S;return e[76]!==v||e[77]!==N?(S=(0,s.jsx)(_,{content:v,usePortal:!0,children:N}),e[76]=v,e[77]=N,e[78]=S):S=e[78],S}return null},H=n=>{let e=(0,P.c)(2),t;return e[0]===n.elapsedTime?t=e[1]:(t=(0,s.jsx)("span",{className:"tracking-wide font-semibold",children:n.elapsedTime}),e[0]=n.elapsedTime,e[1]=t),t};var me=n=>{let e=(0,P.c)(4),t=new Date(n.lastRanTime*1e3),d=new Date,l;e[0]===Symbol.for("react.memo_cache_sentinel")?(l={hour:"numeric",minute:"numeric",second:"numeric",fractionalSecondDigits:3,hour12:!0},e[0]=l):l=e[0];let h=E(l),o;e[1]===Symbol.for("react.memo_cache_sentinel")?(o={month:"numeric",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",fractionalSecondDigits:3,hour12:!0},e[1]=o):o=e[1];let b=E(o),m=t.toDateString()===d.toDateString()?h:b,x=oe(t),D;return e[2]===x?D=e[3]:(D=(0,s.jsxs)("span",{className:"text-muted-foreground",children:["(",x," ago)"]}),e[2]=x,e[3]=D),(0,s.jsxs)("span",{children:["Ran at"," ",(0,s.jsx)("strong",{className:"tracking-wide font-semibold",children:m.format(t)})," ",D]})};function W(n){if(n===null)return"";let e=n,t=e/1e3;return t>=60?`${Math.floor(t/60)}m${Math.floor(t%60)}s`:t>=1?`${t.toFixed(2).toString()}s`:`${e.toFixed(0).toString()}ms`}var he=n=>{let e=(0,P.c)(6),t;e[0]===n.startTime?t=e[1]:(t=n.startTime.toMilliseconds(),e[0]=n.startTime,e[1]=t);let d=ue(t),l;e[2]===d?l=e[3]:(l=W(d),e[2]=d,e[3]=l);let h;return e[4]===l?h=e[5]:(h=(0,s.jsx)("span",{children:l}),e[4]=l,e[5]=h),h};export{H as n,W as r,de as t};