From a730cb3d2a40c5604799de922220e64d037b2363 Mon Sep 17 00:00:00 2001
From: Steve Purves <steve@curvenote.com>
Date: Mon, 27 Nov 2023 10:06:18 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=20fix=20list=20running=20sessions?=
 =?UTF-8?q?=20(#715)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐞added some admin controls for debugging
* 🛠fix new iterator usage
* 📕 changeset
---
 .changeset/new-spoons-divide.md      |  6 ++
 apps/demo-react/src/AdminPanel.tsx   | 85 ++++++++++++++++++++++++++++
 apps/demo-react/src/NotebookPage.tsx |  2 +
 packages/core/src/server.ts          |  7 ++-
 4 files changed, 97 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/new-spoons-divide.md
 create mode 100644 apps/demo-react/src/AdminPanel.tsx

diff --git a/.changeset/new-spoons-divide.md b/.changeset/new-spoons-divide.md
new file mode 100644
index 00000000..32c65172
--- /dev/null
+++ b/.changeset/new-spoons-divide.md
@@ -0,0 +1,6 @@
+---
+'demo-react': patch
+'thebe-core': patch
+---
+
+Fixed `server.listRunningSession` to use the new iterator returned by `sessionManager.running()` properly. This fixed an unhandle exception that was breaking `myst-theme` based sites.
diff --git a/apps/demo-react/src/AdminPanel.tsx b/apps/demo-react/src/AdminPanel.tsx
new file mode 100644
index 00000000..22f416dd
--- /dev/null
+++ b/apps/demo-react/src/AdminPanel.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { useThebeServer, useThebeSession } from 'thebe-react';
+
+function KernelCard({ name, path, kernel }: { name: string; path: string; kernel: any }) {
+  return (
+    <div className="border-[1px] border-gray-800 rounded shadow p-2 mb-2 gap-1">
+      <div className="flex justify-between">
+        <div className="font-semibold">{name}</div>
+        <div className="ml-1 font-light mono">[{kernel.name}]</div>
+      </div>
+      <div className="text-xs">path: {path}</div>
+    </div>
+  );
+}
+
+export function AdminPanel() {
+  const { ready: serverReady, server } = useThebeServer();
+  const { ready: sessionReady, shutdown } = useThebeSession();
+  const [open, setOpen] = useState<boolean>(false);
+  const [output, setOutput] = useState<any>('...');
+
+  const ready = serverReady && sessionReady;
+
+  const listRunning = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!server) setOutput('no server');
+    server
+      ?.listRunningSessions()
+      .then((data: any) => {
+        setOutput(
+          <div className="flex flex-wrap gap-3">
+            {data.map((k: any) => (
+              <KernelCard {...k} />
+            ))}
+          </div>,
+        );
+      })
+      .catch((err: { message: string }) => {
+        setOutput(err.message);
+      });
+  };
+
+  const shutdownSession = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    shutdown?.()
+      .then((data: any) => {
+        setOutput('session shutdown');
+      })
+      .catch((err: { message: string }) => {
+        setOutput(err.message);
+      });
+  };
+
+  return (
+    <div
+      className="mono not-prose max-w-[80%] m-auto min-h-[1.2em] mt-2 border-[1px] border-gray-800 relative pb-1 cursor-pointer"
+      onClick={() => setOpen((o) => !o)}
+    >
+      <div className="absolute px-1 py-[1px] text-xs text-white bg-gray-800">admin panel</div>
+      {open && ready && (
+        <div className="flex flex-col">
+          <div className="flex gap-1 p-3 mt-3">
+            <div>
+              <button
+                className="border-[1px] px-2 py1 border-gray-400 hover:border-black rounded shadow font-semibold"
+                onClick={listRunning}
+              >
+                list running kernels
+              </button>
+            </div>
+            <div>
+              <button
+                className="border-[1px] px-2 py1 border-gray-400 hover:border-black rounded shadow font-semibold"
+                onClick={shutdownSession}
+              >
+                shutdown session
+              </button>
+            </div>
+          </div>
+          <pre className="p-3 text-left">{output}</pre>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/demo-react/src/NotebookPage.tsx b/apps/demo-react/src/NotebookPage.tsx
index bc60ec02..15f0e7bc 100644
--- a/apps/demo-react/src/NotebookPage.tsx
+++ b/apps/demo-react/src/NotebookPage.tsx
@@ -3,6 +3,7 @@ import { ConnectionStatusTray } from './ConnectionStatusTray';
 import { ConnectionErrorTray } from './ConnectionErrorTray';
 import { NotebookStatusTray } from './NotebookStatusTray';
 import { NotebookErrorTray } from './NotebookErrorTray';
+import { AdminPanel } from './AdminPanel';
 
 export function NotebookPage({ children }: React.PropsWithChildren) {
   const { connecting, ready, config, error } = useThebeServer();
@@ -16,6 +17,7 @@ export function NotebookPage({ children }: React.PropsWithChildren) {
           <ConnectionErrorTray />
           <NotebookStatusTray />
           <NotebookErrorTray />
+          <AdminPanel />
           {children}
         </>
       </ThebeSessionProvider>
diff --git a/packages/core/src/server.ts b/packages/core/src/server.ts
index c863b8df..cf0437ec 100644
--- a/packages/core/src/server.ts
+++ b/packages/core/src/server.ts
@@ -141,9 +141,10 @@ class ThebeServer implements ServerRuntime, ServerRestAPI {
     await this.ready;
     const iter = this.sessionManager?.running();
     const models: SessionIModel[] = [];
-    let model: IteratorResult<SessionIModel, any> | undefined;
-    while ((model = iter?.next()) !== undefined) {
-      models.push(model.value);
+    let result = iter?.next();
+    while (result && !result.done) {
+      models.push(result.value);
+      result = iter?.next();
     }
     return models;
   }