@sanity/runtime-cli 4.3.4 → 4.4.0

package/README.md

@@ -20,7 +20,7 @@ $ npm install -g @sanity/runtime-cli
 $ sanity-run COMMAND
 running command...
 $ sanity-run (--version)
-@sanity/runtime-cli/4.3.4 linux-x64 node-v22.14.0
+@sanity/runtime-cli/4.4.0 linux-x64 node-v22.15.0
 $ sanity-run --help [COMMAND]
 USAGE
   $ sanity-run COMMAND
@@ -74,7 +74,7 @@ EXAMPLES
   $ sanity-run blueprints add function --name my-function --function-type document-publish
 ```
 
-_See code: [src/commands/blueprints/add.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/blueprints/add.ts)_
+_See code: [src/commands/blueprints/add.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/blueprints/add.ts)_
 
 ## `sanity-run blueprints config`
 
@@ -103,7 +103,7 @@ EXAMPLES
   $ sanity-run blueprints config --edit --project-id <projectId> --stack-id <stackId>
 ```
 
-_See code: [src/commands/blueprints/config.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/blueprints/config.ts)_
+_See code: [src/commands/blueprints/config.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/blueprints/config.ts)_
 
 ## `sanity-run blueprints deploy`
 
@@ -123,7 +123,7 @@ EXAMPLES
   $ sanity-run blueprints deploy
 ```
 
-_See code: [src/commands/blueprints/deploy.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/blueprints/deploy.ts)_
+_See code: [src/commands/blueprints/deploy.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/blueprints/deploy.ts)_
 
 ## `sanity-run blueprints destroy`
 
@@ -146,7 +146,7 @@ EXAMPLES
   $ sanity-run blueprints destroy --id ST-a1b2c3
 ```
 
-_See code: [src/commands/blueprints/destroy.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/blueprints/destroy.ts)_
+_See code: [src/commands/blueprints/destroy.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/blueprints/destroy.ts)_
 
 ## `sanity-run blueprints info`
 
@@ -168,7 +168,7 @@ EXAMPLES
   $ sanity-run blueprints info --id ST-a1b2c3
 ```
 
-_See code: [src/commands/blueprints/info.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/blueprints/info.ts)_
+_See code: [src/commands/blueprints/info.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/blueprints/info.ts)_
 
 ## `sanity-run blueprints init`
 
@@ -198,7 +198,7 @@ EXAMPLES
   $ sanity-run blueprints init --blueprint-type <json|js|ts> --project-id <projectId> --stack-name <stackName>
 ```
 
-_See code: [src/commands/blueprints/init.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/blueprints/init.ts)_
+_See code: [src/commands/blueprints/init.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/blueprints/init.ts)_
 
 ## `sanity-run blueprints logs`
 
@@ -220,7 +220,7 @@ EXAMPLES
   $ sanity-run blueprints logs --watch
 ```
 
-_See code: [src/commands/blueprints/logs.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/blueprints/logs.ts)_
+_See code: [src/commands/blueprints/logs.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/blueprints/logs.ts)_
 
 ## `sanity-run blueprints plan`
 
@@ -237,7 +237,7 @@ EXAMPLES
   $ sanity-run blueprints plan
 ```
 
-_See code: [src/commands/blueprints/plan.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/blueprints/plan.ts)_
+_See code: [src/commands/blueprints/plan.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/blueprints/plan.ts)_
 
 ## `sanity-run blueprints stacks`
 
@@ -259,7 +259,7 @@ EXAMPLES
   $ sanity-run blueprints stacks --projectId a1b2c3
 ```
 
-_See code: [src/commands/blueprints/stacks.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/blueprints/stacks.ts)_
+_See code: [src/commands/blueprints/stacks.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/blueprints/stacks.ts)_
 
 ## `sanity-run functions dev`
 
@@ -279,7 +279,7 @@ EXAMPLES
   $ sanity-run functions dev --port 8974
 ```
 
-_See code: [src/commands/functions/dev.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/functions/dev.ts)_
+_See code: [src/commands/functions/dev.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/functions/dev.ts)_
 
 ## `sanity-run functions env add NAME KEY VALUE`
 
@@ -301,7 +301,7 @@ EXAMPLES
   $ sanity-run functions env add MyFunction API_URL https://api.example.com/
 ```
 
-_See code: [src/commands/functions/env/add.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/functions/env/add.ts)_
+_See code: [src/commands/functions/env/add.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/functions/env/add.ts)_
 
 ## `sanity-run functions env list NAME`
 
@@ -321,7 +321,7 @@ EXAMPLES
   $ sanity-run functions env list MyFunction
 ```
 
-_See code: [src/commands/functions/env/list.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/functions/env/list.ts)_
+_See code: [src/commands/functions/env/list.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/functions/env/list.ts)_
 
 ## `sanity-run functions env remove NAME KEY`
 
@@ -342,7 +342,7 @@ EXAMPLES
   $ sanity-run functions env remove MyFunction API_URL
 ```
 
-_See code: [src/commands/functions/env/remove.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/functions/env/remove.ts)_
+_See code: [src/commands/functions/env/remove.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/functions/env/remove.ts)_
 
 ## `sanity-run functions invoke NAME`
 
@@ -368,7 +368,7 @@ EXAMPLES
   $ sanity-run functions invoke <name> --file 'payload.json'
 ```
 
-_See code: [src/commands/functions/invoke.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/functions/invoke.ts)_
+_See code: [src/commands/functions/invoke.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/functions/invoke.ts)_
 
 ## `sanity-run functions logs NAME`
 
@@ -400,7 +400,7 @@ EXAMPLES
   $ sanity-run functions logs <name> --delete
 ```
 
-_See code: [src/commands/functions/logs.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/functions/logs.ts)_
+_See code: [src/commands/functions/logs.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/functions/logs.ts)_
 
 ## `sanity-run functions test NAME`
 
@@ -433,7 +433,7 @@ EXAMPLES
   $ sanity-run functions test <name> --data '{ "id": 1 }' --timeout 60
 ```
 
-_See code: [src/commands/functions/test.ts](https://github.com/sanity-io/runtime-cli/blob/v4.3.4/src/commands/functions/test.ts)_
+_See code: [src/commands/functions/test.ts](https://github.com/sanity-io/runtime-cli/blob/v4.4.0/src/commands/functions/test.ts)_
 
 ## `sanity-run help [COMMAND]`
 

package/dist/commands/blueprints/deploy.js

@@ -1,4 +1,5 @@
 import { setTimeout } from 'node:timers/promises';
+import { inspect } from 'node:util';
 import { Command, Flags } from '@oclif/core';
 import Spinner from 'yocto-spinner';
 import { stashAsset } from '../../actions/blueprints/assets.js';
@@ -24,9 +25,7 @@ export default class Deploy extends Command {
         const { errors, projectId, stackId, parsedBlueprint: { resources }, deployedStack, } = await readBlueprintOnDisk({ getStack: true, token });
         if (errors.length > 0) {
             // printErrors(errors) // TODO: error printer in formatting
-            this.log('Blueprint parse errors:');
-            console.dir(errors, { depth: null });
-            return;
+            this.error(`Blueprint parse errors:\n${inspect(errors, { depth: null })}`);
         }
         if (!deployedStack || !stackId || !projectId) {
             this.error('Before deploying, run `sanity blueprints init`');
@@ -96,7 +95,7 @@ export default class Deploy extends Command {
         }
         else {
             this.debug('STACK ERROR RESPONSE:', stack);
-            spinner.error(`${red('Failed')} to ${deployedStack ? 'update' : 'create'} stack`);
+            spinner.error(`${red('Failed')} to update stack`);
             this.log(`Error: ${deployError || JSON.stringify(stack, null, 2) || 'Unknown error'}`);
         }
     }

package/dist/server/static/components/app.css

@@ -60,6 +60,8 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: var(--font-family-sans);
+
+  /* Gutter Gradient Variables */
 }
 
 /* ==========================================================================
@@ -651,12 +653,19 @@
 
 html {
   color-scheme: light dark;
+  min-height: 100dvh;
+  max-height: 100dvh;
+  height: 100%;
+  overflow: hidden;
 }
 
 body {
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
   color: var(--text-color) !important;
-  min-height: 100vh;
+  min-height: 100dvh;
+  max-height: 100dvh;
+  height: 100%;
+  overflow: hidden;
   display: grid;
   grid-template-areas:
     'header'
@@ -667,12 +676,6 @@ body {
   grid-template-rows: min-content min-content min-content 1fr;
 }
 
-body,
-html {
-  height: 100%;
-  overflow: hidden;
-}
-
 /* Utilities */
 .flex {
   display: flex;
@@ -768,21 +771,103 @@ body > nav {
 }
 body > main {
   grid-area: main;
+  /* Ensure main takes up available space if body is grid/flex */
+  overflow: hidden; /* Prevent main itself from scrolling */
+  min-height: 0; /* Needed for grid children height */
 }
 
-@media (min-width: 40rem) {
-  body {
-    grid-template:
-      'header             header' min-content
-      'filters            filters' min-content
-      'left-sidebar       main  ' 1fr
-      / minmax(auto, 320px) minmax(var(--layout-min-content-width, 16rem), 1fr);
-  }
+/* Add styles for filters-component form */
+/* Default (Mobile) Styles */
+filters-component form {
+  display: block; /* Stack direct children */
+  padding: var(--space-3); /* Consistent padding */
+  border-bottom: 1px solid var(--card-border-color);
+}
+
+filters-component form > * {
+  /* Target direct children: dropdowns, fieldset */
+  display: block; /* Ensure they are block level */
+  width: 100%; /* Make them take full width */
+  margin-bottom: var(--space-3); /* Add space below each item when stacked */
+}
+
+filters-component form > *:last-child {
+  margin-bottom: 0; /* Remove margin from the last stacked item */
+}
+
+filters-component form label {
+  display: block; /* Ensure label stacks above input if needed */
+  margin-bottom: var(--space-1); /* Small space between label and input */
+}
+
+filters-component form input {
+  width: 100%; /* Make input fill its container */
+  box-sizing: border-box; /* Include padding/border in width calculation */
+}
+/* End of Mobile Styles */
+
+/* Apply grid styles to main#main-content */
+#main-content {
+  display: grid;
+  grid-template-areas:
+    'payload response'
+    'console console';
+  grid-template-columns: 1fr 1fr;
+  /* Let console height be flexible based on content, up to a max */
+  grid-template-rows: 1fr 1fr;
+  /* Ensure grid takes full height of its container (main) */
+  height: 100%;
+  max-height: 100%;
+  min-height: 0; /* Important for nested overflow/height */
+}
+
+payload-panel {
+  grid-area: payload;
+  max-height: 100%; /* Fit within allocated grid row space */
+  overflow: hidden; /* Let internal elements scroll */
+  min-height: 0; /* Allow shrinking */
+}
+
+response-panel {
+  grid-area: response;
+  max-height: 100%;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* Target console-panel for grid area and height constraints */
+console-panel {
+  grid-area: console;
+  overflow: hidden; /* The inner div handles scrolling */
 }
 
 @media (max-width: 40rem) {
-  button {
-    width: 100%;
+  /* Mobile layout: stack elements vertically */
+  #main-content {
+    grid-template-areas:
+      'payload'
+      'response'
+      'console';
+    grid-template-columns: 1fr;
+    /* Adjust row heights for mobile, maybe allow content to determine height */
+    grid-template-rows: auto auto auto;
+    height: auto; /* Allow main content to scroll if needed */
+    max-height: none;
+    overflow-y: auto; /* Allow scrolling for the whole main area */
+  }
+
+  /* Reset max-heights on mobile if they cause layout issues */
+  payload-panel,
+  response-panel,
+  console-panel {
+    max-height: none;
+    min-height: 200px; /* Give some minimum space on mobile */
+    overflow: auto; /* Allow individual scrolling if content is large */
+  }
+
+  /* Ensure console has reasonable height on mobile */
+  console-panel {
+    max-height: 400px; /* Allow more console height on mobile maybe */
   }
 
   .block-lg {
@@ -794,6 +879,40 @@ body > main {
   }
 }
 
+@media (min-width: 40em) {
+  body {
+    grid-template:
+      'header             header' min-content
+      'filters            filters' min-content
+      'left-sidebar       main  ' 1fr
+      / minmax(auto, 320px) 1fr;
+  }
+  .border-top-none-l {
+    border-top: 0;
+  }
+
+  /* Revert filters-component form to horizontal layout on larger screens */
+  filters-component form {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end; /* Align form elements along their bottom edge */
+    gap: var(--space-3); /* Space between elements */
+    padding-left: var(--space-3);
+    padding-bottom: var(--space-3);
+  }
+
+  filters-component form > * {
+    width: auto; /* Allow elements to size based on content/flex rules */
+    margin-bottom: 0; /* Remove stacking margin */
+  }
+
+  /* Optional: Give API version input a specific width or allow growth */
+  filters-component form fieldset {
+    min-width: 150px; /* Example minimum width */
+    /* flex-grow: 1; */ /* Uncomment to allow it to fill space */
+  }
+}
+
 header {
   border-bottom: 1px solid var(--card-border-color);
   background: light-dark(white, var(--gray-950));
@@ -811,7 +930,7 @@ footer {
 
 .logo-image {
   height: 25px;
-  width: auto;
+  width: 25px;
 }
 
 .logo-image img {
@@ -842,6 +961,7 @@ footer {
   line-height: 1;
   padding: 0px 12px !important;
   height: 24px !important;
+  max-width: 160px;
 }
 
 .sanity-button:hover {
@@ -930,7 +1050,19 @@ m-tabs {
 }
 
 .gutter-gradient {
-  background-image: linear-gradient(to right, light-dark(var(--gray-50), var(--gray-900)) 30px, light-dark(var(--gray-100), var(--gray-800)) 30.0001px, light-dark(var(--gray-100), var(--gray-800)) 31px, transparent 31px);
+  --gutter-width: 30px;
+  --gutter-border-width: 1px;
+
+  /* Light mode default gradient */
+  background-image: linear-gradient(to right, var(--gray-50) var(--gutter-width), var(--gray-100) var(--gutter-width), var(--gray-100) calc(var(--gutter-width) + var(--gutter-border-width)), transparent calc(var(--gutter-width) + var(--gutter-border-width)));
+}
+
+/* Apply dark mode gradient override */
+@media (prefers-color-scheme: dark) {
+  .gutter-gradient {
+    background-image: linear-gradient(to right, var(--gray-900) var(--gutter-width), var(--gray-800) var(--gutter-width), var(--gray-800) calc(var(--gutter-width) + var(--gutter-border-width)), transparent calc(var(--gutter-width) + var(--gutter-border-width)));
+  }
+  /* Add other dark-mode specific overrides here if needed */
 }
 
 .bg {
@@ -960,6 +1092,42 @@ m-tabs {
   background-color: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.1)) !important;
 }
 
+.slab-stat {
+  font-family: var(--font-family-mono);
+  display: flex;
+  align-items: center;
+  gap: 0 8px;
+  font-size: var(--font-size-text-2);
+  margin: 0;
+  padding: var(--space-3);
+}
+
+.slab-stat dt {
+  font-weight: 400;
+  text-transform: none;
+  margin: 0;
+  padding: 0;
+}
+
+.slab-stat dd {
+  font-weight: 700;
+  text-transform: none;
+  margin: 0;
+  padding: 0;
+}
+
 pre {
+  color: var(--base-text-color) !important;
   background-color: transparent !important;
 }
+
+time {
+  font-family: var(--font-family-mono);
+}
+
+response-panel,
+payload-panel {
+  max-height: 100%;
+  height: 100%;
+  overflow: hidden;
+}

package/dist/server/static/components/console-panel.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/server/static/components/console-panel.js

@@ -0,0 +1,53 @@
+/* globals customElements document */
+import {ApiBaseElement} from './api-base.js'
+
+// Template for the console panel
+const template = `
+<div id="console-container" style='position: relative; background: var(--base-background-color); padding: var(--space-0) var(--space-3) var(--space-7) var(--space-4);overflow-y:scroll; border-top: 1px solid var(--card-border-color); height: 100%; max-height: 100%;'>
+    <h3 class="config-label" style="padding-top: var(--space-3); padding-bottom: var(--space-3);  z-index: 32; background: var(--base-background-color); position: sticky; top: 0; left: 0; right: 0; margin-top:0;margin-bottom:0;">Console</h3>
+    <pre id="console-output" style="padding: 0; margin: 0 0 var(--space-4) 0; white-space: pre-wrap; word-wrap: break-word;"></pre>
+</div>
+`
+
+class ConsolePanel extends ApiBaseElement {
+  updateConsole = ({result}) => {
+    // Guard against element not being ready or API not injected yet
+    if (!this.consoleOutput || !result) return
+
+    const {error, logs} = result
+    if (error) {
+      // Display error details in the console
+      this.consoleOutput.innerText = error?.details?.error ?? 'An error occurred.'
+    } else {
+      // Display regular logs
+      this.consoleOutput.innerText = logs ?? '' // Handle case where logs might be null/undefined
+    }
+  }
+
+  connectedCallback() {
+    this.innerHTML = template
+    this.consoleOutput = this.querySelector('#console-output')
+
+    // Subscribe to changes in the result state to update the console
+    if (this.api) {
+      this.api.subscribe(this.updateConsole, ['result'])
+      // Initial update in case result is already populated
+      if (this.api.store.result) {
+        this.updateConsole({result: this.api.store.result})
+      }
+    } else {
+      console.error('API context not available for console-panel on connect.')
+      // Optionally, set up a mechanism to wait for API initialization if needed
+    }
+  }
+
+  disconnectedCallback() {
+    // Unsubscribe when the element is removed from the DOM
+    if (this.api) {
+      this.api.unsubscribe(this.updateConsole)
+    }
+  }
+}
+
+// Define the new custom element
+customElements.define('console-panel', ConsolePanel)

package/dist/server/static/components/filters.js

@@ -1,8 +1,9 @@
 class FiltersComponent extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-        <form style="display:flex; gap: 8px;padding-left: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--card-border-color);">
-            <dataset-dropdown></dataset-dropdown>
+        <form style="gap: 8px;padding-left: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--card-border-color);">
+          <projects-dropdown></projects-dropdown>    
+          <dataset-dropdown></dataset-dropdown>
             <fieldset class="mar-t-sm">
                 <label class="config-label">
                 <span>API Version</span>
@@ -10,7 +11,7 @@ class FiltersComponent extends HTMLElement {
                 <input name="apiVersion" id="apiversion" style="background: transparent; border-color: light-dark(var(--gray-200), var(--gray-700))">
                 </label>
             </fieldset>
-            <projects-dropdown></projects-dropdown>
+            
 
           </form>
         `

package/dist/server/static/components/function-list.js

@@ -2,7 +2,7 @@
 import {ApiBaseElement} from './api-base.js'
 
 const template = `<ol class="hidden-lg" type="content" style="padding:0 16px;"></ol>
-<fieldset class="pad-sm hidden block-lg"><select></select></fieldset>
+<fieldset class="hidden block-lg" style="padding:0 var(--space-3); margin-bottom: var(--space-3);"><select></select></fieldset>
 `
 
 class FunctionList extends ApiBaseElement {

package/dist/server/static/components/payload-panel.js

@@ -2,13 +2,13 @@
 import {EditorView, basicSetup, json} from '../vendor/vendor.bundle.js'
 import {ApiBaseElement} from './api-base.js'
 
-const template = `<div class="gutter-gradient relative h-100 max-h-100 y-scroll">
+const template = `<div class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l">
     <div class="bg gutter-gradient sticky top-0 right-0 left-0 z-100">
       <div class="flex items-center space-between" style="padding: 8px 20px 8px 48px;">
       <h2 class="config-label mar-t-0 mar-b-0">Event</h2>
       <button ord="primary" class="sanity-button">
         <span>Run</span>
-  <svg data-sanity-icon="play" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 18.5V6.5L17.5 12.5L7.5 18.5Z" fill="currentColor" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg>
+        <svg data-sanity-icon="play" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 18.5V6.5L17.5 12.5L7.5 18.5Z" fill="currentColor" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg>
       </button>
   </div>
     <hr class='hr-border' style='margin-left: 31px; ' />
@@ -35,7 +35,8 @@ class PayloadPanel extends ApiBaseElement {
       this.button.innerHTML = '<network-spinner></network-spinner>'
     } else {
       this.button.removeAttribute('disabled')
-      this.button.innerText = 'Run'
+      this.button.innerHTML = `<span>Run</span>
+  <svg data-sanity-icon="play" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 18.5V6.5L17.5 12.5L7.5 18.5Z" fill="currentColor" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg>`
     }
   }
 

package/dist/server/static/components/response-panel.js

@@ -10,43 +10,31 @@ import {
 } from '../vendor/vendor.bundle.js'
 import {ApiBaseElement} from './api-base.js'
 
-const template = `<div class="gutter-gradient border-left h-100">
-    <m-tabs id="response-tabs" role="tablist">
-        <button class="tab" id="a" role="tab" aria-selected="true">Response</button>
-        <button class="tab" id="b" role="tab">Console</button>
-    </m-tabs>
-    <hr class="hr-border" style="margin-left: 31px" />
-    <div role="tabpanel" data-tab-id="a" class="h-100">
-        <div>
-            <span id="time"></span> <span id="size"></span>
+const template = `<div class="border-left border-top border-top-none-l h-100 gutter-gradient" style='height: 100%; max-height: 100%; overflow: hidden; display:grid;grid-template-rows: auto 1fr; grid-template-columns: 1fr;' >
+    <!-- Response Section -->
+        <div style='overflow-y:scroll; min-height: 0;'>
+            <div style='padding-bottom: var(--space-6)'>
+            <h3 class="config-label" style='display: none; margin-top: 0;'>Response</h3>
+            <header class='flex space-between'>
+              <dl class='slab-stat'>
+                <dt style='white-space:nowrap;'>Response size</dt>
+                <dd id="size" style='white-space:nowrap;'></dd>
+              </dl>
+              <dl class='slab-stat'>
+                <dt>Time</dt>
+                <dd><time id="time" datetime=""></time></dd>
+              </dl>
+          </header>
+          <div id="response" name="response" class="cm-s-dracula"></div>
         </div>
-        <div id="response" name="response"></div>
-    </div>
-    <div role="tabpanel" data-tab-id="b" class="pad-t-sm h-100" hidden><pre></pre></div>
+      </div>
 </div>
 `
 class ResponsePanel extends ApiBaseElement {
-  switchTab = (e) => {
-    const tabElement = e.target.closest('[role=tab]')
-    // If the click wasn't on a tab button, do nothing
-    if (!tabElement) {
-      return
-    }
-    const selectedTabId = tabElement.id
-
-    // Select the tab and its panel
-    // Use e.currentTarget which refers to the element the listener was attached to (m-tabs)
-    for (const tab of e.currentTarget.querySelectorAll('[role=tab]')) {
-      tab.ariaSelected = tab.id === selectedTabId
-    }
-
-    // Find panels relative to the component itself to avoid affecting other potential tab panels on the page
-    for (const panel of this.querySelectorAll('[role=tabpanel]')) {
-      panel.hidden = panel.dataset.tabId !== selectedTabId
-    }
-  }
   updateResponse = ({result}) => {
-    const {error, json, logs, time} = result
+    if (!result) return
+
+    const {error, json, time} = result
     if (!error) {
       const transaction = this.api.store.response.state.update({
         changes: {
@@ -59,9 +47,15 @@ class ResponsePanel extends ApiBaseElement {
 
       this.size.innerText = json ? prettyBytes(JSON.stringify(json).length) : ''
       this.time.innerText = prettyMilliseconds(time)
-      this.consoleTab.innerText = logs
+      this.time.dateTime = `PT${time / 1000}S`
     } else {
-      this.consoleTab.innerText = error?.details?.error
+      const transaction = this.api.store.response.state.update({
+        changes: {from: 0, to: this.api.store.response.state.doc.length, insert: ''},
+      })
+      this.api.store.response.dispatch(transaction)
+      this.size.innerText = ''
+      this.time.innerText = ''
+      this.time.removeAttribute('datetime')
     }
   }
 
@@ -70,10 +64,14 @@ class ResponsePanel extends ApiBaseElement {
     this.response = this.querySelector('#response')
     this.size = this.querySelector('#size')
     this.time = this.querySelector('#time')
-    this.consoleTab = this.querySelector('pre')
-    this.tabs = this.querySelector('m-tabs')
-    this.tabs.addEventListener('click', this.switchTab)
-    this.api.subscribe(this.updateResponse, ['result'])
+    if (this.api) {
+      this.api.subscribe(this.updateResponse, ['result'])
+      if (this.api.store.result) {
+        this.updateResponse({result: this.api.store.result})
+      }
+    } else {
+      console.error('API context not available for response-panel on connect.')
+    }
 
     this.api.store.response = new EditorView({
       doc: '\n\n\n\n',
@@ -83,8 +81,9 @@ class ResponsePanel extends ApiBaseElement {
   }
 
   disconnectedCallback() {
-    this.tabs.removeEventListener('click', this.switchTab)
-    this.api.unsubscribe(this.updateResponse)
+    if (this.api) {
+      this.api.unsubscribe(this.updateResponse)
+    }
   }
 }
 

package/dist/server/static/index.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <title>Sanity Functions</title>
         <link href="https://unpkg.com/m-@3.2.0/dist/m-.woff2" rel="preload" as="font" crossorigin>
-        <link href="./components/app.css" rel="stylesheet">
         <link href="https://unpkg.com/m-@3.2.0/dist/m-.css" rel="stylesheet">
+        <link href="./components/app.css" rel="stylesheet">
+
     </head>
     <body>
         <header data-slot="header">
@@ -16,12 +18,13 @@
         </header>
         <filters-component></filters-component>
         <nav style="padding-top: var(--size-5); border-right: 1px solid var(--card-border-color);max-height: 100%; overflow-y: scroll;">
-          <h4 class="config-label mar-t-0" style="padding-left: 12px;">Functions</h4>
+          <h4 class="config-label mar-t-0" style="padding-left: var(--space-3); margin-bottom:var(--space-3);">Functions</h4>
           <function-list></function-list>
         </nav>
-        <main style='display: grid; grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;'>
+        <main id="main-content" style='max-height: 100%; overflow: hidden;'>
               <payload-panel></payload-panel>
               <response-panel></response-panel>
+              <console-panel></console-panel>
         </main>
 
 
@@ -32,5 +35,6 @@
         <script src="./components/network-spinner.js" type="module"></script>
         <script src="./components/payload-panel.js" type="module"></script>
         <script src="./components/response-panel.js" type="module"></script>
+        <script src="./components/console-panel.js" type="module"></script>
     </body>
 </html>

package/oclif.manifest.json

@@ -769,5 +769,5 @@
       ]
     }
   },
-  "version": "4.3.4"
+  "version": "4.4.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sanity/runtime-cli",
   "description": "Sanity's Runtime CLI for Blueprints and Functions",
-  "version": "4.3.4",
+  "version": "4.4.0",
   "author": "Sanity Runtime Team",
   "type": "module",
   "license": "MIT",