@marimo-team/islands 0.23.15-dev33 → 0.23.15-dev5

package/src/components/chat/chat-panel.tsx

@@ -86,53 +86,20 @@ import {
 import { renderUIMessage } from "./chat-display";
 import { ChatHistoryPopover } from "./chat-history-popover";
 import {
-  type ChatMessagePart,
   convertToFileUIPart,
   generateChatTitle,
   handleToolCall,
   hasPendingToolCalls,
-  hasUnresolvedToolCalls,
   isLastMessageReasoning,
   PROVIDERS_THAT_SUPPORT_ATTACHMENTS,
-  type QueuedUserMessage,
-  shouldFlushQueue,
   useFileState,
-  useMessageQueue,
 } from "./chat-utils";
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
 import { focusInputAndMoveToEnd } from "@/core/codemirror/utils";
-import ScrollToBottomButton from "./acp/scroll-to-bottom-button";
 
 // Default mode for the AI
 const DEFAULT_MODE = "manual";
 
-const QueuedMessageDisplay = memo(
-  ({ message }: { message: QueuedUserMessage }) => {
-    const textParts = message.parts.filter(
-      (p): p is TextUIPart => p.type === "text",
-    );
-    const content = textParts.map((p) => p.text).join("\n");
-    const fileParts = message.parts.filter(
-      (p): p is FileUIPart => p.type === "file",
-    );
-
-    return (
-      <div className="flex justify-end">
-        <div className="w-[95%] bg-background border border-dashed p-2 rounded-sm opacity-70">
-          {fileParts.map((filePart, idx) => (
-            <AttachmentRenderer attachment={filePart} key={idx} />
-          ))}
-          <div className="flex items-center justify-end gap-2 text-sm text-muted-foreground">
-            <span className="wrap-break-word">{content}</span>
-            <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" />
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-QueuedMessageDisplay.displayName = "QueuedMessageDisplay";
-
 interface ChatHeaderProps {
   onNewChat: () => void;
   activeChatId: ChatId | undefined;
@@ -520,19 +487,12 @@ const ChatPanelBody = () => {
   const [pendingPrompt, setPendingPrompt] = useAtom(pendingAiPromptAtom);
   const [input, setInput] = useState("");
   const [newThreadInput, setNewThreadInput] = useState("");
-  const [isScrolledToBottom, setIsScrolledToBottom] = useState(true);
   const { files, addFiles, clearFiles, removeFile } = useFileState();
-  const {
-    messages: queuedMessages,
-    enqueue: enqueueUserMessage,
-    flushNext: flushNextQueuedMessage,
-    clear: clearQueuedMessages,
-    hasQueuedRef,
-  } = useMessageQueue();
   const newThreadInputRef = useRef<ReactCodeMirrorRef>(null);
   const newMessageInputRef = useRef<ReactCodeMirrorRef>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
   const runtimeManager = useRuntimeManager();
   const { invokeAiTool, sendRun } = useRequestClient();
   const { openModal, closeModal } = useImperativeModal();
@@ -600,7 +560,7 @@ const ChatPanelBody = () => {
         };
       },
     }),
-    onFinish: ({ messages, isError, isAbort }) => {
+    onFinish: ({ messages }) => {
       setChatState((prev) => {
         return replaceMessagesInChat({
           chatState: prev,
@@ -608,7 +568,6 @@ const ChatPanelBody = () => {
           messages: messages,
         });
       });
-      tryFlushQueuedMessages(messages, { isError, isAbort });
     },
     onToolCall: async ({ toolCall }) => {
       await handleToolCall({
@@ -627,103 +586,23 @@ const ChatPanelBody = () => {
     },
   });
 
-  const sendUserMessage = useEvent((parts: ChatMessagePart[]) => {
-    sendMessage({ role: "user", parts });
-  });
-
-  const tryFlushQueuedMessages = useEvent(
-    (
-      chatMessages: typeof messages,
-      opts: { isError: boolean; isAbort: boolean },
-    ) => {
-      if (!hasQueuedRef.current) {
-        return;
-      }
-      if (
-        shouldFlushQueue({
-          isError: opts.isError,
-          isAbort: opts.isAbort,
-          hasPendingToolCalls: hasPendingToolCalls(chatMessages),
-          hasUnresolvedToolCalls: hasUnresolvedToolCalls(chatMessages),
-        })
-      ) {
-        flushNextQueuedMessage(sendUserMessage);
-      }
-    },
-  );
-
   const isLoading = status === "submitted" || status === "streaming";
-  // Read via a ref so the queue-vs-send decision stays correct even when it is
-  // made after an `await` (e.g. resolving @-context), by which point the render
-  // closure's `isLoading` may be stale.
-  const isLoadingRef = useRef(isLoading);
-  isLoadingRef.current = isLoading;
-
-  const submitOrQueue = useEvent((parts: ChatMessagePart[]) => {
-    if (isLoadingRef.current || hasQueuedRef.current) {
-      enqueueUserMessage(parts);
-    } else {
-      sendUserMessage(parts);
-    }
-  });
-
-  const handleScroll = useEvent(() => {
-    const container = scrollContainerRef.current;
-    if (!container) {
-      return;
-    }
-
-    const { scrollTop, scrollHeight, clientHeight } = container;
-    const hasOverflow = scrollHeight > clientHeight;
-    const isAtBottom = hasOverflow
-      ? Math.abs(scrollHeight - clientHeight - scrollTop) < 5
-      : true;
-    setIsScrolledToBottom(isAtBottom);
-  });
-
-  const scrollToBottom = useEvent((smooth = false) => {
-    const container = scrollContainerRef.current;
-    if (!container) {
-      return;
-    }
-
-    container.scrollTo({
-      top: container.scrollHeight,
-      behavior: smooth ? "smooth" : "auto",
-    });
-  });
 
   // Check if we're currently streaming reasoning in the latest message
   const isStreamingReasoning =
     isLoading && messages.length > 0 && isLastMessageReasoning(messages);
 
-  // Pin to the bottom while the user is already there.
-  useEffect(() => {
-    setIsScrolledToBottom(true);
-    clearQueuedMessages();
-  }, [activeChatId, clearQueuedMessages]);
-
+  // Scroll to the latest chat message at the bottom
   useEffect(() => {
-    if (!isScrolledToBottom) {
-      return;
-    }
-    const frame = requestAnimationFrame(() => {
-      scrollToBottom();
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [messages, queuedMessages, isLoading, isScrolledToBottom, scrollToBottom]);
+    const scrollToBottom = () => {
+      if (scrollContainerRef.current) {
+        const container = scrollContainerRef.current;
+        container.scrollTop = container.scrollHeight;
+      }
+    };
 
-  // Retry when tool parts resolve after the stream ends (e.g. assistant text
-  // trails a still-running tool call, so `onFinish` alone cannot flush).
-  useEffect(() => {
-    if (isLoading) {
-      return;
-    }
-    tryFlushQueuedMessages(messages, {
-      isError: error != null,
-      isAbort: false,
-    });
-  }, [messages, isLoading, error, tryFlushQueuedMessages]);
+    requestAnimationFrame(scrollToBottom);
+  }, [activeChatId]);
 
   const startNewChatState = useEvent((initialMessage: string) => {
     const now = Date.now();
@@ -775,7 +654,6 @@ const ChatPanelBody = () => {
     setActiveChat(null);
     setInput("");
     setNewThreadInput("");
-    clearQueuedMessages();
     clearFiles();
   });
 
@@ -821,12 +699,15 @@ const ChatPanelBody = () => {
       const { contextPart, attachments } = await resolveChatContext(newValue);
 
       e?.preventDefault();
-      submitOrQueue([
-        { type: "text", text: newValue },
-        ...(contextPart ? [contextPart] : []),
-        ...(fileParts ?? []),
-        ...attachments,
-      ]);
+      sendMessage({
+        role: "user",
+        parts: [
+          { type: "text", text: newValue },
+          ...(contextPart ? [contextPart] : []),
+          ...(fileParts ?? []),
+          ...attachments,
+        ],
+      });
       setInput("");
       clearFiles();
     },
@@ -856,11 +737,14 @@ const ChatPanelBody = () => {
       setInput(newThreadInput);
     }
     const { contextPart, attachments } = await resolveChatContext(prompt);
-    submitOrQueue([
-      { type: "text", text: prompt },
-      ...(contextPart ? [contextPart] : []),
-      ...attachments,
-    ]);
+    sendMessage({
+      role: "user",
+      parts: [
+        { type: "text", text: prompt },
+        ...(contextPart ? [contextPart] : []),
+        ...attachments,
+      ],
+    });
   });
 
   const isNewThread = messages.length === 0;
@@ -940,62 +824,49 @@ const ChatPanelBody = () => {
         />
       </TooltipProvider>
 
-      <div className="flex-1 flex flex-col overflow-hidden relative min-h-0">
-        <div
-          className="flex-1 px-3 bg-(--slate-1) gap-4 py-3 flex flex-col overflow-y-auto"
-          ref={scrollContainerRef}
-          onScroll={handleScroll}
-        >
-          {isNewThread && (
-            <div className="flex flex-col gap-2">
-              <div className="rounded-md border bg-background">
-                {filesPills}
-                {chatInput}
-              </div>
-              <PairWithAgentCallout onPairWithAgent={handlePairWithAgent} />
+      <div
+        className="flex-1 px-3 bg-(--slate-1) gap-4 py-3 flex flex-col overflow-y-auto"
+        ref={scrollContainerRef}
+      >
+        {isNewThread && (
+          <div className="flex flex-col gap-2">
+            <div className="rounded-md border bg-background">
+              {filesPills}
+              {chatInput}
             </div>
-          )}
-
-          {messages.map((message, idx) => (
-            <ChatMessageDisplay
-              key={message.id}
-              message={message}
-              index={idx}
-              onEdit={handleMessageEdit}
-              isStreamingReasoning={isStreamingReasoning}
-              isLast={idx === messages.length - 1}
-              isActive={isLoading}
-              addToolApprovalResponse={addToolApprovalResponse}
-            />
-          ))}
+            <PairWithAgentCallout onPairWithAgent={handlePairWithAgent} />
+          </div>
+        )}
 
-          {queuedMessages.map((message) => (
-            <QueuedMessageDisplay key={message.id} message={message} />
-          ))}
+        {messages.map((message, idx) => (
+          <ChatMessageDisplay
+            key={message.id}
+            message={message}
+            index={idx}
+            onEdit={handleMessageEdit}
+            isStreamingReasoning={isStreamingReasoning}
+            isLast={idx === messages.length - 1}
+            isActive={isLoading}
+            addToolApprovalResponse={addToolApprovalResponse}
+          />
+        ))}
 
-          {isLoading && (
-            <div className="flex justify-center py-4">
-              <Loader2 className="h-4 w-4 animate-spin" />
-            </div>
-          )}
-
-          {error && (
-            <div className="flex items-center justify-center space-x-2 mb-4">
-              <ErrorBanner error={error || new Error("Unknown error")} />
-              <Button variant="outline" size="sm" onClick={handleReload}>
-                Retry
-              </Button>
-            </div>
-          )}
-        </div>
+        {isLoading && (
+          <div className="flex justify-center py-4">
+            <Loader2 className="h-4 w-4 animate-spin" />
+          </div>
+        )}
 
-        <ScrollToBottomButton
-          isVisible={
-            !isScrolledToBottom &&
-            (messages.length > 0 || queuedMessages.length > 0)
-          }
-          onScrollToBottom={() => scrollToBottom(true)}
-        />
+        {error && (
+          <div className="flex items-center justify-center space-x-2 mb-4">
+            <ErrorBanner error={error || new Error("Unknown error")} />
+            <Button variant="outline" size="sm" onClick={handleReload}>
+              Retry
+            </Button>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
       </div>
 
       {isLoading && (

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

@@ -7,10 +7,9 @@ import {
   isToolUIPart,
   lastAssistantMessageIsCompleteWithApprovalResponses,
   lastAssistantMessageIsCompleteWithToolCalls,
-  type ToolUIPart,
   type UIMessage,
 } from "ai";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import useEvent from "react-use-event-hook";
 import type { ProviderId } from "@/core/ai/ids/ids";
 import type { ToolNotebookContext } from "@/core/ai/tools/base";
@@ -21,7 +20,6 @@ import type {
 } from "@/core/network/types";
 import { blobToString } from "@/utils/fileToBase64";
 import { Logger } from "@/utils/Logger";
-import { generateUUID } from "@/utils/uuid";
 import { getAICompletionBodyWithAttachments } from "../editor/ai/completion-utils";
 import { toast } from "../ui/use-toast";
 
@@ -188,44 +186,10 @@ export function hasPendingToolCalls(messages: UIMessage[]): boolean {
   }
   return (
     lastAssistantMessageIsCompleteWithToolCalls({ messages }) ||
-    lastAssistantMessageIsCompleteWithApprovalResponses({ messages }) ||
-    (lastPart.state === "output-denied" && !lastPart.providerExecuted)
+    lastAssistantMessageIsCompleteWithApprovalResponses({ messages })
   );
 }
 
-/**
- * True when the assistant is still waiting on tool execution or user approval.
- * Unlike `hasPendingToolCalls` (ready to auto-resume), these states must block
- * releasing queued user messages.
- */
-export function hasUnresolvedToolCalls(messages: UIMessage[]): boolean {
-  const lastMessage = messages.at(-1);
-  if (!lastMessage || lastMessage.role !== "assistant") {
-    return false;
-  }
-  return lastMessage.parts.some(
-    (part) => isToolUIPart(part) && isUnresolvedToolState(part.state),
-  );
-}
-
-function isUnresolvedToolState(state: ToolUIPart["state"]): boolean {
-  switch (state) {
-    case "approval-requested":
-    case "input-streaming":
-    case "input-available":
-      return true;
-    case "approval-responded":
-    case "output-available":
-    case "output-error":
-    case "output-denied":
-      return false;
-    default: {
-      const _exhaustive: never = state;
-      return _exhaustive;
-    }
-  }
-}
-
 export function useFileState() {
   const [files, setFiles] = useState<File[]>([]);
 
@@ -253,76 +217,3 @@ export function useFileState() {
 
   return { files, addFiles, clearFiles, removeFile };
 }
-
-export type ChatMessagePart = UIMessage["parts"][number];
-
-export interface QueuedUserMessage {
-  id: string;
-  parts: ChatMessagePart[];
-}
-
-/**
- * Decide whether the message queue should release its next message after a
- * chat request settles. `onFinish` fires on every completion — including
- * aborts, errors, and each intermediate tool-call round — so the queue must
- * only advance once the assistant has genuinely finished its turn.
- */
-export function shouldFlushQueue(opts: {
-  isError: boolean;
-  isAbort: boolean;
-  hasPendingToolCalls: boolean;
-  hasUnresolvedToolCalls: boolean;
-}): boolean {
-  if (opts.isError) {
-    return false;
-  }
-  // User stopped the stream; release queued input even if a tool part is still
-  // mid-flight (e.g. `input-streaming`).
-  if (opts.isAbort) {
-    return true;
-  }
-  return !opts.hasPendingToolCalls && !opts.hasUnresolvedToolCalls;
-}
-
-/**
- * Queue of user messages typed while the assistant is still responding.
- * Messages are enqueued in order and released one at a time.
- */
-export function useMessageQueue() {
-  const [messages, setMessages] = useState<QueuedUserMessage[]>([]);
-  // Mirror the queue in a ref so `flushNext` reads the latest value even when
-  // invoked from a callback (e.g. `onFinish`) captured on an earlier render.
-  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 flushNext = useEvent((send: (parts: ChatMessagePart[]) => void) => {
-    const queue = messagesRef.current;
-    if (queue.length === 0) {
-      return;
-    }
-    const [next, ...rest] = queue;
-    messagesRef.current = rest;
-    hasQueuedRef.current = rest.length > 0;
-    setMessages(rest);
-    send(next.parts);
-  });
-
-  const clear = useEvent(() => {
-    messagesRef.current = [];
-    hasQueuedRef.current = false;
-    setMessages([]);
-  });
-
-  return { messages, enqueue, flushNext, clear, hasQueuedRef };
-}

package/src/components/editor/SortableCell.tsx

@@ -15,10 +15,6 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   cellId: CellId;
   canMoveX?: boolean;
-  /**
-   * If true, dragging is disabled (e.g. while presenting).
-   */
-  disabled?: boolean;
 }
 
 /**
@@ -46,7 +42,7 @@ function isTransformNoop(transform: Transform | null) {
 
 export const SortableCell = React.forwardRef(
   (
-    { cellId, canMoveX, disabled, ...props }: Props,
+    { cellId, canMoveX, ...props }: Props,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) => {
     // This hook re-renders every time _any_ cell is dragged,
@@ -58,7 +54,7 @@ export const SortableCell = React.forwardRef(
       transform,
       transition,
       isDragging,
-    } = useSortable({ id: cellId.toString(), disabled });
+    } = useSortable({ id: cellId.toString() });
 
     // Perf:
     // If the transform is a noop, keep it as null

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -14,20 +14,67 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { copyToClipboard } from "@/utils/copy";
 import { Events } from "@/utils/events";
 import { Tooltip } from "@/components/ui/tooltip";
+import { assertNever } from "@/utils/assertNever";
 import { asRemoteURL, useRuntimeManager } from "@/core/runtime/config";
 import { API } from "@/core/network/api";
-import { getSessionId } from "@/core/kernel/session";
-import {
-  AGENT_LABELS,
-  AGENT_TABS,
-  type AgentTab,
-  type ConnectionInfo,
-  getRawPrompt,
-  getTerminalCommand,
-  maskToken,
-  SKILL_INSTALL,
-  TERMINAL_TABS,
-} from "./pair-with-agent-commands";
+
+type AgentTab = "claude" | "codex" | "opencode" | "prompt";
+
+const TERMINAL_TABS = ["claude", "codex", "opencode"] as const;
+
+function getMarimoCommand(): string {
+  return import.meta.env.DEV ? "uv run marimo" : "uvx marimo@latest";
+}
+
+function getTerminalCommand(
+  agent: Exclude<AgentTab, "prompt">,
+  url: string,
+  withToken: boolean,
+): string {
+  const tokenFlag = withToken ? " --with-token" : "";
+  const base = `${getMarimoCommand()} pair prompt --url '${url}'${tokenFlag}`;
+  switch (agent) {
+    case "claude":
+      return `claude "$(${base} --claude)"`;
+    case "codex":
+      return `codex "$(${base} --codex)"`;
+    case "opencode":
+      return `opencode --prompt "$(${base} --opencode)"`;
+    default:
+      assertNever(agent);
+  }
+}
+
+function getRawPrompt(url: string, token: string | null): string {
+  const tokenHint = token
+    ? `\n\nUse this auth token when calling \`execute-code.sh\`: \`execute-code.sh --url '${url}' --token '${token}'\`.`
+    : "";
+  return [
+    "Use the /marimo-pair skill to pair-program on a running marimo notebook.",
+    "",
+    `Connect to the notebook at: ${url}`,
+    "",
+    `Use \`execute-code.sh --url ${url}\` from the marimo-pair skill to execute code in the notebook.${tokenHint}`,
+    "",
+    "Once you are connected, send a fun toast (mo.status.toast(...)) to the user inside marimo letting them know you're ready to pair.",
+  ].join("\n");
+}
+
+function maskToken(token: string): string {
+  if (token.length <= 4) {
+    return "****";
+  }
+  return `${"*".repeat(Math.min(token.length - 4, 8))}${token.slice(-4)}`;
+}
+
+const SKILL_INSTALL = "npx skills add marimo-team/marimo-pair";
+
+const AGENT_LABELS: Record<AgentTab, string> = {
+  claude: "Claude",
+  codex: "Codex",
+  opencode: "OpenCode",
+  prompt: "Prompt",
+};
 
 function useAuthToken(): string | null {
   const [token, setToken] = useState<string | null>(null);
@@ -51,10 +98,7 @@ export const PairWithAgentModal: React.FC<{
   const runtimeManager = useRuntimeManager();
   const authToken = useAuthToken();
   const hasToken = Boolean(authToken);
-  const connection: ConnectionInfo = {
-    url: runtimeManager.httpURL.toString(),
-    sessionId: getSessionId(),
-  };
+  const remoteUrl = runtimeManager.httpURL.toString();
 
   return (
     <DialogContent className="sm:max-w-2xl">
@@ -81,7 +125,7 @@ export const PairWithAgentModal: React.FC<{
           onValueChange={(v) => setActiveTab(v as AgentTab)}
         >
           <TabsList className="w-full">
-            {AGENT_TABS.map((tab) => (
+            {(["claude", "codex", "opencode", "prompt"] as const).map((tab) => (
               <TabsTrigger key={tab} value={tab} className="flex-1">
                 {AGENT_LABELS[tab]}
               </TabsTrigger>
@@ -103,7 +147,7 @@ export const PairWithAgentModal: React.FC<{
               </Step>
               <Step index={2} title="Run in your terminal">
                 <CommandBlock
-                  command={getTerminalCommand(tab, connection, hasToken)}
+                  command={getTerminalCommand(tab, remoteUrl, hasToken)}
                 />
               </Step>
               {hasToken && authToken && (
@@ -135,9 +179,9 @@ export const PairWithAgentModal: React.FC<{
               }
             >
               <CommandBlock
-                command={getRawPrompt(connection, authToken)}
+                command={getRawPrompt(remoteUrl, authToken)}
                 display={getRawPrompt(
-                  connection,
+                  remoteUrl,
                   authToken ? maskToken(authToken) : null,
                 )}
                 multiline={true}

package/src/components/editor/ai/add-cell-with-ai.tsx

@@ -231,13 +231,6 @@ export const AddCellWithAI: React.FC<{
 
   const handleDeclineCompletion = () => {
     deleteAllStagedCells();
-    // Focus the input so the user can refine the prompt.
-    inputRef.current?.view?.focus();
-  };
-
-  const handleClose = () => {
-    deleteAllStagedCells();
-    onClose();
   };
 
   const inputComponent = (
@@ -245,7 +238,10 @@ export const AddCellWithAI: React.FC<{
       <SparklesIcon className="size-4 text-(--blue-11) mr-2" />
       <PromptInput
         inputRef={inputRef}
-        onClose={handleClose}
+        onClose={() => {
+          deleteAllStagedCells();
+          onClose();
+        }}
         value={input}
         onChange={(newValue) => {
           setInput(newValue);
@@ -258,12 +254,7 @@ export const AddCellWithAI: React.FC<{
           hasCompletion,
         })}
       />
-      <Button
-        variant="text"
-        size="sm"
-        className="mb-0 px-1"
-        onClick={handleClose}
-      >
+      <Button variant="text" size="sm" className="mb-0 px-1" onClick={onClose}>
         <XIcon className="size-4" />
       </Button>
     </div>