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

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

package/src/components/chat/turn-timing.ts

@@ -0,0 +1,73 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { UIMessage } from "ai";
+
+export interface TurnTiming {
+  startedAt: number;
+  finishedAt?: number;
+  stopped?: boolean;
+}
+
+export function getTurnTiming(message: UIMessage): TurnTiming | undefined {
+  const metadata = message.metadata;
+  if (typeof metadata !== "object" || metadata === null) {
+    return undefined;
+  }
+  const { startedAt, finishedAt, stopped } = metadata as Record<
+    string,
+    unknown
+  >;
+  if (typeof startedAt !== "number") {
+    return undefined;
+  }
+  return {
+    startedAt,
+    finishedAt: typeof finishedAt === "number" ? finishedAt : undefined,
+    stopped: stopped === true,
+  };
+}
+
+export function withTurnTiming(
+  messages: UIMessage[],
+  turn: { startedAt: number | null; stopped: boolean },
+  now = Date.now(),
+): UIMessage[] {
+  const last = messages.at(-1);
+  if (last?.role !== "assistant") {
+    return messages;
+  }
+  const startedAt = turn.startedAt ?? getTurnTiming(last)?.startedAt;
+  if (startedAt == null) {
+    return messages;
+  }
+  const metadata =
+    typeof last.metadata === "object" && last.metadata !== null
+      ? last.metadata
+      : {};
+  return [
+    ...messages.slice(0, -1),
+    {
+      ...last,
+      metadata: {
+        ...metadata,
+        startedAt,
+        finishedAt: now,
+        stopped: turn.stopped,
+      },
+    },
+  ];
+}
+
+export function formatDuration(ms: number): string {
+  const totalSeconds = Math.max(1, Math.round(ms / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) {
+    return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+  }
+  if (minutes > 0) {
+    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+  }
+  return `${seconds}s`;
+}

package/src/components/chat/use-assistant-turn.ts

@@ -0,0 +1,65 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { UIMessage } from "ai";
+import { useState } from "react";
+import useEvent from "react-use-event-hook";
+import { willAutoContinue } from "./chat-utils";
+import { getTurnTiming, withTurnTiming } from "./turn-timing";
+
+export function useAssistantTurn() {
+  const [turn, setTurn] = useState<{
+    startedAt: number;
+    ended: boolean;
+  } | null>(null);
+
+  const start = useEvent(() =>
+    setTurn({ startedAt: Date.now(), ended: false }),
+  );
+  const reset = useEvent(() => setTurn(null));
+  const stop = useEvent(() =>
+    setTurn((prev) => prev && { ...prev, ended: true }),
+  );
+
+  // Shift the start forward so time spent waiting on the user isn't counted.
+  const resume = useEvent((reply: UIMessage | undefined) => {
+    const timing = reply && getTurnTiming(reply);
+    const workedMs =
+      timing?.finishedAt == null ? 0 : timing.finishedAt - timing.startedAt;
+    setTurn({ startedAt: Date.now() - workedMs, ended: false });
+  });
+
+  const finish = useEvent(
+    (finished: UIMessage[], opts: { isAbort: boolean; isError: boolean }) => {
+      if (opts.isAbort || opts.isError) {
+        stop();
+      }
+      return withTurnTiming(finished, {
+        startedAt: turn?.startedAt ?? null,
+        stopped: opts.isAbort,
+      });
+    },
+  );
+
+  // Between requests of one turn the SDK briefly reports "ready".
+  const isActive = (state: {
+    isLoading: boolean;
+    hasError: boolean;
+    messages: UIMessage[];
+  }) =>
+    state.isLoading ||
+    (turn != null &&
+      !turn.ended &&
+      !state.hasError &&
+      willAutoContinue(state.messages));
+
+  return {
+    startedAt: turn?.startedAt ?? null,
+    hasEnded: turn?.ended === true,
+    start,
+    resume,
+    stop,
+    reset,
+    finish,
+    isActive,
+  };
+}

package/src/components/chat/use-chat-generation.ts

@@ -5,15 +5,16 @@ import { useSetAtom } from "jotai";
 import { useEffect } from "react";
 import { chatGenerationInProgressAtom } from "@/core/ai/state";
 
-export function useChatGeneration(status: ChatStatus) {
+export function isChatBusy(status: ChatStatus): boolean {
+  return status === "submitted" || status === "streaming";
+}
+
+export function useChatGeneration(isGenerating: boolean) {
   const setGenerating = useSetAtom(chatGenerationInProgressAtom);
-  const isGenerating = status === "submitted" || status === "streaming";
 
   useEffect(() => {
     setGenerating(isGenerating);
     // useChat stops its request when the panel unmounts or becomes hidden.
     return () => setGenerating(false);
   }, [isGenerating, setGenerating]);
-
-  return isGenerating;
 }