From 550b3ad187356d4480454a306d14c655e1d480a0 Mon Sep 17 00:00:00 2001
From: Eric Charles <eric@datalayer.io>
Date: Tue, 8 Oct 2024 10:18:03 +0200
Subject: [PATCH] Mutations Example (#318)

* chore: mutatoins

* chore: notebook mutations

* chore: mutations

* chore: mutations

* example: mutating notebook

* chore: datalayer kernel provider

* Automatic application of license header

* chore: credits config

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 docs/docusaurus.config.js                     | 325 +++++++++---------
 docs/package.json                             |  19 +-
 docs/src/components/HomepageFeatures.js       |   2 +-
 packages/react/public/index-local.html        |   6 +-
 packages/react/public/index.html              |   7 +-
 packages/react/src/components/index.ts        |   1 +
 .../react/src/components/lumino/Lumino.tsx    |   2 +-
 .../src/components/notebook/Notebook.tsx      | 154 +++++----
 .../components/notebook/NotebookAdapter.ts    | 128 ++++---
 .../src/components/notebook/NotebookState.ts  |  15 +-
 .../notebook/cell/sidebar/CellSidebar.tsx     |  12 +-
 .../src/components/utils/SpinnerCentered.tsx  |  31 ++
 packages/react/src/components/utils/index.ts  |   7 +
 packages/react/src/examples/NotebookLite.tsx  |  11 +-
 .../src/examples/NotebookLiteContext.tsx      |  35 ++
 .../react/src/examples/NotebookMutations.tsx  | 165 ++++++---
 packages/react/src/index.ts                   |   1 +
 packages/react/src/jupyter/JupyterConfig.ts   |  60 ++--
 .../react/src/jupyter/JupyterDefaults.tsx     |   5 +
 packages/react/src/jupyter/kernel/Kernel.ts   |  54 +--
 .../jupyter/services/ServiceManagerLess.ts    | 134 +++-----
 .../jupyter/services/ServiceManagerLite.ts    |  18 +-
 packages/react/src/providers/index.ts         |   7 +
 .../src/providers/kernels/DatalayerKernels.ts |  87 +++++
 packages/react/src/providers/kernels/index.ts |   7 +
 packages/react/src/state/IDatalayerConfig.ts  |  28 ++
 .../react/src/state/IJupyterReactConfig.ts    |  12 -
 packages/react/src/state/JupyterReactState.ts |  84 ++---
 packages/react/src/state/index.ts             |   2 +-
 packages/react/webpack.config.js              |   5 +-
 30 files changed, 860 insertions(+), 564 deletions(-)
 create mode 100644 packages/react/src/components/utils/SpinnerCentered.tsx
 create mode 100644 packages/react/src/components/utils/index.ts
 create mode 100644 packages/react/src/examples/NotebookLiteContext.tsx
 create mode 100755 packages/react/src/providers/index.ts
 create mode 100755 packages/react/src/providers/kernels/DatalayerKernels.ts
 create mode 100755 packages/react/src/providers/kernels/index.ts
 create mode 100644 packages/react/src/state/IDatalayerConfig.ts
 delete mode 100644 packages/react/src/state/IJupyterReactConfig.ts

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index bacfa910..3a0e57f8 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -20,7 +20,8 @@ module.exports = {
   projectName: 'Jupyter UI',
   plugins: [
     '@datalayer/jupyter-docusaurus-plugin',
-    '@docusaurus/theme-live-codeblock'
+    '@docusaurus/theme-live-codeblock',
+    'docusaurus-lunr-search',
   ],
   /*
 			'docusaurus-plugin-typedoc',
@@ -29,163 +30,173 @@ module.exports = {
         tsconfig: '../tsconfig.json',
 			},
   */
-  themeConfig: {
-    colorMode: {
-      defaultMode: 'light',
-      disableSwitch: true,
-    },
-    liveCodeBlock: {
-      playgroundPosition: 'bottom',
-    },
-    navbar: {
-      title: 'Jupyter UI',
-      logo: {
-        alt: 'Datalayer Logo',
-        src: 'img/datalayer/logo.svg',
+    themes: [
+      '@docusaurus/theme-mermaid',
+    ],
+    themeConfig: {
+      colorMode: {
+        defaultMode: 'light',
+        disableSwitch: true,
+      },
+      prism: {
+        additionalLanguages: ['bash'],
+      },
+      liveCodeBlock: {
+        playgroundPosition: 'bottom',
+      },
+      navbar: {
+        title: 'Jupyter UI',
+        logo: {
+          alt: 'Datalayer Logo',
+          src: 'img/datalayer/logo.svg',
+        },
+        items: [
+          {
+            type: 'doc',
+            docId: 'about/index',
+            position: 'left',
+            label: 'About',
+          },
+          {
+            type: 'doc',
+            docId: '/category/develop',
+            position: 'left',
+            label: 'Develop',
+          },
+          {
+            type: 'doc',
+            docId: '/category/components',
+            position: 'left',
+            label: 'Components',
+          },
+          {
+            type: 'doc',
+            docId: '/category/state',
+            position: 'left',
+            label: 'State',
+          },
+          {
+            type: 'doc',
+            docId: '/category/deployments',
+            position: 'left',
+            label: 'Deployments',
+          },
+          {
+            type: 'doc',
+            docId: '/category/examples',
+            position: 'left',
+            label: 'Examples',
+          },
+          {
+            type: 'doc',
+            docId: '/category/integrations',
+            position: 'left',
+            label: 'Integrations',
+          },
+          {
+            type: 'doc',
+            docId: '/category/themes',
+            position: 'left',
+            label: 'Themes',
+          },
+          {
+            type: 'doc',
+            docId: '/category/demos',
+            position: 'left',
+            label: 'Demos',
+          },
+          {
+            type: 'doc',
+            docId: 'resources/index',
+            position: 'left',
+            label: 'Resources',
+          },
+          {
+            type: 'doc',
+            docId: 'support/index',
+            position: 'left',
+            label: 'Support',
+          },
+          {
+            type: 'doc',
+            docId: 'license/index',
+            position: 'left',
+            label: 'License',
+          },
+          {
+            href: 'https://www.linkedin.com/company/datalayer',
+            position: 'right',
+            className: 'header-linkedin-link',
+            'aria-label': 'Linkedin',
+          },
+          {
+            href: 'https://x.com/DatalayerIO',
+            position: 'right',
+            className: 'header-x-link',
+            'aria-label': 'X',
+          },
+          {
+            href: 'https://github.com/datalayer/jupyter-ui',
+            position: 'right',
+            className: 'header-github-link',
+            'aria-label': 'GitHub repository',
+          },
+          {
+            href: 'https://datalayer.tech',
+            position: 'right',
+            className: 'header-datalayer-io-link',
+            'aria-label': 'Datalayer Tech',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        links: [
+          {
+            title: 'Community',
+            items: [
+              {
+                label: 'GitHub',
+                href: 'https://github.com/datalayer',
+              },
+              {
+                label: 'X',
+                href: 'https://x.com/datalayerio',
+              },
+              {
+                label: 'Linkedin',
+                href: 'https://www.linkedin.com/company/datalayer',
+              },
+            ],
+          },
+          {
+            title: 'More',
+            items: [
+              {
+                label: 'Datalayer',
+                href: 'https://datalayer.io',
+              },
+              {
+                label: 'Datalayer Docs',
+                href: 'https://docs.datalayer.io',
+              },
+              {
+                label: 'Datalayer Tech',
+                href: 'https://datalayer.tech',
+              },
+              {
+                label: 'Datalayer Guide',
+                href: 'https://datalayer.guide',
+              },
+              {
+                label: 'Datalayer Blog',
+                href: 'https://datalayer.blog',
+              },
+            ],
+          }
+        ],
+        copyright: `Copyright © ${new Date().getFullYear()} Datalayer, Inc.`,
       },
-      items: [
-        {
-          type: 'doc',
-          docId: 'about/index',
-          position: 'left',
-          label: 'About',
-        },
-        {
-          type: 'doc',
-          docId: '/category/develop',
-          position: 'left',
-          label: 'Develop',
-        },
-        {
-          type: 'doc',
-          docId: '/category/components',
-          position: 'left',
-          label: 'Components',
-        },
-        {
-          type: 'doc',
-          docId: '/category/state',
-          position: 'left',
-          label: 'State',
-        },
-        {
-          type: 'doc',
-          docId: '/category/deployments',
-          position: 'left',
-          label: 'Deployments',
-        },
-        {
-          type: 'doc',
-          docId: '/category/examples',
-          position: 'left',
-          label: 'Examples',
-        },
-        {
-          type: 'doc',
-          docId: '/category/integrations',
-          position: 'left',
-          label: 'Integrations',
-        },
-        {
-          type: 'doc',
-          docId: '/category/themes',
-          position: 'left',
-          label: 'Themes',
-        },
-        {
-          type: 'doc',
-          docId: '/category/demos',
-          position: 'left',
-          label: 'Demos',
-        },
-        {
-          type: 'doc',
-          docId: 'resources/index',
-          position: 'left',
-          label: 'Resources',
-        },
-        {
-          type: 'doc',
-          docId: 'support/index',
-          position: 'left',
-          label: 'Support',
-        },
-        {
-          type: 'doc',
-          docId: 'license/index',
-          position: 'left',
-          label: 'License',
-        },
-        {
-          href: 'https://www.linkedin.com/company/datalayer',
-          position: 'right',
-          className: 'header-linkedin-link',
-          'aria-label': 'Linkedin',
-        },
-        {
-          href: 'https://x.com/DatalayerIO',
-          position: 'right',
-          className: 'header-x-link',
-          'aria-label': 'X',
-        },
-        {
-          href: 'https://github.com/datalayer/jupyter-ui',
-          position: 'right',
-          className: 'header-github-link',
-          'aria-label': 'GitHub repository',
-        },
-        {
-          href: 'https://datalayer.tech',
-          position: 'right',
-          className: 'header-datalayer-io-link',
-          'aria-label': 'Datalayer Tech',
-        },
-      ],
-    },
-    footer: {
-      style: 'dark',
-      links: [
-        {
-          title: 'Community',
-          items: [
-            {
-              label: 'GitHub',
-              href: 'https://github.com/datalayer',
-            },
-            {
-              label: 'X',
-              href: 'https://x.com/datalayerio',
-            },
-            {
-              label: 'Linkedin',
-              href: 'https://www.linkedin.com/company/datalayer',
-            },
-          ],
-        },
-        {
-          title: 'More',
-          items: [
-            {
-              label: 'Datalayer',
-              href: 'https://datalayer.io',
-            },
-            {
-              label: 'Datalayer Tech',
-              href: 'https://datalayer.tech',
-            },
-            {
-              label: 'Datalayer Guide',
-              href: 'https://datalayer.guide',
-            },
-            {
-              label: 'Datalayer Blog',
-              href: 'https://datalayer.blog',
-            },
-           ],
-        }
-      ],
-      copyright: `Copyright © ${new Date().getFullYear()} Datalayer, Inc.`,
-    },
   },
   presets: [
     [
diff --git a/docs/package.json b/docs/package.json
index f1a89eca..490b50a1 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "build": "docusaurus build",
+    "build": "cross-env USE_SIMPLE_CSS_MINIFIER=true docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -16,11 +16,14 @@
   },
   "dependencies": {
     "@datalayer/jupyter-docusaurus-plugin": "^0.1.1",
-    "@docusaurus/core": "2.4.0",
-    "@docusaurus/preset-classic": "2.4.0",
-    "@docusaurus/theme-live-codeblock": "2.4.0",
-    "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
+    "@docusaurus/core": "3.4.0",
+    "@docusaurus/preset-classic": "3.4.0",
+    "@docusaurus/theme-live-codeblock": "3.4.0",
+    "@docusaurus/theme-mermaid": "3.4.0",
+    "@mdx-js/react": "^3.0.1",
+    "@primer/react-brand": "0.37.0-rc.ab1bfc11",
+    "clsx": "^2.1.1",
+    "docusaurus-lunr-search": "3.5.0",
     "docusaurus-plugin-typedoc": "~0.17.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -29,7 +32,9 @@
     "typedoc-plugin-markdown": "^3.13.5"
   },
   "devDependencies": {
-    "@types/node": "^18.15.3",
+    "@docusaurus/module-type-aliases": "3.4.0",
+    "@tsconfig/docusaurus": "2.0.3",
+    "cross-env": "^7.0.3",
     "typescript": "~5.0.3"
   },
   "browserslist": {
diff --git a/docs/src/components/HomepageFeatures.js b/docs/src/components/HomepageFeatures.js
index d612c090..bd98d536 100644
--- a/docs/src/components/HomepageFeatures.js
+++ b/docs/src/components/HomepageFeatures.js
@@ -14,7 +14,7 @@ const FeatureList = [
     Svg: require('../../static/img/target.svg').default,
     description: (
       <>
-        Jupyter UI lets you focus on your work, and we&apos;ll do the chores. Check the <a href="https://datalayer.tech/docs/support" target="_blank" style={{ textDecoration: "underline" }}>support options</a>.
+        Jupyter UI lets you focus on your work, and we&apos;ll do the chores. Check the <a href="https://datalayer.tech/docs/services/support" target="_blank" style={{ textDecoration: "underline" }}>support options</a>.
       </>
     ),
   },
diff --git a/packages/react/public/index-local.html b/packages/react/public/index-local.html
index ecf913c7..a882b318 100755
--- a/packages/react/public/index-local.html
+++ b/packages/react/public/index-local.html
@@ -12,7 +12,11 @@
   <script id="datalayer-config-data" type="application/json">
     {
       "jupyterServerUrl": "http://localhost:8686/api/jupyter-server",
-      "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+      "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+      "runUrl": "https://oss.datalayer.run",
+      "token": "",
+      "cpuEnvironment": "python-simple-env",
+      "gpuEnvironment": "pytorch-cuda-env"
     }
   </script>
   <script id="jupyter-config-data" type="application/json">
diff --git a/packages/react/public/index.html b/packages/react/public/index.html
index d2557dad..a853e74d 100755
--- a/packages/react/public/index.html
+++ b/packages/react/public/index.html
@@ -12,7 +12,12 @@
   <script id="datalayer-config-data" type="application/json">
     {
       "jupyterServerUrl": "https://oss.datalayer.run/api/jupyter-server",
-      "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+      "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+      "runUrl": "https://prod1.datalayer.run",
+      "token": "",
+      "cpuEnvironment": "python-simple-env",
+      "gpuEnvironment": "pytorch-cuda-env",
+      "credits": 1
     }
   </script>
   <script id="jupyter-config-data" type="application/json">
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index ab6f6fde..e33347c4 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -21,4 +21,5 @@ export * from './output';
 export * from './settings';
 export * from './terminal';
 export * from './textinput';
+export * from './utils';
 export * from './viewer';
diff --git a/packages/react/src/components/lumino/Lumino.tsx b/packages/react/src/components/lumino/Lumino.tsx
index e726bcf2..9d25fb01 100644
--- a/packages/react/src/components/lumino/Lumino.tsx
+++ b/packages/react/src/components/lumino/Lumino.tsx
@@ -33,7 +33,7 @@ export const Lumino = (props: LuminoProps) => {
           }
         } catch (e) {
           // no-op.
-          // console.debug('Exception while detaching Lumino widget.', e);
+//          console.debug('Exception while detaching Lumino widget.', e);
         }
       };
     }
diff --git a/packages/react/src/components/notebook/Notebook.tsx b/packages/react/src/components/notebook/Notebook.tsx
index 5fd260a8..4553f97b 100644
--- a/packages/react/src/components/notebook/Notebook.tsx
+++ b/packages/react/src/components/notebook/Notebook.tsx
@@ -49,6 +49,14 @@ export type INotebookProps = {
   serverless: boolean,
   serviceManager?: ServiceManager.IManager,
   url?: string;
+  /**
+   * The Kernel Id to use, as defined in the Kernel API
+   */
+  useRunningKernelId?: string;
+  /**
+   * The index (aka position) of the Kernel to use in the list of kernels.
+   */
+  useRunningKernelIndex?: number;
 };
 
 /**
@@ -63,6 +71,8 @@ export const Notebook = (props: INotebookProps) => {
     lite: props.lite,
     serverless: props.serverless,
     serviceManager: props.serviceManager,
+    useRunningKernelId: props.useRunningKernelId,
+    useRunningKernelIndex: props.useRunningKernelIndex,
   });
   const {
     Toolbar,
@@ -72,33 +82,33 @@ export const Notebook = (props: INotebookProps) => {
     nbgrader,
     path,
     readonly,
-    url,
     serverless,
+    url,
   } = props;
-  const notebookStore = useNotebookStore();
   const [id, _] = useState(props.id || newUuid());
   const [adapter, setAdapter] = useState<NotebookAdapter>();
+  const [flipflop, setFlipflop] = useState(true);
   const kernel = props.kernel ?? defaultKernel;
+  const notebookStore = useNotebookStore();
   const portals = notebookStore.selectNotebookPortals(id);
-  const bootstrapAdapter = () => {
-    const adapter = new NotebookAdapter(
-      {
-        ...props,
-        id,
-        lite,
-        kernel,
-        serviceManager,
-      }
-    );
-    console.log('Notebook Adapter is created', adapter);
+  //
+  const bootstrapAdapter = (serviceManager?: ServiceManager.IManager, kernel?: Kernel) => {
+    const adapter = new NotebookAdapter({
+      ...props,
+      id,
+      lite,
+      kernel,
+      serviceManager,
+    });
+    console.log('Notebook Adapter is bootstraping...', adapter.serviceManager);
     // Update the local state.
     setAdapter(adapter);
     // Update the global state.
     notebookStore.update({ id, state: { adapter } });
     // Update the global state based on events.
-    adapter.notebookPanel?.model?.contentChanged.connect(
-      (notebookModel, _) => { notebookStore.changeModel({ id, notebookModel }) }
-    );
+    adapter.notebookPanel?.model?.contentChanged.connect((notebookModel, _) => {
+      notebookStore.changeModel({ id, notebookModel })
+    });
     /*
     adapter.notebookPanel?.model!.sharedModel.changed.connect((_, notebookChange) => {
       notebookStore.notebookChange({ id, notebookChange });
@@ -108,17 +118,16 @@ export const Notebook = (props: INotebookProps) => {
     });
     */
     adapter.notebookPanel?.content.activeCellChanged.connect((_, cellModel) => {
-        if (cellModel === null) {
-          notebookStore.activeCellChange({ id, cellModel: undefined });
-        } else {
-          notebookStore.activeCellChange({ id, cellModel });
-        }
+      if (cellModel === null) {
+        notebookStore.activeCellChange({ id, cellModel: undefined });
+      } else {
+        notebookStore.activeCellChange({ id, cellModel });
       }
-    );
+    });
     adapter.notebookPanel?.sessionContext.statusChanged.connect((_, kernelStatus) => {
       notebookStore.changeKernelStatus({ id, kernelStatus });
     });
-    // Add more behavior for the UI.
+    // Add more UI behavior when the Service Manager is ready...
     adapter.serviceManager.ready.then(() => {
       if (!readonly) {
         const cellModel = adapter.notebookPanel!.content.activeCell;
@@ -146,73 +155,88 @@ export const Notebook = (props: INotebookProps) => {
       }
     });
   }
-  const createAdapter = (kernel?: Kernel) => {
+  //
+  const createAdapter = (serviceManager?: ServiceManager.IManager, kernel?: Kernel) => {
     if (!kernel) {
-      bootstrapAdapter();
+      bootstrapAdapter(serviceManager, kernel);
     } else {
       kernel.ready.then(() => {
-        bootstrapAdapter();
+        bootstrapAdapter(serviceManager, kernel);
       });
     }
   }
   const disposeAdapter = () => {
-    if (adapter) {
-      notebookStore.dispose(id);
-      setAdapter(undefined);
-    }
+    adapter?.notebookPanel?.disposed.connect((slot, _) => {
+      if (adapter) {
+        notebookStore.dispose(id);
+        setAdapter(undefined);
+      }
+    });
+    adapter?.notebookPanel?.dispose();
   }
+  // Mutation Effects.
   useEffect(() => {
-    return () => {
-      disposeAdapter();
+    if (serviceManager) {
+      if (kernel || serverless || lite) {
+        if (adapter) {
+          setAdapter(undefined);
+          setFlipflop(false);
+        }
+        else {
+          createAdapter(serviceManager, kernel);
+        }
+      }
     }
-  }, []);
+  }, [serviceManager, kernel, lite]);
   useEffect(() => {
-    /*
-    if (adapter && (adapter.lite !== lite || adapter.serviceManager !== serviceManager)) {
-      if (adapter) {
-        adapter.setServiceManager(serviceManager!, lite!);
-      } else {
-        createAdapter(kernel);
-      }
-    } else
-    */
-    if (serviceManager && (kernel || serverless)) {
-      if (adapter) {
-        disposeAdapter();
-      }
-      createAdapter(kernel);
+    if (!flipflop) {
+      setFlipflop(true);
+      createAdapter(serviceManager, kernel);
+    }
+  }, [flipflop]);
+  useEffect(() => {
+    if (adapter && adapter.kernel !== kernel) {
+      adapter.setKernel(kernel);
+    }
+  }, [kernel]);
+  useEffect(() => {
+    if (adapter && adapter.readonly !== readonly) {
+      adapter.setReadonly(readonly);
+    }
+  }, [readonly]);
+  useEffect(() => {
+    if (adapter && adapter.serverless !== serverless) {
+      adapter.setServerless(serverless);
     }
-  }, [serviceManager, kernel, serverless, lite]);
+  }, [serverless]);
   useEffect(() => {
-    if (adapter && nbformat && adapter.nbformat !== nbformat) {
+    if (adapter && adapter.nbformat !== nbformat) {
       adapter.setNbformat(nbformat);
     }
   }, [nbformat]);
   useEffect(() => {
     if (adapter && path && adapter.path !== path) {
       disposeAdapter();
-      createAdapter();
+      createAdapter(serviceManager);
     }
   }, [path]);
   useEffect(() => {
     if (adapter && url && adapter.url !== url) {
       disposeAdapter();
-      createAdapter();
+      createAdapter(serviceManager);
     }
   }, [url]);
+  // Dispose Effects.
   useEffect(() => {
-    if (adapter && url && adapter.readonly !== readonly) {
-      adapter.setReadonly(readonly);
+    return () => {
+      disposeAdapter();
     }
-  }, [readonly]);
+  }, []);
+  //
   return (
-    <Box
-      style={{ height, width: '100%', position: 'relative' }}
-      id="dla-Jupyter-Notebook"
-    >
+    <Box style={{ height, width: '100%', position: 'relative' }} id="dla-Jupyter-Notebook">
       {Toolbar && <Toolbar notebookId={id} />}
-      <Box
-        className="dla-Box-Notebook"
+      <Box className="dla-Box-Notebook"
         sx={{
           '& .dla-Jupyter-Notebook': {
             height,
@@ -274,12 +298,10 @@ export const Notebook = (props: INotebookProps) => {
           {portals?.map((portal: React.ReactPortal) => portal)}
         </>
         <Box>
-          {adapter &&
-            (
-              <Lumino id={id}>
-                {adapter.panel}
-              </Lumino>
-            )
+          {adapter && flipflop &&
+            <Lumino id={id}>
+              {adapter.panel}
+            </Lumino>
           }
         </Box>
       </Box>
diff --git a/packages/react/src/components/notebook/NotebookAdapter.ts b/packages/react/src/components/notebook/NotebookAdapter.ts
index f9ef6c73..8ed6333d 100755
--- a/packages/react/src/components/notebook/NotebookAdapter.ts
+++ b/packages/react/src/components/notebook/NotebookAdapter.ts
@@ -23,15 +23,13 @@ import { MathJaxTypesetter } from '@jupyterlab/mathjax-extension';
 import { INotebookContent, CellType, IAttachments } from '@jupyterlab/nbformat';
 import { ISharedAttachmentsCell, IYText } from '@jupyter/ydoc';
 import { WIDGET_MIMETYPE } from '@jupyter-widgets/html-manager/lib/output_renderers';
-import { Lite } from '../../jupyter/lite';
-import { Kernel } from '../../jupyter/kernel';
+import { Lite, Kernel, WidgetManager, WidgetLabRenderer } from '../../jupyter';
 import { ICellSidebarProps } from './cell/sidebar/CellSidebarWidget';
 import { JupyterReactContentFactory } from './content/JupyterReactContentFactory';
 import { JupyterReactNotebookModelFactory } from './model/JupyterReactNotebookModelFactory';
+import { getMarked } from './marked/marked';
 import { INotebookProps } from './Notebook';
 import { NotebookCommands } from './NotebookCommands';
-import { getMarked } from './marked/marked';
-import { WidgetManager, WidgetLabRenderer } from '../../jupyter/ipywidgets';
 
 const FALLBACK_NOTEBOOK_PATH = 'ping.ipynb';
 
@@ -164,8 +162,11 @@ export class NotebookAdapter {
       },
     });
 
-    this._iPyWidgetsManager = new WidgetManager(this._context, this._rendermime!, {saveState: false});
-
+    this._iPyWidgetsManager = new WidgetManager(
+      this._context,
+      this._rendermime!,
+      { saveState: false },
+    );
     /*
     this._rendermime!.addFactory(
       {
@@ -177,7 +178,6 @@ export class NotebookAdapter {
       1
     );
     */
-
     /*
     // This code block was causing https://github.com/datalayer/jupyter-ui/issues/195
     // TODO Double check there is not side effect.
@@ -189,7 +189,6 @@ export class NotebookAdapter {
         );
       });
     */
-
     // These are fixes to have more control on the kernel launch.
     (this._context.sessionContext as any)._initialize =
       async (): Promise<boolean> => {
@@ -240,24 +239,25 @@ export class NotebookAdapter {
       }
     });
 
-    /*
-    // Alternative way to create a NotebookPanel.
-    const content = new Notebook({
-      rendermime: this._rendermime!,
-      contentFactory,
-      mimeTypeService,
-      notebookConfig: {
-        ...StaticNotebook.defaultNotebookConfig,
-        windowingMode: 'none'
-      }
-    });
-    this._notebookPanel = new NotebookPanel({
-      context: this._context,
-      content,
-    });
-    */
-
-    this._notebookPanel = this._documentRegistry?.getWidgetFactory('Notebook')?.createNew(this._context) as NotebookPanel;
+    if (!this._notebookPanel) {
+      /*
+      // Alternative way to create a NotebookPanel.
+      const content = new Notebook({
+        rendermime: this._rendermime!,
+        contentFactory,
+        mimeTypeService,
+        notebookConfig: {
+          ...StaticNotebook.defaultNotebookConfig,
+          windowingMode: 'none'
+        }
+      });
+      this._notebookPanel = new NotebookPanel({
+        context: this._context,
+        content,
+      });
+      */
+      this._notebookPanel = this._documentRegistry?.getWidgetFactory('Notebook')?.createNew(this._context) as NotebookPanel;
+    }
 
     if (this._kernel) {
       this._iPyWidgetsManager?.registerWithKernel(
@@ -279,17 +279,21 @@ export class NotebookAdapter {
     );
 
     const completerHandler = this.setupCompleter(this._notebookPanel!);
-    try {
-      NotebookCommands(
-        this._commandRegistry,
-        this._notebookPanel,
-        completerHandler,
-        this._tracker!,
-        this._path
-      );
-    }
-    catch {
-      // No op - the commands may already be registered.
+
+    if (!this._readonly) {
+      try {
+        NotebookCommands(
+          this._commandRegistry,
+          this._notebookPanel,
+          completerHandler,
+          this._tracker!,
+          this._path
+        );
+      }
+      catch {
+        // no-op.
+        // The commands may already be registered...
+      }  
     }
 
     this._boxPanel.addWidget(this._notebookPanel);
@@ -299,7 +303,8 @@ export class NotebookAdapter {
     });
 
     const isNbFormat = this._path !== undefined && this._path !== '' ? false : true;
-    if (isNbFormat && !this._lite) {
+
+    if (isNbFormat) {
       // Fixes if nbformat is provided and we don't want to interact with the content manager.
       (this._context as any).initialize = async (isNew: boolean): Promise<void> => {
         (this._context as Context<INotebookModel>).model.dirty = false;
@@ -492,6 +497,10 @@ export class NotebookAdapter {
     return this._notebookPanel;
   }
 
+  set notebookPanel(notebookPanel: NotebookPanel | undefined) {
+    this._notebookPanel = notebookPanel;
+  }
+
   get panel(): BoxPanel {
     return this._boxPanel;
   }
@@ -507,8 +516,8 @@ export class NotebookAdapter {
   /*
    * Only use this method to change an adapter with a nbformat.
    */
-  setNbformat(nbformat: INotebookContent) {
-    if (nbformat === null) {
+  setNbformat(nbformat?: INotebookContent) {
+    if (!nbformat) {
       throw new Error('The nbformat should first be set via the constructor of NotebookAdapter');
     }
     if (this._nbformat !== nbformat) {
@@ -517,22 +526,41 @@ export class NotebookAdapter {
     }
   }
 
-  setServiceManager(serviceManager: ServiceManager.IManager, lite: Lite) {
-    console.log('-------', serviceManager);
-    if (this._lite !== lite) {
-      this._lite = lite;
-    }
-    if (this._serviceManager !== serviceManager) {
-      this._serviceManager = serviceManager;
-    }
+  setServiceManager(serviceManager: ServiceManager.IManager, lite?: Lite) {
+    this._lite = lite;
+    this._serviceManager = serviceManager;
     this._nbformat = this._notebookPanel?.model?.toJSON() as INotebookContent;
+//    this.initializeContext();
+  }
+
+  setKernel(kernel?: Kernel) {
+    if (this._kernel === kernel) {
+      return;
+    }
+    this._kernel = kernel;
     this.initializeContext();
   }
 
   setReadonly(readonly: boolean) {
     if (this._readonly !== readonly) {
       this._readonly = readonly;
-      Array.from(this._context?.model.cells!).forEach(cell => cell.setMetadata('editable', !readonly));
+      this._notebookPanel?.content.widgets.forEach(cell => {
+        cell.syncEditable = true
+        cell.model.sharedModel.setMetadata('editable', !readonly);
+      });
+      Array.from(this._context?.model.cells!).forEach(cell => {
+        cell.setMetadata('editable', !readonly);
+      });
+      this._notebookPanel?.content.widgets.forEach(cell => {
+        cell.saveEditableState();
+      });
+    }
+  }
+
+  setServerless(serverless: boolean) {
+    if (this._serverless !== serverless) {
+      this._serverless = serverless;
+//      this.initializeContext();
     }
   }
 
@@ -555,7 +583,7 @@ export class NotebookAdapter {
   };
 
   changeCellType = (cellType: CellType) => {
-    //    NotebookActions.changeCellType(this._notebookPanel?.content!, cellType);
+    // NotebookActions.changeCellType(this._notebookPanel?.content!, cellType);
     const notebook = this._notebookPanel!.content!;
     const notebookSharedModel = notebook.model!.sharedModel;
     notebook.widgets.forEach((child, index) => {
diff --git a/packages/react/src/components/notebook/NotebookState.ts b/packages/react/src/components/notebook/NotebookState.ts
index 6cfb666e..2bec123c 100644
--- a/packages/react/src/components/notebook/NotebookState.ts
+++ b/packages/react/src/components/notebook/NotebookState.ts
@@ -81,6 +81,7 @@ type CellMutation = {
 export type NotebookState = INotebooksState & {
   setNotebooks: (notebooks: Map<string, INotebookState>) => void;
   selectNotebook: (id: string) => INotebookState | undefined;
+  selectNotebookAdapter: (id: string) => NotebookAdapter | undefined;
   selectNotebookModel: (id: string) => { model: INotebookModel | undefined; changed: any } | undefined;
   selectKernelStatus: (id: string) => string | undefined;
   selectActiveCell: (id: string) => Cell<ICellModel> | undefined;
@@ -114,6 +115,13 @@ export const notebookStore = createStore<NotebookState>((set, get) => ({
   selectNotebook: (id: string): INotebookState | undefined => {
     return get().notebooks.get(id);
   },
+  selectNotebookAdapter: (id: string): NotebookAdapter | undefined => {
+    const notebook = get().notebooks.get(id);
+    if (notebook) {
+      return notebook.adapter;
+    }
+    return undefined;
+  },
   selectNotebookModel: (id: string): { model: INotebookModel | undefined; changed: any } | undefined => {
     if (get().notebooks.get(id)) {
       return {
@@ -167,18 +175,21 @@ export const notebookStore = createStore<NotebookState>((set, get) => ({
     const notebooks = get().notebooks;
     let notebook = notebooks.get(update.id);
     if (notebook) {
+      /*
       notebook = {
         ...notebook,
         ...update.state,
       };
-      set((state: NotebookState) => ({ notebooks }));
+      */
+      // TODO Revisit this...
+      notebook.adapter = update.state.adapter;
     } else {
       notebooks.set(update.id, {
         adapter: update.state.adapter,
         portals: [],
       });    
-      set((state: NotebookState) => ({ notebooks }));
     }
+    set((state: NotebookState) => ({ notebooks }));
   },
   activeCellChange: (cellModelId: CellModelId) => {
     const notebooks = get().notebooks;
diff --git a/packages/react/src/components/notebook/cell/sidebar/CellSidebar.tsx b/packages/react/src/components/notebook/cell/sidebar/CellSidebar.tsx
index dfb27518..f734cc58 100644
--- a/packages/react/src/components/notebook/cell/sidebar/CellSidebar.tsx
+++ b/packages/react/src/components/notebook/cell/sidebar/CellSidebar.tsx
@@ -23,7 +23,7 @@ import { DATALAYER_CELL_HEADER_CLASS } from './CellSidebarWidget';
 export const CellSidebar = (props: ICellSidebarProps) => {
   const { notebookId, cellId, nbgrader } = props;
   const [visible, setVisible] = useState(false);
-  const notebookStore = useNotebookStore()
+  const notebookStore = useNotebookStore();
   const activeCell = notebookStore.selectActiveCell(notebookId);
   const layout = activeCell?.layout;
   if (layout) {
@@ -54,11 +54,11 @@ export const CellSidebar = (props: ICellSidebarProps) => {
       {nbgrader && (
         <ActionMenu>
           {/*
-            <ActionMenu.Anchor>
-              <IconButton icon={KebabHorizontalIcon} variant="invisible" aria-label="Open column options" />
-            </ActionMenu.Anchor>
-            <ActionMenu.Overlay>
-            */}
+          <ActionMenu.Anchor>
+            <IconButton icon={KebabHorizontalIcon} variant="invisible" aria-label="Open column options" />
+          </ActionMenu.Anchor>
+          <ActionMenu.Overlay>
+          */}
           <CellMetadataEditor
             notebookId={notebookId}
             cell={activeCell}
diff --git a/packages/react/src/components/utils/SpinnerCentered.tsx b/packages/react/src/components/utils/SpinnerCentered.tsx
new file mode 100644
index 00000000..e6bae262
--- /dev/null
+++ b/packages/react/src/components/utils/SpinnerCentered.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+import { Box, Spinner } from "@primer/react";
+
+export const SpinnerCentered = () => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '40px'
+      }}
+    >
+      <Spinner />
+    </Box>
+  )
+}
+  
+export default SpinnerCentered;
+  
\ No newline at end of file
diff --git a/packages/react/src/components/utils/index.ts b/packages/react/src/components/utils/index.ts
new file mode 100644
index 00000000..de4a246b
--- /dev/null
+++ b/packages/react/src/components/utils/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+export * from './SpinnerCentered';
diff --git a/packages/react/src/examples/NotebookLite.tsx b/packages/react/src/examples/NotebookLite.tsx
index 5b2070e8..bbd21e39 100644
--- a/packages/react/src/examples/NotebookLite.tsx
+++ b/packages/react/src/examples/NotebookLite.tsx
@@ -7,7 +7,7 @@
 import { createRoot } from 'react-dom/client';
 import { Box } from '@primer/react';
 import { INotebookContent } from '@jupyterlab/nbformat';
-import { Jupyter } from '../jupyter/Jupyter';
+import { JupyterReactTheme } from '../theme';
 import { Notebook } from '../components/notebook/Notebook';
 import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
 import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
@@ -15,19 +15,18 @@ import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
 import nbformat from './notebooks/NotebookExample1.ipynb.json';
 
 const NotebookLite = () => (
-  <Jupyter
-    lite
-  >
+  <JupyterReactTheme>
     <Box as="h1">A Jupyter Notebook with a Lite Kernel</Box>
     <Notebook
+      lite={true}
       nbformat={nbformat as INotebookContent}
-      id="notebook-model-id"
+      id="notebook-lite-id"
       height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
       cellSidebarMargin={120}
       CellSidebar={CellSidebar}
       Toolbar={NotebookToolbar}
     />
-  </Jupyter>
+  </JupyterReactTheme>
 );
 
 const div = document.createElement('div');
diff --git a/packages/react/src/examples/NotebookLiteContext.tsx b/packages/react/src/examples/NotebookLiteContext.tsx
new file mode 100644
index 00000000..af1be18d
--- /dev/null
+++ b/packages/react/src/examples/NotebookLiteContext.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+import { createRoot } from 'react-dom/client';
+import { Box } from '@primer/react';
+import { INotebookContent } from '@jupyterlab/nbformat';
+import { Jupyter } from '../jupyter/Jupyter';
+import { Notebook } from '../components/notebook/Notebook';
+import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
+import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
+
+import nbformat from './notebooks/NotebookExample1.ipynb.json';
+
+const NotebookLite = () => (
+  <Jupyter lite>
+    <Box as="h1">A Jupyter Notebook with a Lite Kernel (with a Jupyter Context)</Box>
+    <Notebook
+      nbformat={nbformat as INotebookContent}
+      id="notebook-lite-context-id"
+      height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
+      cellSidebarMargin={120}
+      CellSidebar={CellSidebar}
+      Toolbar={NotebookToolbar}
+    />
+  </Jupyter>
+);
+
+const div = document.createElement('div');
+document.body.appendChild(div);
+const root = createRoot(div);
+
+root.render(<NotebookLite />);
diff --git a/packages/react/src/examples/NotebookMutations.tsx b/packages/react/src/examples/NotebookMutations.tsx
index 39f1040a..cc1a1dcd 100644
--- a/packages/react/src/examples/NotebookMutations.tsx
+++ b/packages/react/src/examples/NotebookMutations.tsx
@@ -6,96 +6,153 @@
 
 import { useState } from 'react';
 import { createRoot } from 'react-dom/client';
+import { Box, SegmentedControl, Label } from '@primer/react';
 import { INotebookContent } from '@jupyterlab/nbformat';
 import { ServiceManager } from '@jupyterlab/services';
-import { Box, SegmentedControl } from '@primer/react';
-import { createServiceManagerLite, createServerSettings, getJupyterServerUrl, getJupyterServerToken, ServiceManagerLess } from '../jupyter';
-import { useNotebookStore, Notebook} from './../components';
+import {
+  createLiteServiceManager, createServerSettings, setJupyterServerUrl, getJupyterServerUrl,
+  getJupyterServerToken, ServiceManagerLess, loadJupyterConfig, DEFAULT_JUPYTER_SERVER_URL,
+} from '../jupyter';
+import { useJupyterReactStore } from '../state';
+import { useNotebookStore, Notebook, SpinnerCentered } from './../components';
 import { JupyterReactTheme } from '../theme';
+import { createDatalayerServiceManager } from './../providers';
 
-import nbformat from './notebooks/NotebookExample1.ipynb.json';
+import nbformatExample from './notebooks/NotebookExample1.ipynb.json';
 
 const NOTEBOOK_ID = 'notebook-mutations-id';
 
+loadJupyterConfig({});
+
+const SERVICE_MANAGER_LESS = new ServiceManagerLess();
+
 const NotebookMutations = () => {
   const [index, setIndex] = useState(0);
+  const [nbformat, setNbformat] = useState(nbformatExample as INotebookContent);
   const [readonly, setReadonly] = useState(true);
   const [serverless, setServerless] = useState(true);
-  const [lite, setLite] = useState(false);
-  const [serviceManager, setServiceManager] = useState(new ServiceManagerLess());
+  const [kernelIndex, setKernelIndex] = useState(-1);
+  const [waiting, setWaiting] = useState(false);
+//  const [lite, setLite] = useState(false);
+  const [serviceManager, setServiceManager] = useState<ServiceManager.IManager>(SERVICE_MANAGER_LESS);
+  const { datalayerConfig } = useJupyterReactStore();
   const notebookStore = useNotebookStore();
   const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
   const changeIndex = (index: number) => {
     setIndex(index);
     switch(index) {
       case 0: {
-        setReadonly(true);
+        setKernelIndex(-1);
+        setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
         setServerless(true);
-        setLite(false);
-        setServiceManager(new ServiceManagerLess());
+        setReadonly(true);
+//        setLite(false);
+        setServiceManager(SERVICE_MANAGER_LESS);
         break;
       }
       case 1: {
-        setReadonly(false);
-        setServerless(true);
-        setLite(true);
-        createServiceManagerLite().then(serviceManager => {
-          console.log('Created Service Manager Lite', serviceManager);
-          setServiceManager(serviceManager);
+        setJupyterServerUrl(location.protocol + '//' + location.host);
+        createLiteServiceManager().then(liteServiceManager => {
+          setKernelIndex(-1);
+          console.log('Lite Service Manager is available', liteServiceManager);
+          setServiceManager(liteServiceManager);
+          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+          setServerless(false);
+          setReadonly(false);
+//          setLite(true);
         });
         break;
       }
       case 2: {
-        setReadonly(false);
+        setJupyterServerUrl(DEFAULT_JUPYTER_SERVER_URL);
+        setKernelIndex(-1);
+        setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
         setServerless(false);
-        setLite(false);
+        setReadonly(false);
+//        setLite(false);
         const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
         const serviceManager = new ServiceManager({ serverSettings });
+        (serviceManager as any)['__NAME__'] = 'MutatingServiceManager';
         setServiceManager(serviceManager);
         break;
       }
+      case 3: {
+//        setWaiting(true);
+//        setLite(false);
+        createDatalayerServiceManager(
+          datalayerConfig?.cpuEnvironment || 'python-simple-env',
+          datalayerConfig?.credits || 1,
+        ).then((serviceManager) => {
+          (serviceManager as any)['__NAME__'] = 'DatalayerCPUServiceManager';
+          setServiceManager(serviceManager);
+          setServerless(false);
+          setReadonly(false);
+          setKernelIndex(0);
+          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+//          setWaiting(false);  
+        });
+        break;
+      }
+      case 4: {
+        setWaiting(true);
+//        setLite(false);
+        createDatalayerServiceManager(
+          datalayerConfig?.gpuEnvironment || 'pytorch-cuda-env',
+          datalayerConfig?.credits || 1,
+        ).then((serviceManager) => {
+          setKernelIndex(0);
+          (serviceManager as any)['__NAME__'] = 'DatalayerGPUServiceManager';
+          setServiceManager(serviceManager);
+          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+          setServerless(false);
+          setReadonly(false);
+          setWaiting(false);  
+        });
+        break;
+      }
     }
   }
   return (
     <JupyterReactTheme>
-      <Box display="flex">
-        <Box>
-          <SegmentedControl onChange={index => changeIndex(index)} aria-label="jupyter-react-example">
-            <SegmentedControl.Button defaultSelected={index === 0}>Readonly</SegmentedControl.Button>
-            <SegmentedControl.Button defaultSelected={index === 1}>Browser Kernel</SegmentedControl.Button>
-            <SegmentedControl.Button defaultSelected={index === 2}>OSS Kernel</SegmentedControl.Button>
-            <SegmentedControl.Button defaultSelected={index === 3} disabled>Datalayer CPU Kernel</SegmentedControl.Button>
-            <SegmentedControl.Button defaultSelected={index === 4} disabled>Datalayer GPU Kernel</SegmentedControl.Button>
-          </SegmentedControl>
-        </Box>
-        <Box ml={3}>
-          Readonly: {String(notebook?.adapter?.readonly)}
-        </Box>
-        <Box ml={3}>
-          Serverless: {String(notebook?.adapter?.serverless)}
-        </Box>
-        <Box ml={3}>
-          Lite: {String(notebook?.adapter?.lite)}
-        </Box>
-        <Box ml={3}>
-          Kernel: {notebook?.adapter?.kernel?.id} ({notebook?.adapter?.kernel?.info?.banner})
-        </Box>
-        <Box ml={3}>
-          Service Manager Ready: {String(notebook?.adapter?.serviceManager.isReady)}
-        </Box>
-        <Box ml={3}>
-          Service Manager URL: {notebook?.adapter?.serviceManager.serverSettings.baseUrl}
+      <>
+        <Box display="flex">
+          <Box>
+            <SegmentedControl onChange={index => changeIndex(index)} aria-label="jupyter-react-example">
+              <SegmentedControl.Button defaultSelected={index === 0}>Readonly</SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 1}>Browser Kernel</SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 2}>OSS Kernel (CPU)</SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 3}>Kernel (CPU)</SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 4}>Kernel (GPU)</SegmentedControl.Button>
+            </SegmentedControl>
+          </Box>
+          <Box ml={1} mt={1}>
+            {/*
+            <Label>Readonly: {String(notebook?.adapter?.readonly)}</Label>
+            <Label>Serverless: {String(notebook?.adapter?.serverless)}</Label>
+            */}
+            <Label>Lite: {String(notebook?.adapter?.lite)}</Label>
+            <Label>Service Manager URL: {notebook?.adapter?.serviceManager.serverSettings.baseUrl}</Label>
+            <Label>Service Manager is ready: {String(notebook?.adapter?.serviceManager.isReady)}</Label>
+            <Label>Kernel ID: {notebook?.adapter?.kernel?.id}</Label>
+            <Label>Kernel Banner: {notebook?.adapter?.kernel?.info?.banner}</Label>
+          </Box>
         </Box>
-      </Box>
-      <Notebook
-        id={NOTEBOOK_ID}
-        lite={lite}
-        nbformat={nbformat as INotebookContent}
-        readonly={readonly}
-        serverless={serverless}
-        serviceManager={serviceManager}
-        height="calc(100vh - 2.6rem)"
-      />
+        {waiting
+          ?
+            <SpinnerCentered/>
+          :
+          <Notebook
+            height="calc(100vh - 2.6rem)"
+            id={NOTEBOOK_ID}
+//            lite={lite}
+            nbformat={nbformat as INotebookContent}
+            readonly={readonly}
+            serverless={serverless}
+            serviceManager={serviceManager}
+            useRunningKernelIndex={kernelIndex}
+          />
+        }
+      </>
     </JupyterReactTheme>
   );
 }
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 32a136e6..644051a5 100755
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -7,5 +7,6 @@
 export * from './components';
 export * from './jupyter';
 export * from './state';
+export * from './providers';
 export * from './theme';
 export * from './utils';
diff --git a/packages/react/src/jupyter/JupyterConfig.ts b/packages/react/src/jupyter/JupyterConfig.ts
index 9aff0825..c4981f1b 100644
--- a/packages/react/src/jupyter/JupyterConfig.ts
+++ b/packages/react/src/jupyter/JupyterConfig.ts
@@ -6,15 +6,10 @@
 
 import { PageConfig } from '@jupyterlab/coreutils';
 import { JupyterProps } from './Jupyter';
-import { DEFAULT_JUPYTER_SERVER_URL, DEFAULT_JUPYTER_SERVER_TOKEN } from './JupyterDefaults';
+import { DEFAULT_JUPYTER_SERVER_URL, DEFAULT_JUPYTER_SERVER_TOKEN, DEFAULT_API_KERNEL_PREFIX_URL } from './JupyterDefaults';
 
 /**
- * The URL prefix for the kernel api.
- */
-const API_KERNEL_PREFIX_URL = '/api/jupyter-server';
-
-/**
- * Type of the Jupyter configuration.
+ * Type definition for the Jupyter Configuration.
  */
 export type IJupyterConfig = {
   jupyterServerUrl: string;
@@ -36,12 +31,15 @@ let datalayerConfigLoaded = false;
 /**
  * Setter for jupyterServerUrl.
  */
-const setJupyterServerUrl = (jupyterServerUrl: string) => {
+export const setJupyterServerUrl = (jupyterServerUrl: string) => {
   if (!config) {
     throw new Error("Jupyter React Config must be loaded first.")
   }
+  PageConfig.setOption('baseUrl', jupyterServerUrl);
+  PageConfig.setOption('wsUrl', jupyterServerUrl.replace(/^http/, 'ws'));
   config.jupyterServerUrl = jupyterServerUrl;
 };
+
 /**
  * Getter for jupyterServerUrl.
  */
@@ -52,16 +50,17 @@ export const getJupyterServerUrl = () => {
   return config.jupyterServerUrl;
 }
 
-
 /**
  * Setter for jupyterServerToken.
  */
-const setJupyterServerToken = (jupyterServerToken: string) => {
+export const setJupyterServerToken = (jupyterServerToken: string) => {
   if (!config) {
     throw new Error("Jupyter React Config must be loaded first.")
   }
+  PageConfig.setOption('token', jupyterServerToken);
   config.jupyterServerToken = jupyterServerToken;
 };
+
 /**
  * Getter for jupyterServerToken.
  */
@@ -73,16 +72,15 @@ export const getJupyterServerToken = () => {
 }
 
 /**
- * Get the datalayer configuration fully or for a particular parameter.
+ * Get the datalayer configuration fully
+ * or for a particular parameter.
  *
  * @param name The parameter name
  * @returns The parameter value if {@link name} is specified, otherwise the full configuration.
  */
 function loadDatalayerConfig(name?: string): any {
   if (!datalayerConfigLoaded) {
-    const datalayerConfigData = document.getElementById(
-      'datalayer-config-data'
-    );
+    const datalayerConfigData = document.getElementById('datalayer-config-data');
     if (datalayerConfigData?.textContent) {
       console.log('Found Datalayer config data in page', datalayerConfigData);
       try {
@@ -104,8 +102,8 @@ function loadDatalayerConfig(name?: string): any {
 }
 
 /**
- * Method to load the Jupyter configuration from the
- * host HTML page.
+ * Method to load the Jupyter configuration
+ * from the host HTML page.
  */
 export const loadJupyterConfig = (
   props: Pick<
@@ -129,8 +127,8 @@ export const loadJupyterConfig = (
     return config;
   }
   config = {
-    jupyterServerUrl: jupyterServerUrl ?? DEFAULT_JUPYTER_SERVER_TOKEN,
-    jupyterServerToken: jupyterServerToken ?? DEFAULT_JUPYTER_SERVER_URL,
+    jupyterServerUrl: jupyterServerUrl ?? DEFAULT_JUPYTER_SERVER_URL,
+    jupyterServerToken: jupyterServerToken ?? DEFAULT_JUPYTER_SERVER_TOKEN,
     insideJupyterLab: false,
     insideJupyterHub: false,
   }
@@ -138,19 +136,10 @@ export const loadJupyterConfig = (
   loadDatalayerConfig();
   if (datalayerConfigLoaded) {
     // There is a Datalayer config, mix the configs...
-    setJupyterServerUrl(
-      jupyterServerUrl ||
-        config.jupyterServerUrl
-//          location.protocol + '//' + location.host + '/api/jupyter-server'
-          
-    );
-    setJupyterServerToken(
-      jupyterServerToken || 
-        config.jupyterServerToken
-//          ''
-    );
+    setJupyterServerUrl(jupyterServerUrl || config.jupyterServerUrl);
+    setJupyterServerToken(jupyterServerToken || config.jupyterServerToken);
   } else {
-    // No Datalayer config, look for a Jupyter config.
+    // No Datalayer config, look for a Jupyter config...
     const jupyterConfigData = document.getElementById('jupyter-config-data');
     if (jupyterConfigData) {
       const jupyterConfig = JSON.parse(jupyterConfigData.textContent || '');
@@ -172,7 +161,7 @@ export const loadJupyterConfig = (
       setJupyterServerUrl(
         jupyterServerUrl ??
           config.jupyterServerUrl ?? 
-            location.protocol + '//' + location.host + API_KERNEL_PREFIX_URL
+            location.protocol + '//' + location.host + DEFAULT_API_KERNEL_PREFIX_URL
       );
       setJupyterServerToken(
         jupyterServerToken ??
@@ -184,18 +173,15 @@ export const loadJupyterConfig = (
   if (lite) {
     setJupyterServerUrl(location.protocol + '//' + location.host);
   }
-  if (! config.insideJupyterLab) {
-    // If not inside JupyterLab, mimick JupyerLab behavior...
+  if (!config.insideJupyterLab) {
+    // If not inside JupyterLab, mimick JupyterLab behavior...
     PageConfig.setOption('baseUrl', getJupyterServerUrl());
     PageConfig.setOption('wsUrl', getJupyterServerUrl().replace(/^http/, 'ws'));
     PageConfig.setOption('token', getJupyterServerToken());
     PageConfig.setOption('collaborative', String(collaborative));
     PageConfig.setOption('disableRTC', String(!collaborative));
     PageConfig.setOption('terminalsAvailable', String(terminals));
-    PageConfig.setOption(
-      'mathjaxUrl',
-      'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js'
-    );
+    PageConfig.setOption('mathjaxUrl', 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js');
     PageConfig.setOption('mathjaxConfig', 'TeX-AMS_CHTML-full,Safe');
   }
   console.log('Created config for Jupyter React', config)
diff --git a/packages/react/src/jupyter/JupyterDefaults.tsx b/packages/react/src/jupyter/JupyterDefaults.tsx
index 83fac02e..15370a0b 100644
--- a/packages/react/src/jupyter/JupyterDefaults.tsx
+++ b/packages/react/src/jupyter/JupyterDefaults.tsx
@@ -8,4 +8,9 @@ export const DEFAULT_JUPYTER_SERVER_URL = 'https://oss.datalayer.run/api/jupyter
 
 export const DEFAULT_JUPYTER_SERVER_TOKEN = '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
 
+/**
+ * The URL prefix for the kernel api.
+ */
+export const DEFAULT_API_KERNEL_PREFIX_URL = '/api/jupyter-server';
+
 export const DEFAULT_KERNEL_NAME = 'python';
diff --git a/packages/react/src/jupyter/kernel/Kernel.ts b/packages/react/src/jupyter/kernel/Kernel.ts
index c1023706..c633ee06 100755
--- a/packages/react/src/jupyter/kernel/Kernel.ts
+++ b/packages/react/src/jupyter/kernel/Kernel.ts
@@ -65,20 +65,35 @@ export class Kernel {
     this.requestKernel(kernelModel, path);
   }
 
-  private async requestKernel(
-    kernelModel?: JupyterKernel.IModel,
-    propsPath?: string,
-  ): Promise<void> {
+  private async requestKernel(kernelModel?: JupyterKernel.IModel, propsPath?: string): Promise<void> {
     await this._kernelManager.ready;
     await this._sessionManager.ready;
     if (kernelModel) {
-      console.log('Reusing a pre-existing Jupyter Kernel model.');
-      await this._sessionManager.refreshRunning();
-      const model = find(this._sessionManager.running(), item => {
-        return item.path === this._path;
+      await this._kernelManager.refreshRunning();
+      const runningKernels = Array.from(this.kernelManager.running());
+      const existingKernelModel = find(runningKernels, model => {
+        return kernelModel.id === model.id;
       });
-      if (model) {
-        this._session = this._sessionManager.connectTo({ model });
+      if (existingKernelModel) {
+        console.log('Creating a session to an existing Jupyter Kernel model.', existingKernelModel);
+        const path = 'kernel-' + newUuid();
+        this._path = path;
+        this._session = await this._sessionManager.startNew(
+          {
+            name: existingKernelModel.name,
+            path: path,
+            type: 'notebook',
+            kernel: existingKernelModel as Partial<JupyterKernel.IModel & Omit<JupyterKernel.IKernelOptions, 'kernelType'>>,
+          },
+          {
+            kernelConnectionOptions: {
+              handleComms: true,
+            },
+          }
+        );
+      } else {
+        console.log('Something is wrong... can not find an existing model for', kernelModel);
+        return;
       }
     } else {
       let path = propsPath ?? getCookie(this.cookieName);
@@ -87,8 +102,7 @@ export class Kernel {
         document.cookie = this.cookieName + '=' + path;
       }
       this._path = path;
-      this._session = await this._sessionManager.startNew(
-        {
+      this._session = await this._sessionManager.startNew({
           name: this._kernelName,
           path: this._path,
           type: this._kernelType,
@@ -115,16 +129,15 @@ export class Kernel {
       this._sessionId = this._session.id;
       this._connectionStatus = this._kernelConnection.connectionStatus;
       updateConnectionStatus();
-      this._kernelConnection.connectionStatusChanged.connect(
-        (_, connectionStatus) => {
-          //        this.initReady();
-          this._connectionStatus = connectionStatus;
-          updateConnectionStatus();
-        }
-      );
+      this._kernelConnection.connectionStatusChanged.connect((_, connectionStatus) => {
+        this._connectionStatus = connectionStatus;
+        updateConnectionStatus();
+      });
       this._kernelConnection.info.then(info => {
         this._info = info;
-        console.log('Kernel information', this.toJSON());
+        console.log('Kernel information.', info);
+        console.log('Kernel session.', this._session);
+        console.log('Kernel details.', this.toJSON());
       });
     }
   }
@@ -269,6 +282,7 @@ export class Kernel {
   toString() {
     return `id:${this.id} - client_id:${this.clientId} - session_id:${this.sessionId} - path:${this._path}`;
   }
+
 }
 
 export namespace Kernel {
diff --git a/packages/react/src/jupyter/services/ServiceManagerLess.ts b/packages/react/src/jupyter/services/ServiceManagerLess.ts
index 119c014f..1cb57ef3 100644
--- a/packages/react/src/jupyter/services/ServiceManagerLess.ts
+++ b/packages/react/src/jupyter/services/ServiceManagerLess.ts
@@ -5,9 +5,8 @@
  */
 
 import {
-  Builder, Contents, Event, IManager, NbConvert, NbConvertManager,
-  ServerConnection, ServiceManager, Setting, User, Workspace,
-  SettingManager, WorkspaceManager,
+  Builder, Contents, Event, IManager, NbConvert, NbConvertManager, ServerConnection,
+  ServiceManager, Setting, User, Workspace, SettingManager, WorkspaceManager,
 } from '@jupyterlab/services';
 import { BuildManager } from '@jupyterlab/services/lib/builder';
 import { IKernelConnection, IManager as IKernelManager, IModel } from '@jupyterlab/services/lib/kernel/kernel';
@@ -18,51 +17,41 @@ import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { PromiseDelegate, ReadonlyJSONObject } from '@lumino/coreutils';
 import { ISignal, Signal } from '@lumino/signaling';
 
-const WORKSPACE = JSON.parse(`{
+const WORKSPACE_JSON = `{
   "data": {
-      "layout-restorer:data": {
-          "main": {
-              "dock": null
-          },
-          "down": {
-              "size": 0,
-              "widgets": []
-          },
-          "left": {
-              "collapsed": false,
-              "visible": true,
-              "current": "filebrowser",
-              "widgets": [
-                  "filebrowser",
-                  "@jupyterlab/toc:plugin"
-              ],
-              "widgetStates": {}
-          },
-          "right": {
-              "collapsed": false,
-              "visible": true,
-              "current": "jp-property-inspector",
-              "widgets": [
-                  "jp-property-inspector"
-              ],
-              "widgetStates": {}
-          },
-          "relativeSizes": [
-              0.39589905362776023,
-              0.20820189274447948,
-              0.39589905362776023
-          ],
-          "top": {
-              "simpleVisibility": true
-          }
+    "layout-restorer:data": {
+      "main": {
+        "dock": null
+      },
+      "down": {
+        "size": 0,
+        "widgets": []
+      },
+      "left": {
+        "collapsed": true,
+        "visible": true,
+        "widgetStates": {}
+      },
+      "right": {
+        "collapsed": true,
+        "visible": true,
+        "widgetStates": {}
+      },
+      "relativeSizes": [
+      ],
+      "top": {
+        "simpleVisibility": true
       }
+    }
   },
   "metadata": {
-      "id": "default",
-      "last_modified": "2024-09-02T18:06:41.834588+00:00",
-      "created": "2024-09-02T18:06:41.834588+00:00"
+    "id": "default",
+    "last_modified": "2024-09-02T18:06:41.834588+00:00",
+    "created": "2024-09-02T18:06:41.834588+00:00"
   }
-}`) as Workspace.IWorkspace;
+}`;
+
+const WORKSPACE = JSON.parse(WORKSPACE_JSON) as Workspace.IWorkspace;
 
 export class TerminalManagerLess implements ITerminaManager {
   runningChanged: ISignal<ITerminaManager, ITerminalModel[]> = new Signal(this);
@@ -97,8 +86,7 @@ export class TerminalManagerLess implements ITerminaManager {
   refreshRunning(): Promise<void> {
     return Promise.resolve(void 0);
   }
-  dispose(): void {
-  }
+  dispose(): void {}
 }
 
 export class ContentsManagerLess implements Contents.IManager {
@@ -158,8 +146,7 @@ export class ContentsManagerLess implements Contents.IManager {
   deleteCheckpoint(path: string, checkpointID: string): Promise<void> {
     return new Promise(() => {});
   }
-  dispose(): void {
-  }
+  dispose(): void {}
 }
 
 export class KernelsManagerLess implements IKernelManager {
@@ -195,8 +182,7 @@ export class KernelsManagerLess implements IKernelManager {
   shutdownAll(): Promise<void> {
     return new Promise(() => {});
   }
-  dispose(): void {
-  }
+  dispose(): void {}
 }
 
 export class KernelspecManagerLess implements IKernelspecManager {
@@ -215,8 +201,7 @@ export class KernelspecManagerLess implements IKernelspecManager {
   refreshSpecs(): Promise<void> {
     return new Promise(() => {});
   }
-  dispose(): void {
-  }
+  dispose(): void {}
 }
 
 export class SessionManagerLess implements ISessionManager {
@@ -256,8 +241,7 @@ export class SessionManagerLess implements ISessionManager {
   stopIfNeeded(path: string): Promise<void> {
     return new Promise(() => {});
   }
-  dispose(): void {
-  }
+  dispose(): void {}
 }
 
 export class BuilderManagerLess {
@@ -289,12 +273,12 @@ export class SettingManagerLess extends SettingManager implements Setting.IManag
     this.serverSettings = serverSettings;
   }
   fetch(id: string): Promise<ISettingRegistry.IPlugin> {
-    return super.fetch(id)
 //    return new Promise(() => {});
+    return super.fetch(id)
   }
   list(query?: 'ids' | undefined): Promise<{ ids: string[]; values: ISettingRegistry.IPlugin[]; }> {
-    return super.list(query)
 //    return new Promise(() => {});
+    return super.list(query)
   }
   save(id: string, raw: string): Promise<void> {
 //    return super.save(id, raw);
@@ -323,8 +307,7 @@ export class UserManagerLess implements User.IManager {
   refreshUser(): Promise<void> {
     return new Promise(() => {});
   }
-  dispose(): void {
-  }
+  dispose(): void {}
 }
 
 export class EventsManagerLess implements Event.IManager {
@@ -337,8 +320,7 @@ export class EventsManagerLess implements Event.IManager {
   emit(event: Event.Request): Promise<void> {
     return new Promise(() => {});
   }
-  dispose(): void {
-  }
+  dispose(): void {}
 }
 
 export class WorkspaceManagerLess extends WorkspaceManager implements Workspace.IManager {
@@ -387,6 +369,7 @@ export class NbConvertManagerLess {
 }
 
 export class ServiceManagerLess implements ServiceManager.IManager {
+  __NAME__ = "LessServiceManager";
   isReady: boolean = true;
   ready: Promise<void> = Promise.resolve(void 0);
   isDisposed: boolean = false;
@@ -405,40 +388,23 @@ export class ServiceManagerLess implements ServiceManager.IManager {
   nbconvert: NbConvert.IManager;
   constructor(serverSettings?: ServerConnection.ISettings) {
     this.serverSettings = serverSettings ?? ServerConnection.makeSettings({
-//      baseUrl: 'https://',
-//      wsUrl: 'wss://',
-//      token: 'less-token',
+      baseUrl: 'http://',
+      wsUrl: 'ws://',
+      token: '',
     });
-    this.builder = new BuilderManagerLess(this.serverSettings) as Builder.IManager;
     this.contents = new ContentsManagerLess(this.serverSettings);
-    this.events = new EventsManagerLess(this.serverSettings);
     this.kernels = new KernelsManagerLess(this.serverSettings);
     this.kernelspecs = new KernelspecManagerLess(this.serverSettings);
-    this.nbconvert = new NbConvertManagerLess(this.serverSettings) as unknown as NbConvert.IManager;
     this.sessions = new SessionManagerLess(this.serverSettings);
-    this.settings = new SettingManagerLess(this.serverSettings)
+    this.settings = new SettingManagerLess(this.serverSettings);
     this.terminals = new TerminalManagerLess(this.serverSettings);
     this.user = new UserManagerLess(this.serverSettings)
+    this.builder = new BuilderManagerLess(this.serverSettings) as Builder.IManager;
+    this.events = new EventsManagerLess(this.serverSettings);
     this.workspaces = new WorkspaceManagerLess(this.serverSettings);
-    /*
-    const serviceManager = new ServiceManager({
-      serverSettings,
-    });
-    this.workspaces = serviceManager.workspaces;
-    this.contents = serviceManager.contents;
-    this.settings = serviceManager.settings;
-    this.builder = serviceManager.builder;
-    this.events = serviceManager.events;
-    this.kernels = serviceManager.kernels;
-    this.kernelspecs = serviceManager.kernelspecs;
-    this.nbconvert = serviceManager.nbconvert;
-    this.sessions = serviceManager.sessions;
-    this.terminals = serviceManager.terminals;
-    this.user = serviceManager.user;
-    */
-  }
-  dispose(): void {
+    this.nbconvert = new NbConvertManagerLess(this.serverSettings) as unknown as NbConvert.IManager;
   }
+  dispose(): void {}
 }
 
 export default ServiceManagerLess;
diff --git a/packages/react/src/jupyter/services/ServiceManagerLite.ts b/packages/react/src/jupyter/services/ServiceManagerLite.ts
index 39d26a42..c96f6089 100644
--- a/packages/react/src/jupyter/services/ServiceManagerLite.ts
+++ b/packages/react/src/jupyter/services/ServiceManagerLite.ts
@@ -3,18 +3,17 @@
  *
  * MIT License
  */
+
 import { ServiceManager } from '@jupyterlab/services';
-import { Lite } from '../lite';
-import { createLiteServer } from '../lite/LiteServer';
+import { createLiteServer, Lite } from '../lite';
 
-export const createServiceManagerLite = (lite: Lite = true): Promise<ServiceManager.IManager> => {
+export const createLiteServiceManager = (lite: Lite = true): Promise<ServiceManager.IManager> => {
   return createLiteServer().then(async liteServer => {
     // Load the browser kernel.
-    const mod =
-        typeof lite === 'boolean'
+    const mod = typeof lite === 'boolean'
         ? await import('@jupyterlite/pyodide-kernel-extension')
         : await lite;
-    // Load the module manually to get the list of plugin IDs
+    // Load the module manually to get the list of plugin IDs.
     let data = mod.default;
     // Handle commonjs exports.
     if (!Object.prototype.hasOwnProperty.call(mod, '__esModule')) {
@@ -30,12 +29,15 @@ export const createServiceManagerLite = (lite: Lite = true): Promise<ServiceMana
       } catch (error) {
         console.error(error);
         return null;
-        }
+      }
     });
     // Activate the loaded plugins.
     await Promise.all(
         pluginIDs.filter(id => id).map(id => liteServer.activatePlugin(id!))
     );
-    return liteServer.serviceManager;
+    const liteServiceManager = liteServer.serviceManager;
+    (liteServiceManager as any)["__NAME__"] = "LiteServiceManager"
+    console.log("Lite Service Manager is created", liteServiceManager);
+    return liteServiceManager;
   });
 }
diff --git a/packages/react/src/providers/index.ts b/packages/react/src/providers/index.ts
new file mode 100755
index 00000000..b76d1e76
--- /dev/null
+++ b/packages/react/src/providers/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+export * from './kernels';
diff --git a/packages/react/src/providers/kernels/DatalayerKernels.ts b/packages/react/src/providers/kernels/DatalayerKernels.ts
new file mode 100755
index 00000000..de32da21
--- /dev/null
+++ b/packages/react/src/providers/kernels/DatalayerKernels.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+import { URLExt } from '@jupyterlab/coreutils';
+import { jupyterReactStore } from "../../state";
+import { ServerConnection, ServiceManager } from '@jupyterlab/services';
+
+export type KernelRequest = {
+  "kernel_type": "notebook",
+  "kernel_given_name": string,
+  "credits_limit": number,
+  "capabilities": string[]
+}
+
+export type KernelResponse = {
+  "success": boolean,
+  "message": string,
+  "kernel": {
+    "burning_rate": number,
+    "kernel_type": "notebook",
+    "kernel_given_name": string,
+    "environment_name": string,
+    "environment_display_name": string,
+    "jupyter_pod_name": string,
+    "token": string,
+    "ingress": string,
+    "reservation_id": string,
+    "started_at": string,
+    "expired_at": string
+  }
+}
+
+export const createDatalayerServiceManager = async (environmentName: string, credits: number) => {
+  const datalayerConfig = jupyterReactStore.getState().datalayerConfig;
+  const token = datalayerConfig?.token || '';
+  const runUrl = datalayerConfig?.runUrl || 'https://prod1.datalayer.io';
+  const url = URLExt.join(
+    runUrl,
+    'api/jupyter/v1/environment',
+    environmentName,
+  );
+  const headers = new Headers();
+  headers.set('Accept', 'application/json');
+  headers.set('Content-Type', 'application/json');
+  headers.set('Authorization', `Bearer ${token}`);
+  const request: KernelRequest = {
+    kernel_type: "notebook",
+    kernel_given_name: `Jupyter React Kernel - ${new Date()}`,
+    credits_limit: credits,
+    capabilities: [],
+  };
+  const response = await fetch(url, {
+    method:'POST',
+    headers: headers,
+    body: JSON.stringify(request),
+    credentials: token ? 'include' : 'omit',
+    mode: 'cors',
+    cache: 'no-store'
+  })
+  .then((resp: Response) => {
+    if (resp.ok) {
+      return resp.json();
+    } else {
+      throw new Error(resp.statusText);
+    }
+  })
+  .catch((err: Error) => {
+    console.error(err);
+    return err;
+  })
+  .finally(() => {});
+  if (response instanceof Error) {
+    throw response as Error;
+  }
+  const kernelResponse = response as KernelResponse;
+  const serverSettings = ServerConnection.makeSettings({
+    baseUrl: kernelResponse.kernel.ingress,
+    wsUrl: kernelResponse.kernel.ingress.replace(/^http/, 'ws'),
+    token: kernelResponse.kernel.token,
+    appendToken: true,
+  });
+  const serviceManager = new ServiceManager({ serverSettings });
+  return serviceManager;
+}
diff --git a/packages/react/src/providers/kernels/index.ts b/packages/react/src/providers/kernels/index.ts
new file mode 100755
index 00000000..b6cc9233
--- /dev/null
+++ b/packages/react/src/providers/kernels/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+export * from './DatalayerKernels';
diff --git a/packages/react/src/state/IDatalayerConfig.ts b/packages/react/src/state/IDatalayerConfig.ts
new file mode 100644
index 00000000..413b5050
--- /dev/null
+++ b/packages/react/src/state/IDatalayerConfig.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+export type IDatalayerConfig = {
+  /**
+   * Datalayer RUN URL.
+   */
+  runUrl: string;
+  /**
+   * Datalayer Token.
+   */
+  token: string;
+  /**
+   * Credits.
+   */
+  credits: number;
+  /**
+   * CPU Environment.
+   */
+  cpuEnvironment: string;
+  /**
+   * GPU Environment.
+   */
+  gpuEnvironment: string;
+};
diff --git a/packages/react/src/state/IJupyterReactConfig.ts b/packages/react/src/state/IJupyterReactConfig.ts
deleted file mode 100644
index c2517bf1..00000000
--- a/packages/react/src/state/IJupyterReactConfig.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-
-export type IJupyterReactConfig = {
-  /**
-   * Datalayer RUN URL
-   */
-  runUrl: string;
-};
diff --git a/packages/react/src/state/JupyterReactState.ts b/packages/react/src/state/JupyterReactState.ts
index cd8ba753..9d7f02c9 100644
--- a/packages/react/src/state/JupyterReactState.ts
+++ b/packages/react/src/state/JupyterReactState.ts
@@ -8,22 +8,21 @@ import { useEffect, useState, useMemo } from 'react';
 import { createStore } from 'zustand/vanilla';
 import { useStore } from 'zustand';
 import { ServiceManager } from '@jupyterlab/services';
-import type { IJupyterReactConfig } from './IJupyterReactConfig';
+import { getJupyterServerUrl, createLiteServiceManager, ensureJupyterAuth, createServerSettings, JupyterPropsType, DEFAULT_KERNEL_NAME } from '../jupyter';
+import { ServiceManagerLess } from '../jupyter/services';
+import { Kernel } from '../jupyter/kernel/Kernel';
+import type { IDatalayerConfig } from './IDatalayerConfig';
 import { IJupyterConfig, loadJupyterConfig } from '../jupyter/JupyterConfig';
 import { cellsStore, CellsState } from '../components/cell/CellState';
 import { consoleStore, ConsoleState } from '../components/console/ConsoleState';
 import { notebookStore, NotebookState } from '../components/notebook/NotebookState';
 import { outputsStore, OutputState } from '../components/output/OutputState';
 import { terminalStore, TerminalState } from '../components/terminal/TerminalState';
-import { getJupyterServerUrl, createServiceManagerLite, ensureJupyterAuth, createServerSettings, JupyterPropsType } from '../jupyter';
-import { DEFAULT_KERNEL_NAME } from '../jupyter';
-import { ServiceManagerLess } from '../jupyter/services';
-import { Kernel } from '../jupyter/kernel/Kernel';
 
 export type JupyterReactState = {
   cellsStore: CellsState;
   consoleStore: ConsoleState;
-  datalayerConfig?: IJupyterReactConfig;
+  datalayerConfig?: IDatalayerConfig;
   jupyterConfig?: IJupyterConfig;
   kernel?: Kernel;
   kernelIsLoading: boolean;
@@ -32,25 +31,25 @@ export type JupyterReactState = {
   serviceManager?: ServiceManager.IManager;
   terminalStore: TerminalState;
   version: string;
-  setDatalayerConfig: (configuration?: IJupyterReactConfig) => void;
+  setDatalayerConfig: (configuration?: IDatalayerConfig) => void;
   setJupyterConfig: (configuration?: IJupyterConfig) => void;
   setServiceManager: (serviceManager?: ServiceManager.IManager) => void;
   setVersion: (version: string) => void;
 };
 
-let initialConfiguration: IJupyterReactConfig | undefined = undefined;
+let initialDatalayerConfig: IDatalayerConfig | undefined = undefined;
 
 try {
   const pageConfig = document.getElementById('datalayer-config-data');
   if (pageConfig?.innerText) {
-    initialConfiguration = JSON.parse(pageConfig?.innerText);
+    initialDatalayerConfig = JSON.parse(pageConfig?.innerText);
   }
 } catch (error) {
   console.debug('Issue with page configuration.', error);
 }
 
 export const jupyterReactStore = createStore<JupyterReactState>((set, get) => ({
-  datalayerConfig: initialConfiguration,
+  datalayerConfig: initialDatalayerConfig,
   version: '',
   jupyterConfig: undefined,
   kernelIsLoading: true,
@@ -62,7 +61,7 @@ export const jupyterReactStore = createStore<JupyterReactState>((set, get) => ({
   notebookStore: notebookStore.getState(),
   outputStore: outputsStore.getState(),
   terminalStore: terminalStore.getState(),
-  setDatalayerConfig: (datalayerConfig?: IJupyterReactConfig) => {
+  setDatalayerConfig: (datalayerConfig?: IDatalayerConfig) => {
     set(state => ({ datalayerConfig }));
   },
   setJupyterConfig: (jupyterConfig?: IJupyterConfig) => {
@@ -78,7 +77,7 @@ export const jupyterReactStore = createStore<JupyterReactState>((set, get) => ({
   },
 }));
 
-// TODO Reuse code portions from JupyterContext
+// TODO Reuse code portions from JupyterContext.
 export function useJupyterReactStore(): JupyterReactState;
 
 export function useJupyterReactStore<T>(selector: (state: JupyterReactState) => T): T;
@@ -99,8 +98,8 @@ export function useJupyterReactStoreFromProps(props: JupyterPropsType): JupyterR
     serviceManager: propsServiceManager,
     startDefaultKernel = true,
     terminals = false,
-    useRunningKernelId,
-    useRunningKernelIndex = -1,
+    useRunningKernelId = props.useRunningKernelId,
+    useRunningKernelIndex = props.useRunningKernelIndex || -1,
   } = props;
 
   const jupyterConfig = useMemo<IJupyterConfig>(() => {
@@ -137,7 +136,7 @@ export function useJupyterReactStoreFromProps(props: JupyterPropsType): JupyterR
     }
     if (!serviceManager) {
       if (lite) {
-        createServiceManagerLite(lite).then(serviceManager => {
+        createLiteServiceManager(lite).then(serviceManager => {
           setServiceManager(serviceManager);
           jupyterReactStore.getState().setServiceManager(serviceManager);
         });
@@ -156,10 +155,7 @@ export function useJupyterReactStoreFromProps(props: JupyterPropsType): JupyterR
         if (useRunningKernelId && useRunningKernelIndex > -1) {
           throw new Error('You can not ask for useRunningKernelId and useRunningKernelIndex at the same time.');
         }
-        if (
-          startDefaultKernel &&
-          (useRunningKernelId || useRunningKernelIndex > -1)
-        ) {
+        if (startDefaultKernel && (useRunningKernelId || useRunningKernelIndex > -1)) {
           throw new Error('You can not ask for startDefaultKernel and (useRunningKernelId or useRunningKernelIndex) at the same time.');
         }
         const serviceManager = new ServiceManager({ serverSettings });
@@ -175,39 +171,31 @@ export function useJupyterReactStoreFromProps(props: JupyterPropsType): JupyterR
       const kernelManager = serviceManager.kernels;
       console.log('Jupyter Kernel Manager is ready', kernelManager);
       if (useRunningKernelIndex > -1) {
-        const running = kernelManager.running();
-        let kernel = running.next();
-        let i = 0;
-        while (!kernel.done) {
-          if (i === useRunningKernelIndex) {
-            const wrappedKernel = new Kernel({
-              kernelManager,
-              kernelName: defaultKernelName,
-              kernelSpecName: defaultKernelName,
-              kernelModel: kernel.value,
-              kernelspecsManager: serviceManager.kernelspecs,
-              sessionManager: serviceManager.sessions,
-            });
-            if (initCode) {
-              try {
-                await wrappedKernel.execute(initCode)?.done;
-              } catch (error) {
-                console.error('Failed to execute the initial code', error);
-              }
-            }
-            setKernel(wrappedKernel);
-            jupyterReactStore.getState().kernel = wrappedKernel;
-            setIsLoading(false);
-            jupyterReactStore.getState().kernelIsLoading = false;
-            break;
+        await serviceManager.sessions.refreshRunning();
+        const runnings = Array.from(kernelManager.running());
+        const model = runnings[useRunningKernelIndex]
+        const existingKernel = new Kernel({
+          kernelManager,
+          kernelName: model.name,
+          kernelSpecName: model.name,
+          kernelModel: model,
+          kernelspecsManager: serviceManager.kernelspecs,
+          sessionManager: serviceManager.sessions,
+        });
+        if (initCode) {
+          try {
+            await existingKernel.execute(initCode)?.done;
+          } catch (error) {
+            console.error('Failed to execute the initial code', error);
           }
-          kernel = running.next();
-          i++;
         }
+        setKernel(existingKernel);
+        jupyterReactStore.getState().kernel = existingKernel;
         setIsLoading(false);
         jupyterReactStore.getState().kernelIsLoading = false;
-      } else if (startDefaultKernel) {
-        console.log('Starting Jupyter Kernel:', defaultKernelName);
+      }
+      else if (startDefaultKernel) {
+        console.log('Starting a Jupyter Kernel.', defaultKernelName);
         const defaultKernel = new Kernel({
           kernelManager,
           kernelName: defaultKernelName,
diff --git a/packages/react/src/state/index.ts b/packages/react/src/state/index.ts
index 2d4d0f31..8a073c1a 100644
--- a/packages/react/src/state/index.ts
+++ b/packages/react/src/state/index.ts
@@ -4,5 +4,5 @@
  * MIT License
  */
 
-export * from "./IJupyterReactConfig";
+export * from "./IDatalayerConfig";
 export * from "./JupyterReactState";
diff --git a/packages/react/webpack.config.js b/packages/react/webpack.config.js
index ddb1555e..8cee5f47 100644
--- a/packages/react/webpack.config.js
+++ b/packages/react/webpack.config.js
@@ -46,7 +46,8 @@ const ENTRY =
   // './src/examples/NotebookColorMode';
   // './src/examples/NotebookKernelChange';
   // './src/examples/NotebookLite';
-  // './src/examples/NotebookMutations';
+  // './src/examples/NotebookLiteContext';
+  './src/examples/NotebookMutations';
   // './src/examples/NotebookNbformat';
   // './src/examples/NotebookNbformatChange';
   // './src/examples/NotebookNoContext';
@@ -60,7 +61,7 @@ const ENTRY =
   // './src/examples/NotebookURL';
   // './src/examples/ObservableHQ';
   // './src/examples/Output';
-   './src/examples/OutputWithMonitoring';
+  // './src/examples/OutputWithMonitoring';
   // './src/examples/Outputs';
   // './src/examples/Plotly';
   // './src/examples/RunningSessions';