@sanity/runtime-cli 4.3.5-bundle.0 → 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.5-bundle.0 darwin-arm64 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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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.5-bundle.0/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/actions/blueprints/assets.d.ts

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

package/dist/actions/blueprints/assets.js

@@ -3,35 +3,21 @@ 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 stats = await fs.promises.stat(functionPath);
+        const sourcePath = path.join(cwd(), resource.src);
+        const stats = await fs.promises.stat(sourcePath);
         const zip = new AdmZip();
         if (stats.isDirectory()) {
-            zip.addLocalFolder(functionPath);
+            zip.addLocalFolder(sourcePath);
         }
         else {
-            zip.addLocalFile(functionPath, '', 'index.js');
+            zip.addLocalFile(sourcePath, '', 'index.js');
         }
         const zipBuffer = zip.toBuffer();
         const base64Zip = zipBuffer.toString('base64');
@@ -55,7 +41,4 @@ 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, LocalFunctionResource } from '../../utils/types.js';
-export declare function testAction(resource: LocalFunctionResource, options: InvokePayloadOptions, context: InvokeContextOptions): Promise<InvocationResponse>;
+import type { InvocationResponse, InvokeContextOptions, InvokePayloadOptions } from '../../utils/types.js';
+export declare function testAction(srcPath: string, 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(resource, options, context) {
+export async function testAction(srcPath, options, context) {
     const payload = buildPayload(options);
     const { timeout } = options;
     try {
-        const { json, logs } = await invoke(resource, payload, context, timeout);
+        const { json, logs } = await invoke(srcPath, payload, context, timeout);
         return { error: undefined, json, logs };
     }
     catch (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 { findFunctionByName } from '../../utils/find-function.js';
+import { getFunctionSource } 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,8 +42,11 @@ export default class Test extends Command {
         const { args, flags } = await this.parse(Test);
         const { parsedBlueprint } = await readBlueprintOnDisk({ getStack: false });
         try {
-            const resource = findFunctionByName(parsedBlueprint, args.name);
-            const { json, logs, error } = await testAction(resource, {
+            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, {
                 data: flags.data,
                 file: flags.file,
                 timeout: flags.timeout,

package/dist/server/app.js

@@ -1,11 +1,9 @@
 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 { isRecord } from '../utils/is-record.js';
+import * as http from 'node:http';
 const host = 'localhost';
 const app = (port) => {
     const requestListener = async (req, res) => {
@@ -16,40 +14,30 @@ const app = (port) => {
                     const { parsedBlueprint } = await readBlueprintOnDisk({ getStack: false });
                     res.setHeader('Content-Type', 'application/json');
                     res.writeHead(200);
-                    res.end(JSON.stringify(parsedBlueprint)); // Use parsedBlueprint directly
+                    res.end(JSON.stringify(parsedBlueprint));
                 }
-                catch (error) {
+                catch {
                     res.writeHead(404);
-                    res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Unknown error' }));
+                    res.end();
                 }
                 break;
             }
             case req.url === '/invoke': {
                 if (req.method === 'POST') {
-                    const body = [];
-                    req.on('data', (data) => body.push(data));
+                    let body = '';
+                    req.on('data', (data) => {
+                        body += data;
+                    });
                     req.on('end', async () => {
+                        const { data, func } = JSON.parse(body);
+                        const { context, event } = data;
                         res.setHeader('Content-Type', 'application/json');
                         try {
-                            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(', '));
-                            }
+                            const response = await invoke(func, event, context);
+                            res.writeHead(200);
                             res.end(JSON.stringify(response));
                         }
                         catch (error) {
-                            console.error(error);
                             const response = { logs: '', error: '' };
                             if (error instanceof Error) {
                                 response.logs = error.message;
@@ -124,60 +112,4 @@ 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,15 +30,12 @@ function invoke(payloadText = '{}') {
     },
     method: 'POST',
   })
-    .then((response) => {
-      return response.json().then((data) => ({data, timings: getServerTimings(response)}))
-    })
-    .then(({data, timings}) => {
+    .then((response) => response.json())
+    .then((data) => {
       store.inprogress = false
       store.result = {
         ...data,
         time: Date.now() - start,
-        timings,
       }
     })
 }
@@ -50,7 +47,7 @@ function blueprint() {
       const functions = blueprint?.resources.filter((r) => r.type.startsWith('sanity.function.'))
 
       store.functions = functions
-      store.selectedIndex = functions[0].name
+      store.selectedIndex = functions[0].src
     })
     .catch(() => {
       store.functions = []
@@ -80,21 +77,3 @@ 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

@@ -771,9 +771,105 @@ 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 */
+}
+
+/* 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) {
+  /* 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 {
     display: block !important;
   }
@@ -794,6 +890,27 @@ body > main {
   .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 {

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: var(--space-3); padding-bottom: var(--space-3); 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

@@ -9,7 +9,7 @@ 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.name
+    this.api.store.selectedIndex = target.src
   }
   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.name ? 'selected' : ''
+          const selected = this.api.store.selectedIndex === func.src ? '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.name ? 'selected' : ''
-          return `<option value="${func.name}" ${selected}>${func.name}</option>`
+          const selected = this.api.store.selectedIndex === func.src ? 'selected' : ''
+          return `<option value="${func.src}" ${selected}>${func.name}</option>`
         })
         .join('')
     } else {