@marimo-team/frontend 0.14.18-dev4 → 0.14.18-dev41

package/src/core/network/requests-static.ts

@@ -0,0 +1,88 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { toast } from "@/components/ui/use-toast";
+import { Logger } from "@/utils/Logger";
+import type { EditRequests, RunRequests } from "./types";
+
+export function createStaticRequests(): EditRequests & RunRequests {
+  const throwNotInEditMode = () => {
+    throw new Error("Unreachable. Expected to be in run mode");
+  };
+
+  return {
+    sendComponentValues: async () => {
+      toast({
+        title: "Static notebook",
+        description:
+          "This notebook is not connected to a kernel. Any interactive elements will not work.",
+      });
+      Logger.log("Updating UI elements is not supported in static mode");
+      return null;
+    },
+    sendModelValue: async () => {
+      Logger.log("Updating model values is not supported in static mode");
+      return null;
+    },
+    sendInstantiate: async () => {
+      Logger.log("Viewing as static notebook");
+      return null;
+    },
+    sendFunctionRequest: async () => {
+      toast({
+        title: "Static notebook",
+        description:
+          "This notebook is not connected to a kernel. Any interactive elements will not work.",
+      });
+      Logger.log("Function requests are not supported in static mode");
+      return null;
+    },
+    sendRestart: throwNotInEditMode,
+    syncCellIds: throwNotInEditMode,
+    sendRun: throwNotInEditMode,
+    sendRunScratchpad: throwNotInEditMode,
+    sendRename: throwNotInEditMode,
+    sendSave: throwNotInEditMode,
+    sendCopy: throwNotInEditMode,
+    sendInterrupt: throwNotInEditMode,
+    sendShutdown: throwNotInEditMode,
+    sendFormat: throwNotInEditMode,
+    sendDeleteCell: throwNotInEditMode,
+    sendCodeCompletionRequest: throwNotInEditMode,
+    saveUserConfig: throwNotInEditMode,
+    saveAppConfig: throwNotInEditMode,
+    saveCellConfig: throwNotInEditMode,
+    sendStdin: throwNotInEditMode,
+    readCode: throwNotInEditMode,
+    readSnippets: throwNotInEditMode,
+    previewDatasetColumn: throwNotInEditMode,
+    previewSQLTable: throwNotInEditMode,
+    previewSQLTableList: throwNotInEditMode,
+    previewDataSourceConnection: throwNotInEditMode,
+    openFile: throwNotInEditMode,
+    getUsageStats: throwNotInEditMode,
+    sendListFiles: throwNotInEditMode,
+    sendPdb: throwNotInEditMode,
+    sendCreateFileOrFolder: throwNotInEditMode,
+    sendDeleteFileOrFolder: throwNotInEditMode,
+    sendRenameFileOrFolder: throwNotInEditMode,
+    sendUpdateFile: throwNotInEditMode,
+    sendFileDetails: throwNotInEditMode,
+    openTutorial: throwNotInEditMode,
+    sendInstallMissingPackages: throwNotInEditMode,
+    getRecentFiles: throwNotInEditMode,
+    getWorkspaceFiles: throwNotInEditMode,
+    getRunningNotebooks: throwNotInEditMode,
+    shutdownSession: throwNotInEditMode,
+    exportAsHTML: throwNotInEditMode,
+    exportAsMarkdown: throwNotInEditMode,
+    autoExportAsHTML: throwNotInEditMode,
+    autoExportAsMarkdown: throwNotInEditMode,
+    autoExportAsIPYNB: throwNotInEditMode,
+    addPackage: throwNotInEditMode,
+    removePackage: throwNotInEditMode,
+    getPackageList: throwNotInEditMode,
+    getDependencyTree: throwNotInEditMode,
+    listSecretKeys: throwNotInEditMode,
+    writeSecret: throwNotInEditMode,
+    invokeAiTool: throwNotInEditMode,
+  };
+}

package/src/core/network/requests-toasting.ts

@@ -0,0 +1,91 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { toast } from "@/components/ui/use-toast";
+import { prettyError } from "@/utils/errors";
+import { Logger } from "@/utils/Logger";
+import type { EditRequests, RequestKey, RunRequests } from "./types";
+
+export function createErrorToastingRequests(
+  delegate: EditRequests & RunRequests,
+): EditRequests & RunRequests {
+  const MESSAGES: Record<RequestKey, string> = {
+    sendComponentValues: "Failed update value",
+    sendModelValue: "Failed to update model value",
+    sendInstantiate: "Failed to instantiate",
+    sendFunctionRequest: "Failed to send function request",
+    sendRestart: "Failed to restart",
+    syncCellIds: "Failed to sync cell IDs",
+    sendRun: "Failed to run",
+    sendRunScratchpad: "Failed to run scratchpad",
+    sendRename: "Failed to rename",
+    sendSave: "Failed to save",
+    sendCopy: "Failed to copy",
+    sendInterrupt: "Failed to interrupt",
+    sendShutdown: "Failed to shutdown",
+    sendFormat: "Failed to format",
+    sendDeleteCell: "Failed to delete cell",
+    sendCodeCompletionRequest: "Failed to complete code",
+    saveUserConfig: "Failed to save user config",
+    saveAppConfig: "Failed to save app config",
+    saveCellConfig: "Failed to save cell config",
+    sendStdin: "Failed to send stdin",
+    readCode: "Failed to read code",
+    readSnippets: "Failed to fetch snippets",
+    previewDatasetColumn: "Failed to fetch data sources",
+    previewSQLTable: "Failed to fetch SQL table",
+    previewSQLTableList: "Failed to fetch SQL table list",
+    previewDataSourceConnection: "Failed to preview data source connection",
+    openFile: "Failed to open file",
+    getUsageStats: "", // No toast
+    sendListFiles: "Failed to list files",
+    sendPdb: "Failed to start debug session",
+    sendCreateFileOrFolder: "Failed to create file or folder",
+    sendDeleteFileOrFolder: "Failed to delete file or folder",
+    sendRenameFileOrFolder: "Failed to rename file or folder",
+    sendUpdateFile: "Failed to update file",
+    sendFileDetails: "Failed to get file details",
+    openTutorial: "Failed to open tutorial",
+    sendInstallMissingPackages: "Failed to install missing packages",
+    getRecentFiles: "Failed to get recent files",
+    getWorkspaceFiles: "Failed to get workspace files",
+    getRunningNotebooks: "Failed to get running notebooks",
+    shutdownSession: "Failed to shutdown session",
+    exportAsHTML: "Failed to export HTML",
+    exportAsMarkdown: "Failed to export Markdown",
+    autoExportAsHTML: "", // No toast
+    autoExportAsMarkdown: "", // No toast
+    autoExportAsIPYNB: "", // No toast
+    addPackage: "Failed to add package",
+    removePackage: "Failed to remove package",
+    getPackageList: "Failed to get package list",
+    getDependencyTree: "Failed to get dependency tree",
+    listSecretKeys: "Failed to fetch secrets",
+    writeSecret: "Failed to write secret",
+    invokeAiTool: "Failed to invoke AI tool",
+  };
+
+  const handlers = {} as EditRequests & RunRequests;
+  for (const [key, handler] of Object.entries(delegate)) {
+    const keyString = key as RequestKey;
+    handlers[keyString] = async (...args: any[]) => {
+      try {
+        return await handler(...args);
+      } catch (error) {
+        const title = MESSAGES[keyString];
+        const message = prettyError(error);
+        if (title) {
+          toast({
+            title: title,
+            description: message,
+            variant: "danger",
+          });
+        }
+        Logger.error(`Failed to handle request: ${key}`, error);
+        // Rethrow the error so that the caller can handle it
+        throw error;
+      }
+    };
+  }
+
+  return handlers;
+}

package/src/core/network/requests.ts

@@ -0,0 +1,24 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { atom, useAtomValue } from "jotai";
+import { invariant } from "@/utils/invariant";
+import { store } from "../state/jotai";
+import type { EditRequests, RunRequests } from "./types";
+
+export const requestClientAtom = atom<null | (EditRequests & RunRequests)>(
+  null,
+);
+
+/** React hook for the request client interface */
+export function useRequestClient() {
+  const client = useAtomValue(requestClientAtom);
+  invariant(client, "useRequestClient() requires setting requestClientAtom.");
+  return client;
+}
+
+/** Imperative getter for the request client interface */
+export function getRequestClient() {
+  const client = store.get(requestClientAtom);
+  invariant(client, "getRequestClient() requires requestClientAtom to be set.");
+  return client;
+}

package/src/core/network/resolve.ts

@@ -0,0 +1,17 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { isStaticNotebook } from "../static/static-state";
+import { PyodideBridge } from "../wasm/bridge";
+import { isWasm } from "../wasm/utils";
+import { createNetworkRequests } from "./requests-network";
+import { createStaticRequests } from "./requests-static";
+import { createErrorToastingRequests } from "./requests-toasting";
+import type { EditRequests, RunRequests } from "./types";
+
+export function resolveRequestClient(): EditRequests & RunRequests {
+  const base = isWasm()
+    ? PyodideBridge.INSTANCE
+    : isStaticNotebook()
+      ? createStaticRequests()
+      : createNetworkRequests();
+  return createErrorToastingRequests(base);
+}

package/src/core/network/types.ts

@@ -0,0 +1,188 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import type { components, paths } from "@marimo-team/marimo-api";
+import type { CellId } from "../cells/ids";
+
+export type schemas = components["schemas"];
+export type AiCompletionRequest = schemas["AiCompletionRequest"];
+export type BaseResponse = schemas["BaseResponse"];
+export type CellConfig = schemas["CellConfig"];
+/**
+ * The status of a cell.
+ *
+ * queued: queued by the kernel.
+ * running: currently executing.
+ * idle: not running.
+ * disabled-transitively: disabled because an ancestor was disabled.
+ */
+export type RuntimeState = schemas["RuntimeState"];
+export type CodeCompletionRequest = schemas["CodeCompletionRequest"];
+export type DeleteCellRequest = schemas["DeleteCellRequest"];
+export type ExecuteMultipleRequest = schemas["ExecuteMultipleRequest"];
+export type ExecutionRequest = schemas["ExecutionRequest"];
+export type ExportAsHTMLRequest = schemas["ExportAsHTMLRequest"];
+export type ExportAsMarkdownRequest = schemas["ExportAsMarkdownRequest"];
+export type ExportAsIPYNBRequest = schemas["ExportAsIPYNBRequest"];
+export type ExportAsScriptRequest = schemas["ExportAsScriptRequest"];
+export type FileCreateRequest = schemas["FileCreateRequest"];
+export type FileCreateResponse = schemas["FileCreateResponse"];
+export type FileDeleteRequest = schemas["FileDeleteRequest"];
+export type FileDeleteResponse = schemas["FileDeleteResponse"];
+export type FileDetailsRequest = schemas["FileDetailsRequest"];
+export type FileDetailsResponse = schemas["FileDetailsResponse"];
+export type FileInfo = schemas["FileInfo"];
+export type FileListRequest = schemas["FileListRequest"];
+export type FileListResponse = schemas["FileListResponse"];
+export type FileMoveRequest = schemas["FileMoveRequest"];
+export type FileMoveResponse = schemas["FileMoveResponse"];
+export type FileUpdateRequest = schemas["FileUpdateRequest"];
+export type FileUpdateResponse = schemas["FileUpdateResponse"];
+export type FormatRequest = schemas["FormatRequest"];
+export type FormatResponse = schemas["FormatResponse"];
+export type FunctionCallRequest = schemas["FunctionCallRequest"];
+export type ListSecretKeysResponse = schemas["ListSecretKeysResponse"];
+export type InstallMissingPackagesRequest =
+  schemas["InstallMissingPackagesRequest"];
+export type AddPackageRequest = schemas["AddPackageRequest"];
+export type RemovePackageRequest = schemas["RemovePackageRequest"];
+export type ListPackagesResponse = schemas["ListPackagesResponse"];
+export type DependencyTreeResponse = schemas["DependencyTreeResponse"];
+export type DependencyTreeNode = schemas["DependencyTreeNode"];
+
+export type PackageOperationResponse = schemas["PackageOperationResponse"];
+export type InstantiateRequest = schemas["InstantiateRequest"];
+export type MarimoConfig = schemas["MarimoConfig"];
+export type MarimoFile = schemas["MarimoFile"];
+export type ListSecretKeysRequest = schemas["ListSecretKeysRequest"];
+export type CreateSecretRequest = schemas["CreateSecretRequest"];
+export type PreviewDatasetColumnRequest =
+  schemas["PreviewDatasetColumnRequest"];
+export type PreviewSQLTableRequest = schemas["PreviewSQLTableRequest"];
+export type PreviewSQLTableListRequest = schemas["PreviewSQLTableListRequest"];
+export type PreviewDataSourceConnectionRequest =
+  schemas["PreviewDataSourceConnectionRequest"];
+export type PdbRequest = schemas["PdbRequest"];
+export type ReadCodeResponse = schemas["ReadCodeResponse"];
+export type RecentFilesResponse = schemas["RecentFilesResponse"];
+export type RenameFileRequest = schemas["RenameFileRequest"];
+export type RunRequest = schemas["RunRequest"];
+export type ExecuteScratchpadRequest = schemas["ExecuteScratchpadRequest"];
+export type SaveAppConfigurationRequest =
+  schemas["SaveAppConfigurationRequest"];
+export type SaveNotebookRequest = schemas["SaveNotebookRequest"];
+export type CopyNotebookRequest = schemas["CopyNotebookRequest"];
+export type SaveUserConfigurationRequest =
+  schemas["SaveUserConfigurationRequest"];
+export interface SetCellConfigRequest {
+  configs: Record<CellId, Partial<CellConfig>>;
+}
+export type SetUIElementValueRequest = schemas["SetUIElementValueRequest"];
+export type SetModelMessageRequest = schemas["SetModelMessageRequest"];
+export type UpdateCellIdsRequest = schemas["UpdateCellIdsRequest"];
+export type SetUserConfigRequest = schemas["SetUserConfigRequest"];
+export type ShutdownSessionRequest = schemas["ShutdownSessionRequest"];
+export type Snippet = schemas["Snippet"];
+export type SnippetSection = schemas["SnippetSection"];
+export type Snippets = schemas["Snippets"];
+export type StdinRequest = schemas["StdinRequest"];
+export type SuccessResponse = schemas["SuccessResponse"];
+export type UpdateComponentValuesRequest =
+  schemas["UpdateComponentValuesRequest"];
+export type UsageResponse =
+  paths["/api/usage"]["get"]["responses"]["200"]["content"]["application/json"];
+export type WorkspaceFilesRequest = schemas["WorkspaceFilesRequest"];
+export type WorkspaceFilesResponse = schemas["WorkspaceFilesResponse"];
+export type RunningNotebooksResponse = schemas["RunningNotebooksResponse"];
+export type OpenTutorialRequest = schemas["OpenTutorialRequest"];
+export type TutorialId = OpenTutorialRequest["tutorialId"];
+export type InvokeAiToolRequest = schemas["InvokeAiToolRequest"];
+export type InvokeAiToolResponse = schemas["InvokeAiToolResponse"];
+
+/**
+ * Requests sent to the BE during run/edit mode.
+ */
+export interface RunRequests {
+  sendComponentValues: (request: UpdateComponentValuesRequest) => Promise<null>;
+  sendModelValue: (request: SetModelMessageRequest) => Promise<null>;
+  sendInstantiate: (request: InstantiateRequest) => Promise<null>;
+  sendFunctionRequest: (request: FunctionCallRequest) => Promise<null>;
+}
+
+/**
+ * Requests sent to the BE during edit mode.
+ */
+export interface EditRequests {
+  sendRename: (request: RenameFileRequest) => Promise<null>;
+  sendSave: (request: SaveNotebookRequest) => Promise<null>;
+  sendCopy: (request: CopyNotebookRequest) => Promise<null>;
+  sendStdin: (request: StdinRequest) => Promise<null>;
+  sendRun: (request: RunRequest) => Promise<null>;
+  sendRunScratchpad: (request: ExecuteScratchpadRequest) => Promise<null>;
+  sendInterrupt: () => Promise<null>;
+  sendShutdown: () => Promise<null>;
+  sendFormat: (request: FormatRequest) => Promise<FormatResponse>;
+  sendDeleteCell: (request: DeleteCellRequest) => Promise<null>;
+  sendCodeCompletionRequest: (request: CodeCompletionRequest) => Promise<null>;
+  saveUserConfig: (request: SaveUserConfigurationRequest) => Promise<null>;
+  saveAppConfig: (request: SaveAppConfigurationRequest) => Promise<null>;
+  saveCellConfig: (request: SetCellConfigRequest) => Promise<null>;
+  sendRestart: () => Promise<null>;
+  syncCellIds: (request: UpdateCellIdsRequest) => Promise<null>;
+  sendInstallMissingPackages: (
+    request: InstallMissingPackagesRequest,
+  ) => Promise<null>;
+  readCode: () => Promise<{ contents: string }>;
+  readSnippets: () => Promise<Snippets>;
+  previewDatasetColumn: (request: PreviewDatasetColumnRequest) => Promise<null>;
+  previewSQLTable: (request: PreviewSQLTableRequest) => Promise<null>;
+  previewSQLTableList: (request: PreviewSQLTableListRequest) => Promise<null>;
+  previewDataSourceConnection: (
+    request: PreviewDataSourceConnectionRequest,
+  ) => Promise<null>;
+  openFile: (request: { path: string }) => Promise<null>;
+  getUsageStats: () => Promise<UsageResponse>;
+  // Debugger
+  sendPdb: (request: PdbRequest) => Promise<null>;
+  // File explorer requests
+  sendListFiles: (request: FileListRequest) => Promise<FileListResponse>;
+  sendCreateFileOrFolder: (
+    request: FileCreateRequest,
+  ) => Promise<FileCreateResponse>;
+  sendDeleteFileOrFolder: (
+    request: FileDeleteRequest,
+  ) => Promise<FileDeleteResponse>;
+  sendRenameFileOrFolder: (
+    request: FileMoveRequest,
+  ) => Promise<FileMoveResponse>;
+  sendUpdateFile: (request: FileUpdateRequest) => Promise<FileUpdateResponse>;
+  sendFileDetails: (request: { path: string }) => Promise<FileDetailsResponse>;
+  // Homepage requests
+  openTutorial: (request: OpenTutorialRequest) => Promise<MarimoFile>;
+  getRecentFiles: () => Promise<RecentFilesResponse>;
+  getWorkspaceFiles: (
+    request: WorkspaceFilesRequest,
+  ) => Promise<WorkspaceFilesResponse>;
+  getRunningNotebooks: () => Promise<RunningNotebooksResponse>;
+  shutdownSession: (
+    request: ShutdownSessionRequest,
+  ) => Promise<RunningNotebooksResponse>;
+  // Export requests
+  exportAsHTML: (request: ExportAsHTMLRequest) => Promise<string>;
+  exportAsMarkdown: (request: ExportAsMarkdownRequest) => Promise<string>;
+  autoExportAsHTML: (request: ExportAsHTMLRequest) => Promise<null>;
+  autoExportAsMarkdown: (request: ExportAsMarkdownRequest) => Promise<null>;
+  autoExportAsIPYNB: (request: ExportAsIPYNBRequest) => Promise<null>;
+  // Package requests
+  getPackageList: () => Promise<ListPackagesResponse>;
+  getDependencyTree: () => Promise<DependencyTreeResponse>;
+  addPackage: (request: AddPackageRequest) => Promise<PackageOperationResponse>;
+  removePackage: (
+    request: RemovePackageRequest,
+  ) => Promise<PackageOperationResponse>;
+  // Secrets requests
+  listSecretKeys: (request: ListSecretKeysRequest) => Promise<null>;
+  writeSecret: (request: CreateSecretRequest) => Promise<null>;
+  // AI Tool requests
+  invokeAiTool: (request: InvokeAiToolRequest) => Promise<InvokeAiToolResponse>;
+}
+
+export type RequestKey = keyof (EditRequests & RunRequests);

package/src/core/packages/toast-components.tsx

@@ -0,0 +1,88 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { Kbd } from "@/components/ui/kbd";
+import { toast } from "@/components/ui/use-toast";
+
+export const showAddPackageToast = (
+  packageName: string,
+  error?: string | null,
+) => {
+  if (error) {
+    toast({
+      title: "Failed to add package",
+      description: error,
+      variant: "danger",
+    });
+  } else {
+    toast({
+      title: "Package added",
+      description: (
+        <div>
+          <div>
+            The package <Kbd className="inline">{packageName}</Kbd> and its
+            dependencies has been added to your environment.
+          </div>
+          <div className="text-xs text-muted-foreground mt-1">
+            Some Python packages may require a kernel restart to see changes.
+          </div>
+        </div>
+      ),
+    });
+  }
+};
+
+export const showUpgradePackageToast = (
+  packageName: string,
+  error?: string | null,
+) => {
+  if (error) {
+    toast({
+      title: "Failed to upgrade package",
+      description: error,
+      variant: "danger",
+    });
+  } else {
+    toast({
+      title: "Package upgraded",
+      description: (
+        <div>
+          <div>
+            The package <Kbd className="inline">{packageName}</Kbd> has been
+            upgraded.
+          </div>
+          <div className="text-xs text-muted-foreground mt-1">
+            Some Python packages may require a kernel restart to see changes.
+          </div>
+        </div>
+      ),
+    });
+  }
+};
+
+export const showRemovePackageToast = (
+  packageName: string,
+  error?: string | null,
+) => {
+  if (error) {
+    toast({
+      title: "Failed to remove package",
+      description: error,
+      variant: "danger",
+    });
+  } else {
+    toast({
+      title: "Package removed",
+      description: (
+        <div>
+          <div>
+            The package <Kbd className="inline">{packageName}</Kbd> has been
+            removed from your environment.
+          </div>
+          <div className="text-xs text-muted-foreground mt-1">
+            Some Python packages may require a kernel restart to see changes.
+          </div>
+        </div>
+      ),
+    });
+  }
+};

package/src/core/packages/useInstallPackage.ts

@@ -0,0 +1,46 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useState } from "react";
+import { Logger } from "@/utils/Logger";
+import { useRequestClient } from "../network/requests";
+import { showAddPackageToast } from "./toast-components";
+
+export function useInstallPackages(): {
+  handleInstallPackages: (
+    packages: string[],
+    onSuccess?: () => void,
+  ) => Promise<void>;
+  loading: boolean;
+} {
+  const [loading, setLoading] = useState(false);
+  const { addPackage } = useRequestClient();
+
+  const handleInstallPackages = async (
+    packages: string[],
+    onSuccess?: () => void,
+  ) => {
+    setLoading(true);
+
+    try {
+      for (const [idx, packageName] of packages.entries()) {
+        const response = await addPackage({ package: packageName });
+        if (response.success) {
+          showAddPackageToast(packageName);
+        } else {
+          showAddPackageToast(packageName, response.error);
+        }
+        // Wait 1s if there are more packages to install
+        if (idx < packages.length - 1) {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }
+      }
+      onSuccess?.();
+    } catch (error) {
+      Logger.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { loading, handleInstallPackages };
+}

package/src/core/rtc/state.ts

@@ -0,0 +1,20 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { atomWithStorage } from "jotai/utils";
+import { once } from "lodash-es";
+import { getFeatureFlag } from "../config/feature-flag";
+
+/**
+ * The username for the current user when using real-time collaboration.
+ * This is stored in localStorage.
+ */
+export const usernameAtom = atomWithStorage<string>("marimo:rtc:username", "");
+
+/**
+ * Whether RTC is enabled.
+ *
+ * This is cached on page-load because this UI can get into
+ * weird states, so we require a page reload to take effect.
+ */
+export const isRtcEnabled = once(() => {
+  return getFeatureFlag("rtc_v2");
+});

package/src/core/run-app.tsx

@@ -0,0 +1,69 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { AppContainer } from "@/components/editor/app-container";
+import { AppHeader } from "@/components/editor/header/app-header";
+import { Spinner } from "@/components/icons/spinner";
+import { DelayMount } from "@/components/utils/delay-mount";
+import { CellsRenderer } from "../components/editor/renderers/cells-renderer";
+import { notebookIsRunningAtom, useCellActions } from "./cells/cells";
+import type { AppConfig } from "./config/config-schema";
+import { RuntimeState } from "./kernel/RuntimeState";
+import { getSessionId } from "./kernel/session";
+import { useRequestClient } from "./network/requests";
+import { isAppConnecting } from "./websocket/connection-utils";
+import { useMarimoWebSocket } from "./websocket/useMarimoWebSocket";
+
+interface AppProps {
+  appConfig: AppConfig;
+}
+
+export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
+  const { setCells } = useCellActions();
+  const { sendComponentValues } = useRequestClient();
+
+  // Initialize RuntimeState event-listeners
+  useEffect(() => {
+    RuntimeState.INSTANCE.start(sendComponentValues);
+    return () => {
+      RuntimeState.INSTANCE.stop();
+    };
+  }, []);
+
+  const { connection } = useMarimoWebSocket({
+    autoInstantiate: true,
+    setCells: setCells,
+    sessionId: getSessionId(),
+  });
+
+  const isRunning = useAtomValue(notebookIsRunningAtom);
+  const isConnecting = isAppConnecting(connection.state);
+
+  const renderCells = () => {
+    // If we are connecting for more than 2 seconds, show a spinner
+    if (isConnecting) {
+      return (
+        <DelayMount milliseconds={2000} fallback={null}>
+          <Spinner className="mx-auto" />
+          <p className="text-center text-sm text-muted-foreground mt-2">
+            Connecting...
+          </p>
+        </DelayMount>
+      );
+    }
+
+    return <CellsRenderer appConfig={appConfig} mode="read" />;
+  };
+
+  return (
+    <AppContainer
+      connection={connection}
+      isRunning={isRunning}
+      width={appConfig.width}
+    >
+      <AppHeader connection={connection} className={"sm:pt-8"} />
+      {renderCells()}
+    </AppContainer>
+  );
+};