@marimo-team/frontend 0.23.7-dev5 → 0.23.7-dev50

package/src/components/data-table/filter-pills.tsx

@@ -13,6 +13,7 @@ import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { FilterPillEditor } from "./filter-pill-editor";
 import type { ColumnFilterValue } from "./filters";
+import { OPERATOR_LABELS } from "./operator-labels";
 import { stringifyUnknownValue } from "./utils";
 
 interface Props<TData> {
@@ -209,19 +210,62 @@ function formatValue(
   }
 
   if (value.type === "number") {
-    return formatMinMax(value.min, value.max);
+    switch (value.operator) {
+      case "between":
+        return {
+          operator: OPERATOR_LABELS.between.toLowerCase(),
+          value: `${value.min} - ${value.max}`,
+        };
+      case "==":
+      case "!=":
+      case ">":
+      case ">=":
+      case "<":
+      case "<=":
+        return { operator: value.operator, value: String(value.value) };
+    }
+  }
+  if (value.type === "text") {
+    switch (value.operator) {
+      case "in":
+      case "not_in": {
+        const items = value.values.map((v) => `"${v}"`);
+        return {
+          operator: value.operator === "in" ? "is in" : "not in",
+          value: `[${items.join(", ")}]`,
+        };
+      }
+      case "is_empty":
+        return { operator: "is empty" };
+      case "contains":
+      case "equals":
+      case "does_not_equal":
+      case "regex":
+      case "starts_with":
+      case "ends_with":
+        return {
+          operator: OPERATOR_LABELS[value.operator].toLowerCase(),
+          value: `"${value.text}"`,
+        };
+    }
   }
   if (value.type === "date") {
-    return formatMinMax(value.min?.toISOString(), value.max?.toISOString());
+    return formatMinMaxLegacy(
+      value.min?.toISOString(),
+      value.max?.toISOString(),
+    );
   }
   if (value.type === "time") {
-    return formatMinMax(
+    return formatMinMaxLegacy(
       value.min ? timeFormatter.format(value.min) : undefined,
       value.max ? timeFormatter.format(value.max) : undefined,
     );
   }
   if (value.type === "datetime") {
-    return formatMinMax(value.min?.toISOString(), value.max?.toISOString());
+    return formatMinMaxLegacy(
+      value.min?.toISOString(),
+      value.max?.toISOString(),
+    );
   }
   if (value.type === "boolean") {
     return { operator: `is ${value.value ? "True" : "False"}` };
@@ -235,14 +279,11 @@ function formatValue(
       value: `[${stringifiedOptions.join(", ")}]`,
     };
   }
-  if (value.type === "text") {
-    return { operator: "contains", value: `"${value.text}"` };
-  }
   logNever(value);
   return undefined;
 }
 
-function formatMinMax(
+function formatMinMaxLegacy(
   min: string | number | undefined,
   max: string | number | undefined,
 ): FormattedFilter | undefined {

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

@@ -32,15 +32,66 @@ export type FilterType =
   | "select"
   | "boolean";
 
+export const NULLISH_OPS = ["is_null", "is_not_null"] as const;
+export const MEMBERSHIP_OPS = ["in", "not_in"] as const;
+export const NUMBER_COMPARISON_OPS = [
+  "==",
+  "!=",
+  ">",
+  ">=",
+  "<",
+  "<=",
+] as const;
+export const TEXT_SCALAR_OPS = [
+  "contains",
+  "equals",
+  "does_not_equal",
+  "regex",
+  "starts_with",
+  "ends_with",
+] as const;
+
+export const NUMBER_OPS = [
+  "between",
+  ...NUMBER_COMPARISON_OPS,
+  ...NULLISH_OPS,
+] as const;
+export const TEXT_OPS = [
+  ...TEXT_SCALAR_OPS,
+  ...MEMBERSHIP_OPS,
+  "is_empty",
+  ...NULLISH_OPS,
+] as const;
+
+export type NullishOp = (typeof NULLISH_OPS)[number];
+export type MembershipOp = (typeof MEMBERSHIP_OPS)[number];
+export type NumberComparisonOp = (typeof NUMBER_COMPARISON_OPS)[number];
+export type TextScalarOp = (typeof TEXT_SCALAR_OPS)[number];
+
+interface NullishOpts {
+  operator: NullishOp;
+}
+
+type NumberFilterOpts =
+  | { operator: "between"; min: number; max: number }
+  | { operator: NumberComparisonOp; value: number }
+  | NullishOpts;
+
+type TextFilterOpts =
+  | { operator: TextScalarOp; text: string }
+  | { operator: MembershipOp; values: string[] }
+  | { operator: "is_empty" }
+  | NullishOpts;
+
 // Filter is a factory function that creates a filter object
 export const Filter = {
-  number(opts: { min?: number; max?: number; operator?: OperatorType }) {
+  number(opts: NumberFilterOpts) {
     return {
       type: "number",
       ...opts,
     } as const;
   },
-  text(opts: { text?: string; operator: OperatorType }) {
+  text(opts: TextFilterOpts) {
     return {
       type: "text",
       ...opts,
@@ -84,6 +135,15 @@ export type ColumnFilterForType<T extends FilterType> = T extends FilterType
   ? Extract<ColumnFilterValue, { type: T }>
   : never;
 
+function isNullishFilter(
+  filter: ColumnFilterValue,
+): filter is Extract<
+  ColumnFilterValue,
+  { operator: "is_null" | "is_not_null" }
+> {
+  return filter.operator === "is_null" || filter.operator === "is_not_null";
+}
+
 export function filterToFilterCondition(
   columnIdString: string,
   filter: ColumnFilterValue | undefined,
@@ -93,12 +153,11 @@ export function filterToFilterCondition(
   }
   const columnId = columnIdString as ColumnId;
 
-  if (filter.operator === "is_null" || filter.operator === "is_not_null") {
+  if (isNullishFilter(filter)) {
     return [
       {
         column_id: columnId,
         operator: filter.operator,
-        value: undefined,
         type: "condition",
         negate: false,
       },
@@ -106,38 +165,76 @@ export function filterToFilterCondition(
   }
 
   switch (filter.type) {
-    case "number": {
-      const conditions: FilterConditionType[] = [];
-      if (filter.min !== undefined) {
-        conditions.push({
-          column_id: columnId,
-          operator: ">=",
-          value: filter.min,
-          type: "condition",
-          negate: false,
-        });
-      }
-      if (filter.max !== undefined) {
-        conditions.push({
-          column_id: columnId,
-          operator: "<=",
-          value: filter.max,
-          type: "condition",
-          negate: false,
-        });
+    case "number":
+      switch (filter.operator) {
+        case "between":
+          return [
+            {
+              column_id: columnId,
+              operator: "between",
+              value: { min: filter.min, max: filter.max },
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "==":
+        case "!=":
+        case ">":
+        case ">=":
+        case "<":
+        case "<=":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: filter.value,
+              type: "condition",
+              negate: false,
+            },
+          ];
+        default:
+          assertNever(filter);
       }
-      return conditions;
-    }
     case "text":
-      return [
-        {
-          column_id: columnId,
-          operator: filter.operator,
-          value: filter.text,
-          type: "condition",
-          negate: false,
-        },
-      ];
+      switch (filter.operator) {
+        case "contains":
+        case "equals":
+        case "does_not_equal":
+        case "regex":
+        case "starts_with":
+        case "ends_with":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: filter.text,
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "in":
+        case "not_in":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: filter.values,
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "is_empty":
+          return [
+            {
+              column_id: columnId,
+              operator: "is_empty",
+              type: "condition",
+              negate: false,
+            },
+          ];
+        default:
+          assertNever(filter);
+      }
     case "datetime": {
       const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
@@ -210,7 +307,6 @@ export function filterToFilterCondition(
           {
             column_id: columnId,
             operator: "is_true",
-            value: undefined,
             type: "condition",
             negate: false,
           },
@@ -221,7 +317,6 @@ export function filterToFilterCondition(
           {
             column_id: columnId,
             operator: "is_false",
-            value: undefined,
             type: "condition",
             negate: false,
           },

package/src/components/data-table/header-items.tsx

@@ -328,14 +328,21 @@ export const FilterButtons = ({
   onApply,
   onClear,
   clearButtonDisabled,
+  applyButtonDisabled,
 }: {
   onApply: () => void;
   onClear: () => void;
   clearButtonDisabled?: boolean;
+  applyButtonDisabled?: boolean;
 }) => {
   return (
     <div className="flex gap-2 px-2 justify-between">
-      <Button variant="link" size="sm" onClick={onApply}>
+      <Button
+        variant="link"
+        size="sm"
+        onClick={onApply}
+        disabled={applyButtonDisabled}
+      >
         Apply
       </Button>
       <Button

package/src/components/data-table/operator-labels.ts

@@ -0,0 +1,25 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
+
+export const OPERATOR_LABELS: Record<OperatorType | "between", string> = {
+  "==": "Equals",
+  "!=": "Doesn't equal",
+  ">": "Greater than",
+  ">=": "Greater than or equal",
+  "<": "Less than",
+  "<=": "Less than or equal",
+  between: "Between",
+  contains: "Contains",
+  equals: "Equals",
+  does_not_equal: "Doesn't equal",
+  starts_with: "Starts with",
+  ends_with: "Ends with",
+  regex: "Matches regex",
+  in: "Is in",
+  not_in: "Not in",
+  is_empty: "Is empty",
+  is_true: "Is true",
+  is_false: "Is false",
+  is_null: "Is null",
+  is_not_null: "Is not null",
+};

package/src/components/data-table/regex-input.tsx

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import React from "react";
+import { cn } from "@/utils/cn";
+import { Input } from "../ui/input";
+
+export interface RegexInputProps {
+  id?: string;
+  value: string;
+  onChange: (next: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  className?: string;
+  autoFocus?: boolean;
+  "aria-label"?: string;
+}
+
+export const RegexInput = React.forwardRef<HTMLInputElement, RegexInputProps>(
+  (
+    {
+      id,
+      value,
+      onChange,
+      onKeyDown,
+      placeholder = "pattern",
+      className,
+      autoFocus,
+      "aria-label": ariaLabel,
+    },
+    ref,
+  ) => (
+    <div
+      className={cn(
+        "flex items-stretch h-6 mb-1 rounded-sm border border-input bg-background shadow-xs-solid focus-within:shadow-md-solid focus-within:ring-1 focus-within:ring-ring focus-within:border-primary",
+        className,
+      )}
+    >
+      <Slash />
+      <Input
+        ref={ref}
+        id={id}
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        aria-label={ariaLabel}
+        rootClassName="flex-1 min-w-0"
+        className="border-0 mb-0 h-full shadow-none! hover:shadow-none! focus-visible:shadow-none! focus-visible:ring-0 focus-visible:border-0 rounded-none bg-transparent"
+      />
+      <Slash />
+    </div>
+  ),
+);
+RegexInput.displayName = "RegexInput";
+
+const Slash = () => (
+  <span className="px-1.5 flex items-center text-muted-foreground font-code text-sm select-none">
+    /
+  </span>
+);

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -18,14 +18,16 @@ import { assertNever } from "@/utils/assertNever";
 import { asRemoteURL, useRuntimeManager } from "@/core/runtime/config";
 import { API } from "@/core/network/api";
 
-type AgentTab = "claude" | "codex" | "opencode";
+type AgentTab = "claude" | "codex" | "opencode" | "prompt";
+
+const TERMINAL_TABS = ["claude", "codex", "opencode"] as const;
 
 function getMarimoCommand(): string {
   return import.meta.env.DEV ? "uv run marimo" : "uvx marimo@latest";
 }
 
-function getPromptCommand(
-  agent: AgentTab,
+function getTerminalCommand(
+  agent: Exclude<AgentTab, "prompt">,
   url: string,
   withToken: boolean,
 ): string {
@@ -43,6 +45,21 @@ function getPromptCommand(
   }
 }
 
+function getRawPrompt(url: string, token: string | null): string {
+  const tokenHint = token
+    ? `\n\nUse this auth token when calling \`execute-code.sh\`: \`execute-code.sh --url '${url}' --token '${token}'\`.`
+    : "";
+  return [
+    "Use the /marimo-pair skill to pair-program on a running marimo notebook.",
+    "",
+    `Connect to the notebook at: ${url}`,
+    "",
+    `Use \`execute-code.sh --url ${url}\` from the marimo-pair skill to execute code in the notebook.${tokenHint}`,
+    "",
+    "Once you are connected, send a fun toast (mo.status.toast(...)) to the user inside marimo letting them know you're ready to pair.",
+  ].join("\n");
+}
+
 function maskToken(token: string): string {
   if (token.length <= 4) {
     return "****";
@@ -52,6 +69,13 @@ function maskToken(token: string): string {
 
 const SKILL_INSTALL = "npx skills add marimo-team/marimo-pair";
 
+const AGENT_LABELS: Record<AgentTab, string> = {
+  claude: "Claude",
+  codex: "Codex",
+  opencode: "OpenCode",
+  prompt: "Prompt",
+};
+
 function useAuthToken(): string | null {
   const [token, setToken] = useState<string | null>(null);
   useEffect(() => {
@@ -75,10 +99,9 @@ export const PairWithAgentModal: React.FC<{
   const authToken = useAuthToken();
   const hasToken = Boolean(authToken);
   const remoteUrl = runtimeManager.httpURL.toString();
-  const promptCommand = getPromptCommand(activeTab, remoteUrl, hasToken);
 
   return (
-    <DialogContent className="sm:max-w-lg">
+    <DialogContent className="sm:max-w-2xl">
       <DialogHeader>
         <DialogTitle>Pair with an agent</DialogTitle>
         <DialogDescription>
@@ -96,49 +119,75 @@ export const PairWithAgentModal: React.FC<{
       </DialogHeader>
 
       <div className="flex flex-col gap-4 py-2">
-        <div className="flex flex-col gap-2">
-          <span className="text-sm font-medium">1. Install the skill</span>
-          <CommandBlock command={SKILL_INSTALL} />
-        </div>
-
-        <div className="flex flex-col gap-2">
-          <span className="text-sm font-medium">2. Run in your terminal</span>
-          <Tabs
-            value={activeTab}
-            onValueChange={(v) => setActiveTab(v as AgentTab)}
-          >
-            <TabsList className="w-full">
-              <TabsTrigger value="claude" className="flex-1">
-                Claude
-              </TabsTrigger>
-              <TabsTrigger value="codex" className="flex-1">
-                Codex
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as AgentTab)}
+        >
+          <TabsList className="w-full">
+            {(["claude", "codex", "opencode", "prompt"] as const).map((tab) => (
+              <TabsTrigger key={tab} value={tab} className="flex-1">
+                {AGENT_LABELS[tab]}
               </TabsTrigger>
-              <TabsTrigger value="opencode" className="flex-1">
-                OpenCode
-              </TabsTrigger>
-            </TabsList>
+            ))}
+          </TabsList>
 
-            <TabsContent value="claude" className="mt-3">
-              <CommandBlock command={promptCommand} />
-            </TabsContent>
-            <TabsContent value="codex" className="mt-3">
-              <CommandBlock command={promptCommand} />
+          {TERMINAL_TABS.map((tab) => (
+            <TabsContent
+              key={tab}
+              value={tab}
+              className="mt-4 flex flex-col gap-4"
+            >
+              <Step
+                index={1}
+                title="Install the skill"
+                hint="Run once per machine."
+              >
+                <CommandBlock command={SKILL_INSTALL} />
+              </Step>
+              <Step index={2} title="Run in your terminal">
+                <CommandBlock
+                  command={getTerminalCommand(tab, remoteUrl, hasToken)}
+                />
+              </Step>
+              {hasToken && authToken && (
+                <Step index={3} title="Paste when prompted for a token">
+                  <CommandBlock
+                    command={authToken}
+                    display={maskToken(authToken)}
+                  />
+                </Step>
+              )}
             </TabsContent>
-            <TabsContent value="opencode" className="mt-3">
-              <CommandBlock command={promptCommand} />
-            </TabsContent>
-          </Tabs>
-        </div>
-
-        {hasToken && authToken && (
-          <div className="flex flex-col gap-2">
-            <span className="text-sm font-medium">
-              3. Paste when prompted for token
-            </span>
-            <CommandBlock command={authToken} display={maskToken(authToken)} />
-          </div>
-        )}
+          ))}
+
+          <TabsContent value="prompt" className="mt-4 flex flex-col gap-4">
+            <Step
+              index={1}
+              title="Make sure the marimo-pair skill is available to your agent"
+              hint="Skip if your agent already has it."
+            >
+              <CommandBlock command={SKILL_INSTALL} />
+            </Step>
+            <Step
+              index={2}
+              title="Copy this prompt into your agent"
+              hint={
+                hasToken
+                  ? "Includes your auth token — keep it private."
+                  : undefined
+              }
+            >
+              <CommandBlock
+                command={getRawPrompt(remoteUrl, authToken)}
+                display={getRawPrompt(
+                  remoteUrl,
+                  authToken ? maskToken(authToken) : null,
+                )}
+                multiline={true}
+              />
+            </Step>
+          </TabsContent>
+        </Tabs>
       </div>
 
       <DialogFooter>
@@ -150,10 +199,28 @@ export const PairWithAgentModal: React.FC<{
   );
 };
 
-const CommandBlock: React.FC<{ command: string; display?: string }> = ({
-  command,
-  display,
-}) => {
+const Step: React.FC<{
+  index: number;
+  title: string;
+  hint?: string;
+  children: React.ReactNode;
+}> = ({ index, title, hint, children }) => (
+  <div className="flex flex-col gap-2">
+    <div className="flex items-baseline gap-2">
+      <span className="text-sm font-medium">
+        {index}. {title}
+      </span>
+      {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
+    </div>
+    {children}
+  </div>
+);
+
+const CommandBlock: React.FC<{
+  command: string;
+  display?: string;
+  multiline?: boolean;
+}> = ({ command, display, multiline = false }) => {
   const [copied, setCopied] = useState(false);
 
   const copy = Events.stopPropagation(async (e) => {
@@ -163,6 +230,30 @@ const CommandBlock: React.FC<{ command: string; display?: string }> = ({
     setTimeout(() => setCopied(false), 2000);
   });
 
+  if (multiline) {
+    return (
+      <div className="relative rounded-md bg-muted">
+        <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words px-3 py-2 pr-10 font-mono text-xs select-all">
+          {display ?? command}
+        </pre>
+        <Tooltip content="Copied!" open={copied}>
+          <Button
+            onClick={copy}
+            size="xs"
+            variant="ghost"
+            className="absolute right-1 top-1"
+          >
+            {copied ? (
+              <CheckIcon size={14} strokeWidth={1.5} />
+            ) : (
+              <CopyIcon size={14} strokeWidth={1.5} />
+            )}
+          </Button>
+        </Tooltip>
+      </div>
+    );
+  }
+
   return (
     <div className="flex items-center gap-2 rounded-md bg-muted px-3 py-2 font-mono text-xs">
       <code className="flex-1 select-all break-words">