@marimo-team/frontend 0.23.12-dev0 → 0.23.12-dev10

package/src/components/editor/ai/completion-utils.ts

@@ -7,7 +7,7 @@ import {
   startCompletion,
 } from "@codemirror/autocomplete";
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
-import type { FileUIPart } from "ai";
+import type { DataUIPart, FileUIPart, UIMessage } from "ai";
 import { getAIContextRegistry } from "@/core/ai/context/context";
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
@@ -50,6 +50,91 @@ export function getAICompletionBody({
   };
 }
 
+export interface MarimoContextData {
+  plainText: string;
+  contextIds: string[];
+}
+
+export type MarimoContextUIPart = DataUIPart<{
+  "marimo-context": MarimoContextData;
+}>;
+
+/**
+ * Wire `type` of the @-context data part. Must match
+ * `MARIMO_CONTEXT_PART_TYPE` on the backend.
+ */
+export const MARIMO_CONTEXT_PART_TYPE =
+  "data-marimo-context" as const satisfies MarimoContextUIPart["type"];
+
+export interface ResolvedChatContext {
+  contextPart: MarimoContextUIPart | null;
+  attachments: FileUIPart[];
+}
+
+/**
+ * Marker stamped onto attachments derived from @-context (as opposed to files
+ * the user uploaded directly).
+ */
+const CONTEXT_ATTACHMENT_METADATA = {
+  marimo: { source: "context" },
+} as const;
+
+/** Whether a part is an attachment that was derived from @-context. */
+export function isContextAttachment(part: UIMessage["parts"][number]): boolean {
+  return (
+    part.type === "file" &&
+    part.providerMetadata?.marimo?.source ===
+      CONTEXT_ATTACHMENT_METADATA.marimo.source
+  );
+}
+
+/**
+ * Resolve @-context for messages. They represent referenced
+ * datasets, variables, or other context from the user's prompt.
+ */
+export async function resolveChatContext(
+  input: string,
+): Promise<ResolvedChatContext> {
+  if (!input.includes(CONTEXT_TRIGGER)) {
+    return { contextPart: null, attachments: [] };
+  }
+
+  const registry = getAIContextRegistry(store);
+  const contextIds = registry.parseAllContextIds(input);
+  if (contextIds.length === 0) {
+    return { contextPart: null, attachments: [] };
+  }
+
+  const plainText = registry.formatContextForAI(contextIds);
+
+  let attachments: FileUIPart[] = [];
+  try {
+    const resolved = await registry.getAttachmentsForContext(contextIds);
+    attachments = resolved.map((attachment) => ({
+      ...attachment,
+      providerMetadata: {
+        ...attachment.providerMetadata,
+        marimo: {
+          ...attachment.providerMetadata?.marimo,
+          ...CONTEXT_ATTACHMENT_METADATA.marimo,
+        },
+      },
+    }));
+  } catch (error) {
+    Logger.error("Error getting attachments:", error);
+  }
+
+  let contextPart: MarimoContextUIPart | null = null;
+  if (plainText.trim()) {
+    contextPart = {
+      type: MARIMO_CONTEXT_PART_TYPE,
+      data: { plainText, contextIds: contextIds.map(String) },
+    };
+  }
+
+  return { contextPart, attachments };
+}
+
 /**
  * Gets the request body and attachments for the AI completion API.
  */

package/src/components/editor/cell/CreateCellButton.tsx

@@ -142,7 +142,7 @@ export const CreateCellButton = ({
       <DropdownMenuTrigger asChild={true}>
         <Button
           className={cn(
-            "border-none hover-action shadow-none! bg-transparent! focus-visible:outline-none",
+            "border-none hover-action shadow-none! bg-transparent! focus-visible:outline-hidden",
             isAppInteractionDisabled(connectionState) && " inactive-button",
           )}
           onPointerDownCapture={handlePointerDownCapture}

package/src/components/editor/chrome/panels/empty-state.tsx

@@ -20,7 +20,7 @@ export const PanelEmptyState = ({
         {icon &&
           // oxlint-disable-next-line react/no-clone-element
           React.cloneElement(icon, {
-            className: "text-accent-foreground flex-shrink-0",
+            className: "text-accent-foreground shrink-0",
           })}
         <span className="mt-1 text-accent-foreground">{title}</span>
       </div>

package/src/components/editor/chrome/panels/outline/floating-outline.tsx

@@ -38,7 +38,7 @@ export const FloatingOutline: React.FC = () => {
       <OutlineList
         className={cn(
           "-top-4 max-h-[70vh] bg-background rounded-lg shadow-lg absolute overflow-auto transition-all duration-300 w-[300px] border",
-          isHovered ? "-left-[280px] opacity-100" : "left-[300px] opacity-0",
+          isHovered ? "left-[-280px] opacity-100" : "left-[300px] opacity-0",
         )}
         items={items}
         activeHeaderId={activeHeaderId}

package/src/components/editor/chrome/wrapper/pending-ai-cells.tsx

@@ -74,7 +74,7 @@ export const PendingAICells: React.FC = () => {
         <Button variant="ghost" size="icon" onClick={() => clickNext("up")}>
           <ChevronUp className="h-3.5 w-3.5" />
         </Button>
-        <span className="text-xs font-mono min-w-[3.5rem] text-center">
+        <span className="text-xs font-mono min-w-14 text-center">
           {currentIndex === null
             ? `${listStagedCells.length} pending`
             : `${currentIndex + 1} / ${listStagedCells.length}`}

package/src/components/editor/columns/cell-column.tsx

@@ -81,7 +81,7 @@ const ResizableComponent = ({
       <div
         ref={ref}
         className={`w-[3px] cursor-col-resize transition-colors duration-200 z-100
-          relative before:content-[''] before:absolute before:inset-y-0 before:-left-[3px]
+          relative before:content-[''] before:absolute before:inset-y-0 before:left-[-3px]
           before:right-[-3px] before:w-[9px] before:z-[-1]
           hover/column:bg-[var(--slate-3)] dark:hover/column:bg-[var(--slate-5)]
           hover/column:hover:bg-primary/60 dark:hover/column:hover:bg-primary/60`}

package/src/components/editor/columns/sortable-column.tsx

@@ -78,7 +78,7 @@ const SortableColumnInternal = React.forwardRef(
     };
 
     const dragHandle = (
-      <div className="px-2 pb-0 group flex items-center overflow-hidden border-b border-[var(--slate-7)]">
+      <div className="px-2 pb-0 group flex items-center overflow-hidden border-b border-(--slate-7)">
         <Tooltip content="Move column left" side="top" delayDuration={300}>
           <Button
             variant="text"
@@ -161,7 +161,7 @@ const SortableColumnInternal = React.forwardRef(
           isOver && "bg-accent/20", // Add a background color when dragging over
         )}
       >
-        <div className="border border-[var(--slate-7)]">
+        <div className="border border-(--slate-7)">
           {dragHandle}
           {props.children}
         </div>

package/src/components/editor/output/MarimoErrorOutput.tsx

@@ -722,7 +722,7 @@ export const MarimoErrorOutput = ({
     <Alert
       variant={alertVariant}
       className={cn(
-        "border-none font-code text-sm text-[0.84375rem] p-0 text-muted-foreground normal [&:has(svg)]:pl-0 space-y-2",
+        "border-none font-code text-sm text-[0.84375rem] p-0 text-muted-foreground normal has-[svg]:pl-0 space-y-2",
         className,
       )}
     >

package/src/components/editor/output/TextOutput.tsx

@@ -18,7 +18,7 @@ export const TextOutput = ({ text, channel, wrapText }: Props): JSX.Element => {
     return (
       <span
         className={
-          wrapText ? "whitespace-pre-wrap break-words" : "whitespace-pre"
+          wrapText ? "whitespace-pre-wrap wrap-break-word" : "whitespace-pre"
         }
       >
         <RenderTextWithLinks text={text} />
@@ -30,7 +30,7 @@ export const TextOutput = ({ text, channel, wrapText }: Props): JSX.Element => {
     <span
       className={cn(
         !shouldRenderAnsi &&
-          (wrapText ? "whitespace-pre-wrap break-words" : "whitespace-pre"),
+          (wrapText ? "whitespace-pre-wrap wrap-break-word" : "whitespace-pre"),
         channel === "output" && "font-prose",
         channel,
       )}

package/src/components/home/components.tsx

@@ -9,7 +9,6 @@ import {
   DatabaseIcon,
   FileIcon,
   FileTextIcon,
-  GithubIcon,
   GraduationCapIcon,
   GridIcon,
   LayoutIcon,
@@ -17,10 +16,11 @@ import {
   MessagesSquareIcon,
   OrbitIcon,
   PackageIcon,
-  YoutubeIcon,
 } from "lucide-react";
 import type React from "react";
 import { MarkdownIcon } from "@/components/editor/cell/code/icons";
+import { GitHubIcon } from "@/components/icons/github";
+import { YouTubeIcon } from "@/components/icons/youtube";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -130,7 +130,7 @@ const RESOURCES = [
   {
     title: "GitHub",
     description: "View source code, report issues, or contribute",
-    icon: GithubIcon,
+    icon: GitHubIcon,
     url: Constants.githubPage,
   },
   {
@@ -148,7 +148,7 @@ const RESOURCES = [
   {
     title: "YouTube",
     description: "Watch tutorials and demos",
-    icon: YoutubeIcon,
+    icon: YouTubeIcon,
     url: Constants.youtube,
   },
   {

package/src/components/icons/github.tsx

@@ -0,0 +1,21 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { SVGProps } from "react";
+
+// Artwork from Simple Icons (https://simpleicons.org/?q=github), licensed CC0 1.0.
+// The GitHub name and logo are trademarks of GitHub, Inc.
+export const GitHubIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  );
+};

package/src/components/icons/youtube.tsx

@@ -0,0 +1,21 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { SVGProps } from "react";
+
+// Artwork from Simple Icons (https://simpleicons.org/?q=youtube), licensed CC0 1.0.
+// The YouTube name and logo are trademarks of Google LLC.
+export const YouTubeIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+    </svg>
+  );
+};

package/src/components/slides/minimap.tsx

@@ -514,7 +514,7 @@ const SlideThumbnailRow = ({
       tabIndex={0}
       data-cell-id={cell.id}
       className={cn(
-        "relative shrink-0 appearance-none text-left p-0 bg-transparent outline-none",
+        "relative shrink-0 appearance-none text-left p-0 bg-transparent outline-hidden",
         className,
       )}
       style={rowStyle}
@@ -591,7 +591,7 @@ const InsertCellLine = ({
         data-testid="minimap-insert-cell"
         className={cn(
           "absolute left-0 right-0 z-30 flex h-3 items-center justify-center",
-          "opacity-0 transition-opacity hover:opacity-80 focus-visible:opacity-100 focus:outline-none",
+          "opacity-0 transition-opacity hover:opacity-80 focus-visible:opacity-100 focus:outline-hidden",
           position === "below"
             ? "bottom-0 translate-y-1/2"
             : "top-0 -translate-y-1/2",

package/src/components/slides/reveal-component.tsx

@@ -684,7 +684,7 @@ const RevealSlidesComponent = ({
       <div className="group relative" style={{ width, height }}>
         <Deck
           deckRef={deckRef}
-          className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides focus:outline-none focus-visible:outline-none"
+          className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides focus:outline-hidden focus-visible:outline-hidden"
           config={revealConfig}
           onReady={handleDeckReady}
           onSlideChange={handleSlideChange}

package/src/components/storage/components.tsx

@@ -6,14 +6,10 @@ import AzureIcon from "@marimo-team/llm-info/icons/azure.svg?inline";
 import CloudflareIcon from "@marimo-team/llm-info/icons/cloudflare.svg?inline";
 import CoreweaveIcon from "@marimo-team/llm-info/icons/coreweave.svg?inline";
 import CoreweaveDarkIcon from "@marimo-team/llm-info/icons/coreweave-dark.svg?inline";
-import {
-  DatabaseZapIcon,
-  GithubIcon,
-  GlobeIcon,
-  HardDriveIcon,
-} from "lucide-react";
+import { DatabaseZapIcon, GlobeIcon, HardDriveIcon } from "lucide-react";
 import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
 import GoogleDriveIcon from "@/components/databases/icons/google-drive.svg?inline";
+import { GitHubIcon } from "@/components/icons/github";
 import type { KnownStorageProtocol } from "@/core/storage/types";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
@@ -32,7 +28,7 @@ const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
   file: HardDriveIcon,
   "in-memory": DatabaseZapIcon,
   gdrive: { src: GoogleDriveIcon },
-  github: GithubIcon,
+  github: GitHubIcon,
 };
 
 export const ProtocolIcon: React.FC<{

package/src/components/ui/alert.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import { cn } from "@/utils/cn";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+  "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] has-[svg]:pl-11",
   {
     variants: {
       variant: {

package/src/components/ui/command.tsx

@@ -44,7 +44,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
         className="overflow-hidden p-0 shadow-2xl"
         usePortal={true}
       >
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -113,7 +113,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
       className,
     )}
     {...props}

package/src/components/ui/reorderable-list.tsx

@@ -300,7 +300,7 @@ export const ReorderableList = <T extends object>({
         <ListBoxItem
           key={getKey(item)}
           id={getKey(item)}
-          className="active:cursor-grabbing data-[dragging]:opacity-60 outline-none"
+          className="active:cursor-grabbing data-dragging:opacity-60 outline-hidden"
           onHoverStart={
             onItemPreloadHint ? () => onItemPreloadHint(item) : undefined
           }

package/src/components/ui/table.tsx

@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:pr-0",
       className,
     )}
     {...props}
@@ -89,10 +89,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn(
-      "p-1.5 align-middle [&:has([role=checkbox])]:pr-0",
-      className,
-    )}
+    className={cn("p-1.5 align-middle has-[[role=checkbox]]:pr-0", className)}
     {...props}
   />
 ));