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

package/src/components/chat/chat-utils.ts

@@ -57,30 +57,6 @@ export async function convertToFileUIPart(
   return fileUIParts;
 }
 
-export function isLastMessageReasoning(messages: UIMessage[]): boolean {
-  if (messages.length === 0) {
-    return false;
-  }
-
-  const lastMessage = messages.at(-1);
-  if (!lastMessage) {
-    return false;
-  }
-
-  if (lastMessage.role !== "assistant" || !lastMessage.parts) {
-    return false;
-  }
-
-  const parts = lastMessage.parts;
-  if (parts.length === 0) {
-    return false;
-  }
-
-  // Check if the last part is reasoning
-  const lastPart = parts[parts.length - 1];
-  return lastPart.type === "reasoning";
-}
-
 function stringifyTextParts(parts: UIMessage["parts"]): string {
   return parts
     .map((part) => (part.type === "text" ? part.text : ""))
@@ -198,6 +174,18 @@ export function hasPendingToolCalls(messages: UIMessage[]): boolean {
   );
 }
 
+export function willAutoContinue(messages: UIMessage[]): boolean {
+  const lastMessage = messages.at(-1);
+  const lastPart =
+    lastMessage?.role === "assistant" ? lastMessage.parts.at(-1) : undefined;
+  return (
+    hasPendingToolCalls(messages) ||
+    (lastPart != null &&
+      isToolUIPart(lastPart) &&
+      lastPart.state === "input-available")
+  );
+}
+
 /**
  * True when the assistant is still waiting on tool execution or user approval.
  * Unlike `hasPendingToolCalls` (ready to auto-resume), these states must block

package/src/components/chat/tool-call/__tests__/tool-labels.test.ts

@@ -0,0 +1,76 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { describeToolCall } from "../tool-labels";
+
+describe("describeToolCall", () => {
+  it("names notebook edits by operation and shows the first line of code", () => {
+    const input = {
+      edit: {
+        type: "add_cell",
+        code: "\n  def fib(n):\n    return n",
+        position: {},
+      },
+    };
+    expect(
+      describeToolCall("tool-edit_notebook_tool", input, "done"),
+    ).toMatchObject({
+      label: "Added cell",
+      detail: "def fib(n):",
+    });
+    expect(
+      describeToolCall("tool-edit_notebook_tool", input, "running").label,
+    ).toBe("Adding cell");
+  });
+
+  it("falls back to a generic edit label while the input is still streaming", () => {
+    expect(
+      describeToolCall("tool-edit_notebook_tool", { edit: {} }, "running"),
+    ).toEqual(expect.objectContaining({ label: "Editing notebook" }));
+    expect(
+      describeToolCall("tool-edit_notebook_tool", { edit: {} }, "running"),
+    ).not.toHaveProperty("detail");
+  });
+
+  it("ignores inherited object keys in tool names and edit types", () => {
+    expect(describeToolCall("tool-constructor", {}, "done")).toMatchObject({
+      label: "Called",
+      detail: "constructor",
+    });
+    expect(
+      describeToolCall(
+        "edit_notebook_tool",
+        { edit: { type: "toString" } },
+        "done",
+      ).label,
+    ).toBe("Edited notebook");
+  });
+
+  it("summarizes code-mode runs by their first meaningful line", () => {
+    const code =
+      "import marimo._code_mode as cm\n# add cells\ncm.add_cell('x = 1')";
+    expect(
+      describeToolCall("tool-execute_code", { code }, "done"),
+    ).toMatchObject({
+      label: "Ran code",
+      detail: "cm.add_cell('x = 1')",
+    });
+    expect(
+      describeToolCall("execute_code", { code: "import numpy as np" }, "done")
+        .detail,
+    ).toBe("import numpy as np");
+  });
+
+  it("uses plain language for known tools", () => {
+    expect(describeToolCall("lint_notebook", {}, "done").label).toBe(
+      "Linted notebook",
+    );
+  });
+
+  it("shows the raw name for unknown tools such as MCP tools", () => {
+    expect(describeToolCall("tool-search_docs", {}, "running")).toMatchObject({
+      label: "Calling",
+      detail: "search_docs",
+    });
+  });
+});

package/src/components/chat/tool-call/__tests__/tool-step.test.tsx

@@ -0,0 +1,57 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ToolStep } from "../tool-step";
+
+const edit = { edit: { type: "add_cell", code: "x = 1", position: {} } };
+
+describe("ToolStep", () => {
+  it("describes the call and reveals its input and output on demand", () => {
+    render(
+      <ToolStep
+        toolName="tool-edit_notebook_tool"
+        state="output-available"
+        input={edit}
+        result={{ status: "success" }}
+      />,
+    );
+    const row = screen.getByRole("button", { name: /Added cell/ });
+    expect(row.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByText("Tool Request")).toBeNull();
+
+    fireEvent.click(row);
+    expect(row.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getByText("Tool Request")).toBeTruthy();
+    expect(screen.getByText("Tool Result")).toBeTruthy();
+  });
+
+  it("shows the error text of a failed call", () => {
+    render(
+      <ToolStep
+        toolName="lint_notebook"
+        state="output-error"
+        input={{}}
+        errorText="Linter crashed"
+      />,
+    );
+    fireEvent.click(
+      screen.getByRole("button", { name: /Linted notebook.*Failed/ }),
+    );
+    expect(screen.getByText("Linter crashed")).toBeTruthy();
+  });
+
+  it("marks calls cut off by the end of the turn as stopped", () => {
+    render(
+      <ToolStep
+        toolName="tool-edit_notebook_tool"
+        state="input-available"
+        input={edit}
+        isActive={false}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: /Adding cell.*Stopped/ }),
+    ).toBeTruthy();
+  });
+});

package/src/components/chat/tool-call/shared.ts

@@ -8,6 +8,12 @@ export type ToolState = ToolUIPart["state"];
 // rather than exporting a named type, so we derive ours from there.
 export type ToolApproval = NonNullable<ToolUIPart["approval"]>;
 
+export const PENDING_TOOL_STATES: ReadonlySet<ToolState> = new Set([
+  "input-streaming",
+  "input-available",
+  "approval-responded",
+]);
+
 export function formatToolName(toolName: string): string {
   return toolName.replace("tool-", "");
 }

package/src/components/chat/tool-call/tool-call-view.tsx

@@ -2,11 +2,9 @@
 
 import type { ChatAddToolApproveResponseFunction } from "ai";
 import React from "react";
-import { logNever } from "@/utils/assertNever";
 import type { ToolApproval, ToolState } from "./shared";
 import { ToolApprovalCard } from "./tool-approval-card";
-import { ToolErrorCard } from "./tool-error-card";
-import { ToolHistoryRow } from "./tool-history-row";
+import { ToolStep } from "./tool-step";
 
 interface ToolCallViewProps {
   toolName: string;
@@ -16,88 +14,36 @@ interface ToolCallViewProps {
   input?: unknown;
   approval?: ToolApproval;
   onApprove?: ChatAddToolApproveResponseFunction;
-  index?: number;
   className?: string;
-  /**
-   * Whether this tool call belongs to the latest message in the conversation.
-   * Used by error cards to decide whether to stay expanded (live) or collapse
-   * (the user has moved on).
-   */
-  isLive?: boolean;
   isActive?: boolean;
 }
 
 export const ToolCallView: React.FC<ToolCallViewProps> = ({
   toolName,
   state,
-  result,
-  errorText,
-  input,
   approval,
   onApprove,
-  index,
-  className,
-  isLive = true,
-  isActive = true,
+  ...props
 }) => {
-  switch (state) {
-    case "approval-requested":
-      // Approval is a live, blocking action — render it as a prominent card
-      // Fall back to history row if the wiring isn't
-      // available (shouldn't happen in practice).
-      if (approval != null && onApprove != null) {
-        return (
-          <ToolApprovalCard
-            toolName={toolName}
-            input={input}
-            approval={approval}
-            onApprove={onApprove}
-            className={className}
-          />
-        );
-      }
-      return (
-        <ToolHistoryRow
-          toolName={toolName}
-          state="input-available"
-          input={input}
-          index={index}
-          className={className}
-          isActive={isActive}
-        />
-      );
-
-    case "output-error":
-      return (
-        <ToolErrorCard
-          toolName={toolName}
-          input={input}
-          errorText={errorText}
-          isLive={isLive}
-          className={className}
-        />
-      );
-
-    case "input-streaming":
-    case "input-available":
-    case "approval-responded":
-    case "output-available":
-    case "output-denied":
-      return (
-        <ToolHistoryRow
-          toolName={toolName}
-          state={state}
-          input={input}
-          result={result}
-          approval={approval}
-          index={index}
-          className={className}
-          isActive={isActive}
-        />
-      );
-
-    default:
-      logNever(state);
-      return null;
+  if (state === "approval-requested") {
+    return approval != null && onApprove != null ? (
+      <ToolApprovalCard
+        toolName={toolName}
+        input={props.input}
+        approval={approval}
+        onApprove={onApprove}
+        className={props.className}
+      />
+    ) : (
+      <ToolStep {...props} toolName={toolName} state="input-available" />
+    );
   }
+  return (
+    <ToolStep
+      {...props}
+      toolName={toolName}
+      state={state}
+      approval={approval}
+    />
+  );
 };

package/src/components/chat/tool-call/tool-labels.ts

@@ -0,0 +1,172 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  BookOpenIcon,
+  BugIcon,
+  DatabaseIcon,
+  FileSearchIcon,
+  ListChecksIcon,
+  type LucideIcon,
+  NetworkIcon,
+  NotebookIcon,
+  PencilIcon,
+  PlusIcon,
+  ScanSearchIcon,
+  SquareTerminalIcon,
+  Trash2Icon,
+  VariableIcon,
+  WrenchIcon,
+} from "lucide-react";
+import { formatToolName } from "./shared";
+
+interface ToolDescription {
+  label: string;
+  detail?: string;
+  icon: LucideIcon;
+}
+
+type Phase = "running" | "done";
+
+const KNOWN_TOOLS: Record<
+  string,
+  { running: string; done: string; icon: LucideIcon }
+> = {
+  get_marimo_rules: {
+    running: "Reading marimo guidelines",
+    done: "Read marimo guidelines",
+    icon: BookOpenIcon,
+  },
+  get_active_notebooks: {
+    running: "Listing notebooks",
+    done: "Listed notebooks",
+    icon: NotebookIcon,
+  },
+  get_lightweight_cell_map: {
+    running: "Reading notebook",
+    done: "Read notebook",
+    icon: FileSearchIcon,
+  },
+  get_cell_runtime_data: {
+    running: "Inspecting cells",
+    done: "Inspected cells",
+    icon: ScanSearchIcon,
+  },
+  get_cell_outputs: {
+    running: "Reading cell outputs",
+    done: "Read cell outputs",
+    icon: ScanSearchIcon,
+  },
+  get_tables_and_variables: {
+    running: "Reading variables",
+    done: "Read variables",
+    icon: VariableIcon,
+  },
+  get_database_tables: {
+    running: "Reading database tables",
+    done: "Read database tables",
+    icon: DatabaseIcon,
+  },
+  get_notebook_errors: {
+    running: "Checking for errors",
+    done: "Checked for errors",
+    icon: BugIcon,
+  },
+  lint_notebook: {
+    running: "Linting notebook",
+    done: "Linted notebook",
+    icon: ListChecksIcon,
+  },
+  get_cell_dependency_graph: {
+    running: "Reading dependency graph",
+    done: "Read dependency graph",
+    icon: NetworkIcon,
+  },
+};
+
+const EDIT_LABELS = {
+  add_cell: { running: "Adding cell", done: "Added cell", icon: PlusIcon },
+  update_cell: {
+    running: "Editing cell",
+    done: "Edited cell",
+    icon: PencilIcon,
+  },
+  delete_cell: {
+    running: "Deleting cell",
+    done: "Deleted cell",
+    icon: Trash2Icon,
+  },
+} as const;
+
+export function describeToolCall(
+  toolName: string,
+  input: unknown,
+  phase: Phase,
+): ToolDescription {
+  const name = formatToolName(toolName);
+
+  if (name === "execute_code") {
+    return {
+      label: phase === "running" ? "Running code" : "Ran code",
+      detail: isRecord(input) ? summarizeCode(input.code) : undefined,
+      icon: SquareTerminalIcon,
+    };
+  }
+
+  if (name === "edit_notebook_tool") {
+    const edit = getEdit(input);
+    if (edit) {
+      const labels = EDIT_LABELS[edit.type];
+      return {
+        label: labels[phase],
+        detail: summarizeCode(edit.code),
+        icon: labels.icon,
+      };
+    }
+    return {
+      label: phase === "running" ? "Editing notebook" : "Edited notebook",
+      icon: PencilIcon,
+    };
+  }
+
+  if (Object.hasOwn(KNOWN_TOOLS, name)) {
+    const known = KNOWN_TOOLS[name];
+    return { label: known[phase], icon: known.icon };
+  }
+
+  return {
+    label: phase === "running" ? "Calling" : "Called",
+    detail: name,
+    icon: WrenchIcon,
+  };
+}
+
+function getEdit(
+  input: unknown,
+): { type: keyof typeof EDIT_LABELS; code?: string } | undefined {
+  if (!isRecord(input) || !isRecord(input.edit)) {
+    return undefined;
+  }
+  const { type, code } = input.edit;
+  if (typeof type !== "string" || !Object.hasOwn(EDIT_LABELS, type)) {
+    return undefined;
+  }
+  return {
+    type: type as keyof typeof EDIT_LABELS,
+    code: typeof code === "string" ? code : undefined,
+  };
+}
+
+function summarizeCode(code: unknown): string | undefined {
+  if (typeof code !== "string") {
+    return undefined;
+  }
+  const lines = code
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+  return lines.find((line) => !/^(import\s|from\s|#)/.test(line)) ?? lines[0];
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}

package/src/components/chat/tool-call/tool-step.tsx

@@ -0,0 +1,145 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  BanIcon,
+  ChevronRightIcon,
+  CircleSlashIcon,
+  Loader2Icon,
+  type LucideIcon,
+  XCircleIcon,
+} from "lucide-react";
+import React from "react";
+import { cn } from "@/utils/cn";
+import {
+  PENDING_TOOL_STATES,
+  type ToolApproval,
+  type ToolState,
+} from "./shared";
+import { ToolArgsRenderer } from "./tool-args";
+import { describeToolCall } from "./tool-labels";
+import { ResultRenderer } from "./tool-result";
+
+type ToolStepState = Exclude<ToolState, "approval-requested">;
+
+interface ToolStepProps {
+  toolName: string;
+  state: ToolStepState;
+  input?: unknown;
+  result?: unknown;
+  errorText?: string;
+  approval?: ToolApproval;
+  isActive?: boolean;
+  className?: string;
+}
+
+export const ToolStep: React.FC<ToolStepProps> = ({
+  toolName,
+  state,
+  input,
+  result,
+  errorText,
+  approval,
+  isActive = true,
+  className,
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const pending = PENDING_TOOL_STATES.has(state);
+  const { label, detail, icon } = describeToolCall(
+    toolName,
+    input,
+    pending ? "running" : "done",
+  );
+  const status = getStatus(state, pending && !isActive, icon);
+  const failed = state === "output-error";
+
+  return (
+    <div className={cn("w-full", className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+        className={cn(
+          "group/step -mx-1.5 flex w-fit max-w-full min-w-0 items-center gap-1.5 rounded-md px-1.5 py-0.5 text-left text-xs leading-4 text-muted-foreground transition-colors hover:bg-foreground/6 hover:text-foreground focus-visible:outline-1 focus-visible:outline-(--slate-8)",
+          open && "text-foreground",
+          failed && "text-(--red-11) hover:bg-(--red-3) hover:text-(--red-11)",
+        )}
+      >
+        <status.icon
+          aria-hidden={true}
+          className={cn(
+            // Offsets lucide's built-in padding.
+            "-ml-px size-3 shrink-0",
+            status.spinning && "animate-spin",
+          )}
+        />
+        <span className="shrink-0">{label}</span>
+        {detail && (
+          <code className="min-w-0 truncate font-mono text-[0.6875rem] opacity-80">
+            {detail}
+          </code>
+        )}
+        {status.suffix && (
+          <span className="shrink-0 opacity-80">· {status.suffix}</span>
+        )}
+        <ChevronRightIcon
+          aria-hidden={true}
+          className={cn(
+            "size-3 shrink-0 opacity-40 transition-transform group-hover/step:opacity-100",
+            open && "rotate-90 opacity-100",
+          )}
+        />
+      </button>
+      {open && (
+        <ToolStepDetails
+          state={state}
+          input={input}
+          result={result}
+          errorText={errorText}
+          approval={approval}
+        />
+      )}
+    </div>
+  );
+};
+
+function getStatus(
+  state: ToolStepState,
+  interrupted: boolean,
+  doneIcon: LucideIcon,
+): { icon: LucideIcon; suffix?: string; spinning?: boolean } {
+  if (interrupted) {
+    return { icon: CircleSlashIcon, suffix: "Stopped" };
+  }
+  switch (state) {
+    case "output-error":
+      return { icon: XCircleIcon, suffix: "Failed" };
+    case "output-denied":
+      return { icon: BanIcon, suffix: "Denied" };
+    case "output-available":
+      return { icon: doneIcon };
+    default:
+      return { icon: Loader2Icon, spinning: true };
+  }
+}
+
+const ToolStepDetails: React.FC<
+  Pick<ToolStepProps, "state" | "input" | "result" | "errorText" | "approval">
+> = ({ state, input, result, errorText, approval }) => (
+  <div className="mt-1 mb-2 ml-5.5 space-y-3">
+    <ToolArgsRenderer input={input} />
+    {state === "output-available" && result != null && (
+      <ResultRenderer result={result} />
+    )}
+    {state === "output-error" && errorText && (
+      <pre className="max-h-64 overflow-auto rounded border border-(--red-6) bg-(--red-2) p-2 text-xs leading-relaxed whitespace-pre-wrap text-(--red-11) scrollbar-thin">
+        {errorText}
+      </pre>
+    )}
+    {state === "output-denied" && (
+      <p className="text-xs text-muted-foreground">
+        Tool execution was denied
+        {approval?.reason ? `: ${approval.reason}` : "."}
+      </p>
+    )}
+  </div>
+);