@sanity/runtime-cli 4.3.4 → 4.3.5-bundle.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.3.5-bundle.0 darwin-arm64 node-v22.14.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.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.3.5-bundle.0/src/commands/functions/test.ts)_
 
 ## `sanity-run help [COMMAND]`
 

package/dist/actions/blueprints/assets.d.ts

@@ -6,5 +6,6 @@ export declare function stashAsset({ resource, auth, }: {
 }): Promise<{
     success: boolean;
     assetId?: string;
+    outputPath?: string;
     error?: string;
 }>;

package/dist/actions/blueprints/assets.js

@@ -3,21 +3,35 @@ import path from 'node:path';
 import { cwd } from 'node:process';
 import AdmZip from 'adm-zip';
 import config from '../../config.js';
+import { bundleFunction } from '../../utils/bundle/bundle-function.js';
+import { shouldBundleFunction } from '../../utils/functions/should-bundle.js';
 import getHeaders from '../../utils/get-headers.js';
 const { apiUrl } = config;
 export const stashUrl = `${apiUrl}vX/blueprints/assets/stash`;
 export async function stashAsset({ resource, auth, }) {
     if (!resource.src)
         throw new Error('Resource src is required');
+    let functionPath = path.join(cwd(), resource.src);
+    let cleanup = async () => { };
+    const shouldBundle = await shouldBundleFunction(resource);
+    if (shouldBundle) {
+        try {
+            const result = await bundleFunction(resource);
+            functionPath = result.outputDir;
+            cleanup = result.cleanup;
+        }
+        catch (err) {
+            return { success: false, error: err instanceof Error ? err.message : `${err}` };
+        }
+    }
     try {
-        const sourcePath = path.join(cwd(), resource.src);
-        const stats = await fs.promises.stat(sourcePath);
+        const stats = await fs.promises.stat(functionPath);
         const zip = new AdmZip();
         if (stats.isDirectory()) {
-            zip.addLocalFolder(sourcePath);
+            zip.addLocalFolder(functionPath);
         }
         else {
-            zip.addLocalFile(sourcePath, '', 'index.js');
+            zip.addLocalFile(functionPath, '', 'index.js');
         }
         const zipBuffer = zip.toBuffer();
         const base64Zip = zipBuffer.toString('base64');
@@ -41,4 +55,7 @@ export async function stashAsset({ resource, auth, }) {
             error = err.message;
         return { success: false, error };
     }
+    finally {
+        await cleanup();
+    }
 }

package/dist/actions/functions/test.d.ts

@@ -1,2 +1,2 @@
-import type { InvocationResponse, InvokeContextOptions, InvokePayloadOptions } from '../../utils/types.js';
-export declare function testAction(srcPath: string, options: InvokePayloadOptions, context: InvokeContextOptions): Promise<InvocationResponse>;
+import type { InvocationResponse, InvokeContextOptions, InvokePayloadOptions, LocalFunctionResource } from '../../utils/types.js';
+export declare function testAction(resource: LocalFunctionResource, options: InvokePayloadOptions, context: InvokeContextOptions): Promise<InvocationResponse>;

package/dist/actions/functions/test.js

@@ -1,10 +1,10 @@
 import buildPayload from '../../utils/build-payload.js';
 import invoke from '../../utils/invoke-local.js';
-export async function testAction(srcPath, options, context) {
+export async function testAction(resource, options, context) {
     const payload = buildPayload(options);
     const { timeout } = options;
     try {
-        const { json, logs } = await invoke(srcPath, payload, context, timeout);
+        const { json, logs } = await invoke(resource, payload, context, timeout);
         return { error: undefined, json, logs };
     }
     catch (error) {

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/commands/functions/test.js

@@ -1,7 +1,7 @@
 import { Args, Command, Flags } from '@oclif/core';
 import { readBlueprintOnDisk } from '../../actions/blueprints/blueprint.js';
 import { testAction } from '../../actions/functions/test.js';
-import { getFunctionSource } from '../../utils/find-function.js';
+import { findFunctionByName } from '../../utils/find-function.js';
 export default class Test extends Command {
     static args = {
         name: Args.string({ description: 'The name of the Sanity Function', required: true }),
@@ -42,11 +42,8 @@ export default class Test extends Command {
         const { args, flags } = await this.parse(Test);
         const { parsedBlueprint } = await readBlueprintOnDisk({ getStack: false });
         try {
-            const src = getFunctionSource(parsedBlueprint, args.name);
-            if (!src) {
-                this.error(`Error: Function ${args.name} has no source code`);
-            }
-            const { json, logs, error } = await testAction(src, {
+            const resource = findFunctionByName(parsedBlueprint, args.name);
+            const { json, logs, error } = await testAction(resource, {
                 data: flags.data,
                 file: flags.file,
                 timeout: flags.timeout,

package/dist/server/app.js

@@ -1,9 +1,11 @@
 import { existsSync, readFileSync } from 'node:fs';
+import * as http from 'node:http';
 import { default as mime } from 'mime-types';
 import { readBlueprintOnDisk } from '../actions/blueprints/blueprint.js';
 import config from '../config.js';
+import { findFunctionByName } from '../utils/find-function.js';
 import invoke from '../utils/invoke-local.js';
-import * as http from 'node:http';
+import { isRecord } from '../utils/is-record.js';
 const host = 'localhost';
 const app = (port) => {
     const requestListener = async (req, res) => {
@@ -14,30 +16,40 @@ const app = (port) => {
                     const { parsedBlueprint } = await readBlueprintOnDisk({ getStack: false });
                     res.setHeader('Content-Type', 'application/json');
                     res.writeHead(200);
-                    res.end(JSON.stringify(parsedBlueprint));
+                    res.end(JSON.stringify(parsedBlueprint)); // Use parsedBlueprint directly
                 }
-                catch {
+                catch (error) {
                     res.writeHead(404);
-                    res.end();
+                    res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Unknown error' }));
                 }
                 break;
             }
             case req.url === '/invoke': {
                 if (req.method === 'POST') {
-                    let body = '';
-                    req.on('data', (data) => {
-                        body += data;
-                    });
+                    const body = [];
+                    req.on('data', (data) => body.push(data));
                     req.on('end', async () => {
-                        const { data, func } = JSON.parse(body);
-                        const { context, event } = data;
                         res.setHeader('Content-Type', 'application/json');
                         try {
-                            const response = await invoke(func, event, context);
-                            res.writeHead(200);
+                            const { data, func: functionName } = parseInvokeRequest(Buffer.concat(body));
+                            const { context, event } = data;
+                            const start = performance.now();
+                            const { parsedBlueprint } = await readBlueprintOnDisk({ getStack: false });
+                            const resource = findFunctionByName(parsedBlueprint, functionName);
+                            const readBlueprintTime = performance.now() - start;
+                            const response = await invoke(resource, event, context);
+                            const timings = { ...response.timings, 'blueprint:read': readBlueprintTime };
+                            const timingHeaders = [];
+                            for (const [key, value] of Object.entries(timings)) {
+                                timingHeaders.push(`${key.replace(/:/g, '-')};dur=${Math.abs(value).toFixed(1)}`);
+                            }
+                            if (timingHeaders.length > 0) {
+                                res.setHeader('Server-Timing', timingHeaders.join(', '));
+                            }
                             res.end(JSON.stringify(response));
                         }
                         catch (error) {
+                            console.error(error);
                             const response = { logs: '', error: '' };
                             if (error instanceof Error) {
                                 response.logs = error.message;
@@ -112,4 +124,60 @@ const app = (port) => {
     const server = http.createServer(requestListener);
     server.listen(port, host, () => { });
 };
+function parseInvokeRequest(body) {
+    let json;
+    try {
+        json = JSON.parse(body.toString('utf8'));
+    }
+    catch (error) {
+        throw new Error('Request body is not valid JSON', { cause: error });
+    }
+    if (!isRecord(json)) {
+        throw new Error('Request body is not valid, must be an object');
+    }
+    if (!('func' in json)) {
+        throw new Error('Request body is not valid, missing `func` field');
+    }
+    if (!('data' in json)) {
+        throw new Error('Request body is not valid, missing `data` field');
+    }
+    const { data, func } = json;
+    if (typeof func !== 'string') {
+        throw new Error('Request body is not valid, `func` field is not a string');
+    }
+    if (!isRecord(data)) {
+        throw new Error('Request body is not valid, `data` field is not an object');
+    }
+    const { context, event } = data;
+    if (!isRecord(context)) {
+        throw new Error('Request body is not valid, `context` field is not an object');
+    }
+    if (!isRecord(event)) {
+        throw new Error('Request body is not valid, `event` field is not an object');
+    }
+    if (!('clientOptions' in context)) {
+        throw new Error('Request body is not valid, `context.clientOptions` field is missing');
+    }
+    if (!isRecord(context.clientOptions)) {
+        throw new Error('Request body is not valid, `context.clientOptions` field is not an object');
+    }
+    const { projectId, dataset, apiVersion } = context.clientOptions;
+    if (typeof projectId !== 'string' && typeof projectId !== 'undefined') {
+        throw new Error('Request body is not valid, `context.clientOptions.projectId` field is not a string');
+    }
+    if (typeof dataset !== 'string' && typeof dataset !== 'undefined') {
+        throw new Error('Request body is not valid, `context.clientOptions.dataset` field is not a string');
+    }
+    if (typeof apiVersion !== 'string' && typeof apiVersion !== 'undefined') {
+        throw new Error('Request body is not valid, `context.clientOptions.apiVersion` field is not a string');
+    }
+    const clientOptions = {
+        ...context.clientOptions,
+        projectId,
+        dataset,
+        // Prefer `undefined` over empty string, triggering the right warnings in the client
+        apiVersion: apiVersion || undefined,
+    };
+    return { func, data: { context: { ...context, clientOptions }, event } };
+}
 export default app;

package/dist/server/static/api.js

@@ -30,12 +30,15 @@ function invoke(payloadText = '{}') {
     },
     method: 'POST',
   })
-    .then((response) => response.json())
-    .then((data) => {
+    .then((response) => {
+      return response.json().then((data) => ({data, timings: getServerTimings(response)}))
+    })
+    .then(({data, timings}) => {
       store.inprogress = false
       store.result = {
         ...data,
         time: Date.now() - start,
+        timings,
       }
     })
 }
@@ -47,7 +50,7 @@ function blueprint() {
       const functions = blueprint?.resources.filter((r) => r.type.startsWith('sanity.function.'))
 
       store.functions = functions
-      store.selectedIndex = functions[0].src
+      store.selectedIndex = functions[0].name
     })
     .catch(() => {
       store.functions = []
@@ -77,3 +80,21 @@ function datasets(selectedProject) {
       store.datasets = []
     })
 }
+
+function getServerTimings(response) {
+  const timings = {}
+  const serverTiming = response.headers.get('Server-Timing')
+  if (!serverTiming) {
+    return timings
+  }
+
+  for (const entry of serverTiming.split(',')) {
+    const [name, ...params] = entry.split(';')
+    const durationParam = params.find((p) => p.startsWith('dur='))
+    if (durationParam) {
+      timings[name.trim()] = Number.parseFloat(durationParam.slice(4))
+    }
+  }
+
+  return timings
+}

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;
@@ -770,21 +773,7 @@ body > main {
   grid-area: main;
 }
 
-@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);
-  }
-}
-
 @media (max-width: 40rem) {
-  button {
-    width: 100%;
-  }
-
   .block-lg {
     display: block !important;
   }
@@ -794,6 +783,19 @@ 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;
+  }
+}
+
 header {
   border-bottom: 1px solid var(--card-border-color);
   background: light-dark(white, var(--gray-950));
@@ -811,7 +813,7 @@ footer {
 
 .logo-image {
   height: 25px;
-  width: auto;
+  width: 25px;
 }
 
 .logo-image img {
@@ -842,6 +844,7 @@ footer {
   line-height: 1;
   padding: 0px 12px !important;
   height: 24px !important;
+  max-width: 160px;
 }
 
 .sanity-button:hover {
@@ -930,7 +933,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 +975,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/filters.js

@@ -1,7 +1,7 @@
 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);">
+        <form style="display:flex; gap: 8px;padding-left: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--card-border-color);">
             <dataset-dropdown></dataset-dropdown>
             <fieldset class="mar-t-sm">
                 <label class="config-label">

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

@@ -2,14 +2,14 @@
 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 {
   functionClicked = (event) => {
     // eslint-disable-next-line unicorn/prefer-dom-node-text-content
     const target = this.api.store.functions.find((func) => func.name === event.srcElement.innerText)
-    this.api.store.selectedIndex = target.src
+    this.api.store.selectedIndex = target.name
   }
   functionSelected = (event) => {
     this.api.store.selectedIndex = event.srcElement.value
@@ -18,14 +18,14 @@ class FunctionList extends ApiBaseElement {
     if (this.api.store.functions.length > 0) {
       this.list.innerHTML = this.api.store.functions
         .map((func) => {
-          const selected = this.api.store.selectedIndex === func.src ? 'selected' : ''
+          const selected = this.api.store.selectedIndex === func.name ? 'selected' : ''
           return `<li class="function-list-item ${selected}" style="padding: 16px 24px;">${func.name}</li>`
         })
         .join('')
       this.select.innerHTML = this.api.store.functions
         .map((func) => {
-          const selected = this.api.store.selectedIndex === func.src ? 'selected' : ''
-          return `<option value="${func.src}" ${selected}>${func.name}</option>`
+          const selected = this.api.store.selectedIndex === func.name ? 'selected' : ''
+          return `<option value="${func.name}" ${selected}>${func.name}</option>`
         })
         .join('')
     } else {