@marimo-team/islands 0.25.3-dev266 → 0.25.3-dev267

package/src/css/app/Cell.css

@@ -27,20 +27,9 @@
     outline: none;
   }
 
-  &:has(.mo-ai-generated-cell) {
-    border-color: var(--blue-7);
-  }
-
   /* Styling for cells marked for deletion by AI */
   &:has(.mo-ai-deleted-cell) {
-    position: relative;
-    border-color: var(--red-7);
-
-    .output-area,
-    .cm-gutters,
-    .cm {
-      background-color: var(--red-2);
-    }
+    box-shadow: -2px 0 0 var(--red-7);
 
     /* Add strikethrough effect to the code */
     .cm-content {
@@ -218,14 +207,18 @@
 
   /* Focus state */
 
-  &.focus-outline {
-    transition: all 0.6s;
+  &.focus-outline,
+  &[data-ai-review-selected] {
     border-color: var(--blue-8) !important;
 
     /* custom shadow until our theme overrides can support colored shadow */
     @apply shadow-lg shadow-[var(--blue-8)];
   }
 
+  &.focus-outline {
+    transition: all 0.6s;
+  }
+
   /* Published - when its just the output */
 
   &.published {
@@ -303,20 +296,6 @@
   @apply bg-background;
 }
 
-.mo-ai-cell-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  width: 100%;
-  padding: 0.375rem 0.5rem;
-  background: var(--gray-2);
-}
-
-.dark .mo-ai-cell-footer {
-  background: var(--gray-3);
-}
-
 .dark .marimo-cell {
   @apply border-border;
 
@@ -355,14 +334,6 @@
   }
 }
 
-.dark .marimo-cell:has(.mo-ai-generated-cell) {
-  border-color: var(--blue-8);
-}
-
-.dark .marimo-cell:has(.mo-ai-deleted-cell) {
-  border-color: var(--red-8);
-}
-
 #cell-setup,
 #cell-setup .cm-editor,
 #cell-setup .cm-gutter {

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

@@ -482,12 +482,11 @@ export const Chatbot: React.FC<Props> = (props) => {
                 className={`max-w-[80%] p-3 rounded-lg ${
                   message.role === "user"
                     ? "bg-(--sky-11) text-(--slate-1) whitespace-pre-wrap"
-                    : "bg-(--slate-4) text-(--slate-12)"
+                    : "bg-(--slate-4) text-(--slate-12) [--muted-foreground:var(--slate-11)]"
                 }`}
               >
                 {renderUIMessage({
                   message,
-                  isStreamingReasoning: status === "streaming",
                   isLast,
                   isActive: isLoading,
                   addToolApprovalResponse: isLast
@@ -514,7 +513,7 @@ export const Chatbot: React.FC<Props> = (props) => {
           );
         })}
 
-        {isLoading && (
+        {isLoading && messages.at(-1)?.role !== "assistant" && (
           <div className="flex items-center justify-center mb-4">
             <Spinner size="small" />
           </div>

package/src/plugins/impl/common/error-banner.tsx

@@ -47,11 +47,13 @@ export const ErrorBanner = ({
       <AlertDialog open={open} onOpenChange={setOpen}>
         <AlertDialogContent className="max-w-[80%] max-h-[80%] overflow-hidden flex flex-col">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-error">Error</AlertDialogTitle>
+            <AlertDialogTitle className="text-(--red-11)">
+              Error
+            </AlertDialogTitle>
           </AlertDialogHeader>
           <AlertDialogDescription
             asChild={true}
-            className="text-error text-sm p-2 font-mono overflow-auto whitespace-pre-wrap"
+            className="text-(--red-11) text-sm p-2 font-mono overflow-auto whitespace-pre-wrap"
           >
             <pre>{message}</pre>
           </AlertDialogDescription>
@@ -72,7 +74,7 @@ const bannerStyle = cva(
     variants: {
       kind: {
         danger:
-          "text-error border-(--red-6) shadow-md-solid shadow-error bg-(--red-1)",
+          "text-(--red-11) border-(--red-6) shadow-md-solid shadow-error bg-(--red-1)",
         info: "text-primary border-(--blue-6) shadow-md-solid shadow-accent bg-(--blue-1)",
         warn: "border-(--yellow-6) bg-(--yellow-2) dark:bg-(--yellow-4) text-(--yellow-11) dark:text-(--yellow-12)",
       },

package/src/components/chat/reasoning-accordion.tsx

@@ -1,61 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { BotMessageSquareIcon } from "lucide-react";
-import React from "react";
-import { ChatMarkdown } from "./chat-markdown";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-
-interface ReasoningAccordionProps {
-  reasoning: string;
-  index?: number;
-  isStreaming?: boolean;
-}
-
-export const ReasoningAccordion: React.FC<ReasoningAccordionProps> = ({
-  reasoning,
-  index = 0,
-  isStreaming = false,
-}) => {
-  const [openItem, setOpenItem] = React.useState<string>("");
-
-  // Some reasoning models emit a reasoning part with no surfaced content
-  // (e.g. OpenAI's o-series, which hides chain-of-thought but still marks
-  // its boundaries on the wire). pydantic-ai's Vercel adapter forwards the
-  // empty start/end pair, producing a 0-char ReasoningUIPart. Skip it.
-  if (!reasoning && !isStreaming) {
-    return null;
-  }
-
-  return (
-    <Accordion
-      key={index}
-      type="single"
-      collapsible={true}
-      className="w-full mb-2"
-      value={isStreaming ? "reasoning" : openItem}
-      onValueChange={setOpenItem}
-    >
-      <AccordionItem value="reasoning" className="border-0">
-        <AccordionTrigger className="text-xs text-muted-foreground hover:bg-muted/50 px-2 py-1 h-auto rounded-sm [&[data-state=open]>svg]:rotate-180">
-          <span className="flex items-center gap-2">
-            <BotMessageSquareIcon className="h-3 w-3" />
-            {isStreaming ? "Thinking" : "View reasoning"}
-            {reasoning.length > 0 && ` (${reasoning.length} chars)`}
-          </span>
-        </AccordionTrigger>
-        <AccordionContent className="pb-2 px-2">
-          <div className="bg-muted/30 border border-muted/50 rounded-md p-3 text-muted-foreground relative">
-            <div className="pr-6">
-              <ChatMarkdown content={reasoning} />
-            </div>
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-};

package/src/components/chat/tool-call/tool-activity-group.tsx

@@ -1,49 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import type { PropsWithChildren } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { formatToolName, type ToolState } from "./shared";
-
-interface ToolActivity {
-  toolName: string;
-  state: ToolState;
-}
-
-export function ToolActivityGroup({
-  tools,
-  isActive,
-  children,
-}: PropsWithChildren<{ tools: ToolActivity[]; isActive: boolean }>) {
-  const pending = tools.some((tool) => tool.state !== "output-available");
-  const editing = tools.every(
-    (tool) => formatToolName(tool.toolName) === "edit_notebook_tool",
-  );
-  const count = tools.length;
-  const label = pending
-    ? isActive
-      ? editing
-        ? "Editing notebook…"
-        : "Working…"
-      : "Stopped before completing all steps"
-    : editing
-      ? `Edited notebook · ${count} ${count === 1 ? "operation" : "operations"}`
-      : `Completed ${count} ${count === 1 ? "step" : "steps"}`;
-
-  return (
-    <Accordion type="single" collapsible={true} className="my-1 w-full">
-      <AccordionItem value="activity" className="border-0">
-        <AccordionTrigger className="h-auto pl-0 pr-2 py-1 gap-2 rounded text-xs font-normal text-muted-foreground hover:bg-(--slate-2) hover:text-foreground hover:no-underline">
-          {label}
-        </AccordionTrigger>
-        <AccordionContent className="pb-2 pl-3 border-l border-border">
-          {children}
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}

package/src/components/chat/tool-call/tool-error-card.tsx

@@ -1,81 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { ChevronDownIcon, XCircleIcon } from "lucide-react";
-import React from "react";
-import { cn } from "@/utils/cn";
-import { formatToolName } from "./shared";
-import { ToolArgsRenderer } from "./tool-args";
-
-interface ToolErrorCardProps {
-  toolName: string;
-  input: unknown;
-  errorText?: string;
-  // When false, defaults to collapsed (the conversation has moved past this).
-  isLive: boolean;
-  className?: string;
-}
-
-export const ToolErrorCard: React.FC<ToolErrorCardProps> = ({
-  toolName,
-  input,
-  errorText,
-  isLive,
-  className,
-}) => {
-  const [open, setOpen] = React.useState(isLive);
-
-  // Auto-collapse once when the conversation moves past this turn.
-  // The user can still re-open manually afterwards; we only do this on the
-  // live → not-live transition, never the reverse.
-  const wasLive = React.useRef(isLive);
-  React.useEffect(() => {
-    if (wasLive.current && !isLive) {
-      setOpen(false);
-    }
-    wasLive.current = isLive;
-  }, [isLive]);
-
-  return (
-    <div
-      className={cn(
-        "rounded-md border border-(--red-6) bg-(--red-2)",
-        className,
-      )}
-    >
-      <button
-        type="button"
-        onClick={() => setOpen((prev) => !prev)}
-        className="w-full flex items-center gap-2 px-3 py-2 text-xs text-(--red-11) hover:bg-(--red-3) rounded-md transition-colors"
-        aria-expanded={open}
-      >
-        <XCircleIcon className="h-3.5 w-3.5 shrink-0" />
-        <span className="flex-1 text-left">
-          <span className="font-semibold">Failed:</span>{" "}
-          <code className="font-mono">{formatToolName(toolName)}</code>
-        </span>
-        <ChevronDownIcon
-          className={cn(
-            "h-3.5 w-3.5 shrink-0 transition-transform",
-            open && "rotate-180",
-          )}
-        />
-      </button>
-
-      {open && (
-        <div className="px-3 pb-3 space-y-3 border-t border-(--red-6)/40 pt-3">
-          <ToolArgsRenderer input={input} />
-          {errorText && (
-            <div>
-              <h3 className="text-xs font-semibold text-(--red-11) mb-1">
-                Error
-              </h3>
-              <pre className="bg-(--red-2) border border-(--red-6) rounded p-2 text-xs text-(--red-11) leading-relaxed overflow-auto scrollbar-thin max-h-64 whitespace-pre-wrap">
-                {errorText}
-              </pre>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/chat/tool-call/tool-history-row.tsx

@@ -1,147 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { BanIcon, CircleSlashIcon, Loader2, WrenchIcon } from "lucide-react";
-import React from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { logNever } from "@/utils/assertNever";
-import { cn } from "@/utils/cn";
-import { formatToolName, type ToolApproval, type ToolState } from "./shared";
-import { ToolArgsRenderer } from "./tool-args";
-import { ResultRenderer } from "./tool-result";
-
-// States considered "inert" — they represent past or background work that the
-// user does not need to act on.
-export type HistoryState = Exclude<
-  ToolState,
-  "approval-requested" | "output-error"
->;
-
-const STATUS_LABEL: Record<HistoryState, string> = {
-  "input-streaming": "Generating",
-  "input-available": "Running",
-  "approval-responded": "Awaiting result",
-  "output-available": "Done",
-  "output-denied": "Denied",
-};
-
-const PENDING_STATES = new Set<HistoryState>([
-  "input-streaming",
-  "input-available",
-  "approval-responded",
-]);
-
-const StatusIcon: React.FC<{ state: HistoryState; interrupted: boolean }> = ({
-  state,
-  interrupted,
-}) => {
-  if (interrupted) {
-    return <CircleSlashIcon className="h-3 w-3 text-muted-foreground" />;
-  }
-  switch (state) {
-    case "input-streaming":
-    case "input-available":
-    case "approval-responded":
-      return <Loader2 className="h-3 w-3 animate-spin" />;
-    case "output-available":
-      return null;
-    case "output-denied":
-      return <BanIcon className="h-3 w-3 text-muted-foreground" />;
-    default:
-      logNever(state);
-      return <WrenchIcon className="h-3 w-3" />;
-  }
-};
-
-interface ToolHistoryRowProps {
-  toolName: string;
-  state: HistoryState;
-  input: unknown;
-  result?: unknown;
-  approval?: ToolApproval;
-  index?: number;
-  className?: string;
-  isActive?: boolean;
-}
-
-export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
-  toolName,
-  state,
-  input,
-  result,
-  approval,
-  index = 0,
-  className,
-  isActive = true,
-}) => {
-  const interrupted = !isActive && PENDING_STATES.has(state);
-  return (
-    <Accordion
-      key={`tool-${index}`}
-      type="single"
-      collapsible={true}
-      className={cn("w-full", className)}
-    >
-      <AccordionItem value="tool-call" className="border-0">
-        <AccordionTrigger className="h-auto pl-0 pr-2 py-1 gap-2 rounded text-xs font-normal text-muted-foreground hover:bg-(--slate-2) hover:text-foreground hover:no-underline">
-          <span className="flex items-center gap-1">
-            <StatusIcon state={state} interrupted={interrupted} />
-            {interrupted ? "Interrupted" : STATUS_LABEL[state]}:
-            <code className="font-mono text-xs">
-              {formatToolName(toolName)}
-            </code>
-          </span>
-        </AccordionTrigger>
-        <AccordionContent className="py-2 px-2">
-          <HistoryContent
-            state={state}
-            input={input}
-            result={result}
-            approval={approval}
-          />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-const HistoryContent: React.FC<{
-  state: HistoryState;
-  input: unknown;
-  result?: unknown;
-  approval?: ToolApproval;
-}> = ({ state, input, result, approval }) => {
-  switch (state) {
-    case "input-streaming":
-    case "input-available":
-    case "approval-responded":
-      return <ToolArgsRenderer input={input} />;
-
-    case "output-available":
-      return (
-        <div className="space-y-3">
-          <ToolArgsRenderer input={input} />
-          {result != null && <ResultRenderer result={result} />}
-        </div>
-      );
-
-    case "output-denied":
-      return (
-        <div className="space-y-3">
-          <ToolArgsRenderer input={input} />
-          <div className="bg-muted/40 border border-border rounded-md p-3 text-xs text-muted-foreground leading-relaxed">
-            Tool execution was denied
-            {approval?.reason ? `: ${approval.reason}` : "."}
-          </div>
-        </div>
-      );
-
-    default:
-      logNever(state);
-      return null;
-  }
-};

package/src/components/icons/loading-ellipsis.tsx

@@ -1,46 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import clsx from "clsx";
-import { Circle } from "lucide-react";
-import React from "react";
-
-interface LoadingEllipsisProps {
-  /** Extra Tailwind classes */
-  className?: string;
-  /** Diameter of each dot in pixels */
-  size?: number;
-  /** Tailwind gap utility between dots (e.g. "gap-1" or "gap-2") */
-  gap?: string;
-  /** Pulse cycle length in milliseconds */
-  durationMs?: number;
-}
-
-const LoadingEllipsis: React.FC<LoadingEllipsisProps> = ({
-  className,
-  size = 8,
-  gap = "gap-1",
-  durationMs = 1200,
-}) => {
-  const baseStyle: React.CSSProperties = {
-    animationDuration: `${durationMs}ms`,
-  };
-
-  return (
-    <div className={clsx("flex", gap, className)} aria-label="Loading">
-      {[0, 1, 2].map((i) => (
-        <Circle
-          key={i}
-          width={size}
-          height={size}
-          className="fill-current text-current animate-ellipsis-dot"
-          style={{
-            ...baseStyle,
-            animationDelay: `${(durationMs / 3) * i}ms`,
-          }}
-        />
-      ))}
-    </div>
-  );
-};
-
-export { LoadingEllipsis };