@marimo-team/frontend 0.25.3-dev3 → 0.25.3-dev5

package/src/components/data-table/__tests__/date-filter-inputs.test.tsx

@@ -1,7 +1,30 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
 import { dateToLocalISODate } from "@/utils/dates";
-import { parsePastedRange } from "../date-filter-inputs";
+import { parsePastedDate, parsePastedRange } from "../date-filter-inputs";
+
+describe("parsePastedDate", () => {
+  it("parses a time-only string for the time filter type", () => {
+    const result = parsePastedDate("time", "2:30 PM");
+    expect(result).toEqual(new Date(1970, 0, 1, 14, 30));
+  });
+
+  it("parses a local ISO datetime for the datetime filter type", () => {
+    const result = parsePastedDate("datetime", "2026-02-01T08:30:00");
+    expect(result).toEqual(new Date(2026, 1, 1, 8, 30, 0));
+  });
+
+  it("falls back to the Date constructor for other formats", () => {
+    const result = parsePastedDate("datetime", "Feb 1, 2026 08:30:00");
+    expect(result).toBeDefined();
+    expect(result?.getFullYear()).toBe(2026);
+  });
+
+  it("returns undefined for an empty or unparsable string", () => {
+    expect(parsePastedDate("date", "")).toBeUndefined();
+    expect(parsePastedDate("time", "not-a-time")).toBeUndefined();
+  });
+});
 
 describe("parsePastedRange", () => {
   it.each([

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

@@ -1,12 +1,19 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { DataType } from "@/core/kernel/messages";
+import { assertNever } from "@/utils/assertNever";
+import { copyToClipboard } from "@/utils/copy";
+import {
+  parseLocalISODate,
+  parseLocalISODateTime,
+  parseTimeToDate,
+} from "@/utils/dates";
+import { Logger } from "@/utils/Logger";
 import type { Cell } from "@tanstack/react-table";
 import { useAtomValue } from "jotai";
 import { CopyIcon, FilterIcon, SquareStack } from "lucide-react";
 import type { RefObject } from "react";
 import useEvent from "react-use-event-hook";
-import { copyToClipboard } from "@/utils/copy";
-import { Logger } from "@/utils/Logger";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -16,13 +23,94 @@ import {
   ContextMenuTrigger,
 } from "../ui/context-menu";
 import { DATA_CELL_ID } from "./cell-utils";
-import {
-  Filter,
-  isMembershipFilterType,
-  type MembershipFilterType,
-} from "./filters";
+import { type FilterType, Filter } from "./filters";
 import { selectedCellsAtom } from "./range-focus/atoms";
-import { getClipboardContent, getRawValue } from "./utils";
+import { getClipboardContent, getRawValue, isNullishSentinel } from "./utils";
+
+type Comparison = "eq" | "neq";
+
+const symbolOp = {
+  eq: "==",
+  neq: "!=",
+} as const;
+
+const textOp = {
+  eq: "equals",
+  neq: "does_not_equal",
+} as const;
+
+export function buildCellFilter({
+  type,
+  value,
+  comparison = "eq",
+  dataType,
+  dtype,
+}: {
+  type: FilterType;
+  value: unknown;
+  comparison?: Comparison;
+  dataType?: DataType;
+  dtype?: string;
+}) {
+  if (isNullishSentinel(value, dataType, dtype)) {
+    return { type, operator: comparison === "eq" ? "is_null" : "is_not_null" };
+  }
+
+  switch (type) {
+    case "number":
+      if (typeof value !== "number") {
+        return undefined;
+      }
+
+      return Filter.number({
+        operator: symbolOp[comparison],
+        value,
+      });
+    case "text":
+      return Filter.text({
+        operator: textOp[comparison],
+        text: value as string,
+      });
+    case "date": {
+      const date = parseLocalISODate(value as string);
+      if (!date) {
+        return undefined;
+      }
+      return Filter.date({
+        operator: symbolOp[comparison],
+        value: date,
+      });
+    }
+    case "datetime": {
+      const date = parseLocalISODateTime(value as string);
+      if (!date) {
+        return undefined;
+      }
+      return Filter.datetime({
+        operator: symbolOp[comparison],
+        value: date,
+      });
+    }
+    case "time": {
+      const time = parseTimeToDate(value as string);
+      if (!time) {
+        return undefined;
+      }
+      return Filter.time({
+        operator: symbolOp[comparison],
+        value: time,
+      });
+    }
+    case "boolean": {
+      const target = comparison === "eq" ? value : !(value as boolean);
+      return Filter.boolean({
+        operator: target ? "is_true" : "is_false",
+      });
+    }
+    default:
+      assertNever(type);
+  }
+}
 
 export const DataTableContextMenu = <TData,>({
   contextMenuRef,
@@ -102,19 +190,34 @@ export const CellContextMenu = <TData,>({
 
   const column = cell.column;
   const filterType = column.columnDef.meta?.filterType;
-  const membershipFilterType: MembershipFilterType | undefined =
-    column.getCanFilter() && filterType && isMembershipFilterType(filterType)
-      ? filterType
+  const dataType = column.columnDef.meta?.dataType;
+  const dtype = column.columnDef.meta?.dtype;
+
+  const canFilter = Boolean(filterType && column.getCanFilter());
+  const buildFilter = (comparison: Comparison) =>
+    canFilter
+      ? buildCellFilter({
+          type: filterType as FilterType,
+          value: rawValue,
+          comparison,
+          dataType,
+          dtype,
+        })
       : undefined;
+  const eqFilter = buildFilter("eq");
+  const canFilterByValue = eqFilter !== undefined;
+
+  const handleFilterCellByValue = (comparison: Comparison) => {
+    if (!filterType) {
+      return;
+    }
+
+    const filter = comparison === "eq" ? eqFilter : buildFilter("neq");
+
+    if (!filter) {
+      return;
+    }
 
-  const handleFilterCell = (
-    type: MembershipFilterType,
-    operator: "in" | "not_in",
-  ) => {
-    const filter =
-      type === "number"
-        ? Filter.number({ operator, values: [rawValue] })
-        : Filter.text({ operator, values: [rawValue] });
     column.setFilterValue(filter);
   };
 
@@ -130,18 +233,14 @@ export const CellContextMenu = <TData,>({
           Copy selected cells
         </ContextMenuItem>
       )}
-      {membershipFilterType && (
+      {canFilterByValue && (
         <>
           <ContextMenuSeparator />
-          <ContextMenuItem
-            onClick={() => handleFilterCell(membershipFilterType, "in")}
-          >
+          <ContextMenuItem onClick={() => handleFilterCellByValue("eq")}>
             <FilterIcon className="mo-dropdown-icon h-3 w-3" />
             Filter by this value
           </ContextMenuItem>
-          <ContextMenuItem
-            onClick={() => handleFilterCell(membershipFilterType, "not_in")}
-          >
+          <ContextMenuItem onClick={() => handleFilterCellByValue("neq")}>
             <FilterIcon className="mo-dropdown-icon h-3 w-3" />
             Remove rows with this value
           </ContextMenuItem>

package/src/components/data-table/date-filter-inputs.tsx

@@ -14,6 +14,9 @@ import {
   dateToLocalISODate,
   dateToLocalISODateTime,
   dateToLocalISOTime,
+  parseLocalISODate,
+  parseLocalISODateTime,
+  parseTimeToDate,
 } from "@/utils/dates";
 import type { FilterType } from "./filters";
 
@@ -72,53 +75,23 @@ export function parsePastedDate(
     return undefined;
   }
 
-  const timeMatch =
-    filterType === "time"
-      ? trimmed.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(am|pm)?$/i)
-      : null;
-  if (timeMatch) {
-    const [, hStr, mStr, sStr, ampm] = timeMatch;
-    let hour = Number.parseInt(hStr, 10);
-    const minute = Number.parseInt(mStr, 10);
-    const second = sStr ? Number.parseInt(sStr, 10) : 0;
-    if (ampm) {
-      const isPm = ampm.toLowerCase() === "pm";
-      if (hour === 12) {
-        hour = isPm ? 12 : 0;
-      } else if (isPm) {
-        hour += 12;
-      }
+  if (filterType === "time") {
+    const date = parseTimeToDate(trimmed);
+    if (date) {
+      return date;
     }
-    return new Date(1970, 0, 1, hour, minute, second);
   }
 
-  const dateOnlyMatch = trimmed.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-  if (dateOnlyMatch) {
-    const [, y, m, d] = dateOnlyMatch;
-    return new Date(
-      Number.parseInt(y, 10),
-      Number.parseInt(m, 10) - 1,
-      Number.parseInt(d, 10),
-    );
+  if (filterType === "date") {
+    const date = parseLocalISODate(trimmed);
+    if (date) {
+      return date;
+    }
   }
 
-  // Parse ISO datetimes as wall-clock to stay consistent with the picker's
-  // local-time basis. Trailing `Z` or offsets are stripped so that pasting
-  // `2024-01-15T08:30:00Z` displays `08:30` instead of being shifted by the
-  // viewer's timezone.
-  const isoMatch = trimmed.match(
-    /^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?$/,
-  );
-  if (isoMatch) {
-    const [, y, mo, d, h, mi, s] = isoMatch;
-    return new Date(
-      Number.parseInt(y, 10),
-      Number.parseInt(mo, 10) - 1,
-      Number.parseInt(d, 10),
-      Number.parseInt(h, 10),
-      Number.parseInt(mi, 10),
-      s ? Number.parseInt(s, 10) : 0,
-    );
+  const isoDateTime = parseLocalISODateTime(trimmed);
+  if (isoDateTime) {
+    return isoDateTime;
   }
 
   const parsed = new Date(trimmed);

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

@@ -228,6 +228,24 @@ export function detectSentinel(
   return null;
 }
 
+type NullishSentinelType = Extract<CellValueSentinel["type"], "null" | "nat">;
+
+const NULLISH_SENTINEL_TYPES: ReadonlySet<CellValueSentinel["type"]> =
+  new Set<NullishSentinelType>(["null", "nat"]);
+
+/**
+ * True when the cell value represents a missing value (null, NaT)
+ * rather than a real value that happens to look special.
+ */
+export function isNullishSentinel(
+  value: unknown,
+  dataType: DataType | undefined,
+  dtype?: string,
+): boolean {
+  const sentinel = detectSentinel(value, dataType, dtype);
+  return sentinel !== null && NULLISH_SENTINEL_TYPES.has(sentinel.type);
+}
+
 /**
  * Stringify an unknown value. Converts objects to JSON strings.
  * @param opts.value - The value to stringify.

package/src/components/editor/Output.tsx

@@ -66,7 +66,7 @@ export type OnRefactorWithAI = (opts: {
  * Renders an output based on an OutputMessage.
  */
 export const OutputRenderer: React.FC<{
-  message: Pick<OutputMessage, "channel" | "data" | "mimetype">;
+  message: Pick<OutputMessage, "channel" | "data" | "mimetype" | "code">;
   cellId?: CellId;
   onRefactorWithAI?: OnRefactorWithAI;
   wrapText?: boolean;
@@ -172,7 +172,9 @@ export const OutputRenderer: React.FC<{
 
     case "application/vnd.marimo+error":
       invariant(Array.isArray(data), "Expected array data");
-      return <MarimoErrorOutput cellId={cellId} errors={data} />;
+      return (
+        <MarimoErrorOutput cellId={cellId} errors={data} code={message.code} />
+      );
 
     case "application/vnd.marimo+traceback":
       invariant(
@@ -183,6 +185,7 @@ export const OutputRenderer: React.FC<{
         <MarimoTracebackOutput
           onRefactorWithAI={onRefactorWithAI}
           traceback={data}
+          code={message.code}
           cellId={cellId}
         />
       );

package/src/components/editor/chrome/panels/error-panel.tsx

@@ -25,6 +25,7 @@ const ErrorsPanel: React.FC = () => {
             <MarimoErrorOutput
               key={error.cellId}
               errors={error.output.data}
+              code={error.output.code}
               cellId={error.cellId}
             />
           </div>

package/src/components/editor/chrome/wrapper/__tests__/attachment-status.test.tsx

@@ -0,0 +1,167 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { userEvent } from "storybook/test";
+import { describe, expect, it } from "vitest";
+import { PAIR_PREVIEW } from "@/__tests__/fixtures/pair-preview";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { type Attachment, attachmentsAtom } from "@/core/attachments/state";
+import { pairPreviewAtom } from "@/core/config/pair";
+import { connectionAtom } from "@/core/network/connection";
+import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
+import { AttachmentStatus } from "../footer-items/attachment-status";
+
+const AGENT: Attachment = {
+  id: "a1",
+  kind: "agent",
+  name: "Pi",
+  notebook_id: "nb-test",
+  identity: "pi-thread",
+  since: new Date().toISOString(),
+};
+
+function renderStatus(attachments: Attachment[] = [AGENT], preview = true) {
+  const store = createStore();
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
+  store.set(pairPreviewAtom, preview ? PAIR_PREVIEW : undefined);
+  store.set(attachmentsAtom, attachments);
+  return {
+    store,
+    ...render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <AttachmentStatus />
+        </TooltipProvider>
+      </Provider>,
+    ),
+  };
+}
+
+describe("AttachmentStatus", () => {
+  it("renders nothing outside the preview", () => {
+    expect(renderStatus([AGENT], false).container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing without agents", () => {
+    expect(
+      renderStatus([{ ...AGENT, kind: "client" }]).container,
+    ).toBeEmptyDOMElement();
+  });
+
+  it("lists each agent by its self-described name", () => {
+    renderStatus([
+      AGENT,
+      { ...AGENT, id: "a2", identity: "claude-thread", name: "Claude Code" },
+      { ...AGENT, id: "c1", kind: "client", name: "Browser" },
+    ]);
+    expect(screen.getAllByTestId("footer-attachment-status")).toHaveLength(2);
+    expect(screen.getByLabelText("Pi: Connected")).toBeInTheDocument();
+    expect(screen.getByLabelText("Claude Code: Connected")).toBeInTheDocument();
+    expect(screen.queryByText("Browser")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText("Pi: Connected"));
+    expect(screen.getByText(/^Connected /)).toBeInTheDocument();
+  });
+
+  it("uses Agent when no name was supplied", () => {
+    renderStatus([{ ...AGENT, name: null }]);
+    expect(screen.getByLabelText("Agent: Connected")).toBeInTheDocument();
+  });
+
+  it("groups attachments by identity while retaining each connection row", () => {
+    renderStatus([
+      AGENT,
+      { ...AGENT, id: "a2", since: "2026-10-14T00:00:00Z" },
+    ]);
+    expect(screen.getAllByTestId("footer-attachment-status")).toHaveLength(1);
+    fireEvent.click(screen.getByLabelText("Pi: Connected"));
+    expect(screen.getAllByText(/^Connected /)).toHaveLength(2);
+    expect(screen.getByText("a1")).toBeInTheDocument();
+    expect(screen.getByText("a2")).toBeInTheDocument();
+  });
+
+  it("preserves an open popover when the same identity reconnects", () => {
+    const { store } = renderStatus();
+    fireEvent.click(screen.getByLabelText("Pi: Connected"));
+    act(() =>
+      store.set(attachmentsAtom, [
+        { ...AGENT, id: "a2", since: "2026-10-14T00:00:00Z" },
+      ]),
+    );
+    expect(
+      screen.getByRole("button", { name: "Pi: Connected" }),
+    ).toHaveAttribute("aria-expanded", "true");
+    expect(screen.queryByText("a1")).not.toBeInTheDocument();
+    expect(screen.getByText("a2")).toBeInTheDocument();
+  });
+
+  it("does not open a closed popover when the same identity reconnects", () => {
+    const { store } = renderStatus();
+    act(() => store.set(attachmentsAtom, [{ ...AGENT, id: "a2" }]));
+    expect(
+      screen.getByRole("button", { name: "Pi: Connected" }),
+    ).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("keeps anonymous attachments separate from matching client identities", () => {
+    renderStatus([
+      { ...AGENT, identity: undefined },
+      { ...AGENT, id: "a2", identity: undefined },
+      { ...AGENT, id: "a3", identity: "a1" },
+    ]);
+    expect(screen.getAllByTestId("footer-attachment-status")).toHaveLength(3);
+  });
+
+  it("accepts client identities that match object property names", () => {
+    renderStatus([
+      { ...AGENT, identity: "__proto__" },
+      { ...AGENT, id: "a2", identity: "constructor" },
+    ]);
+    expect(screen.getAllByTestId("footer-attachment-status")).toHaveLength(2);
+  });
+
+  it.each(["{Enter}", " "])("opens from the keyboard with %j", async (key) => {
+    const user = userEvent.setup();
+    renderStatus();
+    const button = screen.getByRole("button", { name: "Pi: Connected" });
+    expect(button.tagName).toBe("BUTTON");
+    expect(button).toHaveAttribute("type", "button");
+    await user.tab();
+    expect(button).toHaveFocus();
+    await user.keyboard(key);
+    expect(button).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText(/^Connected /)).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    expect(button).toHaveAttribute("aria-expanded", "false");
+    expect(button).toHaveFocus();
+  });
+
+  it.each([
+    { state: ConnectionState.CONNECTING },
+    { state: ConnectionState.CLOSING },
+    { state: ConnectionState.NOT_STARTED },
+    {
+      state: ConnectionState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+      reason: "offline",
+    },
+  ])("hides connected claims while the browser is %j", (connection) => {
+    const { store, container } = renderStatus();
+    act(() => store.set(connectionAtom, connection));
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("removes detached agents when the list is replaced", () => {
+    const { store, container } = renderStatus([
+      AGENT,
+      { ...AGENT, id: "a2", identity: "claude-thread", name: "Claude Code" },
+    ]);
+    act(() => store.set(attachmentsAtom, [AGENT]));
+    expect(
+      screen.queryByLabelText("Claude Code: Connected"),
+    ).not.toBeInTheDocument();
+    act(() => store.set(attachmentsAtom, []));
+    expect(container).toBeEmptyDOMElement();
+  });
+});

package/src/components/editor/chrome/wrapper/footer-item.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type React from "react";
+import { Slot as SlotPrimitive } from "radix-ui";
 import { forwardRef } from "react";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
@@ -8,36 +9,43 @@ import { cn } from "@/utils/cn";
 type FooterItemProps = {
   selected: boolean;
   tooltip: React.ReactNode;
+  asChild?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export const FooterItem: React.FC<FooterItemProps> = forwardRef<
   HTMLDivElement,
   FooterItemProps
->(({ children, tooltip, selected, className, ...rest }, ref) => {
-  const content = (
-    <div
-      ref={ref}
-      className={cn(
-        "h-full flex items-center p-2 text-sm shadow-inset font-mono cursor-pointer rounded",
-        !selected && "hover:bg-(--sage-3)",
-        selected && "bg-(--sage-4)",
-        className,
-      )}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-
-  if (tooltip) {
-    return (
-      <Tooltip content={tooltip} side="top" delayDuration={200}>
-        {content}
-      </Tooltip>
+>(
+  (
+    { children, tooltip, selected, className, asChild = false, ...rest },
+    ref,
+  ) => {
+    const Component = asChild ? SlotPrimitive.Slot : "div";
+    const content = (
+      <Component
+        ref={ref}
+        className={cn(
+          "h-full flex items-center p-2 text-sm shadow-inset font-mono cursor-pointer rounded",
+          !selected && "hover:bg-(--sage-3)",
+          selected && "bg-(--sage-4)",
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </Component>
     );
-  }
 
-  return content;
-});
+    if (tooltip) {
+      return (
+        <Tooltip content={tooltip} side="top" delayDuration={200}>
+          {content}
+        </Tooltip>
+      );
+    }
+
+    return content;
+  },
+);
 
 FooterItem.displayName = "FooterItem";

package/src/components/editor/chrome/wrapper/footer-items/attachment-status.tsx

@@ -0,0 +1,82 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { BotIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  type Attachment,
+  agentAttachmentsAtom,
+  attachmentLabel,
+} from "@/core/attachments/state";
+import { pairPreviewAtom } from "@/core/config/pair";
+import { useTimeAgo } from "@/hooks/useFormatting";
+import { Objects } from "@/utils/objects";
+import { FooterItem } from "../footer-item";
+
+export function AttachmentStatus() {
+  const pairPreview = useAtomValue(pairPreviewAtom);
+  const agents = useAtomValue(agentAttachmentsAtom);
+  if (!pairPreview) {
+    return null;
+  }
+  const groups = Objects.groupBy(
+    agents,
+    (attachment) =>
+      attachment.identity
+        ? `identity:${attachment.identity}`
+        : `attachment:${attachment.id}`,
+    (attachment) => attachment,
+  );
+  return Object.entries(groups).map(([identity, attachments]) => (
+    <AttachmentStatusItem key={identity} attachments={attachments} />
+  ));
+}
+
+function AttachmentStatusItem({ attachments }: { attachments: Attachment[] }) {
+  const [open, setOpen] = useState(false);
+  const timeAgo = useTimeAgo();
+  const label = attachmentLabel(attachments[0]);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild={true}>
+        <FooterItem
+          asChild={true}
+          tooltip={`${label}: connected`}
+          selected={open}
+          data-testid="footer-attachment-status"
+          aria-label={`${label}: Connected`}
+        >
+          <button type="button">
+            <span className="flex items-center gap-1.5">
+              <BotIcon className="w-4 h-4" />
+              <span className="max-w-48 truncate">{label}</span>
+            </span>
+          </button>
+        </FooterItem>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 text-sm">
+        <h4 className="font-medium">{label}</h4>
+        <ul className="space-y-2">
+          {attachments.map((attachment) => (
+            <li key={attachment.id}>
+              <p
+                className="truncate text-xs text-muted-foreground"
+                title={attachment.id}
+              >
+                {attachment.id}
+              </p>
+              <p className="text-muted-foreground">
+                Connected {timeAgo(attachment.since)}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+}