Implement connecting to running kernel

src/dialogs.tsx

@@ -184,8 +184,9 @@ export class KernelSelector extends ReactWidget {
    */
   protected render(): React.ReactElement<any> | null {
     const items: ILauncher.IItemOptions[] = [];
+    const specs = this.options.data.specs!.kernelspecs!;
 
-    for (const spec of Object.values(this.options.data.specs!.kernelspecs!)) {
+    for (const spec of Object.values(specs)) {
       if (!spec) {
         continue;
       }
@@ -200,32 +201,86 @@ export class KernelSelector extends ReactWidget {
         kernelIconUrl,
         metadata: {
           kernel: JSONExt.deepCopy(spec.metadata || {}) as ReadonlyJSONValue
+        }
+      });
+    }
+    const runningItems: ILauncher.IItemOptions[] = [];
+    for (const model of this.options.data.sessions!) {
+      const kernel = model.kernel;
+      if (!kernel) {
+        continue;
+      }
+      const spec = specs[kernel.name]!;
+      const kernelIconUrl =
+        spec.resources['logo-svg'] || spec.resources['logo-64x64'];
+      runningItems.push({
+        command: 'notebook:create-new',
+        args: {
+          isLauncher: true,
+          kernelName: spec.name
         },
-        category: this.trans.__('Notebook')
+        kernelIconUrl,
+        metadata: {
+          kernel: {
+            ...JSONExt.deepCopy(spec.metadata || {}),
+            state: kernel.execution_state ?? 'running',
+            'used by': model.name
+          } as ReadonlyJSONValue,
+          model: kernel as unknown as ReadonlyJSONValue
+        }
       });
     }
     const notebookItems = items.map(this.renderKernelCommand);
+    const runningKernelsItems = runningItems.map(this.renderKernelCommand);
 
     return (
-      <KernelTable
-        trans={this.trans}
-        commands={this.commands}
-        items={notebookItems}
-        settings={this._settings}
-        query=""
-        showSearchBox={true}
-        onClick={item => {
-          this._selection = item;
-          this.options.acceptDialog();
-        }}
-      />
+      <>
+        <h3 className="jp-KernelSelector-Section">
+          {this.trans.__('Start a new kernel')}
+        </h3>
+        <KernelTable
+          trans={this.trans}
+          commands={this.commands}
+          items={notebookItems}
+          settings={this._settings}
+          query=""
+          showSearchBox={true}
+          onClick={item => {
+            this._selection = item;
+            this.options.acceptDialog();
+          }}
+        />
+        {runningKernelsItems.length > 0 ? (
+          <>
+            <h3 className="jp-KernelSelector-Section">
+              {this.trans.__('Connect to a running kernel')}
+            </h3>
+            <KernelTable
+              trans={this.trans}
+              commands={this.commands}
+              items={runningKernelsItems}
+              settings={this._settings}
+              query=""
+              showSearchBox={false}
+              onClick={item => {
+                this._selection = item;
+                this.options.acceptDialog();
+              }}
+              hideColumns={['last-used', 'star']}
+            />
+          </>
+        ) : null}
+      </>
     );
   }
 
   getValue(): Partial<Kernel.IModel> | null {
     if (!this._selection) {
       return null;
     }
+    if (this._selection.metadata?.model) {
+      return this._selection.metadata.model as unknown as Kernel.IModel;
+    }
     return { name: this._selection.args!.kernelName as string };
   }
 

src/launcher.tsx

@@ -227,6 +227,7 @@ export function KernelTable(props: {
   showSearchBox: boolean;
   query: string;
   onClick: (item: IKernelItem) => void;
+  hideColumns?: string[];
 }) {
   const { trans } = props;
   let query: string;
@@ -266,6 +267,9 @@ export function KernelTable(props: {
             return '-';
           }
           const value = kernelMeta[metadataKey];
+          if (typeof value === 'string') {
+            return value;
+          }
           return JSON.stringify(value);
         },
         sort: (a: IKernelItem, b: IKernelItem) => {
@@ -295,7 +299,7 @@ export function KernelTable(props: {
     }
   );
 
-  const columns: Table.IColumn<IKernelItem>[] = [
+  const availableColumns: Table.IColumn<IKernelItem>[] = [
     {
       id: 'icon',
       label: trans.__('Icon'),
@@ -405,6 +409,10 @@ export function KernelTable(props: {
         Number(a.starred) - Number(b.starred)
     }
   ];
+  const forceHiddenColumns = props.hideColumns ?? [];
+  const columns = availableColumns.filter(
+    column => !forceHiddenColumns.includes(column.id)
+  );
 
   const [hiddenColumns, setHiddenColumns] = React.useState<
     ISettingsLayout['hiddenColumns']

style/base.css

@@ -182,10 +182,23 @@
   max-width: unset;
 }
 
+.jp-KernelSelector-Dialog > .jp-Dialog-content > .jp-Dialog-header {
+  display: none;
+}
+
 .jp-KernelSelector-SelectButton {
   display: none;
 }
 
+.jp-KernelSelector-Dialog .jp-NewLauncher-table {
+  margin-bottom: 8px;
+}
+
+.jp-KernelSelector-Section {
+  margin: 0;
+  margin-bottom: 4px;
+}
+
 /* Styles for scenario where full row is clickable  */
 
 .jp-NewLauncher-table tr {