shell tab

packages/web/src/query/RunnerOutputFiles/RunnerOutputFiles.svelte

@@ -14,14 +14,14 @@
   export let runnerId;
   export let executeNumber;
 
+  const electron = getElectron();
+
   let files = [];
 
   $: if (executeNumber >= 0) files = [];
 
   $: effect = useEffect(() => registerRunnerDone(runnerId));
 
-  const electron = getElectron();
-
   function registerRunnerDone(rid) {
     if (rid) {
       socket.on(`runner-done-${rid}`, handleRunnerDone);
@@ -43,39 +43,39 @@
 
 {#if !files || files.length == 0}
   <ErrorInfo message="No output files" icon="img alert" />
+{:else}
+  <TableControl
+    rows={files}
+    columns={[
+      { fieldName: 'name', header: 'Name' },
+      { fieldName: 'size', header: 'Size', formatter: row => formatFileSize(row.size) },
+      !electron && {
+        fieldName: 'download',
+        header: 'Download',
+        component: DownloadLink,
+        getProps: row => ({
+          row,
+          runnerId,
+        }),
+      },
+      !electron && {
+        fieldName: 'copy',
+        header: 'Copy',
+        component: CopyLink,
+        getProps: row => ({
+          row,
+          runnerId,
+        }),
+      },
+      !electron && {
+        fieldName: 'show',
+        header: 'Show',
+        component: ShowLink,
+        getProps: row => ({
+          row,
+          runnerId,
+        }),
+      },
+    ]}
+  />
 {/if}
-
-<TableControl
-  rows={files}
-  columns={[
-    { fieldName: 'name', header: 'Name' },
-    { fieldName: 'size', header: 'Size', formatter: row => formatFileSize(row.size) },
-    !electron && {
-      fieldName: 'download',
-      header: 'Download',
-      component: DownloadLink,
-      getProps: row => ({
-        row,
-        runnerId,
-      }),
-    },
-    !electron && {
-      fieldName: 'copy',
-      header: 'Copy',
-      component: CopyLink,
-      getProps: row => ({
-        row,
-        runnerId,
-      }),
-    },
-    !electron && {
-      fieldName: 'show',
-      header: 'Show',
-      component: ShowLink,
-      getProps: row => ({
-        row,
-        runnerId,
-      }),
-    },
-  ]}
-/>

packages/web/src/query/RunnerOutputPane.svelte

@@ -9,18 +9,18 @@
 </script>
 
 <HorizontalSplitter>
-  <div class="container">
+  <div class="container" slot="1">
     <WidgetTitle>Messages</WidgetTitle>
     <SocketMessageView eventName={runnerId ? `runner-info-${runnerId}` : null} {executeNumber} />
   </div>
-  <div class="container">
+  <div class="container" slot="2">
     <WidgetTitle>Output files</WidgetTitle>
     <RunnerOutputFiles {runnerId} {executeNumber} />
   </div>
 </HorizontalSplitter>
 
 <style>
-  div {
+  .container {
     flex: 1;
     display: flex;
     flex-direction: column;