@marimo-team/frontend 0.21.2-dev62 → 0.21.2-dev64

package/src/components/app-config/user-config-form.tsx

@@ -15,7 +15,6 @@ import {
 } from "lucide-react";
 import React, { useId, useRef } from "react";
 import { useLocale } from "react-aria";
-import type { FieldPath, FieldValues } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type z from "zod";
 import { Button } from "@/components/ui/button";
@@ -59,105 +58,10 @@ import { Tooltip } from "../ui/tooltip";
 import { AiConfig } from "./ai-config";
 import { formItemClasses, SettingGroup } from "./common";
 import { DataForm } from "./data-form";
+import { applyManualInjections, getDirtyValues } from "./get-dirty-values";
 import { IsOverridden } from "./is-overridden";
 import { OptionalFeatures } from "./optional-features";
 
-/**
- * Extract only the values that have been modified (dirty) from form state.
- * This prevents sending unchanged fields that could overwrite backend values.
- */
-export function getDirtyValues<T extends FieldValues>(
-  values: T,
-  dirtyFields: Partial<Record<keyof T, unknown>>,
-): Partial<T> {
-  const result: Partial<T> = {};
-  for (const key of Object.keys(dirtyFields) as (keyof T)[]) {
-    const dirty = dirtyFields[key];
-    const value = values[key];
-
-    // Skip if the value no longer exists (e.g., deleted from a record)
-    if (value === undefined) {
-      continue;
-    }
-
-    if (dirty === true) {
-      result[key] = value;
-    } else if (typeof dirty === "object" && dirty !== null) {
-      // Nested object - recurse
-      const nested = getDirtyValues(
-        value as FieldValues,
-        dirty as Partial<Record<string, unknown>>,
-      );
-      if (Object.keys(nested).length > 0) {
-        result[key] = nested as T[keyof T];
-      }
-    }
-  }
-  return result;
-}
-
-type ManualInjector = (
-  values: UserConfig,
-  dirtyValues: Partial<UserConfig>,
-) => void;
-
-const modelsAiInjection = (
-  values: UserConfig,
-  dirtyValues: Partial<UserConfig>,
-) => {
-  dirtyValues.ai = {
-    ...dirtyValues.ai,
-    models: {
-      ...dirtyValues.ai?.models,
-      displayed_models: values.ai?.models?.displayed_models ?? [],
-      custom_models: values.ai?.models?.custom_models ?? [],
-    },
-  };
-};
-
-// Some fields (like AI model lists) have empty arrays as default values.
-// If a user explicitly clears them, RHF won't mark them dirty, so we use
-// touchedFields to force-include those values in the payload.
-const MANUAL_INJECT_ENTRIES = [
-  ["ai.models.displayed_models", modelsAiInjection],
-  ["ai.models.custom_models", modelsAiInjection],
-] as const satisfies readonly (readonly [
-  FieldPath<UserConfig>,
-  ManualInjector,
-])[];
-
-const MANUAL_INJECT_FIELDS = new Map(MANUAL_INJECT_ENTRIES);
-
-const isTouchedPath = (
-  touched: unknown,
-  path: FieldPath<UserConfig>,
-): boolean => {
-  if (!touched) {
-    return false;
-  }
-  let current: unknown = touched;
-  for (const segment of path.split(".")) {
-    if (typeof current !== "object" || current === null) {
-      return false;
-    }
-    current = (current as Record<string, unknown>)[segment];
-  }
-  return current === true;
-};
-
-export const applyManualInjections = (opts: {
-  values: UserConfig;
-  dirtyValues: Partial<UserConfig>;
-  touchedFields: unknown;
-}) => {
-  const { values, dirtyValues, touchedFields } = opts;
-  for (const [fieldPath, injector] of MANUAL_INJECT_FIELDS) {
-    if (isTouchedPath(touchedFields, fieldPath)) {
-      injector(values, dirtyValues);
-    }
-  }
-};
-
 const categories = [
   {
     id: "editor",

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

@@ -222,6 +222,75 @@ describe("generateColumns", () => {
     expect(columns[1].meta?.dataType).toBe("number");
   });
 
+  it("should auto right-align numeric columns", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+    });
+
+    // "age" is a number column — should auto right-align
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cell = (columns[1].cell as any)({
+      column: {
+        columnDef: columns[1],
+      },
+      renderValue: () => 25,
+      getValue: () => 25,
+    });
+    expect(cell?.props.className).toContain("text-right");
+
+    // "name" is a string column — should remain left-aligned
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nameCell = (columns[0].cell as any)({
+      column: {
+        columnDef: columns[0],
+      },
+      renderValue: () => "John",
+      getValue: () => "John",
+    });
+    expect(nameCell?.props.className).not.toContain("text-right");
+  });
+
+  it("should respect explicit textJustifyColumns over auto alignment", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+      textJustifyColumns: { age: "left" },
+    });
+
+    // "age" is numeric but explicitly set to left
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cell = (columns[1].cell as any)({
+      column: {
+        columnDef: columns[1],
+      },
+      renderValue: () => 25,
+      getValue: () => 25,
+    });
+    expect(cell?.props.className).not.toContain("text-right");
+  });
+
+  it("should set minFractionDigits from fractionDigitsByColumn", () => {
+    const numericFieldTypes: FieldTypesWithExternalType = [
+      ["price", ["number", "float64"]],
+      ["count", ["integer", "int64"]],
+    ];
+
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes: numericFieldTypes,
+      fractionDigitsByColumn: { price: 2 },
+    });
+
+    // price has 2 fraction digits
+    expect(columns[0].meta?.minFractionDigits).toBe(2);
+    // count not in fractionDigitsByColumn
+    expect(columns[1].meta?.minFractionDigits).toBeUndefined();
+  });
+
   it("should handle text justification and wrapping", () => {
     const columns = generateColumns({
       rowHeaders: [],
@@ -572,6 +641,75 @@ describe("LocaleNumber", () => {
     );
     expect(container.textContent).toMatchInlineSnapshot(`"10,000,000,000"`);
   });
+
+  it("should pad decimals with minFractionDigits", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={42} minFractionDigits={2} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"42.00"`);
+  });
+
+  it("should pad to minFractionDigits for numbers with fewer decimals", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={1234.5} minFractionDigits={3} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"1,234.500"`);
+  });
+
+  it("should not truncate decimals beyond minFractionDigits", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={1.234_56} minFractionDigits={2} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"1.23456"`);
+  });
+});
+
+describe("renderCellValue with boolean values", () => {
+  const createMockColumn = () =>
+    ({
+      id: "active",
+      columnDef: {
+        meta: {
+          dataType: "boolean" as const,
+          dtype: "bool",
+        },
+      },
+      getColumnFormatting: () => undefined,
+      getColumnWrapping: () => undefined,
+      applyColumnFormatting: (value: unknown) => value,
+    }) as unknown as Column<unknown>;
+
+  it("should render true as True", () => {
+    const mockColumn = createMockColumn();
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => true,
+      getValue: () => true,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(result);
+    expect(container.textContent).toBe("True");
+  });
+
+  it("should render false as False", () => {
+    const mockColumn = createMockColumn();
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => false,
+      getValue: () => false,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(result);
+    expect(container.textContent).toBe("False");
+  });
 });
 
 describe("renderCellValue with datetime values", () => {

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

@@ -112,6 +112,7 @@ export function generateColumns<T>({
   headerTooltip,
   showDataTypes,
   calculateTopKRows,
+  fractionDigitsByColumn,
 }: {
   rowHeaders: FieldTypesWithExternalType;
   selection: DataTableSelection;
@@ -122,6 +123,7 @@ export function generateColumns<T>({
   headerTooltip?: Record<string, string>;
   showDataTypes?: boolean;
   calculateTopKRows?: CalculateTopKRows;
+  fractionDigitsByColumn?: Record<string, number>;
 }): ColumnDef<T>[] {
   // Row-headers are typically index columns
   const rowHeadersSet = new Set(rowHeaders.map(([columnName]) => columnName));
@@ -138,6 +140,7 @@ export function generateColumns<T>({
         rowHeader: isRowHeader,
         dtype: types?.[1],
         dataType: types?.[0],
+        minFractionDigits: fractionDigitsByColumn?.[key],
       };
     }
 
@@ -146,9 +149,23 @@ export function generateColumns<T>({
       filterType: getFilterTypeForFieldType(types[0]),
       dtype: types[1],
       dataType: types[0],
+      minFractionDigits: fractionDigitsByColumn?.[key],
     };
   };
 
+  const getJustify = (key: string): "left" | "center" | "right" | undefined => {
+    // Explicit user override takes precedence
+    if (textJustifyColumns?.[key]) {
+      return textJustifyColumns[key];
+    }
+    // Auto right-align numeric columns
+    const dataType = getMeta(key).dataType;
+    if (dataType === "number" || dataType === "integer") {
+      return "right";
+    }
+    return undefined;
+  };
+
   const columnKeys: string[] = [
     ...rowHeadersSet,
     ...fieldTypes.map(([columnName]) => columnName),
@@ -186,7 +203,7 @@ export function generateColumns<T>({
             </div>
           ) : null;
 
-        const justify = textJustifyColumns?.[key];
+        const justify = getJustify(key);
 
         const headerWithType = (
           <div
@@ -254,18 +271,21 @@ export function generateColumns<T>({
           cell.toggleSelected?.();
         }
 
-        const justify = textJustifyColumns?.[key];
+        const justify = getJustify(key);
         const wrapped = wrappedColumns?.includes(key);
         const isCellSelected = cell?.getIsSelected?.() || false;
         const canSelectCell =
           (selection === "single-cell" || selection === "multi-cell") &&
           !isCellSelected;
 
+        const dataType = column.columnDef.meta?.dataType;
+        const isNumeric = dataType === "number" || dataType === "integer";
         const cellStyles = getCellStyleClass(
           justify,
           wrapped,
           canSelectCell,
           isCellSelected,
+          isNumeric,
         );
 
         const renderedCell = renderCellValue({
@@ -430,6 +450,7 @@ function getCellStyleClass(
   wrapped: boolean | undefined,
   canSelectCell: boolean,
   isSelected: boolean,
+  isNumeric?: boolean,
 ): string {
   return cn(
     canSelectCell && "cursor-pointer",
@@ -438,6 +459,7 @@ function getCellStyleClass(
     "w-full",
     "text-left",
     "truncate",
+    isNumeric && "tabular-nums",
     justify === "center" && "text-center",
     justify === "right" && "text-right",
     wrapped && `${COLUMN_WRAPPING_STYLES} break-words`,
@@ -589,7 +611,18 @@ export function renderCellValue<TData, TValue>({
   if (typeof value === "number") {
     return (
       <div onClick={selectCell} className={cellStyles}>
-        <LocaleNumber value={value} />
+        <LocaleNumber
+          value={value}
+          minFractionDigits={column.columnDef.meta?.minFractionDigits}
+        />
+      </div>
+    );
+  }
+
+  if (typeof value === "boolean") {
+    return (
+      <div onClick={selectCell} className={cellStyles}>
+        {value ? "True" : "False"}
       </div>
     );
   }
@@ -635,9 +668,16 @@ export function renderCellValue<TData, TValue>({
   );
 }
 
-export const LocaleNumber = ({ value }: { value: number }) => {
+export const LocaleNumber = ({
+  value,
+  minFractionDigits,
+}: {
+  value: number;
+  minFractionDigits?: number;
+}) => {
   const { locale } = useLocale();
   const format = useNumberFormatter({
+    minimumFractionDigits: minFractionDigits,
     maximumFractionDigits: maxFractionalDigits(locale),
   });
   return format.format(value);

package/src/components/data-table/filters.ts

@@ -16,6 +16,7 @@ declare module "@tanstack/react-table" {
     dtype?: string;
     dataType?: DataType;
     filterType?: FilterType;
+    minFractionDigits?: number;
   }
 }
 

package/src/components/editor/package-alert.tsx

@@ -44,7 +44,7 @@ import {
   type UserConfig,
   UserConfigSchema,
 } from "../../core/config/config-schema";
-import { getDirtyValues } from "../app-config/user-config-form";
+import { getDirtyValues } from "../app-config/get-dirty-values";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,

package/src/plugins/impl/DataTablePlugin.tsx

@@ -874,10 +874,35 @@ const DataTableComponent = ({
     return memoizedUnclampedFieldTypes.slice(0, maxColumns);
   }, [maxColumns, memoizedUnclampedFieldTypes]);
 
+  // Compute max fractional digits per numeric column for consistent formatting.
+  const computedFractionDigits = useMemo(() => {
+    const result: Record<string, number> = {};
+    if (data && data.length > 0) {
+      for (const [colName, types] of memoizedClampedFieldTypes) {
+        if (types[0] === "number") {
+          let maxDecimals = 0;
+          for (const row of data) {
+            const val = (row as Record<string, unknown>)[colName];
+            if (typeof val === "number" && Number.isFinite(val)) {
+              const str = String(val);
+              const dotIdx = str.indexOf(".");
+              if (dotIdx !== -1) {
+                maxDecimals = Math.max(maxDecimals, str.length - dotIdx - 1);
+              }
+            }
+          }
+          result[colName] = maxDecimals;
+        }
+      }
+    }
+    return result;
+  }, [data, memoizedClampedFieldTypes]);
+
   const memoizedRowHeaders = useDeepCompareMemoize(rowHeaders);
   const memoizedTextJustifyColumns = useDeepCompareMemoize(textJustifyColumns);
   const memoizedWrappedColumns = useDeepCompareMemoize(wrappedColumns);
   const memoizedChartSpecModel = useDeepCompareMemoize(chartSpecModel);
+  const fractionDigitsByColumn = useDeepCompareMemoize(computedFractionDigits);
   const shownColumns = memoizedClampedFieldTypes.length;
 
   // If the field types are not set, we don't show them
@@ -898,6 +923,7 @@ const DataTableComponent = ({
         // Only show data types if they are explicitly set
         showDataTypes: showDataTypes,
         calculateTopKRows: calculate_top_k_rows,
+        fractionDigitsByColumn: fractionDigitsByColumn,
       }),
     [
       selection,
@@ -909,6 +935,7 @@ const DataTableComponent = ({
       memoizedWrappedColumns,
       headerTooltip,
       calculate_top_k_rows,
+      fractionDigitsByColumn,
     ],
   );
 

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

@@ -1,15 +1,18 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { UIMessage } from "ai";
-import { Suspense } from "react";
+import React, { Suspense } from "react";
 import { z } from "zod";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { createPlugin } from "@/plugins/core/builder";
 import { rpc } from "@/plugins/core/rpc";
 import { Arrays } from "@/utils/arrays";
-import { Chatbot } from "./chat-ui";
 import type { SendMessageRequest } from "./types";
 
+const LazyChatbot = React.lazy(() =>
+  import("./chat-ui").then((m) => ({ default: m.Chatbot })),
+);
+
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type PluginFunctions = {
   get_chat_history: (req: {}) => Promise<{ messages: UIMessage[] }>;
@@ -72,7 +75,7 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
   .renderer((props) => (
     <TooltipProvider>
       <Suspense>
-        <Chatbot
+        <LazyChatbot
           prompts={props.data.prompts}
           showConfigurationControls={props.data.showConfigurationControls}
           maxHeight={props.data.maxHeight}

package/dist/assets/CellStatus-C-nDPVVw.js

@@ -1 +0,0 @@
-import{s as $}from"./chunk-LvLJmgfZ.js";import{t as z}from"./react-Bj1aDYRI.js";import{at as F}from"./cells-DiVpbkA6.js";import{t as O}from"./compiler-runtime-B3qBwwSJ.js";import{m as B}from"./useEventListener-Dy81QR4n.js";import{t as L}from"./jsx-runtime-icT_Ltz2.js";import{t as V}from"./createLucideIcon-Cm-Z7dYr.js";import{c as G,l as A,n as J,t as _}from"./toDate-Cfp9W_O9.js";import{t as K}from"./ellipsis-d7eaKIFn.js";import{t as R}from"./refresh-cw-Dg9tCj4k.js";import{t as Q}from"./workflow-BqHyyStM.js";import{t as D}from"./tooltip-CR_izE8Q.js";import{i as U,n as Y,r as C,t as Z}from"./en-US-f8tajDx1.js";import{t as E}from"./useDateFormatter-CYAwsqZA.js";import{t as H}from"./multi-icon-BIYBHgCy.js";var k=V("ban",[["path",{d:"M4.929 4.929 19.07 19.071",key:"196cmz"}],["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]]);function X(n,e){let t=_(n)-+_(e);return t<0?-1:t>0?1:t}function ee(n){return J(n,Date.now())}function te(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 se(n){return e=>{let t=(n?Math[n]:Math.trunc)(e);return t===0?0:t}}function ae(n,e){return _(n)-+_(e)}function le(n,e){let t=_(n,e==null?void 0:e.in);return t.setHours(23,59,59,999),t}function ne(n,e){let t=_(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 re(n,e){let t=_(n,e==null?void 0:e.in);return+le(t,e)==+ne(t,e)}function ie(n,e,t){let[d,l,h]=Y(t==null?void 0:t.in,n,n,e),o=X(l,h),b=Math.abs(te(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;re(d)&&b===1&&X(d,h)===1&&(m=!1);let x=o*(b-+m);return x===0?0:x}function ce(n,e,t){let d=ae(n,e)/1e3;return se(t==null?void 0:t.roundingMethod)(d)}function oe(n,e,t){let d=U(),l=(t==null?void 0:t.locale)??d.locale??Z,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=ce(m,b),M=(C(m)-C(b))/1e3,p=Math.round((x-M)/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/G);return l.formatDistance("xDays",g,o)}else if(p<43200*2)return T=Math.round(p/A),l.formatDistance("aboutXMonths",T,o)}if(T=ie(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 ue(n,e){return oe(n,ee(n),e)}var I=$(z(),1);function de(n){let e=(0,I.useRef)(n),[t,d]=(0,I.useState)(n);return(0,I.useEffect)(()=>{let l=setInterval(()=>{d(F.now().toMilliseconds())},17);return()=>clearInterval(l)},[]),t-e.current}var P=O(),s=$(L(),1);const me=n=>{let e=(0,P.c)(79),{editing:t,status:d,disabled:l,staleInputs:h,edited:o,interrupted:b,elapsedTime:m,runStartTimestamp:x,lastRunStartTimestamp:M,uninstantiated:p}=n;if(!t)return null;let T=x??M,g;e[0]===T?g=e[1]:(g=T?(0,s.jsx)(he,{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)(H,{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)(D,{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)(D,{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)(H,{layerTop:!0,children:[(0,s.jsx)(Q,{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)(D,{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)(H,{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)(D,{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)(fe,{startTime:i})}),e[31]=i,e[32]=r);let f;return e[33]!==a||e[34]!==r?(f=(0,s.jsx)(D,{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)(K,{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)(D,{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)(q,{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)(D,{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)(D,{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)(q,{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)(D,{content:v,usePortal:!0,children:N}),e[76]=v,e[77]=N,e[78]=S):S=e[78],S}return null},q=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 he=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=ue(t),M;return e[2]===x?M=e[3]:(M=(0,s.jsxs)("span",{className:"text-muted-foreground",children:["(",x," ago)"]}),e[2]=x,e[3]=M),(0,s.jsxs)("span",{children:["Ran at"," ",(0,s.jsx)("strong",{className:"tracking-wide font-semibold",children:m.format(t)})," ",M]})};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 fe=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=de(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{q as n,W as r,me as t};