@marimo-team/islands 0.25.3-dev27 → 0.25.3-dev271

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-result.tsx

@@ -47,7 +47,7 @@ const PrettySuccessResult: React.FC<{ data: SuccessResult }> = ({ data }) => {
           Tool Result
         </h3>
         <div className="flex items-center gap-2">
-          <span className="text-xs px-2 py-0.5 bg-(--grass-2) text-(--grass-11) rounded-full font-medium capitalize">
+          <span className="text-xs text-muted-foreground capitalize">
             {status}
           </span>
           {auth_required && (

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

@@ -0,0 +1,20 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ChatStatus } from "ai";
+import { useSetAtom } from "jotai";
+import { useEffect } from "react";
+import { chatGenerationInProgressAtom } from "@/core/ai/state";
+
+export function isChatBusy(status: ChatStatus): boolean {
+  return status === "submitted" || status === "streaming";
+}
+
+export function useChatGeneration(isGenerating: boolean) {
+  const setGenerating = useSetAtom(chatGenerationInProgressAtom);
+
+  useEffect(() => {
+    setGenerating(isGenerating);
+    // useChat stops its request when the panel unmounts or becomes hidden.
+    return () => setGenerating(false);
+  }, [isGenerating, setGenerating]);
+}

package/src/components/chat/user-message.tsx

@@ -0,0 +1,145 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import type { FileUIPart, TextUIPart, UIMessage } from "ai";
+import { PencilIcon } from "lucide-react";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/ui/tooltip";
+import { focusInputAndMoveToEnd } from "@/core/codemirror/utils";
+import { PromptInput } from "../editor/ai/prompt-input";
+import { CopyClipboardIcon } from "../icons/copy-icon";
+import { AttachmentRenderer } from "./chat-components";
+
+interface UserMessageProps {
+  message: UIMessage;
+  canEdit: boolean;
+  onEdit: (newValue: string) => void;
+}
+
+export const UserMessage: React.FC<UserMessageProps> = ({
+  message,
+  canEdit,
+  onEdit,
+}) => {
+  const content = message.parts
+    .filter((p): p is TextUIPart => p.type === "text")
+    .map((p) => p.text)
+    .join("\n");
+  const attachments = message.parts
+    .filter((p): p is FileUIPart => p.type === "file")
+    .map((part, idx) => (
+      // Sent parts never reorder, and a file attached twice repeats its URL.
+      // react-doctor-disable-next-line react-doctor/no-array-index-as-key
+      <AttachmentRenderer attachment={part} key={idx} />
+    ));
+
+  const [draft, setDraft] = React.useState<string | null>(null);
+  const inputRef = React.useRef<ReactCodeMirrorRef>(null);
+  const editButtonRef = React.useRef<HTMLButtonElement>(null);
+  const editing = draft != null;
+
+  const startEditing = () => {
+    setDraft(content);
+    focusInputAndMoveToEnd(inputRef);
+  };
+
+  const cancel = () => {
+    setDraft(null);
+    requestAnimationFrame(() => editButtonRef.current?.focus());
+  };
+
+  const submit = (value: string) => {
+    if (!canEdit || !value.trim()) {
+      return;
+    }
+    onEdit(value);
+    setDraft(null);
+  };
+
+  if (editing) {
+    return (
+      <div className="w-full rounded-[10px] border border-border bg-background">
+        {attachments}
+        <div className="px-2 py-1.5">
+          <PromptInput
+            inputRef={inputRef}
+            className="max-h-[400px]"
+            value={draft}
+            onChange={setDraft}
+            onSubmit={(_e, value) => submit(value)}
+            onClose={cancel}
+            placeholder="Type your message. Use @ to reference variables and cells."
+          />
+        </div>
+        <div className="flex items-center gap-2 border-t border-border/20 px-3 py-1.5">
+          <span className="mr-auto text-xs text-muted-foreground">
+            Responses after this message will be replaced.
+          </span>
+          <Button variant="text" size="xs" onClick={cancel}>
+            Cancel
+          </Button>
+          <Button
+            size="xs"
+            disabled={!canEdit || !draft.trim()}
+            onClick={() => submit(draft)}
+          >
+            Send
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex max-w-[90%] flex-col items-end gap-1">
+      {attachments}
+      <div className="rounded-[10px] bg-(--slate-3) px-3 py-1.5 whitespace-pre-wrap wrap-break-word">
+        <MentionText text={content} />
+      </div>
+      <div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+        <Tooltip content="Edit">
+          <Button
+            ref={editButtonRef}
+            variant="text"
+            size="icon"
+            aria-label="Edit message"
+            className="chat-control"
+            disabled={!canEdit}
+            onClick={startEditing}
+          >
+            <PencilIcon className="size-3" />
+          </Button>
+        </Tooltip>
+        <CopyClipboardIcon
+          value={content}
+          className="size-3"
+          buttonClassName="chat-control flex size-6 items-center justify-center rounded-md"
+        />
+      </div>
+    </div>
+  );
+};
+
+const MENTION = /([@#])[\w-]+:\/\/([\w./-]+)/g;
+
+const MentionText: React.FC<{ text: string }> = ({ text }) => {
+  const nodes: React.ReactNode[] = [];
+  let last = 0;
+  for (const match of text.matchAll(MENTION)) {
+    nodes.push(text.slice(last, match.index));
+    nodes.push(
+      <span
+        key={match.index}
+        title={match[0].slice(1)}
+        className="rounded-sm bg-(--slate-5) px-1 font-mono text-[0.85em]"
+      >
+        {match[1]}
+        {match[2]}
+      </span>,
+    );
+    last = match.index + match[0].length;
+  }
+  nodes.push(text.slice(last));
+  return nodes;
+};

package/src/components/data-table/TableBottomBar.tsx

@@ -17,6 +17,7 @@ import type { DataTableSelection } from "./types";
 
 interface TableBottomBarProps<TData> {
   pagination: boolean;
+  hasNextPage?: boolean;
   totalColumns: number;
   selection?: DataTableSelection;
   onRowSelectionChange?: (value: RowSelectionState) => void;
@@ -30,6 +31,7 @@ interface TableBottomBarProps<TData> {
 
 export const TableBottomBar = <TData,>({
   pagination,
+  hasNextPage,
   totalColumns,
   selection,
   onRowSelectionChange,
@@ -147,7 +149,7 @@ export const TableBottomBar = <TData,>({
     const { totalColumns: effectiveTotalColumns, hiddenColumns } =
       getColumnCountForDisplay(table, totalColumns);
     const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
-      numRows: table.getRowCount(),
+      numRows: hasNextPage === undefined ? table.getRowCount() : "too_many",
       totalColumns: effectiveTotalColumns,
       hiddenColumns,
       locale,
@@ -178,6 +180,7 @@ export const TableBottomBar = <TData,>({
           <DataTablePagination
             table={table}
             tableLoading={tableLoading}
+            hasNextPage={hasNextPage}
             showPageSizeSelector={showPageSizeSelector}
           />
         )}

package/src/components/data-table/TableTopBar.tsx

@@ -76,6 +76,7 @@ export const TableTopBar = <TData,>({
           <input
             ref={inputRef}
             type="text"
+            aria-label="Search table"
             className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
             value={internalValue}
             onKeyDown={(e) => {
@@ -90,6 +91,7 @@ export const TableTopBar = <TData,>({
           {reloading && <Spinner size="small" />}
           {internalValue && (
             <Button
+              aria-label="Clear table search"
               variant="text"
               size="xs"
               className="h-5 w-5 p-0 shrink-0"