@marimo-team/islands 0.25.3-dev26 → 0.25.3-dev262

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

@@ -146,7 +146,9 @@ export async function handleToolCall({
       addToolOutput({
         tool: toolCall.toolName,
         toolCallId: toolCall.toolCallId,
-        output: response.result || response.error,
+        ...(response.error
+          ? { state: "output-error", errorText: response.error }
+          : { output: response.result }),
       });
     } else {
       // Invoke the backend/mcp tool
@@ -157,7 +159,9 @@ export async function handleToolCall({
       addToolOutput({
         tool: toolCall.toolName,
         toolCallId: toolCall.toolCallId,
-        output: response.result || response.error,
+        ...(response.error
+          ? { state: "output-error", errorText: response.error }
+          : { output: response.result }),
       });
     }
   } catch (error) {
@@ -165,7 +169,8 @@ export async function handleToolCall({
     addToolOutput({
       tool: toolCall.toolName,
       toolCallId: toolCall.toolCallId,
-      output: `Error: ${error instanceof Error ? error.message : String(error)}`,
+      state: "output-error",
+      errorText: error instanceof Error ? error.message : String(error),
     });
   }
 }
@@ -294,16 +299,12 @@ export function useMessageQueue() {
   // invoked from a callback (e.g. `onFinish`) in the same tick as `enqueue`.
   const messagesRef = useRef<QueuedUserMessage[]>([]);
   const hasQueuedRef = useRef(false);
-  messagesRef.current = messages;
-  hasQueuedRef.current = messages.length > 0;
 
   const enqueue = useEvent((parts: ChatMessagePart[]) => {
-    setMessages((prev) => {
-      const next = [...prev, { id: generateUUID(), parts }];
-      messagesRef.current = next;
-      hasQueuedRef.current = true;
-      return next;
-    });
+    const next = [...messagesRef.current, { id: generateUUID(), parts }];
+    messagesRef.current = next;
+    hasQueuedRef.current = true;
+    setMessages(next);
   });
 
   const flushNext = useEvent((send: (parts: ChatMessagePart[]) => void) => {

package/src/components/chat/notebook-access-selector.stories.tsx

@@ -0,0 +1,22 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { NotebookAccessSelector } from "./notebook-access-selector";
+
+const meta = {
+  title: "Chat/Notebook access",
+  component: NotebookAccessSelector,
+  args: { value: "ask", onValueChange: () => undefined },
+  render: function Render(args) {
+    const [value, setValue] = useState(args.value);
+    return <NotebookAccessSelector value={value} onValueChange={setValue} />;
+  },
+} satisfies Meta<typeof NotebookAccessSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ReadOnly: Story = { args: { value: "ask" } };
+export const SuggestEdits: Story = { args: { value: "agent" } };
+export const FullAccess: Story = { args: { value: "code_mode" } };

package/src/components/chat/notebook-access-selector.tsx

@@ -0,0 +1,100 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  EyeIcon,
+  type LucideIcon,
+  PencilIcon,
+  TerminalIcon,
+} from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+} from "@/components/ui/select";
+import type { CopilotMode } from "@/core/config/config-schema";
+
+const ACCESS_LEVELS = {
+  ask: {
+    label: "Read only",
+    description: "Read notebook code, outputs, and variable previews.",
+    Icon: EyeIcon,
+  },
+  agent: {
+    label: "Suggest edits",
+    description: "Read the notebook and propose cell changes for review.",
+    Icon: PencilIcon,
+  },
+  code_mode: {
+    label: "Full access",
+    description: "Read, edit, and run cells, with Python scratchpad access.",
+    Icon: TerminalIcon,
+  },
+} satisfies Record<
+  Exclude<CopilotMode, "manual">,
+  { label: string; description: string; Icon: LucideIcon }
+>;
+
+const ACCESS_MODES = ["ask", "agent", "code_mode"] as const;
+
+interface NotebookAccessSelectorProps {
+  value: CopilotMode;
+  onValueChange: (value: CopilotMode) => void;
+}
+
+export const NotebookAccessSelector = ({
+  value,
+  onValueChange,
+}: NotebookAccessSelectorProps) => {
+  const mode = value === "manual" ? "ask" : value;
+  const selected = ACCESS_LEVELS[mode];
+
+  return (
+    <Select
+      value={mode}
+      onValueChange={(value) => {
+        const mode = ACCESS_MODES.find((mode) => mode === value);
+        if (mode) {
+          onValueChange(mode);
+        }
+      }}
+    >
+      <SelectTrigger
+        aria-label={`Notebook access: ${selected.label}`}
+        title={`Notebook access: ${selected.description}`}
+        className="chat-control chat-selector h-6 text-xs border-border py-0 px-2 gap-1.5 shrink-0"
+      >
+        <selected.Icon className="h-3 w-3" />
+        <span className="text-nowrap">{selected.label}</span>
+      </SelectTrigger>
+      <SelectContent className="max-w-[calc(100vw-2rem)]">
+        <SelectGroup>
+          <SelectLabel className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">
+            Notebook access
+          </SelectLabel>
+          {ACCESS_MODES.map((mode) => {
+            const { label, description, Icon } = ACCESS_LEVELS[mode];
+            return (
+              <SelectItem
+                key={mode}
+                value={mode}
+                textValue={label}
+                className="text-xs py-1"
+              >
+                <div className="flex items-start gap-2.5">
+                  <Icon className="h-3 w-3 mt-1 shrink-0 text-muted-foreground" />
+                  <div className="flex flex-col gap-0.5">
+                    <span className="font-semibold">{label}</span>
+                    <span className="text-muted-foreground">{description}</span>
+                  </div>
+                </div>
+              </SelectItem>
+            );
+          })}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+};

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

@@ -2,7 +2,7 @@
 
 import { BotMessageSquareIcon } from "lucide-react";
 import React from "react";
-import { MarkdownRenderer } from "@/components/markdown/markdown-renderer";
+import { ChatMarkdown } from "./chat-markdown";
 import {
   Accordion,
   AccordionContent,
@@ -49,9 +49,9 @@ export const ReasoningAccordion: React.FC<ReasoningAccordionProps> = ({
           </span>
         </AccordionTrigger>
         <AccordionContent className="pb-2 px-2">
-          <div className="bg-muted/30 border border-muted/50 rounded-md p-3 italic text-muted-foreground/90 relative">
+          <div className="bg-muted/30 border border-muted/50 rounded-md p-3 text-muted-foreground relative">
             <div className="pr-6">
-              <MarkdownRenderer content={reasoning} />
+              <ChatMarkdown content={reasoning} />
             </div>
           </div>
         </AccordionContent>

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

@@ -0,0 +1,49 @@
+/* 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-history-row.tsx

@@ -1,12 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import {
-  BanIcon,
-  CheckCircleIcon,
-  CircleSlashIcon,
-  Loader2,
-  WrenchIcon,
-} from "lucide-react";
+import { BanIcon, CircleSlashIcon, Loader2, WrenchIcon } from "lucide-react";
 import React from "react";
 import {
   Accordion,
@@ -54,7 +48,7 @@ const StatusIcon: React.FC<{ state: HistoryState; interrupted: boolean }> = ({
     case "approval-responded":
       return <Loader2 className="h-3 w-3 animate-spin" />;
     case "output-available":
-      return <CheckCircleIcon className="h-3 w-3 text-(--grass-11)" />;
+      return null;
     case "output-denied":
       return <BanIcon className="h-3 w-3 text-muted-foreground" />;
     default:
@@ -63,22 +57,6 @@ const StatusIcon: React.FC<{ state: HistoryState; interrupted: boolean }> = ({
   }
 };
 
-function getTriggerToneClass(state: HistoryState): string {
-  switch (state) {
-    case "output-available":
-      return "text-(--grass-11)/80";
-    case "output-denied":
-      return "text-muted-foreground";
-    case "input-streaming":
-    case "input-available":
-    case "approval-responded":
-      return "";
-    default:
-      logNever(state);
-      return "";
-  }
-}
-
 interface ToolHistoryRowProps {
   toolName: string;
   state: HistoryState;
@@ -109,12 +87,7 @@ export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
       className={cn("w-full", className)}
     >
       <AccordionItem value="tool-call" className="border-0">
-        <AccordionTrigger
-          className={cn(
-            "h-6 text-xs border-border shadow-none! ring-0! bg-muted/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline",
-            interrupted ? "text-muted-foreground" : getTriggerToneClass(state),
-          )}
-        >
+        <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]}:

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/use-chat-generation.ts

@@ -0,0 +1,19 @@
+/* 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 useChatGeneration(status: ChatStatus) {
+  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;
+}

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"