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

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/core/registerReactComponent.tsx

@@ -24,9 +24,9 @@ import ReactDOM, { type Root } from "react-dom/client";
 import useEvent from "react-use-event-hook";
 import { type ZodSchema, z } from "zod";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { notebookAtom } from "@/core/cells/cells.ts";
 import { HTMLCellId } from "@/core/cells/ids.ts";
 import { isUninstantiated } from "@/core/cells/utils";
+import { cellExecutionInputsAtom, cellExecutionView } from "@/core/executions";
 import { createInputEvent, MarimoValueUpdateEvent } from "@/core/dom/events";
 import { getUIElementObjectId } from "@/core/dom/ui-element";
 import { UIElementRegistry } from "@/core/dom/uiregistry";
@@ -205,18 +205,9 @@ function PluginSlotInternal<T>(
         if (cellId && !isStatic) {
           // If the cell is not initialized, throw an error
           // Continue if the cell is static, so we can propagate a clearer error message.
-          const notebookState = store.get(notebookAtom);
-          const cellRuntime = notebookState.cellRuntime[cellId];
-          const cellData = notebookState.cellData[cellId];
-
-          const cellNotInitialized = isUninstantiated({
-            executionTime:
-              cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
-            status: cellRuntime.status,
-            errored: cellRuntime.errored,
-            interrupted: cellRuntime.interrupted,
-            stopped: cellRuntime.stopped,
-          });
+          const cellNotInitialized = isUninstantiated(
+            cellExecutionView(store.get(cellExecutionInputsAtom), cellId),
+          );
 
           if (cellNotInitialized) {
             throw new CellNotInitializedError();

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/stories/cell-status.stories.tsx

@@ -5,6 +5,7 @@ import {
   type CellStatusComponentProps,
 } from "@/components/editor/cell/CellStatus";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import type { Milliseconds } from "@/utils/time";
 
 const meta: Meta<typeof CellStatusComponent> = {
   title: "CellStatusComponent",
@@ -39,7 +40,7 @@ Edited.args = {
   edited: true,
   interrupted: false,
   disabled: false,
-  elapsedTime: 100,
+  elapsedTime: 100 as Milliseconds,
 };
 
 export const Interrupted = Template.bind({});
@@ -49,7 +50,7 @@ Interrupted.args = {
   edited: false,
   interrupted: true,
   disabled: false,
-  elapsedTime: 50,
+  elapsedTime: 50 as Milliseconds,
 };
 
 export const Running = Template.bind({});
@@ -59,7 +60,7 @@ Running.args = {
   edited: false,
   interrupted: true,
   disabled: false,
-  elapsedTime: 50,
+  elapsedTime: 50 as Milliseconds,
 };
 
 export const Queued = Template.bind({});
@@ -69,7 +70,7 @@ Queued.args = {
   edited: false,
   interrupted: true,
   disabled: false,
-  elapsedTime: 50,
+  elapsedTime: 50 as Milliseconds,
 };
 
 export const Disabled = Template.bind({});
@@ -85,7 +86,8 @@ Disabled.args = {
 export const DisabledTransitively = Template.bind({});
 DisabledTransitively.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   edited: false,
   interrupted: false,
   disabled: false,
@@ -95,7 +97,8 @@ DisabledTransitively.args = {
 export const DisabledTransitivelyAndEdited = Template.bind({});
 DisabledTransitivelyAndEdited.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   edited: true,
   interrupted: false,
   disabled: false,
@@ -105,7 +108,8 @@ DisabledTransitivelyAndEdited.args = {
 export const Stale = Template.bind({});
 Stale.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   staleInputs: true,
   edited: false,
   interrupted: false,
@@ -116,7 +120,8 @@ Stale.args = {
 export const StaleAndDisabled = Template.bind({});
 StaleAndDisabled.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   staleInputs: true,
   edited: false,
   interrupted: false,
@@ -127,7 +132,8 @@ StaleAndDisabled.args = {
 export const EditedStaleAndDisabled = Template.bind({});
 EditedStaleAndDisabled.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   staleInputs: true,
   interrupted: false,
   disabled: true,
@@ -137,7 +143,8 @@ EditedStaleAndDisabled.args = {
 export const EditedAndStale = Template.bind({});
 EditedAndStale.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   edited: true,
   interrupted: false,
   disabled: false,

package/src/stories/cell.stories.tsx

@@ -15,19 +15,14 @@ import { requestClientAtom } from "@/core/network/requests";
 import { resolveRequestClient } from "@/core/network/resolve";
 import type { CellConfig } from "@/core/network/types";
 import { ConnectionState } from "@/core/session/types";
-import type { Milliseconds, Seconds } from "@/utils/time";
 import { Cell as EditorCell } from "../components/editor/notebook-cell";
 import { TooltipProvider } from "../components/ui/tooltip";
 
 type Story = StoryObj<typeof Cell>;
 
 interface CellOverrides {
-  runElapsedTimeMs?: Milliseconds;
   output?: CellRuntimeState["output"];
   edited?: boolean;
-  interrupted?: boolean;
-  errored?: boolean;
-  status?: CellRuntimeState["status"];
   staleInputs?: boolean;
   config?: CellConfig;
 }
@@ -51,22 +46,14 @@ const Cell: React.FC<{
           column: null,
         },
         lastCodeRun: null,
-        lastExecutionTime: null,
       },
     },
     cellIds: [cid],
     cellRuntime: {
       [cid]: createCellRuntimeState({
         output: overrides.output ?? null,
-        runElapsedTimeMs: overrides.runElapsedTimeMs ?? (10 as Milliseconds),
-        status: overrides.status ?? "idle",
         consoleOutputs: [],
-        interrupted: overrides.interrupted ?? false,
-        errored: overrides.errored ?? false,
-        stopped: false,
         staleInputs: overrides.staleInputs ?? false,
-        runStartTimestamp: 0 as Seconds,
-        lastRunStartTimestamp: 0 as Seconds,
         debuggerActive: false,
         outline: null,
       }),
@@ -121,7 +108,6 @@ export const WithOutput: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
           output: {
             channel: "output",
             data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>",
@@ -139,7 +125,6 @@ export const WithLargeOutput: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
           output: {
             channel: "output",
             data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>".repeat(
@@ -160,7 +145,6 @@ export const UnsavedEditsOutput: Story = {
       <TooltipProvider>
         <Cell
           overrides={{
-            runElapsedTimeMs: 20 as Milliseconds,
             edited: true,
             output: {
               channel: "output",
@@ -181,8 +165,6 @@ export const InterruptedOutput: Story = {
       <TooltipProvider>
         <Cell
           overrides={{
-            runElapsedTimeMs: 20 as Milliseconds,
-            interrupted: true,
             output: {
               channel: "output",
               data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>",
@@ -201,8 +183,6 @@ export const WithError: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
-          errored: true,
           output: {
             channel: "output",
             data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>",
@@ -220,7 +200,6 @@ export const Disabled: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
           config: {
             disabled: true,
             hide_code: false,
@@ -243,8 +222,6 @@ export const DisabledTransitively: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
-          status: "disabled-transitively",
           output: {
             channel: "output",
             data: "This data is stale because a parent is disabled",
@@ -262,8 +239,6 @@ export const StaleStatus: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
-          status: "disabled-transitively",
           staleInputs: true,
           output: {
             channel: "output",
@@ -282,8 +257,6 @@ export const StaleAndEditedStatus: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
-          status: "disabled-transitively",
           staleInputs: true,
           edited: true,
           output: {
@@ -303,13 +276,11 @@ export const DisabledAndStaleStatus: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
           config: {
             column: null,
             disabled: true,
             hide_code: false,
           },
-          status: "disabled-transitively",
           staleInputs: true,
           output: {
             channel: "output",
@@ -328,8 +299,6 @@ export const Running: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
-          status: "running",
           output: {
             channel: "output",
             data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>",

package/src/stories/layout/vertical/one-column.stories.tsx

@@ -14,7 +14,6 @@ import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { resolveRequestClient } from "@/core/network/resolve";
 import { ConnectionState } from "@/core/session/types";
-import type { Milliseconds, Seconds } from "@/utils/time";
 import { CellArray } from "../../../components/editor/renderers/cell-array";
 import { CellsRenderer } from "../../../components/editor/renderers/cells-renderer";
 import { TooltipProvider } from "../../../components/ui/tooltip";
@@ -50,7 +49,6 @@ LongReprA()`,
 
 print('hello')
 LongReprA()`,
-      lastExecutionTime: null,
     },
   },
   cellIds: [cellId],
@@ -62,8 +60,6 @@ LongReprA()`,
         mimetype: "text/plain",
         timestamp: 1_686_863_710,
       },
-      runElapsedTimeMs: 8 as Milliseconds,
-      status: "idle",
       consoleOutputs: [
         {
           channel: "stdout",
@@ -72,12 +68,7 @@ LongReprA()`,
           timestamp: 1_686_863_705,
         },
       ],
-      interrupted: false,
-      errored: false,
-      stopped: false,
       staleInputs: false,
-      runStartTimestamp: 0 as Seconds,
-      lastRunStartTimestamp: 0 as Seconds,
       debuggerActive: false,
       outline: null,
     }),

package/src/utils/time.ts

@@ -31,6 +31,11 @@ export class Time {
     return new Time(Date.now() as Milliseconds);
   }
 
+  /** The instant an ISO 8601 timestamp names. */
+  public static parse(iso: string): Time {
+    return new Time(Date.parse(iso) as Milliseconds);
+  }
+
   private constructor(ms: Milliseconds) {
     this.ms = ms;
   }
@@ -39,6 +44,11 @@ export class Time {
     return this.ms;
   }
 
+  /** How long after `start` this instant is. */
+  public since(start: Time): Milliseconds {
+    return (this.ms - start.ms) as Milliseconds;
+  }
+
   public toSeconds(): Seconds {
     return (this.ms / 1000) as Seconds;
   }

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>
-  );
-};