@marimo-team/islands 0.25.3-dev29 → 0.25.3-dev290

package/src/components/chat/chat-typography.css

@@ -0,0 +1,108 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+.mo-ai-panel {
+  .chat-control {
+    color: var(--muted-foreground);
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    opacity: 1;
+
+    &.chat-selector {
+      color: var(--foreground);
+      background: var(--slate-2);
+      border-color: var(--border);
+    }
+
+    &:not(:disabled):is(:hover, [data-state="open"], [data-active="true"]) {
+      color: var(--foreground);
+      background: var(--slate-3);
+    }
+
+    &[data-active="true"] {
+      border-color: var(--border);
+    }
+
+    &:focus-visible {
+      outline: 1px solid var(--muted-foreground);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  .lucide-chevron-down {
+    width: 0.75rem;
+    height: 0.75rem;
+    stroke-width: 1.5;
+    opacity: 0.5;
+  }
+
+  .mo-markdown-renderer {
+    font-family: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5;
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      font-family: inherit;
+      font-size: 0.875rem;
+      font-weight: 600;
+      line-height: 1.5;
+      margin-block: 1rem 0.5rem;
+    }
+
+    :is(h1, h2) {
+      font-size: 1rem;
+    }
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    :is(pre, code, .cm-editor) {
+      font-family: var(--monospace-font);
+    }
+
+    .cm-editor {
+      font-size: 0.8125rem;
+      line-height: 1.5;
+    }
+  }
+
+  .mo-ai-prompt {
+    font-family: var(--text-font), sans-serif;
+    .cm-clickable-placeholder:hover {
+      color: var(--foreground);
+    }
+
+    .cm-placeholder {
+      font-family: var(--text-font), sans-serif;
+    }
+
+    .cm-editor,
+    .cm-scroller {
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+  }
+}
+
+@container (max-width: 380px) {
+  .chat-input-footer {
+    flex-wrap: wrap;
+  }
+
+  .chat-input-selectors {
+    flex-basis: 100%;
+  }
+}
+
+@container (max-width: 360px) {
+  .sidebar-panel-actions:not(:empty) {
+    order: 1;
+    flex-basis: 100%;
+  }
+}

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 : ""))
@@ -146,7 +122,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 +135,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 +145,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),
     });
   }
 }
@@ -193,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
@@ -294,16 +287,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/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}
+    />
+  );
 };