@marimo-team/islands 0.24.3-dev81 → 0.24.3-dev83

package/src/stories/sandbox.stories.tsx

@@ -3,14 +3,15 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { createStore, Provider, useAtomValue } from "jotai";
 import { useEffect, useRef, useState } from "react";
 import { ConnectionNotice } from "@/components/editor/alerts/connection-notice";
-import {
-  SandboxFooter,
-  SandboxStartupPanel,
-} from "@/components/editor/chrome/panels/sandbox-panel";
+import PackagesPanel from "@/components/editor/chrome/panels/packages-panel";
+import { PanelSectionProvider } from "@/components/editor/chrome/panels/panel-context";
+import { SandboxToggle } from "@/components/editor/chrome/panels/sandbox-toggle";
 import { SandboxController } from "@/components/editor/chrome/panels/sandbox-controller";
 import { chromeAtom } from "@/components/editor/chrome/state";
 import { Cell } from "@/components/editor/notebook-cell";
 import { VerticalLayoutWrapper } from "@/components/editor/renderers/vertical-layout/vertical-layout-wrapper";
+import { alertAtom } from "@/core/alerts/state";
+import type { EnvironmentOperation } from "@/core/alerts/environment";
 import {
   createNotebookActions,
   notebookAtom,
@@ -18,18 +19,15 @@ import {
 } from "@/core/cells/cells";
 import { userConfigAtom } from "@/core/config/config";
 import {
+  type AppConfig,
   AppConfigSchema,
   defaultUserConfig,
 } from "@/core/config/config-schema";
 import { kernelStartupErrorAtom } from "@/core/errors/state";
-import { connectionAtom } from "@/core/network/connection";
+import { connectionAtom, startupProgressAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { createStaticRequests } from "@/core/network/requests-static";
-import {
-  sandboxActionsAtom,
-  sandboxAtom,
-  sandboxSyncAtom,
-} from "@/core/packages/sandbox-state";
+import { sandboxActionsAtom, sandboxAtom } from "@/core/packages/sandbox-state";
 import { filenameAtom } from "@/core/saving/file-state";
 import { WebSocketClosedReason, WebSocketState } from "@/core/websocket/types";
 import { HTTPError } from "@/utils/errors";
@@ -46,6 +44,19 @@ description = "Explore bike trips"
 const resolutionError = `No solution found when resolving dependencies:
   Because there is no version of rich==999.0.0 and your script depends
   on rich==999.0.0, your script's requirements are unsatisfiable.`;
+const preparationOutput = `Using Python 3.13
+Resolving notebook dependencies
+Resolved 24 packages
+Downloading polars
+Downloading rich
+Downloading marimo
+Downloading pyzmq
+Downloaded rich
+Downloaded polars
+Downloaded marimo
+Preparing packages
+Installing packages
+`;
 
 interface Props {
   surface: "notebook" | "packages" | "manifest";
@@ -55,11 +66,68 @@ interface Props {
     | "failed"
     | "ready"
     | "syncing"
-    | "sync-failed";
+    | "sync-failed"
+    | "synced"
+    | "restart-required";
   existingCells: boolean;
   backend: "uv" | "pixi";
   saveResult: "success" | "failure" | "stale";
   theme: "light" | "dark";
+  interactive: boolean;
+}
+
+function SandboxPreview({
+  props,
+  appConfig,
+  reconnect,
+}: {
+  props: Props;
+  appConfig: AppConfig;
+  reconnect: () => Promise<void>;
+}) {
+  const chrome = useAtomValue(chromeAtom);
+  const notebook = useAtomValue(notebookAtom);
+  const userConfig = useAtomValue(userConfigAtom);
+  const showPackages = props.surface === "packages" || chrome.isSidebarOpen;
+  return (
+    <div
+      className="flex bg-background text-foreground border rounded min-h-[460px]"
+      style={{ width: props.surface === "notebook" ? 1000 : 300 }}
+      data-testid="sandbox-story"
+    >
+      {showPackages && props.surface !== "manifest" && (
+        <aside className="flex flex-col w-[300px] shrink-0 border-r h-[520px]">
+          <div className="flex items-center justify-between px-3 py-2 border-b text-sm">
+            Packages
+            <SandboxToggle section="sidebar" />
+          </div>
+          <PanelSectionProvider value="sidebar">
+            <PackagesPanel />
+          </PanelSectionProvider>
+        </aside>
+      )}
+      {props.surface === "notebook" && (
+        <div className="flex-1 min-w-0 pt-12">
+          <ConnectionNotice appConfig={appConfig} onRetry={reconnect} />
+          {notebook.cellIds.inOrderIds.map((cellId) => (
+            <VerticalLayoutWrapper key={cellId} appConfig={appConfig}>
+              <Cell
+                cellId={cellId}
+                theme={props.theme}
+                mode="edit"
+                showPlaceholder={false}
+                canDelete={true}
+                isCollapsed={false}
+                collapseCount={0}
+                canMoveX={false}
+                userConfig={userConfig}
+              />
+            </VerticalLayoutWrapper>
+          ))}
+        </div>
+      )}
+    </div>
+  );
 }
 
 function OpenManifest() {
@@ -121,9 +189,74 @@ function SandboxStory(props: Props) {
       kernelStartupErrorAtom,
       props.phase === "failed" ? resolutionError : null,
     );
-    state.set(sandboxSyncAtom, {
-      pending: props.phase === "syncing",
-      error: props.phase === "sync-failed" ? resolutionError : null,
+    const syncStatus: EnvironmentOperation["status"] | null =
+      props.phase === "syncing"
+        ? { kind: "running" }
+        : props.phase === "sync-failed"
+          ? { kind: "failed", error: resolutionError }
+          : props.phase === "restart-required"
+            ? {
+                kind: "restart-required",
+                reason:
+                  "The manifest requires Python 3.14. This kernel uses Python 3.13.",
+              }
+            : props.phase === "synced"
+              ? { kind: "succeeded" }
+              : null;
+    state.set(alertAtom, (value) => ({
+      ...value,
+      environments: {
+        ...value.environments,
+        kernel: {
+          restart_required: props.phase === "restart-required",
+          operations: [
+            {
+              operation_id: "story-preparation",
+              action: "prepare",
+              source: "kernel",
+              status:
+                props.phase === "failed"
+                  ? { kind: "failed", error: resolutionError }
+                  : props.phase === "preparing"
+                    ? { kind: "running" }
+                    : { kind: "succeeded" },
+              packages: {},
+              logs: {
+                environment:
+                  props.phase === "failed"
+                    ? resolutionError
+                    : preparationOutput,
+              },
+            },
+            ...(syncStatus
+              ? [
+                  {
+                    operation_id: "story-sync",
+                    action: "sync" as const,
+                    source: "kernel" as const,
+                    status: syncStatus,
+                    packages: {},
+                    logs: {
+                      environment:
+                        "Reading notebook manifest\nResolving dependencies\nChecking Python version\n",
+                    },
+                  },
+                ]
+              : []),
+          ],
+        },
+      },
+    }));
+    state.set(startupProgressAtom, {
+      phase:
+        props.phase !== "preparing" && props.phase !== "failed"
+          ? "starting-kernel"
+          : "preparing-environment",
+      logs:
+        props.phase !== "preparing" && props.phase !== "failed"
+          ? "Launching kernel process\nUsing /home/user/.cache/uv/environments-v2/bike-trips-a274bddc/bin/python\nWaiting for kernel connection\n"
+          : "",
+      log_mode: "replace",
     });
     if (props.existingCells) {
       const actions = createNotebookActions((action) =>
@@ -143,6 +276,18 @@ function SandboxStory(props: Props) {
         manifest: currentManifest,
         filename: "bike_trips.py",
       }),
+      getDependencyTree: async () => ({
+        context: { kind: "sandbox", backend: props.backend },
+        tree: {
+          name: "<root>",
+          version: null,
+          tags: [],
+          dependencies: [
+            { name: "marimo", version: "0.24.2", tags: [], dependencies: [] },
+            { name: "polars", version: "1.34.0", tags: [], dependencies: [] },
+          ],
+        },
+      }),
       updateManifest: async ({ contents }) => {
         if (props.saveResult === "stale") {
           throw new HTTPError(
@@ -184,46 +329,56 @@ function SandboxStory(props: Props) {
   const reconnect = async () => {
     store.set(connectionAtom, { state: WebSocketState.OPEN });
   };
+  useEffect(() => {
+    if (!props.interactive) {
+      return;
+    }
+    const appendPreparation = (line: string) =>
+      store.set(alertAtom, (value) => ({
+        ...value,
+        environments: {
+          ...value.environments,
+          kernel: {
+            ...value.environments.kernel,
+            operations: value.environments.kernel.operations.map(
+              (operation) => ({
+                ...operation,
+                logs: { environment: operation.logs.environment + line },
+              }),
+            ),
+          },
+        },
+      }));
+    const timers = [
+      setTimeout(() => appendPreparation("Installed 24 packages\n"), 1500),
+      setTimeout(() => appendPreparation("Environment prepared\n"), 2500),
+      setTimeout(() => {
+        store.set(startupProgressAtom, {
+          phase: "starting-kernel",
+          logs: "Launching kernel process\nWaiting for kernel connection\n",
+          log_mode: "replace",
+        });
+        store.set(connectionAtom, {
+          state: WebSocketState.CONNECTING,
+          phase: "starting-kernel",
+        });
+      }, 3500),
+      setTimeout(
+        () => store.set(connectionAtom, { state: WebSocketState.OPEN }),
+        5500,
+      ),
+    ];
+    return () => timers.forEach(clearTimeout);
+  }, [props.interactive, store]);
   return (
     <Provider store={store}>
       <SandboxController onReconnect={reconnect} />
       {props.surface === "manifest" && <OpenManifest />}
-      <div
-        data-testid="sandbox-story"
-        className="bg-background text-foreground"
-        style={{
-          width: props.surface === "notebook" ? 820 : 400,
-        }}
-      >
-        {props.surface === "notebook" && (
-          <>
-            <ConnectionNotice appConfig={appConfig} onRetry={reconnect} />
-            {store.get(notebookAtom).cellIds.inOrderIds.map((cellId) => (
-              <VerticalLayoutWrapper key={cellId} appConfig={appConfig}>
-                <Cell
-                  cellId={cellId}
-                  theme={props.theme}
-                  mode="edit"
-                  showPlaceholder={false}
-                  canDelete={true}
-                  isCollapsed={false}
-                  collapseCount={0}
-                  canMoveX={false}
-                  userConfig={store.get(userConfigAtom)}
-                />
-              </VerticalLayoutWrapper>
-            ))}
-          </>
-        )}
-        {props.surface === "packages" &&
-          (props.phase === "failed" ||
-          props.phase === "sync-failed" ||
-          props.phase === "preparing" ? (
-            <SandboxStartupPanel />
-          ) : (
-            <SandboxFooter />
-          ))}
-      </div>
+      <SandboxPreview
+        props={props}
+        appConfig={appConfig}
+        reconnect={reconnect}
+      />
     </Provider>
   );
 }
@@ -239,6 +394,7 @@ const meta = {
     backend: "uv",
     saveResult: "success",
     theme: "light",
+    interactive: false,
   },
   render: (args, context) => (
     <SandboxStory
@@ -262,6 +418,14 @@ export const StartingKernel: Story = {
   name: "Startup notice / starting kernel",
   args: { phase: "starting" },
 };
+export const StartupTransition: Story = {
+  name: "Startup / completion transition",
+  args: { interactive: true, backend: "pixi" },
+};
+export const EmptyStartupTransition: Story = {
+  name: "Empty notebook / completion transition",
+  args: { interactive: true, existingCells: false, backend: "pixi" },
+};
 export const ExistingNotebookFailed: Story = {
   name: "Startup notice / failed",
   args: { phase: "failed" },
@@ -274,6 +438,14 @@ export const PackagesPreparing: Story = {
   name: "Setup details / preparing",
   args: { surface: "packages" },
 };
+export const PackagesStarting: Story = {
+  name: "Setup details / starting kernel",
+  args: { surface: "packages", phase: "starting" },
+};
+export const PackagesStartupTransition: Story = {
+  name: "Setup details / live output",
+  args: { surface: "packages", interactive: true },
+};
 export const PackagesFailed: Story = {
   name: "Setup details / failed",
   args: { surface: "packages", phase: "failed" },
@@ -290,6 +462,14 @@ export const PackagesSyncFailed: Story = {
   name: "Setup details / sync failed",
   args: { surface: "packages", phase: "sync-failed" },
 };
+export const PackagesSynced: Story = {
+  name: "Setup details / sync completed",
+  args: { surface: "packages", phase: "synced" },
+};
+export const PackagesRestartRequired: Story = {
+  name: "Setup details / restart required",
+  args: { surface: "packages", phase: "restart-required" },
+};
 export const PixiPackagesReady: Story = {
   name: "Status row / pixi",
   args: { surface: "packages", phase: "ready", backend: "pixi" },