@marimo-team/islands 0.15.2 → 0.15.4

package/src/components/editor/chrome/panels/scratchpad-panel.tsx

@@ -3,6 +3,8 @@
 import type React from "react";
 import { ScratchPad } from "@/components/scratchpad/scratchpad";
 
-export const ScratchpadPanel: React.FC = () => {
+const ScratchpadPanel: React.FC = () => {
   return <ScratchPad />;
 };
+
+export default ScratchpadPanel;

package/src/components/editor/chrome/panels/secrets-panel.tsx

@@ -22,7 +22,7 @@ import { copyToClipboard } from "@/utils/copy";
 import { PanelEmptyState } from "./empty-state";
 import { sortProviders, WriteSecretModal } from "./write-secret-modal";
 
-export const SecretsPanel: React.FC = () => {
+const SecretsPanel: React.FC = () => {
   const { openModal, closeModal } = useImperativeModal();
   const {
     data: secretKeyProviders,
@@ -125,6 +125,8 @@ export const SecretsPanel: React.FC = () => {
   );
 };
 
+export default SecretsPanel;
+
 const CopyButton: React.FC<{
   className?: string;
   ariaLabel: string;

package/src/components/editor/chrome/panels/snippets-panel.tsx

@@ -32,7 +32,7 @@ import { ContributeSnippetButton } from "../components/contribute-snippet-button
 
 const extensions = [EditorView.lineWrapping];
 
-export const SnippetsPanel: React.FC = () => {
+const SnippetsPanel: React.FC = () => {
   const { readSnippets } = useRequestClient();
   const [selectedSnippet, setSelectedSnippet] = React.useState<Snippet>();
   const {
@@ -98,6 +98,8 @@ export const SnippetsPanel: React.FC = () => {
   );
 };
 
+export default SnippetsPanel;
+
 const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
   snippet,
   onClose,

package/src/components/editor/chrome/panels/tracing-panel.tsx

@@ -11,7 +11,7 @@ const LazyTracing = React.lazy(() =>
   }),
 );
 
-export const TracingPanel: React.FC = () => {
+const TracingPanel: React.FC = () => {
   return (
     <React.Suspense fallback={<Loading />}>
       <LazyTracing />
@@ -19,6 +19,8 @@ export const TracingPanel: React.FC = () => {
   );
 };
 
+export default TracingPanel;
+
 const Loading = () => {
   return (
     <div className="flex flex-col items-center justify-center h-full">

package/src/components/editor/chrome/panels/variable-panel.tsx

@@ -7,7 +7,7 @@ import { useCellIds } from "@/core/cells/cells";
 import { useVariables } from "@/core/variables/state";
 import { PanelEmptyState } from "./empty-state";
 
-export const VariablePanel: React.FC = () => {
+const VariablePanel: React.FC = () => {
   const variables = useVariables();
   const cellIds = useCellIds();
 
@@ -29,3 +29,5 @@ export const VariablePanel: React.FC = () => {
     />
   );
 };
+
+export default VariablePanel;

package/src/components/editor/chrome/types.ts

@@ -8,6 +8,7 @@ import {
   FileTextIcon,
   FolderTreeIcon,
   FunctionSquareIcon,
+  HatGlassesIcon,
   KeyRoundIcon,
   type LucideIcon,
   NetworkIcon,
@@ -17,6 +18,7 @@ import {
   TextSearchIcon,
   XCircleIcon,
 } from "lucide-react";
+import { getFeatureFlag } from "@/core/config/feature-flag";
 import { isWasm } from "@/core/wasm/utils";
 
 export type PanelType =
@@ -32,6 +34,7 @@ export type PanelType =
   | "datasources"
   | "scratchpad"
   | "chat"
+  | "agents"
   | "secrets"
   | "logs";
 
@@ -86,6 +89,13 @@ export const PANELS: PanelDescriptor[] = [
     tooltip: "Chat with AI",
     position: "sidebar",
   },
+  {
+    type: "agents",
+    Icon: HatGlassesIcon,
+    tooltip: "Agents",
+    position: "sidebar",
+    hidden: !getFeatureFlag("external_agents"),
+  },
   {
     type: "documentation",
     Icon: TextSearchIcon,

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -1,5 +1,10 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import React, { type PropsWithChildren, Suspense, useEffect } from "react";
+import React, {
+  type PropsWithChildren,
+  Suspense,
+  useEffect,
+  useId,
+} from "react";
 import {
   type ImperativePanelHandle,
   Panel,
@@ -11,26 +16,12 @@ import { Sidebar } from "./sidebar";
 import "./app-chrome.css";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { XIcon } from "lucide-react";
-import { ChatPanel } from "@/components/chat/chat-panel";
-import { DependencyGraphPanel } from "@/components/editor/chrome/panels/dependency-graph-panel";
 import { Button } from "@/components/ui/button";
 import { LazyMount } from "@/components/utils/lazy-mount";
 import { IfCapability } from "@/core/config/if-capability";
 import { cn } from "@/utils/cn";
 import { ErrorBoundary } from "../../boundary/ErrorBoundary";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
-import { DataSourcesPanel } from "../panels/datasources-panel";
-import { DocumentationPanel } from "../panels/documentation-panel";
-import { ErrorsPanel } from "../panels/error-panel";
-import { FileExplorerPanel } from "../panels/file-explorer-panel";
-import { LogsPanel } from "../panels/logs-panel";
-import { OutlinePanel } from "../panels/outline-panel";
-import { PackagesPanel } from "../panels/packages-panel";
-import { ScratchpadPanel } from "../panels/scratchpad-panel";
-import { SecretsPanel } from "../panels/secrets-panel";
-import { SnippetsPanel } from "../panels/snippets-panel";
-import { TracingPanel } from "../panels/tracing-panel";
-import { VariablePanel } from "../panels/variable-panel";
 import { useChromeActions, useChromeState } from "../state";
 import { Minimap } from "./minimap";
 import { PanelsWrapper } from "./panels";
@@ -38,6 +29,33 @@ import { createStorage } from "./storage";
 import { handleDragging } from "./utils";
 
 const LazyTerminal = React.lazy(() => import("@/components/terminal/terminal"));
+const LazyChatPanel = React.lazy(() => import("@/components/chat/chat-panel"));
+const LazyAgentPanel = React.lazy(
+  () => import("@/components/chat/acp/agent-panel"),
+);
+const LazyDependencyGraphPanel = React.lazy(
+  () => import("@/components/editor/chrome/panels/dependency-graph-panel"),
+);
+const LazyDataSourcesPanel = React.lazy(
+  () => import("../panels/datasources-panel"),
+);
+const LazyDocumentationPanel = React.lazy(
+  () => import("../panels/documentation-panel"),
+);
+const LazyErrorsPanel = React.lazy(() => import("../panels/error-panel"));
+const LazyFileExplorerPanel = React.lazy(
+  () => import("../panels/file-explorer-panel"),
+);
+const LazyLogsPanel = React.lazy(() => import("../panels/logs-panel"));
+const LazyOutlinePanel = React.lazy(() => import("../panels/outline-panel"));
+const LazyPackagesPanel = React.lazy(() => import("../panels/packages-panel"));
+const LazyScratchpadPanel = React.lazy(
+  () => import("../panels/scratchpad-panel"),
+);
+const LazySecretsPanel = React.lazy(() => import("../panels/secrets-panel"));
+const LazySnippetsPanel = React.lazy(() => import("../panels/snippets-panel"));
+const LazyTracingPanel = React.lazy(() => import("../panels/tracing-panel"));
+const LazyVariablePanel = React.lazy(() => import("../panels/variable-panel"));
 
 export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const { isSidebarOpen, isTerminalOpen, selectedPanel } = useChromeState();
@@ -45,6 +63,9 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const sidebarRef = React.useRef<ImperativePanelHandle>(null);
   const terminalRef = React.useRef<ImperativePanelHandle>(null);
 
+  const helperPanelId = useId();
+  const terminalPanelId = useId();
+
   // sync sidebar
   useEffect(() => {
     if (!sidebarRef.current) {
@@ -140,20 +161,21 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         </div>
         <Suspense>
           <TooltipProvider>
-            {selectedPanel === "files" && <FileExplorerPanel />}
-            {selectedPanel === "errors" && <ErrorsPanel />}
-            {selectedPanel === "variables" && <VariablePanel />}
-            {selectedPanel === "dependencies" && <DependencyGraphPanel />}
-            {selectedPanel === "packages" && <PackagesPanel />}
-            {selectedPanel === "outline" && <OutlinePanel />}
-            {selectedPanel === "datasources" && <DataSourcesPanel />}
-            {selectedPanel === "documentation" && <DocumentationPanel />}
-            {selectedPanel === "snippets" && <SnippetsPanel />}
-            {selectedPanel === "scratchpad" && <ScratchpadPanel />}
-            {selectedPanel === "chat" && <ChatPanel />}
-            {selectedPanel === "logs" && <LogsPanel />}
-            {selectedPanel === "tracing" && <TracingPanel />}
-            {selectedPanel === "secrets" && <SecretsPanel />}
+            {selectedPanel === "files" && <LazyFileExplorerPanel />}
+            {selectedPanel === "errors" && <LazyErrorsPanel />}
+            {selectedPanel === "variables" && <LazyVariablePanel />}
+            {selectedPanel === "dependencies" && <LazyDependencyGraphPanel />}
+            {selectedPanel === "packages" && <LazyPackagesPanel />}
+            {selectedPanel === "outline" && <LazyOutlinePanel />}
+            {selectedPanel === "datasources" && <LazyDataSourcesPanel />}
+            {selectedPanel === "documentation" && <LazyDocumentationPanel />}
+            {selectedPanel === "snippets" && <LazySnippetsPanel />}
+            {selectedPanel === "scratchpad" && <LazyScratchpadPanel />}
+            {selectedPanel === "chat" && <LazyChatPanel />}
+            {selectedPanel === "agents" && <LazyAgentPanel />}
+            {selectedPanel === "logs" && <LazyLogsPanel />}
+            {selectedPanel === "tracing" && <LazyTracingPanel />}
+            {selectedPanel === "secrets" && <LazySecretsPanel />}
           </TooltipProvider>
         </Suspense>
       </div>
@@ -163,7 +185,8 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const helperPanel = (
     <Panel
       ref={sidebarRef}
-      id="helper"
+      id={`helper-${helperPanelId}`}
+      data-testid="helper"
       key={"helper"}
       collapsedSize={0}
       collapsible={true}
@@ -193,7 +216,8 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const terminalPanel = (
     <Panel
       ref={terminalRef}
-      id="terminal"
+      id={`terminal-${terminalPanelId}`}
+      data-testid="terminal"
       key={"terminal"}
       collapsedSize={0}
       collapsible={true}

package/src/components/editor/controls/command-palette-button.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { Tooltip } from "@/components/ui/tooltip";
 import { Button } from "../inputs/Inputs";
-import { commandPaletteAtom } from "./command-palette";
+import { commandPaletteAtom } from "./state";
 
 export const CommandPaletteButton: React.FC = () => {
   const setCommandPaletteOpen = useSetAtom(commandPaletteAtom);

package/src/components/editor/controls/command-palette.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { atom, useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import {
   CommandDialog,
   CommandEmpty,
@@ -28,10 +28,9 @@ import {
 import { useCellActionButtons } from "../actions/useCellActionButton";
 import { useConfigActions } from "../actions/useConfigActions";
 import { useNotebookActions } from "../actions/useNotebookActions";
+import { commandPaletteAtom } from "./state";
 
-export const commandPaletteAtom = atom(false);
-
-export const CommandPalette = () => {
+const CommandPalette = () => {
   const [open, setOpen] = useAtom(commandPaletteAtom);
   const registeredActions = useRegisteredActions();
   const lastFocusedCell = useAtomValue(lastFocusedCellAtom);
@@ -208,3 +207,5 @@ export const CommandPalette = () => {
     </CommandDialog>
   );
 };
+
+export default CommandPalette;

package/src/components/editor/controls/state.ts

@@ -0,0 +1,4 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { atom } from "jotai";
+
+export const commandPaletteAtom = atom(false);

package/src/components/editor/package-alert.tsx

@@ -4,6 +4,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import {
   BoxIcon,
   CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
   DownloadCloudIcon,
   PackageCheckIcon,
   PackageXIcon,
@@ -73,7 +75,7 @@ function buildPackageSpecifier(name: string, extras: string[]): string {
 }
 
 export const PackageAlert: React.FC = () => {
-  const { packageAlert } = useAlerts();
+  const { packageAlert, packageLogs } = useAlerts();
   const { clearPackageAlert } = useAlertActions();
   const [userConfig] = useResolvedMarimoConfig();
   const [desiredPackageVersions, setDesiredPackageVersions] = useState<
@@ -92,10 +94,10 @@ export const PackageAlert: React.FC = () => {
 
   if (isMissingPackageAlert(packageAlert)) {
     return (
-      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95">
+      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px]">
         <Banner
           kind="danger"
-          className="flex flex-col rounded py-3 px-5 animate-in slide-in-from-left"
+          className="flex flex-col rounded py-3 px-5 animate-in slide-in-from-left overflow-auto max-h-[80vh] scrollbar-thin"
         >
           <div className="flex justify-between">
             <span className="font-bold text-lg flex items-center mb-2">
@@ -114,45 +116,46 @@ export const PackageAlert: React.FC = () => {
           <div className="flex flex-col gap-4 justify-between items-start text-muted-foreground text-base">
             <div>
               <p>The following packages were not found:</p>
-              <ul className="list-disc ml-4 mt-1">
+              <table className="list-disc ml-2 mt-1">
                 {packageAlert.packages.map((pkg, index) => {
                   const parsed = parsePackageSpecifier(pkg);
                   const currentExtras = selectedExtras[pkg] || parsed.extras;
 
                   return (
-                    <li
-                      className="flex items-center gap-2 font-mono text-sm"
-                      key={index}
-                    >
-                      <BoxIcon size="1rem" />
-
-                      <ExtrasSelector
-                        packageName={parsed.name}
-                        selectedExtras={currentExtras}
-                        onExtrasChange={(extras) =>
-                          setSelectedExtras((prev) => ({
-                            ...prev,
-                            [pkg]: extras,
-                          }))
-                        }
-                      />
-
-                      {doesSupportVersioning && (
-                        <PackageVersionSelect
-                          value={desiredPackageVersions[pkg] ?? "latest"}
-                          onChange={(value) =>
-                            setDesiredPackageVersions((prev) => ({
+                    <tr className="font-mono text-sm" key={index}>
+                      <td className="pr-2 py-1 align-middle">
+                        <BoxIcon size="1rem" />
+                      </td>
+                      <td className="pr-2 py-1 align-middle">
+                        <ExtrasSelector
+                          packageName={parsed.name}
+                          selectedExtras={currentExtras}
+                          onExtrasChange={(extras) =>
+                            setSelectedExtras((prev) => ({
                               ...prev,
-                              [pkg]: value,
+                              [pkg]: extras,
                             }))
                           }
-                          packageName={parsed.name}
                         />
+                      </td>
+                      {doesSupportVersioning && (
+                        <td className="pr-2 py-1 align-middle">
+                          <PackageVersionSelect
+                            value={desiredPackageVersions[pkg] ?? "latest"}
+                            onChange={(value) =>
+                              setDesiredPackageVersions((prev) => ({
+                                ...prev,
+                                [pkg]: value,
+                              }))
+                            }
+                            packageName={parsed.name}
+                          />
+                        </td>
                       )}
-                    </li>
+                    </tr>
                   );
                 })}
-              </ul>
+              </table>
             </div>
             <div className="ml-auto flex flex-row items-baseline">
               {packageAlert.isolated ? (
@@ -200,10 +203,10 @@ export const PackageAlert: React.FC = () => {
     }
 
     return (
-      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95">
+      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] ">
         <Banner
           kind={status === "failed" ? "danger" : "info"}
-          className="flex flex-col rounded pt-3 pb-4 px-5"
+          className="flex flex-col rounded pt-3 pb-4 px-5 overflow-auto max-h-[80vh] scrollbar-thin"
         >
           <div className="flex justify-between">
             <span className="font-bold text-lg flex items-center mb-2">
@@ -225,30 +228,29 @@ export const PackageAlert: React.FC = () => {
               status === "installed" && "text-accent-foreground",
             )}
           >
-            <div>
-              <p>{description}</p>
-              <ul className="list-disc ml-4 mt-1">
-                {Object.entries(packageAlert.packages).map(
-                  ([pkg, st], index) => (
-                    <li
-                      className={cn(
-                        "flex items-center gap-1 font-mono text-sm",
-                        st === "installing" && "font-semibold",
-                        st === "failed" && "text-destructive",
-                        st === "installed" && "text-accent-foreground",
-                        st === "installed" &&
-                          status === "failed" &&
-                          "text-muted-foreground",
-                      )}
-                      key={index}
-                    >
-                      <ProgressIcon status={st} />
-                      {pkg}
-                    </li>
-                  ),
-                )}
-              </ul>
-            </div>
+            <p>{description}</p>
+            <ul className="list-disc ml-2 mt-1">
+              {Object.entries(packageAlert.packages).map(([pkg, st], index) => (
+                <li
+                  className={cn(
+                    "flex items-center gap-1 font-mono text-sm",
+                    st === "installing" && "font-semibold",
+                    st === "failed" && "text-destructive",
+                    st === "installed" && "text-accent-foreground",
+                    st === "installed" &&
+                      status === "failed" &&
+                      "text-muted-foreground",
+                  )}
+                  key={index}
+                >
+                  <ProgressIcon status={st} />
+                  {pkg}
+                </li>
+              ))}
+            </ul>
+            {Object.keys(packageLogs).length > 0 && (
+              <StreamingLogsViewer packageLogs={packageLogs} />
+            )}
           </div>
         </Banner>
       </div>
@@ -288,7 +290,7 @@ function getInstallationStatusElements(packages: PackageInstallationStatus) {
     status: "failed",
     title: "Some packages failed to install",
     titleIcon: <PackageXIcon className="w-5 h-5 inline-block mr-2" />,
-    description: "See terminal for error logs.",
+    description: "See error logs.",
   };
 }
 
@@ -441,7 +443,7 @@ const ExtrasSelector: React.FC<ExtrasSelectorProps> = ({
 
   return (
     <div className="flex items-center max-w-72">
-      <span className="shrink-0">{packageName}</span>
+      <span className="shrink-0 flex-1">{packageName}</span>
 
       {selectedExtras.length > 0 ? (
         <span className="flex items-center min-w-0 flex-1">
@@ -594,3 +596,51 @@ const PackageVersionSelect: React.FC<PackageVersionSelectProps> = ({
     </NativeSelect>
   );
 };
+
+interface StreamingLogsViewerProps {
+  packageLogs: { [packageName: string]: string };
+}
+
+const StreamingLogsViewer: React.FC<StreamingLogsViewerProps> = ({
+  packageLogs,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const packageCount = Object.keys(packageLogs).length;
+  if (packageCount === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mt-4 border-t border-border pt-4 w-full">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+      >
+        {isExpanded ? (
+          <ChevronDownIcon className="w-4 h-4" />
+        ) : (
+          <ChevronRightIcon className="w-4 h-4" />
+        )}
+        Installation logs
+      </button>
+
+      {isExpanded && (
+        <div className="mt-3 space-y-3 w-full">
+          {Object.entries(packageLogs).map(([packageName, logs]) => (
+            <div key={packageName} className="w-full">
+              <h4 className="font-mono text-sm font-medium mb-2 text-foreground">
+                {packageName}
+              </h4>
+              <div className="border border-border rounded w-full">
+                <pre className="p-3 text-xs font-mono bg-background max-h-64 overflow-y-auto text-muted-foreground whitespace-pre-wrap scrollbar-thin">
+                  {logs || "No logs available"}
+                </pre>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/editor/renderers/CellArray.tsx

@@ -13,6 +13,7 @@ import {
   SquareMIcon,
 } from "lucide-react";
 import { useEffect } from "react";
+import { StartupLogsAlert } from "@/components/editor/alerts/startup-logs-alert";
 import { Cell } from "@/components/editor/Cell";
 import { PackageAlert } from "@/components/editor/package-alert";
 import { SortableCellsProvider } from "@/components/sort/SortableCellsProvider";
@@ -120,6 +121,7 @@ const CellArrayInternal: React.FC<CellArrayProps> = ({
       innerClassName="pr-4" // For the floating actions
     >
       <PackageAlert />
+      <StartupLogsAlert />
       <StdinBlockingAlert />
       <ConnectingAlert />
       <NotebookBanner width={appConfig.width} />

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -327,7 +327,6 @@ const VerticalCell = memo(
       "hover-actions-parent empty:invisible",
       {
         published: published,
-        interactive: mode === "edit",
         "has-error": errored,
         stopped: stopped,
         borderless: isPureMarkdown && !published,

package/src/components/pages/edit-page.tsx

@@ -1,10 +1,14 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import { lazy } from "react";
 import type { AppConfig, UserConfig } from "@/core/config/config-schema";
 import { KnownQueryParams } from "@/core/constants";
 import { EditApp } from "@/core/edit-app";
 import { AppChrome } from "../editor/chrome/wrapper/app-chrome";
-import { CommandPalette } from "../editor/controls/command-palette";
+
+const LazyCommandPalette = lazy(
+  () => import("../editor/controls/command-palette"),
+);
 
 interface Props {
   userConfig: UserConfig;
@@ -21,7 +25,7 @@ const EditPage = (props: Props) => {
     return (
       <>
         <EditApp hideControls={true} {...props} />
-        <CommandPalette />
+        <LazyCommandPalette />
       </>
     );
   }
@@ -29,7 +33,7 @@ const EditPage = (props: Props) => {
   return (
     <AppChrome>
       <EditApp {...props} />
-      <CommandPalette />
+      <LazyCommandPalette />
     </AppChrome>
   );
 };