From 170b16e755ab1a9cb14e9862f23ab30ec6256fcd Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 10:27:40 -0500
Subject: [PATCH 01/24] API visual first pass

---
 runtime/parser/schema/project.schema.yaml     |  14 +-
 .../src/features/apis/editor/APIEditor.svelte | 207 +++++
 .../apis/editor/APIResponsePreview.svelte     |  67 ++
 .../apis/editor/VisualAPIEditor.svelte        | 772 ++++++++++++++++++
 .../features/workspaces/APIWorkspace.svelte   |  81 ++
 .../(workspace)/files/[...file]/+page.svelte  |   2 +
 6 files changed, 1140 insertions(+), 3 deletions(-)
 create mode 100644 web-common/src/features/apis/editor/APIEditor.svelte
 create mode 100644 web-common/src/features/apis/editor/APIResponsePreview.svelte
 create mode 100644 web-common/src/features/apis/editor/VisualAPIEditor.svelte
 create mode 100644 web-common/src/features/workspaces/APIWorkspace.svelte

diff --git a/runtime/parser/schema/project.schema.yaml b/runtime/parser/schema/project.schema.yaml
index 52a1e48464b5..5f8c65c49a90 100644
--- a/runtime/parser/schema/project.schema.yaml
+++ b/runtime/parser/schema/project.schema.yaml
@@ -3214,13 +3214,17 @@ definitions:
           connector:
             type: string
             description: Specifies the connector to use with the glob input.
+          args:
+            type: object
+            description: Arguments to pass to the glob resolver.
+            additionalProperties: true
         required:
           - glob
-        examples: 
+        examples:
           - type: api
+            glob: data/*.csv
+            args:
 
-            glob: "data/*.csv"
- 
       - title: Resource Status Check
         type: object
         description: Uses the status of a resource as data.
@@ -3291,6 +3295,10 @@ definitions:
           connector:
             type: string
             description: Specifies the connector to use with the glob input.
+          args:
+            type: object
+            description: Arguments to pass to the glob resolver.
+            additionalProperties: true
         required:
           - glob
       - title: Resource Status Check
diff --git a/web-common/src/features/apis/editor/APIEditor.svelte b/web-common/src/features/apis/editor/APIEditor.svelte
new file mode 100644
index 000000000000..6da36b9d85c6
--- /dev/null
+++ b/web-common/src/features/apis/editor/APIEditor.svelte
@@ -0,0 +1,207 @@
+<script lang="ts">
+  import type { EditorView } from "@codemirror/view";
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import { setLineStatuses } from "@rilldata/web-common/components/editor/line-status";
+  import type { LineStatus } from "@rilldata/web-common/components/editor/line-status/state";
+  import { customYAMLwithJSONandSQL } from "@rilldata/web-common/components/editor/presets/yamlWithJsonAndSql";
+  import Input from "@rilldata/web-common/components/forms/Input.svelte";
+  import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
+  import Editor from "@rilldata/web-common/features/editor/Editor.svelte";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
+  import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
+  import WorkspaceEditorContainer from "@rilldata/web-common/layout/workspace/WorkspaceEditorContainer.svelte";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { PlusIcon, PlayIcon, ChevronDownIcon } from "lucide-svelte";
+  import APIResponsePreview from "./APIResponsePreview.svelte";
+
+  export let apiName: string;
+  export let errors: LineStatus[];
+  export let fileArtifact: FileArtifact;
+  export let autoSave: boolean;
+
+  interface Arg {
+    id: string;
+    key: string;
+    value: string;
+  }
+
+  let editor: EditorView;
+  let args: Arg[] = [];
+  let apiResponse: unknown[] | null = null;
+  let responseError: string | null = null;
+  let isLoading = false;
+  let previewHeight = 250;
+
+  $: ({ instanceId } = $runtime);
+  $: if (editor) setLineStatuses(errors, editor);
+  $: mainError = errors?.at(0);
+  $: host = $runtime.host || "http://localhost:3001";
+  $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
+  $: fullUrl = buildFullUrl(baseUrl, args);
+  $: hasErrors = errors.length > 0;
+
+  function buildFullUrl(base: string, params: Arg[]): string {
+    const url = new URL(base);
+    params.forEach((arg) => {
+      if (arg.key.trim()) {
+        url.searchParams.set(arg.key, arg.value);
+      }
+    });
+    return url.toString();
+  }
+
+  function addArg() {
+    args = [...args, { id: crypto.randomUUID(), key: "", value: "" }];
+  }
+
+  function removeArg(id: string) {
+    args = args.filter((arg) => arg.id !== id);
+  }
+
+  async function testAPI() {
+    isLoading = true;
+    responseError = null;
+    apiResponse = null;
+
+    try {
+      const response = await fetch(fullUrl);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        try {
+          const errorJson = JSON.parse(errorText);
+          responseError = errorJson.message || errorJson.error || errorText;
+        } catch {
+          responseError = errorText;
+        }
+        return;
+      }
+
+      const data = await response.json();
+      apiResponse = Array.isArray(data) ? data : [data];
+    } catch (e) {
+      responseError = e instanceof Error ? e.message : "Unknown error occurred";
+    } finally {
+      isLoading = false;
+    }
+  }
+</script>
+
+<div class="flex flex-col h-full overflow-hidden">
+  <div class="flex-1 overflow-hidden min-h-0">
+    <WorkspaceEditorContainer error={mainError}>
+      <Editor
+        bind:autoSave
+        bind:editor
+        onSave={(content) => {
+          if (!content?.length) {
+            setLineStatuses([], editor);
+          }
+        }}
+        {fileArtifact}
+        extensions={[customYAMLwithJSONandSQL]}
+      />
+    </WorkspaceEditorContainer>
+  </div>
+
+  <div
+    class="relative flex flex-col border-t bg-surface-background"
+    style:height="{previewHeight}px"
+    style:min-height="100px"
+    style:max-height="60%"
+  >
+    <Resizer
+      absolute={false}
+      max={500}
+      direction="NS"
+      side="top"
+      bind:dimension={previewHeight}
+    />
+
+    <div class="flex items-center gap-x-3 px-3 py-2 border-b">
+      <div class="flex items-center gap-x-2 flex-1 min-w-0">
+        <span class="text-xs font-medium text-fg-secondary shrink-0">GET</span>
+        <span class="text-xs font-mono text-fg-muted truncate">{fullUrl}</span>
+      </div>
+
+      <div class="flex items-center gap-x-2 shrink-0">
+        <DropdownMenu.Root closeOnItemClick={false}>
+          <DropdownMenu.Trigger asChild let:builder>
+            <Button type="text" compact small builders={[builder]}>
+              Args
+              {#if args.length > 0}
+                <span
+                  class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium bg-primary-100 text-primary-700 rounded-full"
+                >
+                  {args.length}
+                </span>
+              {/if}
+              <ChevronDownIcon size="10px" />
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content align="end" class="w-72 p-2">
+            <div class="flex flex-col gap-y-2">
+              {#if args.length === 0}
+                <p class="text-xs text-fg-muted px-1 py-2">
+                  No arguments. Click "Add" below.
+                </p>
+              {:else}
+                {#each args as arg (arg.id)}
+                  <div class="flex items-center gap-x-1">
+                    <Input
+                      bind:value={arg.key}
+                      placeholder="key"
+                      size="sm"
+                      width="100px"
+                    />
+                    <Input
+                      bind:value={arg.value}
+                      placeholder="value"
+                      size="sm"
+                      full
+                    />
+                    <Button
+                      type="ghost"
+                      square
+                      small
+                      compact
+                      onClick={() => removeArg(arg.id)}
+                    >
+                      <Trash size="12px" />
+                    </Button>
+                  </div>
+                {/each}
+              {/if}
+              <Button type="text" compact small onClick={addArg}>
+                <PlusIcon size="12px" />
+                Add
+              </Button>
+            </div>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+
+        <Button
+          type="primary"
+          small
+          onClick={testAPI}
+          disabled={hasErrors}
+          loading={isLoading}
+          loadingCopy="Testing"
+        >
+          <PlayIcon size="12px" />
+          Test API
+        </Button>
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-auto">
+      <APIResponsePreview
+        response={apiResponse}
+        error={responseError}
+        {isLoading}
+        {apiName}
+      />
+    </div>
+  </div>
+</div>
diff --git a/web-common/src/features/apis/editor/APIResponsePreview.svelte b/web-common/src/features/apis/editor/APIResponsePreview.svelte
new file mode 100644
index 000000000000..1e06c4727eef
--- /dev/null
+++ b/web-common/src/features/apis/editor/APIResponsePreview.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import ReconcilingSpinner from "@rilldata/web-common/features/entity-management/ReconcilingSpinner.svelte";
+  import WorkspaceError from "@rilldata/web-common/components/WorkspaceError.svelte";
+  import PreviewTable from "@rilldata/web-common/components/preview-table/PreviewTable.svelte";
+  import type { VirtualizedTableColumns } from "@rilldata/web-common/components/virtualized-table/types";
+
+  export let response: unknown[] | null;
+  export let error: string | null;
+  export let isLoading: boolean;
+  export let apiName: string;
+
+  $: columns = extractColumns(response);
+  $: rows = response ?? [];
+
+  function extractColumns(data: unknown[] | null): VirtualizedTableColumns[] {
+    if (!data || data.length === 0) return [];
+
+    const firstRow = data[0];
+    if (typeof firstRow !== "object" || firstRow === null) {
+      return [{ name: "value", type: "VARCHAR" }];
+    }
+
+    return Object.keys(firstRow).map((key) => ({
+      name: key,
+      type: inferType(firstRow[key as keyof typeof firstRow]),
+    }));
+  }
+
+  function inferType(value: unknown): string {
+    if (value === null || value === undefined) return "VARCHAR";
+    if (typeof value === "number") {
+      return Number.isInteger(value) ? "INTEGER" : "DOUBLE";
+    }
+    if (typeof value === "boolean") return "BOOLEAN";
+    if (typeof value === "object") return "JSON";
+    return "VARCHAR";
+  }
+
+  function normalizeRows(data: unknown[] | null): Record<string, unknown>[] {
+    if (!data) return [];
+
+    return data.map((item) => {
+      if (typeof item !== "object" || item === null) {
+        return { value: item };
+      }
+      return item as Record<string, unknown>;
+    });
+  }
+
+  $: normalizedRows = normalizeRows(response);
+</script>
+
+{#if isLoading}
+  <ReconcilingSpinner />
+{:else if error}
+  <WorkspaceError message={error} />
+{:else if !response}
+  <div class="flex items-center justify-center h-full text-fg-muted text-sm">
+    Click "Test API" to see the response
+  </div>
+{:else if response.length === 0}
+  <div class="flex items-center justify-center h-full text-fg-muted text-sm">
+    API returned an empty response
+  </div>
+{:else}
+  <PreviewTable rows={normalizedRows} columnNames={columns} name={apiName} />
+{/if}
diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
new file mode 100644
index 000000000000..599a1da594a5
--- /dev/null
+++ b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
@@ -0,0 +1,772 @@
+<script lang="ts">
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import type { LineStatus } from "@rilldata/web-common/components/editor/line-status/state";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import Input from "@rilldata/web-common/components/forms/Input.svelte";
+  import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
+  import Checkbox from "@rilldata/web-common/components/forms/Checkbox.svelte";
+  import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
+  import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import {
+    PlusIcon,
+    PlayIcon,
+    AlertCircleIcon,
+    ChevronDownIcon,
+  } from "lucide-svelte";
+  import { parseDocument, stringify } from "yaml";
+  import APIResponsePreview from "./APIResponsePreview.svelte";
+
+  export let fileArtifact: FileArtifact;
+  export let errors: LineStatus[];
+  export let apiName: string;
+  export let switchView: () => void;
+
+  type APIType = "metrics_sql" | "sql" | "api" | "glob" | "resource_status";
+
+  interface Arg {
+    id: string;
+    key: string;
+    value: string;
+  }
+
+  // Template options for dropdown menus
+  interface TemplateOption {
+    label: string;
+    content?: string;
+    globPattern?: string;
+    api?: string;
+    includeArgs?: boolean;
+  }
+
+  // Track whether current API config should include args
+  let includeArgsInApi = false;
+
+  const metricsSqlTemplates: TemplateOption[] = [
+    {
+      label: "Basic Query",
+      content: "select measure, dimension from metrics_view",
+    },
+    {
+      label: "Query with Filter",
+      content:
+        "select measure, dimension from metrics_view where dimension = '{{ .args.filter }}'",
+    },
+    {
+      label: "Query with Limit",
+      content:
+        "select measure, dimension from metrics_view limit {{ .args.limit }}",
+    },
+    {
+      label: "Query with Offset",
+      content:
+        "select measure, dimension from metrics_view limit {{ .args.limit }} offset {{ .args.offset }}",
+    },
+    {
+      label: "Query with Sort",
+      content:
+        "select measure, dimension from metrics_view order by {{ .args.sort }} {{ .args.order }}",
+    },
+    {
+      label: "Full Query",
+      content:
+        "select measure, dimension from metrics_view where dimension = '{{ .args.filter }}' order by {{ .args.sort }} {{ .args.order }} limit {{ .args.limit }} offset {{ .args.offset }}",
+    },
+  ];
+
+  const sqlTemplates: TemplateOption[] = [
+    {
+      label: "Basic Query",
+      content: "select * from model_name",
+    },
+    {
+      label: "Query with Filter",
+      content: "select * from model_name where column = '{{ .args.filter }}'",
+    },
+    {
+      label: "Query with Limit",
+      content: "select * from model_name limit {{ .args.limit }}",
+    },
+    {
+      label: "Query with Offset",
+      content:
+        "select * from model_name limit {{ .args.limit }} offset {{ .args.offset }}",
+    },
+    {
+      label: "Query with Sort",
+      content:
+        "select * from model_name order by {{ .args.sort }} {{ .args.order }}",
+    },
+    {
+      label: "Full Query",
+      content:
+        "select * from model_name where column = '{{ .args.filter }}' order by {{ .args.sort }} {{ .args.order }} limit {{ .args.limit }} offset {{ .args.offset }}",
+    },
+  ];
+
+  const apiTemplates: TemplateOption[] = [
+    {
+      label: "Basic API Call",
+      api: "sample_api",
+    },
+  ];
+
+  const globTemplates: TemplateOption[] = [
+    {
+      label: "S3 CSV Files",
+      globPattern: "s3://bucket/path/*.csv",
+    },
+    {
+      label: "S3 Parquet Files",
+      globPattern: "s3://bucket/path/*.parquet",
+    },
+    {
+      label: "GCS Files",
+      globPattern: "gs://bucket/path/*.csv",
+    },
+    {
+      label: "Recursive Pattern",
+      globPattern: "s3://bucket/**/*.csv",
+    },
+    {
+      label: "Local Files",
+      globPattern: "data/*.csv",
+    },
+  ];
+
+  // Default templates for each API type (first option from each list)
+  const defaultTemplates: Record<
+    APIType,
+    {
+      content?: string;
+      globPattern?: string;
+      api?: string;
+      whereError?: boolean;
+    }
+  > = {
+    metrics_sql: metricsSqlTemplates[0],
+    sql: sqlTemplates[0],
+    api: apiTemplates[0],
+    glob: globTemplates[0],
+    resource_status: { whereError: true },
+  };
+
+  const apiTypes: { value: APIType; label: string; description: string }[] = [
+    {
+      value: "metrics_sql",
+      label: "Metrics SQL",
+      description: "Query metrics views using SQL-like syntax",
+    },
+    {
+      value: "sql",
+      label: "SQL",
+      description: "Query models/sources using raw SQL",
+    },
+    {
+      value: "api",
+      label: "API",
+      description: "Call another API endpoint",
+    },
+    {
+      value: "glob",
+      label: "Glob",
+      description: "Match files using glob patterns",
+    },
+    {
+      value: "resource_status",
+      label: "Resource Status",
+      description: "Get status of resources with errors",
+    },
+  ];
+
+  // Extract error messages for display
+  $: errorMessages = errors.map((e) => e.message).filter(Boolean);
+
+  $: ({ instanceId } = $runtime);
+  $: ({ editorContent, updateEditorContent } = fileArtifact);
+
+  // Parse YAML to extract current type and content
+  $: parsedDoc = parseDocument($editorContent ?? "");
+  $: currentType = detectAPIType(parsedDoc);
+  $: currentContent = extractContent(parsedDoc, currentType);
+
+  let args: Arg[] = [];
+  let apiResponse: unknown[] | null = null;
+  let responseError: string | null = null;
+  let isLoading = false;
+  let previewHeight = 300;
+
+  // Glob-specific fields
+  let globPattern = "";
+
+  // API-specific fields
+  let targetApiName = "";
+
+  // Resource status fields
+  let whereError = true;
+
+  $: host = $runtime.host || "http://localhost:3001";
+  $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
+  $: fullUrl = buildFullUrl(baseUrl, args);
+  $: hasErrors = errors.length > 0;
+
+  function detectAPIType(doc: ReturnType<typeof parseDocument>): APIType {
+    if (doc.get("metrics_sql")) return "metrics_sql";
+    if (doc.get("sql")) return "sql";
+    if (doc.get("glob")) return "glob";
+    if (doc.get("resource_status")) return "resource_status";
+    const resolver = doc.get("resolver");
+    if (resolver === "api") return "api";
+    return "metrics_sql"; // default
+  }
+
+  function extractContent(
+    doc: ReturnType<typeof parseDocument>,
+    type: APIType,
+  ): string {
+    switch (type) {
+      case "metrics_sql":
+        return String(doc.get("metrics_sql") ?? "");
+      case "sql":
+        return String(doc.get("sql") ?? "");
+      case "api": {
+        targetApiName = String(doc.get("api") ?? "");
+        return "";
+      }
+      case "glob": {
+        globPattern = String(doc.get("glob") ?? "");
+        return "";
+      }
+      case "resource_status": {
+        // Use getIn to get nested value from YAML document
+        const whereErrorValue = doc.getIn(["resource_status", "where_error"]);
+        // Default to true unless explicitly set to false
+        whereError = whereErrorValue !== false;
+        return "";
+      }
+      default:
+        return "";
+    }
+  }
+
+  function updateYAML(type: APIType, content: string) {
+    const doc = parseDocument($editorContent ?? "");
+
+    // Clear old type-specific fields
+    doc.delete("metrics_sql");
+    doc.delete("sql");
+    doc.delete("resolver");
+    doc.delete("resolver_properties");
+    doc.delete("api");
+    doc.delete("args");
+    doc.delete("glob");
+    doc.delete("resource_status");
+    doc.delete("connector");
+    doc.delete("path");
+
+    // Set type
+    doc.set("type", "api");
+
+    // Set new type-specific fields
+    switch (type) {
+      case "metrics_sql":
+        doc.set("metrics_sql", content);
+        break;
+      case "sql":
+        doc.set("sql", content);
+        break;
+      case "api":
+        doc.set("resolver", "api");
+        doc.set("api", targetApiName);
+        if (includeArgsInApi) {
+          doc.set("args", null);
+        }
+        break;
+      case "glob":
+        doc.set("glob", globPattern);
+        doc.set("args", null);
+        break;
+      case "resource_status":
+        doc.set("resource_status", { where_error: whereError });
+        break;
+    }
+
+    updateEditorContent(stringify(doc));
+  }
+
+  function handleTypeChange(newType: APIType) {
+    // When switching types, use default template for the new type
+    const defaults = defaultTemplates[newType];
+
+    if (newType === "glob") {
+      globPattern = defaults.globPattern ?? "s3://bucket/path/*.csv";
+    } else if (newType === "api") {
+      targetApiName = defaults.api ?? "sample_api";
+      includeArgsInApi = false; // Default API template doesn't include args
+    } else if (newType === "resource_status") {
+      whereError = defaults.whereError ?? true;
+    }
+
+    updateYAML(newType, defaults.content ?? "");
+  }
+
+  function handleContentChange(content: string) {
+    updateYAML(currentType, content);
+  }
+
+  function handleGlobPatternChange(value: string) {
+    globPattern = value;
+    updateYAML("glob", "");
+  }
+
+  function handleApiNameChange(value: string) {
+    targetApiName = value;
+    updateYAML("api", "");
+  }
+
+  function handleWhereErrorChange(checked: boolean) {
+    whereError = checked;
+    updateYAML("resource_status", "");
+  }
+
+  function applyTemplate(template: TemplateOption) {
+    if (template.content !== undefined) {
+      updateYAML(currentType, template.content);
+    } else if (template.globPattern !== undefined) {
+      globPattern = template.globPattern;
+      updateYAML("glob", "");
+    } else if (template.api !== undefined) {
+      targetApiName = template.api;
+      includeArgsInApi = template.includeArgs ?? false;
+      updateYAML("api", "");
+    }
+  }
+
+  function buildFullUrl(base: string, params: Arg[]): string {
+    const url = new URL(base);
+    params.forEach((arg) => {
+      if (arg.key.trim()) {
+        url.searchParams.set(arg.key, arg.value);
+      }
+    });
+    return url.toString();
+  }
+
+  function addArg() {
+    args = [...args, { id: crypto.randomUUID(), key: "", value: "" }];
+  }
+
+  function removeArg(id: string) {
+    args = args.filter((arg) => arg.id !== id);
+  }
+
+  async function testAPI() {
+    isLoading = true;
+    responseError = null;
+    apiResponse = null;
+
+    try {
+      const response = await fetch(fullUrl);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        try {
+          const errorJson = JSON.parse(errorText);
+          responseError = errorJson.message || errorJson.error || errorText;
+        } catch {
+          responseError = errorText;
+        }
+        return;
+      }
+
+      const data = await response.json();
+      apiResponse = Array.isArray(data) ? data : [data];
+    } catch (e) {
+      responseError = e instanceof Error ? e.message : "Unknown error occurred";
+    } finally {
+      isLoading = false;
+    }
+  }
+</script>
+
+<div class="wrapper">
+  <div class="main-area">
+    <div class="flex flex-col gap-y-4 flex-1 overflow-auto">
+      <!-- BUILD SECTION -->
+      <div class="section-group">
+        <div class="section-header">
+          <span class="section-title">Build</span>
+        </div>
+
+        <!-- API Type Selector -->
+        <div class="section">
+          <InputLabel label="API Type" />
+          <div class="grid grid-cols-5 gap-2">
+            {#each apiTypes as apiType}
+              <button
+                class="type-button"
+                class:selected={currentType === apiType.value}
+                on:click={() => handleTypeChange(apiType.value)}
+              >
+                <span class="type-label">
+                  {apiType.label}
+                </span>
+                <span class="type-description">
+                  {apiType.description}
+                </span>
+              </button>
+            {/each}
+          </div>
+        </div>
+
+        <!-- Mini Editor based on type -->
+        <div class="section">
+          {#if currentType === "metrics_sql"}
+            <div class="flex items-center justify-between">
+              <InputLabel label="Metrics SQL Query" />
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild let:builder>
+                  <Button type="text" compact small builders={[builder]}>
+                    Templates
+                    <ChevronDownIcon size="12px" />
+                  </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="end">
+                  {#each metricsSqlTemplates as template}
+                    <DropdownMenu.Item on:click={() => applyTemplate(template)}>
+                      {template.label}
+                    </DropdownMenu.Item>
+                  {/each}
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            </div>
+            <textarea
+              class="query-editor"
+              placeholder="select measure, dimension from metrics_view"
+              value={currentContent}
+              on:input={(e) => handleContentChange(e.currentTarget.value)}
+            />
+            <p class="hint">
+              Replace <code>metrics_view</code> with an actual metrics view name
+              from your project. Use measure and dimension names from that metrics
+              view.
+            </p>
+          {:else if currentType === "sql"}
+            <div class="flex items-center justify-between">
+              <InputLabel label="SQL Query" />
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild let:builder>
+                  <Button type="text" compact small builders={[builder]}>
+                    Templates
+                    <ChevronDownIcon size="12px" />
+                  </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="end">
+                  {#each sqlTemplates as template}
+                    <DropdownMenu.Item on:click={() => applyTemplate(template)}>
+                      {template.label}
+                    </DropdownMenu.Item>
+                  {/each}
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            </div>
+            <textarea
+              class="query-editor"
+              placeholder="select * from model_name"
+              value={currentContent}
+              on:input={(e) => handleContentChange(e.currentTarget.value)}
+            />
+            <p class="hint">
+              Replace <code>table</code> with an actual model or source name from
+              your project.
+            </p>
+          {:else if currentType === "api"}
+            <div class="flex items-center justify-between">
+              <InputLabel label="Target API Name" />
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild let:builder>
+                  <Button type="text" compact small builders={[builder]}>
+                    Templates
+                    <ChevronDownIcon size="12px" />
+                  </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="end">
+                  {#each apiTemplates as template}
+                    <DropdownMenu.Item on:click={() => applyTemplate(template)}>
+                      {template.label}
+                    </DropdownMenu.Item>
+                  {/each}
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            </div>
+            <Input
+              value={targetApiName}
+              placeholder="other_api_name"
+              size="lg"
+              full
+              onInput={(value) => handleApiNameChange(value)}
+            />
+            <p class="hint">
+              Call another API endpoint by name. The target API must exist in
+              your project.
+            </p>
+          {:else if currentType === "glob"}
+            <div class="flex items-center justify-between">
+              <InputLabel label="Glob Pattern" />
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild let:builder>
+                  <Button type="text" compact small builders={[builder]}>
+                    Templates
+                    <ChevronDownIcon size="12px" />
+                  </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="end">
+                  {#each globTemplates as template}
+                    <DropdownMenu.Item on:click={() => applyTemplate(template)}>
+                      {template.label}
+                    </DropdownMenu.Item>
+                  {/each}
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            </div>
+            <Input
+              value={globPattern}
+              placeholder="s3://bucket/path/*.csv"
+              size="lg"
+              full
+              onInput={(value) => handleGlobPatternChange(value)}
+            />
+            <p class="hint">
+              Match files using glob patterns. Examples: s3://bucket/path/*.csv,
+              gs://bucket/*.parquet, s3://bucket/**/*.csv
+            </p>
+          {:else if currentType === "resource_status"}
+            <InputLabel label="Resource Status Options" />
+            <div class="flex items-center gap-x-2 mt-1">
+              <Checkbox
+                checked={whereError}
+                onCheckedChange={(checked) => {
+                  if (typeof checked === "boolean") {
+                    handleWhereErrorChange(checked);
+                  }
+                }}
+              />
+              <span class="text-sm">Only show resources with errors</span>
+            </div>
+            <p class="hint">
+              Get the status of resources in your project. Enable the checkbox
+              to filter to only resources with errors.
+            </p>
+          {/if}
+        </div>
+
+        <!-- Error Display -->
+        {#if errorMessages.length > 0}
+          <div class="error-banner">
+            <AlertCircleIcon size="16px" class="flex-shrink-0" />
+            <div class="flex flex-col gap-y-1">
+              {#each errorMessages as message}
+                <span>{message}</span>
+              {/each}
+            </div>
+          </div>
+        {/if}
+      </div>
+
+      <!-- TEST SECTION -->
+      <div class="section-group test-section">
+        <div class="section-header">
+          <span class="section-title">Test</span>
+        </div>
+
+        <!-- Endpoint URL -->
+        <div class="section">
+          <InputLabel label="Endpoint URL" />
+          <div
+            class="flex items-center gap-x-2 px-3 py-2 bg-surface-muted rounded-[2px] border text-sm font-mono"
+          >
+            <span class="text-fg-muted">GET</span>
+            <span class="flex-1 truncate text-fg-primary">{fullUrl}</span>
+          </div>
+        </div>
+
+        <!-- Arguments -->
+        <div class="section">
+          <div class="flex items-center justify-between">
+            <InputLabel label="Arguments" />
+            <Button type="text" compact onClick={addArg}>
+              <PlusIcon size="14px" />
+              Add
+            </Button>
+          </div>
+
+          {#if args.length === 0}
+            <p class="hint">
+              No arguments added. Click "Add" to add query parameters.
+            </p>
+          {:else}
+            <div class="flex flex-col gap-y-2">
+              {#each args as arg (arg.id)}
+                <div class="flex items-center gap-x-2">
+                  <Input
+                    bind:value={arg.key}
+                    placeholder="Key"
+                    size="md"
+                    width="180px"
+                  />
+                  <Input
+                    bind:value={arg.value}
+                    placeholder="Value"
+                    size="md"
+                    full
+                  />
+                  <Button
+                    type="ghost"
+                    square
+                    compact
+                    onClick={() => removeArg(arg.id)}
+                  >
+                    <Trash size="14px" />
+                  </Button>
+                </div>
+              {/each}
+            </div>
+          {/if}
+        </div>
+
+        <!-- Test Button -->
+        <div class="flex items-center gap-x-2">
+          <Button
+            type="primary"
+            onClick={testAPI}
+            disabled={hasErrors}
+            loading={isLoading}
+            loadingCopy="Testing..."
+          >
+            <PlayIcon size="14px" />
+            Test API
+          </Button>
+          {#if hasErrors}
+            <span class="text-sm text-red-500">
+              Fix errors above before testing
+            </span>
+          {/if}
+        </div>
+      </div>
+    </div>
+
+    <!-- Response Preview -->
+    <div
+      class="preview-area"
+      style:height="{previewHeight}px"
+      style:min-height="100px"
+      style:max-height="60%"
+    >
+      <Resizer
+        absolute={false}
+        max={600}
+        direction="NS"
+        side="top"
+        bind:dimension={previewHeight}
+      />
+      <div class="preview-header">
+        <span class="text-xs font-medium text-fg-secondary uppercase">
+          Response Preview
+        </span>
+      </div>
+      <div class="preview-content">
+        <APIResponsePreview
+          response={apiResponse}
+          error={responseError}
+          {isLoading}
+          {apiName}
+        />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="postcss">
+  .wrapper {
+    @apply size-full max-w-full max-h-full flex-none;
+    @apply overflow-hidden;
+    @apply flex;
+  }
+
+  .main-area {
+    @apply flex flex-col size-full p-4 bg-surface-background border;
+    @apply overflow-hidden rounded-[2px];
+  }
+
+  .section-group {
+    @apply flex flex-col gap-y-4 p-4 rounded-[2px] border bg-surface-background;
+  }
+
+  .section-group.test-section {
+    @apply bg-surface-background border-dashed;
+  }
+
+  .section-header {
+    @apply flex items-center gap-x-2 pb-2 border-b mb-2;
+  }
+
+  .section-title {
+    @apply text-xs font-semibold text-fg-secondary uppercase tracking-wide;
+  }
+
+  .section {
+    @apply flex flex-col gap-y-2 w-full;
+  }
+
+  .type-button {
+    @apply flex flex-col items-start p-3 rounded-[2px] border text-left transition-colors;
+    @apply bg-surface-subtle;
+  }
+
+  .type-button:hover {
+    @apply bg-surface-hover;
+  }
+
+  .type-button.selected {
+    @apply bg-primary-50 border-primary-500;
+  }
+
+  .type-label {
+    @apply text-sm font-medium;
+  }
+
+  .type-button.selected .type-label {
+    @apply text-primary-700;
+  }
+
+  .type-description {
+    @apply text-xs text-fg-muted mt-0.5;
+  }
+
+  .query-editor {
+    @apply w-full h-32 p-3 font-mono text-sm border rounded-[2px] bg-input resize-y;
+    @apply focus:ring-2 focus:ring-primary-100 focus:border-primary-500 outline-none;
+  }
+
+  .hint {
+    @apply text-xs text-fg-muted;
+  }
+
+  .error-banner {
+    @apply flex items-start gap-x-2 p-3 rounded-[2px] border mt-4;
+    @apply bg-red-50 border-red-200 text-red-700 text-sm;
+  }
+
+  .preview-area {
+    @apply relative flex flex-col border-t mt-4 flex-shrink-0;
+  }
+
+  .preview-header {
+    @apply px-3 py-2 border-b bg-surface-subtle;
+  }
+
+  .preview-content {
+    @apply flex-1 overflow-auto;
+  }
+</style>
diff --git a/web-common/src/features/workspaces/APIWorkspace.svelte b/web-common/src/features/workspaces/APIWorkspace.svelte
new file mode 100644
index 000000000000..c4b0eac434f7
--- /dev/null
+++ b/web-common/src/features/workspaces/APIWorkspace.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { getNameFromFile } from "@rilldata/web-common/features/entity-management/entity-mappers";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
+  import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
+  import { handleEntityRename } from "@rilldata/web-common/features/entity-management/ui-actions";
+  import { mapParseErrorsToLines } from "@rilldata/web-common/features/metrics-views/errors";
+  import APIEditor from "@rilldata/web-common/features/apis/editor/APIEditor.svelte";
+  import VisualAPIEditor from "@rilldata/web-common/features/apis/editor/VisualAPIEditor.svelte";
+  import WorkspaceContainer from "@rilldata/web-common/layout/workspace/WorkspaceContainer.svelte";
+  import WorkspaceHeader from "@rilldata/web-common/layout/workspace/WorkspaceHeader.svelte";
+  import { workspaces } from "@rilldata/web-common/layout/workspace/workspace-stores";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+
+  export let fileArtifact: FileArtifact;
+
+  $: ({ instanceId } = $runtime);
+  $: ({
+    hasUnsavedChanges,
+    autoSave,
+    path: filePath,
+    resourceName,
+    remoteContent,
+    fileName,
+  } = fileArtifact);
+
+  $: workspace = workspaces.get(filePath);
+
+  $: apiName = $resourceName?.name ?? getNameFromFile(filePath);
+
+  $: allErrorsQuery = fileArtifact.getAllErrors(queryClient, instanceId);
+  $: allErrors = $allErrorsQuery;
+  $: resourceQuery = fileArtifact.getResource(queryClient, instanceId);
+  $: ({ data: resource } = $resourceQuery);
+
+  async function onChangeCallback(newTitle: string) {
+    const newRoute = await handleEntityRename(
+      instanceId,
+      newTitle,
+      filePath,
+      fileName,
+    );
+    if (newRoute) await goto(newRoute);
+  }
+
+  $: selectedView = workspace.view;
+
+  $: errors = mapParseErrorsToLines(allErrors, $remoteContent ?? "");
+</script>
+
+<WorkspaceContainer inspector={false}>
+  <WorkspaceHeader
+    {filePath}
+    {resource}
+    resourceKind={ResourceKind.API}
+    hasUnsavedChanges={$hasUnsavedChanges}
+    onTitleChange={onChangeCallback}
+    slot="header"
+    codeToggle
+    showInspectorToggle={false}
+    titleInput={fileName}
+  />
+
+  <svelte:fragment slot="body">
+    {#if $selectedView === "code"}
+      <APIEditor bind:autoSave={$autoSave} {fileArtifact} {errors} {apiName} />
+    {:else}
+      {#key fileArtifact}
+        <VisualAPIEditor
+          {errors}
+          {fileArtifact}
+          {apiName}
+          switchView={() => {
+            $selectedView = "code";
+          }}
+        />
+      {/key}
+    {/if}
+  </svelte:fragment>
+</WorkspaceContainer>
diff --git a/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte b/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte
index 7965f3f3022f..45f004157689 100644
--- a/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte
+++ b/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte
@@ -9,6 +9,7 @@
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { directoryState } from "@rilldata/web-common/features/file-explorer/directory-store";
   import { mapParseErrorsToLines } from "@rilldata/web-common/features/metrics-views/errors";
+  import APIWorkspace from "@rilldata/web-common/features/workspaces/APIWorkspace.svelte";
   import CanvasWorkspace from "@rilldata/web-common/features/workspaces/CanvasWorkspace.svelte";
   import ExploreWorkspace from "@rilldata/web-common/features/workspaces/ExploreWorkspace.svelte";
   import MetricsWorkspace from "@rilldata/web-common/features/workspaces/MetricsWorkspace.svelte";
@@ -26,6 +27,7 @@
     [ResourceKind.MetricsView, MetricsWorkspace],
     [ResourceKind.Explore, ExploreWorkspace],
     [ResourceKind.Canvas, CanvasWorkspace],
+    [ResourceKind.API, APIWorkspace],
     [null, null],
     [undefined, null],
   ]);

From b50943cab1971f714db80982b71ec4209f879a72 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 10:55:16 -0500
Subject: [PATCH 02/24] nit

---
 .../src/features/apis/editor/APIEditor.svelte |  2 +-
 .../apis/editor/VisualAPIEditor.svelte        | 66 ++++++++++++++++++-
 2 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/web-common/src/features/apis/editor/APIEditor.svelte b/web-common/src/features/apis/editor/APIEditor.svelte
index 6da36b9d85c6..ed3a750634c6 100644
--- a/web-common/src/features/apis/editor/APIEditor.svelte
+++ b/web-common/src/features/apis/editor/APIEditor.svelte
@@ -36,7 +36,7 @@
   $: ({ instanceId } = $runtime);
   $: if (editor) setLineStatuses(errors, editor);
   $: mainError = errors?.at(0);
-  $: host = $runtime.host || "http://localhost:3001";
+  $: host = $runtime.host || "http://localhost:9009";
   $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
   $: fullUrl = buildFullUrl(baseUrl, args);
   $: hasErrors = errors.length > 0;
diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
index 599a1da594a5..cddee07cd567 100644
--- a/web-common/src/features/apis/editor/VisualAPIEditor.svelte
+++ b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import type { LineStatus } from "@rilldata/web-common/components/editor/line-status/state";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
@@ -32,9 +33,11 @@
   }
 
   // Template options for dropdown menus
+  // For metrics_sql/sql: use suffix to append to current base query (select ... from X); content is fallback when empty.
   interface TemplateOption {
     label: string;
     content?: string;
+    suffix?: string;
     globPattern?: string;
     api?: string;
     includeArgs?: boolean;
@@ -47,31 +50,38 @@
     {
       label: "Basic Query",
       content: "select measure, dimension from metrics_view",
+      suffix: "",
     },
     {
       label: "Query with Filter",
       content:
         "select measure, dimension from metrics_view where dimension = '{{ .args.filter }}'",
+      suffix: "where dimension = '{{ .args.filter }}'",
     },
     {
       label: "Query with Limit",
       content:
         "select measure, dimension from metrics_view limit {{ .args.limit }}",
+      suffix: "limit {{ .args.limit }}",
     },
     {
       label: "Query with Offset",
       content:
         "select measure, dimension from metrics_view limit {{ .args.limit }} offset {{ .args.offset }}",
+      suffix: "limit {{ .args.limit }} offset {{ .args.offset }}",
     },
     {
       label: "Query with Sort",
       content:
         "select measure, dimension from metrics_view order by {{ .args.sort }} {{ .args.order }}",
+      suffix: "order by {{ .args.sort }} {{ .args.order }}",
     },
     {
       label: "Full Query",
       content:
         "select measure, dimension from metrics_view where dimension = '{{ .args.filter }}' order by {{ .args.sort }} {{ .args.order }} limit {{ .args.limit }} offset {{ .args.offset }}",
+      suffix:
+        "where dimension = '{{ .args.filter }}' order by {{ .args.sort }} {{ .args.order }} limit {{ .args.limit }} offset {{ .args.offset }}",
     },
   ];
 
@@ -79,29 +89,36 @@
     {
       label: "Basic Query",
       content: "select * from model_name",
+      suffix: "",
     },
     {
       label: "Query with Filter",
       content: "select * from model_name where column = '{{ .args.filter }}'",
+      suffix: "where column = '{{ .args.filter }}'",
     },
     {
       label: "Query with Limit",
       content: "select * from model_name limit {{ .args.limit }}",
+      suffix: "limit {{ .args.limit }}",
     },
     {
       label: "Query with Offset",
       content:
         "select * from model_name limit {{ .args.limit }} offset {{ .args.offset }}",
+      suffix: "limit {{ .args.limit }} offset {{ .args.offset }}",
     },
     {
       label: "Query with Sort",
       content:
         "select * from model_name order by {{ .args.sort }} {{ .args.order }}",
+      suffix: "order by {{ .args.sort }} {{ .args.order }}",
     },
     {
       label: "Full Query",
       content:
         "select * from model_name where column = '{{ .args.filter }}' order by {{ .args.sort }} {{ .args.order }} limit {{ .args.limit }} offset {{ .args.offset }}",
+      suffix:
+        "where column = '{{ .args.filter }}' order by {{ .args.sort }} {{ .args.order }} limit {{ .args.limit }} offset {{ .args.offset }}",
     },
   ];
 
@@ -196,6 +213,16 @@
   let responseError: string | null = null;
   let isLoading = false;
   let previewHeight = 300;
+  let resizerMax = 600;
+  let mainAreaEl: HTMLDivElement;
+
+  onMount(() => {
+    if (mainAreaEl) {
+      const h = mainAreaEl.clientHeight;
+      previewHeight = Math.max(100, Math.floor(h / 2));
+      resizerMax = Math.max(400, Math.floor(h * 0.85));
+    }
+  });
 
   // Glob-specific fields
   let globPattern = "";
@@ -206,7 +233,7 @@
   // Resource status fields
   let whereError = true;
 
-  $: host = $runtime.host || "http://localhost:3001";
+  $: host = $runtime.host || "http://localhost:9009";
   $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
   $: fullUrl = buildFullUrl(baseUrl, args);
   $: hasErrors = errors.length > 0;
@@ -330,8 +357,41 @@
     updateYAML("resource_status", "");
   }
 
+  /** Returns the base query (select ... from X) without where/order by/limit/offset clauses. */
+  function getBaseQuery(content: string): string {
+    const trimmed = content.trim();
+    if (!trimmed) return "";
+    const lower = trimmed.toLowerCase();
+    const indices = [
+      lower.indexOf(" where "),
+      lower.indexOf(" order by "),
+      lower.indexOf(" limit "),
+      lower.indexOf(" offset "),
+    ]
+      .filter((i) => i >= 0)
+      .sort((a, b) => a - b);
+    const end = indices.length > 0 ? indices[0] : trimmed.length;
+    return trimmed.slice(0, end).trim();
+  }
+
+  const defaultBaseQuery: Record<"metrics_sql" | "sql", string> = {
+    metrics_sql: "select measure, dimension from metrics_view",
+    sql: "select * from model_name",
+  };
+
   function applyTemplate(template: TemplateOption) {
-    if (template.content !== undefined) {
+    if (
+      (currentType === "metrics_sql" || currentType === "sql") &&
+      (template.suffix !== undefined || template.content !== undefined)
+    ) {
+      // Keep base SQL (select ... from X); remove any existing clauses and replace with template only
+      const base =
+        getBaseQuery(currentContent) ||
+        defaultBaseQuery[currentType];
+      const suffix = template.suffix ?? "";
+      const newContent = suffix ? `${base} ${suffix}`.trim() : base;
+      updateYAML(currentType, newContent);
+    } else if (template.content !== undefined) {
       updateYAML(currentType, template.content);
     } else if (template.globPattern !== undefined) {
       globPattern = template.globPattern;
@@ -745,7 +805,7 @@
   }
 
   .query-editor {
-    @apply w-full h-32 p-3 font-mono text-sm border rounded-[2px] bg-input resize-y;
+    @apply w-full h-56 p-3 font-mono text-sm border rounded-[2px] bg-input resize-none;
     @apply focus:ring-2 focus:ring-primary-100 focus:border-primary-500 outline-none;
   }
 

From 737d2980071ee3820e162bbee2440c9a95c3fc57 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 11:33:05 -0500
Subject: [PATCH 03/24] args

---
 .../apis/editor/VisualAPIEditor.svelte        | 160 ++++++++++++++++--
 1 file changed, 149 insertions(+), 11 deletions(-)

diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
index cddee07cd567..f0242aced55e 100644
--- a/web-common/src/features/apis/editor/VisualAPIEditor.svelte
+++ b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
@@ -43,8 +43,8 @@
     includeArgs?: boolean;
   }
 
-  // Track whether current API config should include args
-  let includeArgsInApi = false;
+  // Build args for api and glob types (saved to YAML)
+  let buildArgs: Arg[] = [];
 
   const metricsSqlTemplates: TemplateOption[] = [
     {
@@ -233,6 +233,9 @@
   // Resource status fields
   let whereError = true;
 
+  // Connector field for sql and glob
+  let connector = "";
+
   $: host = $runtime.host || "http://localhost:9009";
   $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
   $: fullUrl = buildFullUrl(baseUrl, args);
@@ -252,6 +255,32 @@
     doc: ReturnType<typeof parseDocument>,
     type: APIType,
   ): string {
+    // Extract connector for sql and glob types
+    if (type === "sql" || type === "glob") {
+      connector = String(doc.get("connector") ?? "");
+    }
+
+    // Extract buildArgs for api and glob types
+    if (type === "api" || type === "glob") {
+      const docJson = doc.toJSON() as Record<string, unknown> | null;
+      const argsFromYaml = docJson?.args;
+      if (
+        argsFromYaml &&
+        typeof argsFromYaml === "object" &&
+        !Array.isArray(argsFromYaml)
+      ) {
+        buildArgs = Object.entries(argsFromYaml as Record<string, unknown>).map(
+          ([key, value]) => ({
+            id: crypto.randomUUID(),
+            key,
+            value: String(value ?? ""),
+          }),
+        );
+      } else {
+        buildArgs = [];
+      }
+    }
+
     switch (type) {
       case "metrics_sql":
         return String(doc.get("metrics_sql") ?? "");
@@ -302,17 +331,41 @@
         break;
       case "sql":
         doc.set("sql", content);
+        if (connector) {
+          doc.set("connector", connector);
+        }
         break;
       case "api":
         doc.set("resolver", "api");
         doc.set("api", targetApiName);
-        if (includeArgsInApi) {
-          doc.set("args", null);
+        if (buildArgs.length > 0) {
+          const argsObj: Record<string, string> = {};
+          buildArgs.forEach((arg) => {
+            if (arg.key.trim()) {
+              argsObj[arg.key] = arg.value;
+            }
+          });
+          if (Object.keys(argsObj).length > 0) {
+            doc.set("args", argsObj);
+          }
         }
         break;
       case "glob":
         doc.set("glob", globPattern);
-        doc.set("args", null);
+        if (connector) {
+          doc.set("connector", connector);
+        }
+        if (buildArgs.length > 0) {
+          const argsObj: Record<string, string> = {};
+          buildArgs.forEach((arg) => {
+            if (arg.key.trim()) {
+              argsObj[arg.key] = arg.value;
+            }
+          });
+          if (Object.keys(argsObj).length > 0) {
+            doc.set("args", argsObj);
+          }
+        }
         break;
       case "resource_status":
         doc.set("resource_status", { where_error: whereError });
@@ -326,11 +379,17 @@
     // When switching types, use default template for the new type
     const defaults = defaultTemplates[newType];
 
+    // Reset connector when switching types
+    if (newType === "sql" || newType === "glob") {
+      connector = "";
+    }
+
     if (newType === "glob") {
       globPattern = defaults.globPattern ?? "s3://bucket/path/*.csv";
+      buildArgs = [];
     } else if (newType === "api") {
       targetApiName = defaults.api ?? "sample_api";
-      includeArgsInApi = false; // Default API template doesn't include args
+      buildArgs = [];
     } else if (newType === "resource_status") {
       whereError = defaults.whereError ?? true;
     }
@@ -357,6 +416,24 @@
     updateYAML("resource_status", "");
   }
 
+  function handleConnectorChange(value: string) {
+    connector = value;
+    updateYAML(currentType, currentContent);
+  }
+
+  function addBuildArg() {
+    buildArgs = [...buildArgs, { id: crypto.randomUUID(), key: "", value: "" }];
+  }
+
+  function removeBuildArg(id: string) {
+    buildArgs = buildArgs.filter((arg) => arg.id !== id);
+    updateYAML(currentType, currentContent);
+  }
+
+  function handleBuildArgChange() {
+    updateYAML(currentType, currentContent);
+  }
+
   /** Returns the base query (select ... from X) without where/order by/limit/offset clauses. */
   function getBaseQuery(content: string): string {
     const trimmed = content.trim();
@@ -386,8 +463,7 @@
     ) {
       // Keep base SQL (select ... from X); remove any existing clauses and replace with template only
       const base =
-        getBaseQuery(currentContent) ||
-        defaultBaseQuery[currentType];
+        getBaseQuery(currentContent) || defaultBaseQuery[currentType];
       const suffix = template.suffix ?? "";
       const newContent = suffix ? `${base} ${suffix}`.trim() : base;
       updateYAML(currentType, newContent);
@@ -398,7 +474,7 @@
       updateYAML("glob", "");
     } else if (template.api !== undefined) {
       targetApiName = template.api;
-      includeArgsInApi = template.includeArgs ?? false;
+      buildArgs = [];
       updateYAML("api", "");
     }
   }
@@ -513,8 +589,18 @@
               view.
             </p>
           {:else if currentType === "sql"}
+            <div class="mb-3">
+              <InputLabel id="sql-connector" label="Connector (optional)" />
+              <Input
+                value={connector}
+                placeholder="duckdb"
+                size="md"
+                full
+                onInput={(value) => handleConnectorChange(value)}
+              />
+            </div>
             <div class="flex items-center justify-between">
-              <InputLabel label="SQL Query" />
+              <InputLabel id="sql-query" label="SQL Query" />
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild let:builder>
                   <Button type="text" compact small builders={[builder]}>
@@ -571,9 +657,61 @@
               Call another API endpoint by name. The target API must exist in
               your project.
             </p>
+            <!-- Args for API -->
+            <div class="mt-4">
+              <div class="flex items-center justify-between">
+                <InputLabel id="api-args" label="Args (optional)" />
+                <Button type="text" compact small onClick={addBuildArg}>
+                  <PlusIcon size="14px" />
+                  Add
+                </Button>
+              </div>
+              {#if buildArgs.length === 0}
+                <p class="hint">No args added.</p>
+              {:else}
+                <div class="flex flex-col gap-y-2 mt-2">
+                  {#each buildArgs as arg (arg.id)}
+                    <div class="flex items-center gap-x-2">
+                      <Input
+                        bind:value={arg.key}
+                        placeholder="Key"
+                        size="md"
+                        width="180px"
+                        onBlur={() => handleBuildArgChange()}
+                      />
+                      <Input
+                        bind:value={arg.value}
+                        placeholder="Value"
+                        size="md"
+                        full
+                        onBlur={() => handleBuildArgChange()}
+                      />
+                      <Button
+                        type="ghost"
+                        square
+                        compact
+                        onClick={() => removeBuildArg(arg.id)}
+                      >
+                        <Trash size="14px" />
+                      </Button>
+                    </div>
+                  {/each}
+                </div>
+              {/if}
+            </div>
           {:else if currentType === "glob"}
+            <div class="mb-3">
+              <InputLabel id="glob-connector" label="Connector (optional)" />
+              <Input
+                value={connector}
+                placeholder="s3"
+                size="md"
+                full
+                onInput={(value) => handleConnectorChange(value)}
+              />
+            </div>
             <div class="flex items-center justify-between">
-              <InputLabel label="Glob Pattern" />
+              <InputLabel id="glob-pattern" label="Glob Pattern" />
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild let:builder>
                   <Button type="text" compact small builders={[builder]}>

From 05a5b87ca795f8e132c874d491794c5b8d03b1e4 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 12:18:29 -0500
Subject: [PATCH 04/24] simpler, prettier

---
 .../apis/editor/VisualAPIEditor.svelte        | 280 +-----------------
 1 file changed, 6 insertions(+), 274 deletions(-)

diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
index f0242aced55e..4824827d4e40 100644
--- a/web-common/src/features/apis/editor/VisualAPIEditor.svelte
+++ b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
@@ -24,7 +24,7 @@
   export let apiName: string;
   export let switchView: () => void;
 
-  type APIType = "metrics_sql" | "sql" | "api" | "glob" | "resource_status";
+  type APIType = "metrics_sql" | "sql" | "resource_status";
 
   interface Arg {
     id: string;
@@ -38,14 +38,8 @@
     label: string;
     content?: string;
     suffix?: string;
-    globPattern?: string;
-    api?: string;
-    includeArgs?: boolean;
   }
 
-  // Build args for api and glob types (saved to YAML)
-  let buildArgs: Arg[] = [];
-
   const metricsSqlTemplates: TemplateOption[] = [
     {
       label: "Basic Query",
@@ -122,50 +116,16 @@
     },
   ];
 
-  const apiTemplates: TemplateOption[] = [
-    {
-      label: "Basic API Call",
-      api: "sample_api",
-    },
-  ];
-
-  const globTemplates: TemplateOption[] = [
-    {
-      label: "S3 CSV Files",
-      globPattern: "s3://bucket/path/*.csv",
-    },
-    {
-      label: "S3 Parquet Files",
-      globPattern: "s3://bucket/path/*.parquet",
-    },
-    {
-      label: "GCS Files",
-      globPattern: "gs://bucket/path/*.csv",
-    },
-    {
-      label: "Recursive Pattern",
-      globPattern: "s3://bucket/**/*.csv",
-    },
-    {
-      label: "Local Files",
-      globPattern: "data/*.csv",
-    },
-  ];
-
   // Default templates for each API type (first option from each list)
   const defaultTemplates: Record<
     APIType,
     {
       content?: string;
-      globPattern?: string;
-      api?: string;
       whereError?: boolean;
     }
   > = {
     metrics_sql: metricsSqlTemplates[0],
     sql: sqlTemplates[0],
-    api: apiTemplates[0],
-    glob: globTemplates[0],
     resource_status: { whereError: true },
   };
 
@@ -180,16 +140,6 @@
       label: "SQL",
       description: "Query models/sources using raw SQL",
     },
-    {
-      value: "api",
-      label: "API",
-      description: "Call another API endpoint",
-    },
-    {
-      value: "glob",
-      label: "Glob",
-      description: "Match files using glob patterns",
-    },
     {
       value: "resource_status",
       label: "Resource Status",
@@ -224,12 +174,6 @@
     }
   });
 
-  // Glob-specific fields
-  let globPattern = "";
-
-  // API-specific fields
-  let targetApiName = "";
-
   // Resource status fields
   let whereError = true;
 
@@ -244,10 +188,7 @@
   function detectAPIType(doc: ReturnType<typeof parseDocument>): APIType {
     if (doc.get("metrics_sql")) return "metrics_sql";
     if (doc.get("sql")) return "sql";
-    if (doc.get("glob")) return "glob";
     if (doc.get("resource_status")) return "resource_status";
-    const resolver = doc.get("resolver");
-    if (resolver === "api") return "api";
     return "metrics_sql"; // default
   }
 
@@ -255,45 +196,16 @@
     doc: ReturnType<typeof parseDocument>,
     type: APIType,
   ): string {
-    // Extract connector for sql and glob types
-    if (type === "sql" || type === "glob") {
+    // Extract connector for sql type
+    if (type === "sql") {
       connector = String(doc.get("connector") ?? "");
     }
 
-    // Extract buildArgs for api and glob types
-    if (type === "api" || type === "glob") {
-      const docJson = doc.toJSON() as Record<string, unknown> | null;
-      const argsFromYaml = docJson?.args;
-      if (
-        argsFromYaml &&
-        typeof argsFromYaml === "object" &&
-        !Array.isArray(argsFromYaml)
-      ) {
-        buildArgs = Object.entries(argsFromYaml as Record<string, unknown>).map(
-          ([key, value]) => ({
-            id: crypto.randomUUID(),
-            key,
-            value: String(value ?? ""),
-          }),
-        );
-      } else {
-        buildArgs = [];
-      }
-    }
-
     switch (type) {
       case "metrics_sql":
         return String(doc.get("metrics_sql") ?? "");
       case "sql":
         return String(doc.get("sql") ?? "");
-      case "api": {
-        targetApiName = String(doc.get("api") ?? "");
-        return "";
-      }
-      case "glob": {
-        globPattern = String(doc.get("glob") ?? "");
-        return "";
-      }
       case "resource_status": {
         // Use getIn to get nested value from YAML document
         const whereErrorValue = doc.getIn(["resource_status", "where_error"]);
@@ -335,38 +247,6 @@
           doc.set("connector", connector);
         }
         break;
-      case "api":
-        doc.set("resolver", "api");
-        doc.set("api", targetApiName);
-        if (buildArgs.length > 0) {
-          const argsObj: Record<string, string> = {};
-          buildArgs.forEach((arg) => {
-            if (arg.key.trim()) {
-              argsObj[arg.key] = arg.value;
-            }
-          });
-          if (Object.keys(argsObj).length > 0) {
-            doc.set("args", argsObj);
-          }
-        }
-        break;
-      case "glob":
-        doc.set("glob", globPattern);
-        if (connector) {
-          doc.set("connector", connector);
-        }
-        if (buildArgs.length > 0) {
-          const argsObj: Record<string, string> = {};
-          buildArgs.forEach((arg) => {
-            if (arg.key.trim()) {
-              argsObj[arg.key] = arg.value;
-            }
-          });
-          if (Object.keys(argsObj).length > 0) {
-            doc.set("args", argsObj);
-          }
-        }
-        break;
       case "resource_status":
         doc.set("resource_status", { where_error: whereError });
         break;
@@ -380,17 +260,11 @@
     const defaults = defaultTemplates[newType];
 
     // Reset connector when switching types
-    if (newType === "sql" || newType === "glob") {
+    if (newType === "sql") {
       connector = "";
     }
 
-    if (newType === "glob") {
-      globPattern = defaults.globPattern ?? "s3://bucket/path/*.csv";
-      buildArgs = [];
-    } else if (newType === "api") {
-      targetApiName = defaults.api ?? "sample_api";
-      buildArgs = [];
-    } else if (newType === "resource_status") {
+    if (newType === "resource_status") {
       whereError = defaults.whereError ?? true;
     }
 
@@ -401,16 +275,6 @@
     updateYAML(currentType, content);
   }
 
-  function handleGlobPatternChange(value: string) {
-    globPattern = value;
-    updateYAML("glob", "");
-  }
-
-  function handleApiNameChange(value: string) {
-    targetApiName = value;
-    updateYAML("api", "");
-  }
-
   function handleWhereErrorChange(checked: boolean) {
     whereError = checked;
     updateYAML("resource_status", "");
@@ -421,19 +285,6 @@
     updateYAML(currentType, currentContent);
   }
 
-  function addBuildArg() {
-    buildArgs = [...buildArgs, { id: crypto.randomUUID(), key: "", value: "" }];
-  }
-
-  function removeBuildArg(id: string) {
-    buildArgs = buildArgs.filter((arg) => arg.id !== id);
-    updateYAML(currentType, currentContent);
-  }
-
-  function handleBuildArgChange() {
-    updateYAML(currentType, currentContent);
-  }
-
   /** Returns the base query (select ... from X) without where/order by/limit/offset clauses. */
   function getBaseQuery(content: string): string {
     const trimmed = content.trim();
@@ -469,13 +320,6 @@
       updateYAML(currentType, newContent);
     } else if (template.content !== undefined) {
       updateYAML(currentType, template.content);
-    } else if (template.globPattern !== undefined) {
-      globPattern = template.globPattern;
-      updateYAML("glob", "");
-    } else if (template.api !== undefined) {
-      targetApiName = template.api;
-      buildArgs = [];
-      updateYAML("api", "");
     }
   }
 
@@ -538,7 +382,7 @@
         <!-- API Type Selector -->
         <div class="section">
           <InputLabel label="API Type" />
-          <div class="grid grid-cols-5 gap-2">
+          <div class="grid grid-cols-3 gap-2">
             {#each apiTypes as apiType}
               <button
                 class="type-button"
@@ -627,118 +471,6 @@
               Replace <code>table</code> with an actual model or source name from
               your project.
             </p>
-          {:else if currentType === "api"}
-            <div class="flex items-center justify-between">
-              <InputLabel label="Target API Name" />
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger asChild let:builder>
-                  <Button type="text" compact small builders={[builder]}>
-                    Templates
-                    <ChevronDownIcon size="12px" />
-                  </Button>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content align="end">
-                  {#each apiTemplates as template}
-                    <DropdownMenu.Item on:click={() => applyTemplate(template)}>
-                      {template.label}
-                    </DropdownMenu.Item>
-                  {/each}
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </div>
-            <Input
-              value={targetApiName}
-              placeholder="other_api_name"
-              size="lg"
-              full
-              onInput={(value) => handleApiNameChange(value)}
-            />
-            <p class="hint">
-              Call another API endpoint by name. The target API must exist in
-              your project.
-            </p>
-            <!-- Args for API -->
-            <div class="mt-4">
-              <div class="flex items-center justify-between">
-                <InputLabel id="api-args" label="Args (optional)" />
-                <Button type="text" compact small onClick={addBuildArg}>
-                  <PlusIcon size="14px" />
-                  Add
-                </Button>
-              </div>
-              {#if buildArgs.length === 0}
-                <p class="hint">No args added.</p>
-              {:else}
-                <div class="flex flex-col gap-y-2 mt-2">
-                  {#each buildArgs as arg (arg.id)}
-                    <div class="flex items-center gap-x-2">
-                      <Input
-                        bind:value={arg.key}
-                        placeholder="Key"
-                        size="md"
-                        width="180px"
-                        onBlur={() => handleBuildArgChange()}
-                      />
-                      <Input
-                        bind:value={arg.value}
-                        placeholder="Value"
-                        size="md"
-                        full
-                        onBlur={() => handleBuildArgChange()}
-                      />
-                      <Button
-                        type="ghost"
-                        square
-                        compact
-                        onClick={() => removeBuildArg(arg.id)}
-                      >
-                        <Trash size="14px" />
-                      </Button>
-                    </div>
-                  {/each}
-                </div>
-              {/if}
-            </div>
-          {:else if currentType === "glob"}
-            <div class="mb-3">
-              <InputLabel id="glob-connector" label="Connector (optional)" />
-              <Input
-                value={connector}
-                placeholder="s3"
-                size="md"
-                full
-                onInput={(value) => handleConnectorChange(value)}
-              />
-            </div>
-            <div class="flex items-center justify-between">
-              <InputLabel id="glob-pattern" label="Glob Pattern" />
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger asChild let:builder>
-                  <Button type="text" compact small builders={[builder]}>
-                    Templates
-                    <ChevronDownIcon size="12px" />
-                  </Button>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content align="end">
-                  {#each globTemplates as template}
-                    <DropdownMenu.Item on:click={() => applyTemplate(template)}>
-                      {template.label}
-                    </DropdownMenu.Item>
-                  {/each}
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </div>
-            <Input
-              value={globPattern}
-              placeholder="s3://bucket/path/*.csv"
-              size="lg"
-              full
-              onInput={(value) => handleGlobPatternChange(value)}
-            />
-            <p class="hint">
-              Match files using glob patterns. Examples: s3://bucket/path/*.csv,
-              gs://bucket/*.parquet, s3://bucket/**/*.csv
-            </p>
           {:else if currentType === "resource_status"}
             <InputLabel label="Resource Status Options" />
             <div class="flex items-center gap-x-2 mt-1">

From 8614d132911247e6233854066f1f7934d13df76b Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 12:20:44 -0500
Subject: [PATCH 05/24] web code qual

---
 .../features/apis/editor/VisualAPIEditor.svelte | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
index 4824827d4e40..022933565e3b 100644
--- a/web-common/src/features/apis/editor/VisualAPIEditor.svelte
+++ b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
@@ -164,7 +164,7 @@
   let isLoading = false;
   let previewHeight = 300;
   let resizerMax = 600;
-  let mainAreaEl: HTMLDivElement;
+  let mainAreaEl: HTMLDivElement | undefined;
 
   onMount(() => {
     if (mainAreaEl) {
@@ -177,7 +177,7 @@
   // Resource status fields
   let whereError = true;
 
-  // Connector field for sql and glob
+  // Connector field for sql type
   let connector = "";
 
   $: host = $runtime.host || "http://localhost:9009";
@@ -381,7 +381,7 @@
 
         <!-- API Type Selector -->
         <div class="section">
-          <InputLabel label="API Type" />
+          <InputLabel id="api-type" label="API Type" />
           <div class="grid grid-cols-3 gap-2">
             {#each apiTypes as apiType}
               <button
@@ -404,7 +404,7 @@
         <div class="section">
           {#if currentType === "metrics_sql"}
             <div class="flex items-center justify-between">
-              <InputLabel label="Metrics SQL Query" />
+              <InputLabel id="metrics-sql-query" label="Metrics SQL Query" />
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild let:builder>
                   <Button type="text" compact small builders={[builder]}>
@@ -472,7 +472,10 @@
               your project.
             </p>
           {:else if currentType === "resource_status"}
-            <InputLabel label="Resource Status Options" />
+            <InputLabel
+              id="resource-status-options"
+              label="Resource Status Options"
+            />
             <div class="flex items-center gap-x-2 mt-1">
               <Checkbox
                 checked={whereError}
@@ -512,7 +515,7 @@
 
         <!-- Endpoint URL -->
         <div class="section">
-          <InputLabel label="Endpoint URL" />
+          <InputLabel id="endpoint-url" label="Endpoint URL" />
           <div
             class="flex items-center gap-x-2 px-3 py-2 bg-surface-muted rounded-[2px] border text-sm font-mono"
           >
@@ -524,7 +527,7 @@
         <!-- Arguments -->
         <div class="section">
           <div class="flex items-center justify-between">
-            <InputLabel label="Arguments" />
+            <InputLabel id="test-arguments" label="Arguments" />
             <Button type="text" compact onClick={addArg}>
               <PlusIcon size="14px" />
               Add

From 74ad9bba8ce9f14d74eb94f71e44c7b927909b28 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 13:19:51 -0500
Subject: [PATCH 06/24] code qual

---
 .../features/apis/editor/APIResponsePreview.svelte  |  1 -
 .../src/features/apis/editor/VisualAPIEditor.svelte | 13 ++++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web-common/src/features/apis/editor/APIResponsePreview.svelte b/web-common/src/features/apis/editor/APIResponsePreview.svelte
index 1e06c4727eef..2df03b9b57d5 100644
--- a/web-common/src/features/apis/editor/APIResponsePreview.svelte
+++ b/web-common/src/features/apis/editor/APIResponsePreview.svelte
@@ -10,7 +10,6 @@
   export let apiName: string;
 
   $: columns = extractColumns(response);
-  $: rows = response ?? [];
 
   function extractColumns(data: unknown[] | null): VirtualizedTableColumns[] {
     if (!data || data.length === 0) return [];
diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
index f0242aced55e..c494ca88c251 100644
--- a/web-common/src/features/apis/editor/VisualAPIEditor.svelte
+++ b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
@@ -22,7 +22,9 @@
   export let fileArtifact: FileArtifact;
   export let errors: LineStatus[];
   export let apiName: string;
-  export let switchView: () => void;
+  // Prop for parent to provide view switching callback (used externally)
+  export let switchView: (() => void) | undefined = undefined;
+  void switchView; // Silence unused warning - prop exists for external interface
 
   type APIType = "metrics_sql" | "sql" | "api" | "glob" | "resource_status";
 
@@ -214,11 +216,12 @@
   let isLoading = false;
   let previewHeight = 300;
   let resizerMax = 600;
-  let mainAreaEl: HTMLDivElement;
 
   onMount(() => {
-    if (mainAreaEl) {
-      const h = mainAreaEl.clientHeight;
+    // Calculate initial preview height based on available space
+    const mainArea = document.querySelector(".main-area");
+    if (mainArea) {
+      const h = mainArea.clientHeight;
       previewHeight = Math.max(100, Math.floor(h / 2));
       resizerMax = Math.max(400, Math.floor(h * 0.85));
     }
@@ -863,7 +866,7 @@
     >
       <Resizer
         absolute={false}
-        max={600}
+        max={resizerMax}
         direction="NS"
         side="top"
         bind:dimension={previewHeight}

From 7cc613960676f27c33385239d9ac1b3e6a4b9469 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 13:22:14 -0500
Subject: [PATCH 07/24] Update VisualAPIEditor.svelte

---
 web-common/src/features/apis/editor/VisualAPIEditor.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
index 03f1cd8ada12..ef2f979ff295 100644
--- a/web-common/src/features/apis/editor/VisualAPIEditor.svelte
+++ b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
@@ -167,7 +167,6 @@
   let previewHeight = 300;
   let resizerMax = 600;
 
-  let mainAreaEl: HTMLDivElement | undefined;
   onMount(() => {
     // Calculate initial preview height based on available space
     const mainArea = document.querySelector(".main-area");

From a96efa5f3dfb192ea701efbd08326df44002bbe1 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 17:28:48 -0500
Subject: [PATCH 08/24] fixed heights and JSON view

---
 .../src/features/apis/editor/APIEditor.svelte | 24 +++---
 .../apis/editor/APIResponsePreview.svelte     | 80 ++++++++++++++++---
 .../apis/editor/VisualAPIEditor.svelte        | 63 +++++++--------
 3 files changed, 108 insertions(+), 59 deletions(-)

diff --git a/web-common/src/features/apis/editor/APIEditor.svelte b/web-common/src/features/apis/editor/APIEditor.svelte
index ed3a750634c6..6790971aa1d9 100644
--- a/web-common/src/features/apis/editor/APIEditor.svelte
+++ b/web-common/src/features/apis/editor/APIEditor.svelte
@@ -88,8 +88,8 @@
   }
 </script>
 
-<div class="flex flex-col h-full overflow-hidden">
-  <div class="flex-1 overflow-hidden min-h-0">
+<div class="flex flex-col h-full overflow-hidden p-2">
+  <div class="editor-panel">
     <WorkspaceEditorContainer error={mainError}>
       <Editor
         bind:autoSave
@@ -106,18 +106,12 @@
   </div>
 
   <div
-    class="relative flex flex-col border-t bg-surface-background"
+    class="preview-panel"
     style:height="{previewHeight}px"
     style:min-height="100px"
     style:max-height="60%"
   >
-    <Resizer
-      absolute={false}
-      max={500}
-      direction="NS"
-      side="top"
-      bind:dimension={previewHeight}
-    />
+    <Resizer max={500} direction="NS" side="top" bind:dimension={previewHeight} />
 
     <div class="flex items-center gap-x-3 px-3 py-2 border-b">
       <div class="flex items-center gap-x-2 flex-1 min-w-0">
@@ -205,3 +199,13 @@
     </div>
   </div>
 </div>
+
+<style lang="postcss">
+  .editor-panel {
+    @apply flex-1 overflow-hidden min-h-0 border rounded-[2px] rounded-b-none border-b-0;
+  }
+
+  .preview-panel {
+    @apply relative flex flex-col bg-surface-background border rounded-[2px] rounded-t-none overflow-hidden;
+  }
+</style>
diff --git a/web-common/src/features/apis/editor/APIResponsePreview.svelte b/web-common/src/features/apis/editor/APIResponsePreview.svelte
index 2df03b9b57d5..3079a2286ff6 100644
--- a/web-common/src/features/apis/editor/APIResponsePreview.svelte
+++ b/web-common/src/features/apis/editor/APIResponsePreview.svelte
@@ -2,13 +2,27 @@
   import ReconcilingSpinner from "@rilldata/web-common/features/entity-management/ReconcilingSpinner.svelte";
   import WorkspaceError from "@rilldata/web-common/components/WorkspaceError.svelte";
   import PreviewTable from "@rilldata/web-common/components/preview-table/PreviewTable.svelte";
+  import IconSwitcher from "@rilldata/web-common/components/forms/IconSwitcher.svelte";
   import type { VirtualizedTableColumns } from "@rilldata/web-common/components/virtualized-table/types";
+  import { TableIcon, BracesIcon } from "lucide-svelte";
 
   export let response: unknown[] | null;
   export let error: string | null;
   export let isLoading: boolean;
   export let apiName: string;
 
+  type ViewMode = "table" | "json";
+  let viewMode: ViewMode = "table";
+
+  const viewModeOptions = [
+    { id: "table", Icon: TableIcon, tooltip: "Table view" },
+    { id: "json", Icon: BracesIcon, tooltip: "JSON view" },
+  ];
+
+  function handleViewModeChange(id: string) {
+    viewMode = id as ViewMode;
+  }
+
   $: columns = extractColumns(response);
 
   function extractColumns(data: unknown[] | null): VirtualizedTableColumns[] {
@@ -49,18 +63,58 @@
   $: normalizedRows = normalizeRows(response);
 </script>
 
-{#if isLoading}
-  <ReconcilingSpinner />
-{:else if error}
-  <WorkspaceError message={error} />
-{:else if !response}
-  <div class="flex items-center justify-center h-full text-fg-muted text-sm">
-    Click "Test API" to see the response
+<div class="response-preview-wrapper">
+  <div class="response-header">
+    <span class="header-label">Response Preview</span>
+    {#if response && response.length > 0}
+      <IconSwitcher
+        fields={viewModeOptions}
+        selected={viewMode}
+        onClick={handleViewModeChange}
+        small
+      />
+    {/if}
   </div>
-{:else if response.length === 0}
-  <div class="flex items-center justify-center h-full text-fg-muted text-sm">
-    API returned an empty response
+  <div class="response-content">
+    {#if isLoading}
+      <ReconcilingSpinner />
+    {:else if error}
+      <WorkspaceError message={error} />
+    {:else if !response}
+      <div class="empty-state">Click "Test API" to see the response</div>
+    {:else if response.length === 0}
+      <div class="empty-state">API returned an empty response</div>
+    {:else if viewMode === "json"}
+      <pre class="json-view">{JSON.stringify(response, null, 2)}</pre>
+    {:else}
+      <PreviewTable rows={normalizedRows} columnNames={columns} name={apiName} />
+    {/if}
   </div>
-{:else}
-  <PreviewTable rows={normalizedRows} columnNames={columns} name={apiName} />
-{/if}
+</div>
+
+<style lang="postcss">
+  .response-preview-wrapper {
+    @apply flex flex-col h-full;
+  }
+
+  .response-header {
+    @apply flex items-center justify-between px-3 py-2 border-b bg-surface-muted;
+  }
+
+  .header-label {
+    @apply text-xs font-medium text-fg-secondary uppercase;
+  }
+
+  .response-content {
+    @apply flex-1 overflow-auto;
+  }
+
+  .empty-state {
+    @apply flex items-center justify-center h-full text-fg-muted text-sm;
+  }
+
+  .json-view {
+    @apply p-4 text-sm font-mono whitespace-pre-wrap break-words;
+    @apply bg-surface-background text-fg-primary;
+  }
+</style>
diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
index ef2f979ff295..1fdad87a6538 100644
--- a/web-common/src/features/apis/editor/VisualAPIEditor.svelte
+++ b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
@@ -375,9 +375,9 @@
 
 <div class="wrapper">
   <div class="main-area">
-    <div class="flex flex-col gap-y-4 flex-1 overflow-auto">
+    <div class="sections-container">
       <!-- BUILD SECTION -->
-      <div class="section-group">
+      <div class="section-group build-section">
         <div class="section-header">
           <span class="section-title">Build</span>
         </div>
@@ -590,28 +590,19 @@
           {/if}
         </div>
       </div>
-    </div>
 
-    <!-- Response Preview -->
-    <div
-      class="preview-area"
-      style:height="{previewHeight}px"
-      style:min-height="100px"
-      style:max-height="60%"
-    >
-      <Resizer
-        absolute={false}
-        max={resizerMax}
-        direction="NS"
-        side="top"
-        bind:dimension={previewHeight}
-      />
-      <div class="preview-header">
-        <span class="text-xs font-medium text-fg-secondary uppercase">
-          Response Preview
-        </span>
-      </div>
-      <div class="preview-content">
+      <!-- Response Preview -->
+      <div
+        class="preview-area"
+        style:height="{previewHeight}px"
+        style:min-height="100px"
+      >
+        <Resizer
+          max={resizerMax}
+          direction="NS"
+          side="top"
+          bind:dimension={previewHeight}
+        />
         <APIResponsePreview
           response={apiResponse}
           error={responseError}
@@ -631,16 +622,24 @@
   }
 
   .main-area {
-    @apply flex flex-col size-full p-4 bg-surface-background border;
-    @apply overflow-hidden rounded-[2px];
+    @apply flex flex-col size-full p-4 bg-surface-background;
+    @apply overflow-hidden;
+  }
+
+  .sections-container {
+    @apply flex flex-col flex-1 overflow-hidden gap-y-2;
   }
 
   .section-group {
-    @apply flex flex-col gap-y-4 p-4 rounded-[2px] border bg-surface-background;
+    @apply flex flex-col gap-y-4 p-4 bg-surface-background border rounded-[2px];
+  }
+
+  .section-group.build-section {
+    @apply flex-shrink-0 overflow-auto;
   }
 
   .section-group.test-section {
-    @apply bg-surface-background border-dashed;
+    @apply flex-shrink-0;
   }
 
   .section-header {
@@ -695,14 +694,6 @@
   }
 
   .preview-area {
-    @apply relative flex flex-col border-t mt-4 flex-shrink-0;
-  }
-
-  .preview-header {
-    @apply px-3 py-2 border-b bg-surface-subtle;
-  }
-
-  .preview-content {
-    @apply flex-1 overflow-auto;
+    @apply relative flex flex-col flex-shrink-0 overflow-hidden bg-surface-background border rounded-[2px];
   }
 </style>

From 08b2ef7f88108429451d52ae5032be54e69946c3 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 17:29:25 -0500
Subject: [PATCH 09/24] prettier

---
 web-common/src/features/apis/editor/APIEditor.svelte       | 7 ++++++-
 .../src/features/apis/editor/APIResponsePreview.svelte     | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web-common/src/features/apis/editor/APIEditor.svelte b/web-common/src/features/apis/editor/APIEditor.svelte
index 6790971aa1d9..09f928b195f9 100644
--- a/web-common/src/features/apis/editor/APIEditor.svelte
+++ b/web-common/src/features/apis/editor/APIEditor.svelte
@@ -111,7 +111,12 @@
     style:min-height="100px"
     style:max-height="60%"
   >
-    <Resizer max={500} direction="NS" side="top" bind:dimension={previewHeight} />
+    <Resizer
+      max={500}
+      direction="NS"
+      side="top"
+      bind:dimension={previewHeight}
+    />
 
     <div class="flex items-center gap-x-3 px-3 py-2 border-b">
       <div class="flex items-center gap-x-2 flex-1 min-w-0">
diff --git a/web-common/src/features/apis/editor/APIResponsePreview.svelte b/web-common/src/features/apis/editor/APIResponsePreview.svelte
index 3079a2286ff6..9c31f34b4e5c 100644
--- a/web-common/src/features/apis/editor/APIResponsePreview.svelte
+++ b/web-common/src/features/apis/editor/APIResponsePreview.svelte
@@ -87,7 +87,11 @@
     {:else if viewMode === "json"}
       <pre class="json-view">{JSON.stringify(response, null, 2)}</pre>
     {:else}
-      <PreviewTable rows={normalizedRows} columnNames={columns} name={apiName} />
+      <PreviewTable
+        rows={normalizedRows}
+        columnNames={columns}
+        name={apiName}
+      />
     {/if}
   </div>
 </div>

From 2d1f1f5acc3a5e0ecd9ae7fbfd6221c61884bfbd Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 17:30:11 -0500
Subject: [PATCH 10/24] code qual

---
 .../src/features/apis/editor/VisualAPIEditor.svelte    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
index 1fdad87a6538..9029eb7d82f8 100644
--- a/web-common/src/features/apis/editor/VisualAPIEditor.svelte
+++ b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
@@ -22,9 +22,6 @@
   export let fileArtifact: FileArtifact;
   export let errors: LineStatus[];
   export let apiName: string;
-  // Prop for parent to provide view switching callback (used externally)
-  export let switchView: (() => void) | undefined = undefined;
-  void switchView; // Silence unused warning - prop exists for external interface
 
   type APIType = "metrics_sql" | "sql" | "resource_status";
 
@@ -680,8 +677,11 @@
   }
 
   .query-editor {
-    @apply w-full h-56 p-3 font-mono text-sm border rounded-[2px] bg-input resize-none;
-    @apply focus:ring-2 focus:ring-primary-100 focus:border-primary-500 outline-none;
+    @apply w-full h-56 p-3 font-mono text-sm border rounded-[2px] bg-input resize-none outline-none;
+  }
+
+  .query-editor:focus {
+    @apply ring-2 ring-primary-100 border-primary-500;
   }
 
   .hint {

From 0a45bdc32b14e220430b2377b251f43274341ab4 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 17:39:38 -0500
Subject: [PATCH 11/24] Update APIWorkspace.svelte

---
 web-common/src/features/workspaces/APIWorkspace.svelte | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/web-common/src/features/workspaces/APIWorkspace.svelte b/web-common/src/features/workspaces/APIWorkspace.svelte
index c4b0eac434f7..83bae2b62656 100644
--- a/web-common/src/features/workspaces/APIWorkspace.svelte
+++ b/web-common/src/features/workspaces/APIWorkspace.svelte
@@ -67,14 +67,7 @@
       <APIEditor bind:autoSave={$autoSave} {fileArtifact} {errors} {apiName} />
     {:else}
       {#key fileArtifact}
-        <VisualAPIEditor
-          {errors}
-          {fileArtifact}
-          {apiName}
-          switchView={() => {
-            $selectedView = "code";
-          }}
-        />
+        <VisualAPIEditor {errors} {fileArtifact} {apiName} />
       {/key}
     {/if}
   </svelte:fragment>

From 425ecfb711d5dc42d6f7dbd1f490c40226e8d999 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Fri, 20 Feb 2026 16:46:35 -0500
Subject: [PATCH 12/24] Update errors.ts

---
 web-common/src/features/metrics-views/errors.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/web-common/src/features/metrics-views/errors.ts b/web-common/src/features/metrics-views/errors.ts
index 5beac0621443..ad45ac8424d9 100644
--- a/web-common/src/features/metrics-views/errors.ts
+++ b/web-common/src/features/metrics-views/errors.ts
@@ -79,3 +79,12 @@ export function mapParseErrorToLine(
   }
   return runtimeErrorToLine(error.message, yaml);
 }
+
+export function mapParseErrorsToLines(
+  errors: V1ParseError[],
+  yaml: string,
+): LineStatus[] {
+  return errors
+    .map((e) => mapParseErrorToLine(e, yaml))
+    .filter((s): s is LineStatus => s !== undefined);
+}

From 83779f2c5cb0329ca3ac569307144a6f86ae21f6 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Fri, 20 Feb 2026 16:56:18 -0500
Subject: [PATCH 13/24] themeing css

---
 web-common/src/features/apis/editor/APIEditor.svelte   |  2 +-
 .../src/features/apis/editor/VisualAPIEditor.svelte    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web-common/src/features/apis/editor/APIEditor.svelte b/web-common/src/features/apis/editor/APIEditor.svelte
index 09f928b195f9..30e771fb0c5a 100644
--- a/web-common/src/features/apis/editor/APIEditor.svelte
+++ b/web-common/src/features/apis/editor/APIEditor.svelte
@@ -131,7 +131,7 @@
               Args
               {#if args.length > 0}
                 <span
-                  class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium bg-primary-100 text-primary-700 rounded-full"
+                  class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium bg-surface-active text-fg-accent rounded-full"
                 >
                   {args.length}
                 </span>
diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
index 9029eb7d82f8..cde334b4d69b 100644
--- a/web-common/src/features/apis/editor/VisualAPIEditor.svelte
+++ b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
@@ -581,7 +581,7 @@
             Test API
           </Button>
           {#if hasErrors}
-            <span class="text-sm text-red-500">
+            <span class="text-sm text-destructive">
               Fix errors above before testing
             </span>
           {/if}
@@ -661,7 +661,7 @@
   }
 
   .type-button.selected {
-    @apply bg-primary-50 border-primary-500;
+    @apply bg-surface-hover border-primary;
   }
 
   .type-label {
@@ -669,7 +669,7 @@
   }
 
   .type-button.selected .type-label {
-    @apply text-primary-700;
+    @apply text-fg-accent;
   }
 
   .type-description {
@@ -681,7 +681,7 @@
   }
 
   .query-editor:focus {
-    @apply ring-2 ring-primary-100 border-primary-500;
+    @apply ring-2 ring-primary/20 border-primary;
   }
 
   .hint {
@@ -690,7 +690,7 @@
 
   .error-banner {
     @apply flex items-start gap-x-2 p-3 rounded-[2px] border mt-4;
-    @apply bg-red-50 border-red-200 text-red-700 text-sm;
+    @apply bg-destructive/15 border-destructive text-destructive text-sm;
   }
 
   .preview-area {

From 05d23832bedcf52cc159da8a0a144a8e2146c950 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Thu, 5 Mar 2026 12:35:54 -0500
Subject: [PATCH 14/24] remove viz editor, consolidate tests into text editor

---
 .../src/features/apis/editor/APIEditor.svelte | 191 +----
 .../features/apis/editor/APITestPanel.svelte  | 204 +++++
 .../apis/editor/VisualAPIEditor.svelte        | 699 ------------------
 web-common/src/features/apis/editor/types.ts  |   5 +
 .../features/workspaces/APIWorkspace.svelte   | 154 +++-
 .../workspace/WorkspaceEditorContainer.svelte |   2 +-
 6 files changed, 365 insertions(+), 890 deletions(-)
 create mode 100644 web-common/src/features/apis/editor/APITestPanel.svelte
 delete mode 100644 web-common/src/features/apis/editor/VisualAPIEditor.svelte
 create mode 100644 web-common/src/features/apis/editor/types.ts

diff --git a/web-common/src/features/apis/editor/APIEditor.svelte b/web-common/src/features/apis/editor/APIEditor.svelte
index 30e771fb0c5a..b203b3226989 100644
--- a/web-common/src/features/apis/editor/APIEditor.svelte
+++ b/web-common/src/features/apis/editor/APIEditor.svelte
@@ -1,94 +1,31 @@
 <script lang="ts">
   import type { EditorView } from "@codemirror/view";
-  import Button from "@rilldata/web-common/components/button/Button.svelte";
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import { setLineStatuses } from "@rilldata/web-common/components/editor/line-status";
   import type { LineStatus } from "@rilldata/web-common/components/editor/line-status/state";
   import { customYAMLwithJSONandSQL } from "@rilldata/web-common/components/editor/presets/yamlWithJsonAndSql";
-  import Input from "@rilldata/web-common/components/forms/Input.svelte";
-  import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
   import Editor from "@rilldata/web-common/features/editor/Editor.svelte";
   import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
-  import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
   import WorkspaceEditorContainer from "@rilldata/web-common/layout/workspace/WorkspaceEditorContainer.svelte";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { PlusIcon, PlayIcon, ChevronDownIcon } from "lucide-svelte";
-  import APIResponsePreview from "./APIResponsePreview.svelte";
+  import APITestPanel from "./APITestPanel.svelte";
+  import type { Arg } from "./types";
 
   export let apiName: string;
   export let errors: LineStatus[];
   export let fileArtifact: FileArtifact;
   export let autoSave: boolean;
-
-  interface Arg {
-    id: string;
-    key: string;
-    value: string;
-  }
+  export let isReconciling: boolean;
+  export let host: string;
+  export let instanceId: string;
+  export let args: Arg[];
 
   let editor: EditorView;
-  let args: Arg[] = [];
-  let apiResponse: unknown[] | null = null;
-  let responseError: string | null = null;
-  let isLoading = false;
-  let previewHeight = 250;
 
-  $: ({ instanceId } = $runtime);
   $: if (editor) setLineStatuses(errors, editor);
-  $: mainError = errors?.at(0);
-  $: host = $runtime.host || "http://localhost:9009";
-  $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
-  $: fullUrl = buildFullUrl(baseUrl, args);
+  $: mainError = errors?.at(0)?.message;
   $: hasErrors = errors.length > 0;
-
-  function buildFullUrl(base: string, params: Arg[]): string {
-    const url = new URL(base);
-    params.forEach((arg) => {
-      if (arg.key.trim()) {
-        url.searchParams.set(arg.key, arg.value);
-      }
-    });
-    return url.toString();
-  }
-
-  function addArg() {
-    args = [...args, { id: crypto.randomUUID(), key: "", value: "" }];
-  }
-
-  function removeArg(id: string) {
-    args = args.filter((arg) => arg.id !== id);
-  }
-
-  async function testAPI() {
-    isLoading = true;
-    responseError = null;
-    apiResponse = null;
-
-    try {
-      const response = await fetch(fullUrl);
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        try {
-          const errorJson = JSON.parse(errorText);
-          responseError = errorJson.message || errorJson.error || errorText;
-        } catch {
-          responseError = errorText;
-        }
-        return;
-      }
-
-      const data = await response.json();
-      apiResponse = Array.isArray(data) ? data : [data];
-    } catch (e) {
-      responseError = e instanceof Error ? e.message : "Unknown error occurred";
-    } finally {
-      isLoading = false;
-    }
-  }
 </script>
 
-<div class="flex flex-col h-full overflow-hidden p-2">
+<div class="flex flex-col h-full overflow-hidden">
   <div class="editor-panel">
     <WorkspaceEditorContainer error={mainError}>
       <Editor
@@ -105,112 +42,18 @@
     </WorkspaceEditorContainer>
   </div>
 
-  <div
-    class="preview-panel"
-    style:height="{previewHeight}px"
-    style:min-height="100px"
-    style:max-height="60%"
-  >
-    <Resizer
-      max={500}
-      direction="NS"
-      side="top"
-      bind:dimension={previewHeight}
-    />
-
-    <div class="flex items-center gap-x-3 px-3 py-2 border-b">
-      <div class="flex items-center gap-x-2 flex-1 min-w-0">
-        <span class="text-xs font-medium text-fg-secondary shrink-0">GET</span>
-        <span class="text-xs font-mono text-fg-muted truncate">{fullUrl}</span>
-      </div>
-
-      <div class="flex items-center gap-x-2 shrink-0">
-        <DropdownMenu.Root closeOnItemClick={false}>
-          <DropdownMenu.Trigger asChild let:builder>
-            <Button type="text" compact small builders={[builder]}>
-              Args
-              {#if args.length > 0}
-                <span
-                  class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium bg-surface-active text-fg-accent rounded-full"
-                >
-                  {args.length}
-                </span>
-              {/if}
-              <ChevronDownIcon size="10px" />
-            </Button>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content align="end" class="w-72 p-2">
-            <div class="flex flex-col gap-y-2">
-              {#if args.length === 0}
-                <p class="text-xs text-fg-muted px-1 py-2">
-                  No arguments. Click "Add" below.
-                </p>
-              {:else}
-                {#each args as arg (arg.id)}
-                  <div class="flex items-center gap-x-1">
-                    <Input
-                      bind:value={arg.key}
-                      placeholder="key"
-                      size="sm"
-                      width="100px"
-                    />
-                    <Input
-                      bind:value={arg.value}
-                      placeholder="value"
-                      size="sm"
-                      full
-                    />
-                    <Button
-                      type="ghost"
-                      square
-                      small
-                      compact
-                      onClick={() => removeArg(arg.id)}
-                    >
-                      <Trash size="12px" />
-                    </Button>
-                  </div>
-                {/each}
-              {/if}
-              <Button type="text" compact small onClick={addArg}>
-                <PlusIcon size="12px" />
-                Add
-              </Button>
-            </div>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-
-        <Button
-          type="primary"
-          small
-          onClick={testAPI}
-          disabled={hasErrors}
-          loading={isLoading}
-          loadingCopy="Testing"
-        >
-          <PlayIcon size="12px" />
-          Test API
-        </Button>
-      </div>
-    </div>
-
-    <div class="flex-1 overflow-auto">
-      <APIResponsePreview
-        response={apiResponse}
-        error={responseError}
-        {isLoading}
-        {apiName}
-      />
-    </div>
-  </div>
+  <APITestPanel
+    {apiName}
+    {hasErrors}
+    {isReconciling}
+    {host}
+    {instanceId}
+    bind:args
+  />
 </div>
 
 <style lang="postcss">
   .editor-panel {
-    @apply flex-1 overflow-hidden min-h-0 border rounded-[2px] rounded-b-none border-b-0;
-  }
-
-  .preview-panel {
-    @apply relative flex flex-col bg-surface-background border rounded-[2px] rounded-t-none overflow-hidden;
+    @apply flex-1 overflow-hidden min-h-0;
   }
 </style>
diff --git a/web-common/src/features/apis/editor/APITestPanel.svelte b/web-common/src/features/apis/editor/APITestPanel.svelte
new file mode 100644
index 000000000000..8b626a0769f8
--- /dev/null
+++ b/web-common/src/features/apis/editor/APITestPanel.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import Input from "@rilldata/web-common/components/forms/Input.svelte";
+  import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
+  import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
+  import { copyToClipboard } from "@rilldata/web-common/lib/actions/copy-to-clipboard";
+  import {
+    PlusIcon,
+    PlayIcon,
+    ChevronDownIcon,
+    CopyIcon,
+  } from "lucide-svelte";
+  import APIResponsePreview from "./APIResponsePreview.svelte";
+  import type { Arg } from "./types";
+
+  export let apiName: string;
+  export let hasErrors: boolean;
+  export let isReconciling: boolean;
+  export let host: string;
+  export let instanceId: string;
+  export let args: Arg[];
+
+  let apiResponse: unknown[] | null = null;
+  let responseError: string | null = null;
+  let isLoading = false;
+  let previewHeight = 200;
+
+  $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
+  $: fullUrl = buildFullUrl(baseUrl, args);
+  $: isDisabled = hasErrors || isReconciling;
+
+  function buildFullUrl(base: string, params: Arg[]): string {
+    const url = new URL(base);
+    params.forEach((arg) => {
+      if (arg.key.trim()) {
+        url.searchParams.set(arg.key, arg.value);
+      }
+    });
+    return url.toString();
+  }
+
+  function addArg() {
+    args = [...args, { id: crypto.randomUUID(), key: "", value: "" }];
+  }
+
+  function removeArg(id: string) {
+    args = args.filter((arg) => arg.id !== id);
+  }
+
+  function handleCopyUrl() {
+    copyToClipboard(fullUrl, "Copied endpoint URL to clipboard");
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && !isDisabled) {
+      e.preventDefault();
+      testAPI();
+    }
+  }
+
+  async function testAPI() {
+    isLoading = true;
+    responseError = null;
+    apiResponse = null;
+
+    try {
+      const response = await fetch(fullUrl);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        try {
+          const errorJson = JSON.parse(errorText);
+          responseError = errorJson.message || errorJson.error || errorText;
+        } catch {
+          responseError = errorText;
+        }
+        return;
+      }
+
+      const data = await response.json();
+      apiResponse = Array.isArray(data) ? data : [data];
+    } catch (e) {
+      responseError = e instanceof Error ? e.message : "Unknown error occurred";
+    } finally {
+      isLoading = false;
+    }
+  }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<div
+  class="preview-panel"
+  style:height="{previewHeight}px"
+  style:min-height="100px"
+  style:max-height="60%"
+>
+  <Resizer
+    max={500}
+    direction="NS"
+    side="top"
+    bind:dimension={previewHeight}
+  />
+
+  <div class="flex items-center gap-x-3 px-3 py-2 border-b">
+    <div class="flex items-center gap-x-2 flex-1 min-w-0">
+      <span class="text-xs font-medium text-fg-secondary shrink-0">GET</span>
+      <span class="text-xs font-mono text-fg-muted truncate">{fullUrl}</span>
+    </div>
+
+    <div class="flex items-center gap-x-2 shrink-0">
+      <Button type="text" compact small onClick={handleCopyUrl}>
+        <CopyIcon size="10px" />
+      </Button>
+
+      <DropdownMenu.Root closeOnItemClick={false}>
+        <DropdownMenu.Trigger asChild let:builder>
+          <Button type="text" compact small builders={[builder]}>
+            Args
+            {#if args.length > 0}
+              <span
+                class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium bg-surface-active text-fg-accent rounded-full"
+              >
+                {args.length}
+              </span>
+            {/if}
+            <ChevronDownIcon size="10px" />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" class="w-72 p-2">
+          <div class="flex flex-col gap-y-2">
+            {#if args.length === 0}
+              <p class="text-xs text-fg-muted px-1 py-2">
+                No arguments. Click "Add" below.
+              </p>
+            {:else}
+              {#each args as arg (arg.id)}
+                <div class="flex items-center gap-x-1">
+                  <Input
+                    bind:value={arg.key}
+                    placeholder="key"
+                    size="sm"
+                    width="100px"
+                  />
+                  <Input
+                    bind:value={arg.value}
+                    placeholder="value"
+                    size="sm"
+                    full
+                  />
+                  <Button
+                    type="ghost"
+                    square
+                    small
+                    compact
+                    onClick={() => removeArg(arg.id)}
+                  >
+                    <Trash size="12px" />
+                  </Button>
+                </div>
+              {/each}
+            {/if}
+            <Button type="text" compact small onClick={addArg}>
+              <PlusIcon size="12px" />
+              Add
+            </Button>
+          </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <Button
+        type="primary"
+        small
+        onClick={testAPI}
+        disabled={isDisabled}
+        loading={isLoading}
+        loadingCopy="Testing"
+      >
+        {#if isReconciling}
+          Reconciling...
+        {:else}
+          <PlayIcon size="12px" />
+          Test API
+        {/if}
+      </Button>
+    </div>
+  </div>
+
+  <div class="flex-1 overflow-auto">
+    <APIResponsePreview
+      response={apiResponse}
+      error={responseError}
+      {isLoading}
+      {apiName}
+    />
+  </div>
+</div>
+
+<style lang="postcss">
+  .preview-panel {
+    @apply relative flex flex-col bg-surface-background border rounded-[2px] overflow-hidden;
+  }
+</style>
diff --git a/web-common/src/features/apis/editor/VisualAPIEditor.svelte b/web-common/src/features/apis/editor/VisualAPIEditor.svelte
deleted file mode 100644
index cde334b4d69b..000000000000
--- a/web-common/src/features/apis/editor/VisualAPIEditor.svelte
+++ /dev/null
@@ -1,699 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import Button from "@rilldata/web-common/components/button/Button.svelte";
-  import type { LineStatus } from "@rilldata/web-common/components/editor/line-status/state";
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
-  import Input from "@rilldata/web-common/components/forms/Input.svelte";
-  import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
-  import Checkbox from "@rilldata/web-common/components/forms/Checkbox.svelte";
-  import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
-  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
-  import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import {
-    PlusIcon,
-    PlayIcon,
-    AlertCircleIcon,
-    ChevronDownIcon,
-  } from "lucide-svelte";
-  import { parseDocument, stringify } from "yaml";
-  import APIResponsePreview from "./APIResponsePreview.svelte";
-
-  export let fileArtifact: FileArtifact;
-  export let errors: LineStatus[];
-  export let apiName: string;
-
-  type APIType = "metrics_sql" | "sql" | "resource_status";
-
-  interface Arg {
-    id: string;
-    key: string;
-    value: string;
-  }
-
-  // Template options for dropdown menus
-  // For metrics_sql/sql: use suffix to append to current base query (select ... from X); content is fallback when empty.
-  interface TemplateOption {
-    label: string;
-    content?: string;
-    suffix?: string;
-  }
-
-  const metricsSqlTemplates: TemplateOption[] = [
-    {
-      label: "Basic Query",
-      content: "select measure, dimension from metrics_view",
-      suffix: "",
-    },
-    {
-      label: "Query with Filter",
-      content:
-        "select measure, dimension from metrics_view where dimension = '{{ .args.filter }}'",
-      suffix: "where dimension = '{{ .args.filter }}'",
-    },
-    {
-      label: "Query with Limit",
-      content:
-        "select measure, dimension from metrics_view limit {{ .args.limit }}",
-      suffix: "limit {{ .args.limit }}",
-    },
-    {
-      label: "Query with Offset",
-      content:
-        "select measure, dimension from metrics_view limit {{ .args.limit }} offset {{ .args.offset }}",
-      suffix: "limit {{ .args.limit }} offset {{ .args.offset }}",
-    },
-    {
-      label: "Query with Sort",
-      content:
-        "select measure, dimension from metrics_view order by {{ .args.sort }} {{ .args.order }}",
-      suffix: "order by {{ .args.sort }} {{ .args.order }}",
-    },
-    {
-      label: "Full Query",
-      content:
-        "select measure, dimension from metrics_view where dimension = '{{ .args.filter }}' order by {{ .args.sort }} {{ .args.order }} limit {{ .args.limit }} offset {{ .args.offset }}",
-      suffix:
-        "where dimension = '{{ .args.filter }}' order by {{ .args.sort }} {{ .args.order }} limit {{ .args.limit }} offset {{ .args.offset }}",
-    },
-  ];
-
-  const sqlTemplates: TemplateOption[] = [
-    {
-      label: "Basic Query",
-      content: "select * from model_name",
-      suffix: "",
-    },
-    {
-      label: "Query with Filter",
-      content: "select * from model_name where column = '{{ .args.filter }}'",
-      suffix: "where column = '{{ .args.filter }}'",
-    },
-    {
-      label: "Query with Limit",
-      content: "select * from model_name limit {{ .args.limit }}",
-      suffix: "limit {{ .args.limit }}",
-    },
-    {
-      label: "Query with Offset",
-      content:
-        "select * from model_name limit {{ .args.limit }} offset {{ .args.offset }}",
-      suffix: "limit {{ .args.limit }} offset {{ .args.offset }}",
-    },
-    {
-      label: "Query with Sort",
-      content:
-        "select * from model_name order by {{ .args.sort }} {{ .args.order }}",
-      suffix: "order by {{ .args.sort }} {{ .args.order }}",
-    },
-    {
-      label: "Full Query",
-      content:
-        "select * from model_name where column = '{{ .args.filter }}' order by {{ .args.sort }} {{ .args.order }} limit {{ .args.limit }} offset {{ .args.offset }}",
-      suffix:
-        "where column = '{{ .args.filter }}' order by {{ .args.sort }} {{ .args.order }} limit {{ .args.limit }} offset {{ .args.offset }}",
-    },
-  ];
-
-  // Default templates for each API type (first option from each list)
-  const defaultTemplates: Record<
-    APIType,
-    {
-      content?: string;
-      whereError?: boolean;
-    }
-  > = {
-    metrics_sql: metricsSqlTemplates[0],
-    sql: sqlTemplates[0],
-    resource_status: { whereError: true },
-  };
-
-  const apiTypes: { value: APIType; label: string; description: string }[] = [
-    {
-      value: "metrics_sql",
-      label: "Metrics SQL",
-      description: "Query metrics views using SQL-like syntax",
-    },
-    {
-      value: "sql",
-      label: "SQL",
-      description: "Query models/sources using raw SQL",
-    },
-    {
-      value: "resource_status",
-      label: "Resource Status",
-      description: "Get status of resources with errors",
-    },
-  ];
-
-  // Extract error messages for display
-  $: errorMessages = errors.map((e) => e.message).filter(Boolean);
-
-  $: ({ instanceId } = $runtime);
-  $: ({ editorContent, updateEditorContent } = fileArtifact);
-
-  // Parse YAML to extract current type and content
-  $: parsedDoc = parseDocument($editorContent ?? "");
-  $: currentType = detectAPIType(parsedDoc);
-  $: currentContent = extractContent(parsedDoc, currentType);
-
-  let args: Arg[] = [];
-  let apiResponse: unknown[] | null = null;
-  let responseError: string | null = null;
-  let isLoading = false;
-  let previewHeight = 300;
-  let resizerMax = 600;
-
-  onMount(() => {
-    // Calculate initial preview height based on available space
-    const mainArea = document.querySelector(".main-area");
-    if (mainArea) {
-      const h = mainArea.clientHeight;
-      previewHeight = Math.max(100, Math.floor(h / 2));
-      resizerMax = Math.max(400, Math.floor(h * 0.85));
-    }
-  });
-
-  // Resource status fields
-  let whereError = true;
-
-  // Connector field for sql type
-  let connector = "";
-
-  $: host = $runtime.host || "http://localhost:9009";
-  $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
-  $: fullUrl = buildFullUrl(baseUrl, args);
-  $: hasErrors = errors.length > 0;
-
-  function detectAPIType(doc: ReturnType<typeof parseDocument>): APIType {
-    if (doc.get("metrics_sql")) return "metrics_sql";
-    if (doc.get("sql")) return "sql";
-    if (doc.get("resource_status")) return "resource_status";
-    return "metrics_sql"; // default
-  }
-
-  function extractContent(
-    doc: ReturnType<typeof parseDocument>,
-    type: APIType,
-  ): string {
-    // Extract connector for sql type
-    if (type === "sql") {
-      connector = String(doc.get("connector") ?? "");
-    }
-
-    switch (type) {
-      case "metrics_sql":
-        return String(doc.get("metrics_sql") ?? "");
-      case "sql":
-        return String(doc.get("sql") ?? "");
-      case "resource_status": {
-        // Use getIn to get nested value from YAML document
-        const whereErrorValue = doc.getIn(["resource_status", "where_error"]);
-        // Default to true unless explicitly set to false
-        whereError = whereErrorValue !== false;
-        return "";
-      }
-      default:
-        return "";
-    }
-  }
-
-  function updateYAML(type: APIType, content: string) {
-    const doc = parseDocument($editorContent ?? "");
-
-    // Clear old type-specific fields
-    doc.delete("metrics_sql");
-    doc.delete("sql");
-    doc.delete("resolver");
-    doc.delete("resolver_properties");
-    doc.delete("api");
-    doc.delete("args");
-    doc.delete("glob");
-    doc.delete("resource_status");
-    doc.delete("connector");
-    doc.delete("path");
-
-    // Set type
-    doc.set("type", "api");
-
-    // Set new type-specific fields
-    switch (type) {
-      case "metrics_sql":
-        doc.set("metrics_sql", content);
-        break;
-      case "sql":
-        doc.set("sql", content);
-        if (connector) {
-          doc.set("connector", connector);
-        }
-        break;
-      case "resource_status":
-        doc.set("resource_status", { where_error: whereError });
-        break;
-    }
-
-    updateEditorContent(stringify(doc));
-  }
-
-  function handleTypeChange(newType: APIType) {
-    // When switching types, use default template for the new type
-    const defaults = defaultTemplates[newType];
-
-    // Reset connector when switching types
-    if (newType === "sql") {
-      connector = "";
-    }
-
-    if (newType === "resource_status") {
-      whereError = defaults.whereError ?? true;
-    }
-
-    updateYAML(newType, defaults.content ?? "");
-  }
-
-  function handleContentChange(content: string) {
-    updateYAML(currentType, content);
-  }
-
-  function handleWhereErrorChange(checked: boolean) {
-    whereError = checked;
-    updateYAML("resource_status", "");
-  }
-
-  function handleConnectorChange(value: string) {
-    connector = value;
-    updateYAML(currentType, currentContent);
-  }
-
-  /** Returns the base query (select ... from X) without where/order by/limit/offset clauses. */
-  function getBaseQuery(content: string): string {
-    const trimmed = content.trim();
-    if (!trimmed) return "";
-    const lower = trimmed.toLowerCase();
-    const indices = [
-      lower.indexOf(" where "),
-      lower.indexOf(" order by "),
-      lower.indexOf(" limit "),
-      lower.indexOf(" offset "),
-    ]
-      .filter((i) => i >= 0)
-      .sort((a, b) => a - b);
-    const end = indices.length > 0 ? indices[0] : trimmed.length;
-    return trimmed.slice(0, end).trim();
-  }
-
-  const defaultBaseQuery: Record<"metrics_sql" | "sql", string> = {
-    metrics_sql: "select measure, dimension from metrics_view",
-    sql: "select * from model_name",
-  };
-
-  function applyTemplate(template: TemplateOption) {
-    if (
-      (currentType === "metrics_sql" || currentType === "sql") &&
-      (template.suffix !== undefined || template.content !== undefined)
-    ) {
-      // Keep base SQL (select ... from X); remove any existing clauses and replace with template only
-      const base =
-        getBaseQuery(currentContent) || defaultBaseQuery[currentType];
-      const suffix = template.suffix ?? "";
-      const newContent = suffix ? `${base} ${suffix}`.trim() : base;
-      updateYAML(currentType, newContent);
-    } else if (template.content !== undefined) {
-      updateYAML(currentType, template.content);
-    }
-  }
-
-  function buildFullUrl(base: string, params: Arg[]): string {
-    const url = new URL(base);
-    params.forEach((arg) => {
-      if (arg.key.trim()) {
-        url.searchParams.set(arg.key, arg.value);
-      }
-    });
-    return url.toString();
-  }
-
-  function addArg() {
-    args = [...args, { id: crypto.randomUUID(), key: "", value: "" }];
-  }
-
-  function removeArg(id: string) {
-    args = args.filter((arg) => arg.id !== id);
-  }
-
-  async function testAPI() {
-    isLoading = true;
-    responseError = null;
-    apiResponse = null;
-
-    try {
-      const response = await fetch(fullUrl);
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        try {
-          const errorJson = JSON.parse(errorText);
-          responseError = errorJson.message || errorJson.error || errorText;
-        } catch {
-          responseError = errorText;
-        }
-        return;
-      }
-
-      const data = await response.json();
-      apiResponse = Array.isArray(data) ? data : [data];
-    } catch (e) {
-      responseError = e instanceof Error ? e.message : "Unknown error occurred";
-    } finally {
-      isLoading = false;
-    }
-  }
-</script>
-
-<div class="wrapper">
-  <div class="main-area">
-    <div class="sections-container">
-      <!-- BUILD SECTION -->
-      <div class="section-group build-section">
-        <div class="section-header">
-          <span class="section-title">Build</span>
-        </div>
-
-        <!-- API Type Selector -->
-        <div class="section">
-          <InputLabel id="api-type" label="API Type" />
-          <div class="grid grid-cols-3 gap-2">
-            {#each apiTypes as apiType}
-              <button
-                class="type-button"
-                class:selected={currentType === apiType.value}
-                on:click={() => handleTypeChange(apiType.value)}
-              >
-                <span class="type-label">
-                  {apiType.label}
-                </span>
-                <span class="type-description">
-                  {apiType.description}
-                </span>
-              </button>
-            {/each}
-          </div>
-        </div>
-
-        <!-- Mini Editor based on type -->
-        <div class="section">
-          {#if currentType === "metrics_sql"}
-            <div class="flex items-center justify-between">
-              <InputLabel id="metrics-sql-query" label="Metrics SQL Query" />
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger asChild let:builder>
-                  <Button type="text" compact small builders={[builder]}>
-                    Templates
-                    <ChevronDownIcon size="12px" />
-                  </Button>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content align="end">
-                  {#each metricsSqlTemplates as template}
-                    <DropdownMenu.Item on:click={() => applyTemplate(template)}>
-                      {template.label}
-                    </DropdownMenu.Item>
-                  {/each}
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </div>
-            <textarea
-              class="query-editor"
-              placeholder="select measure, dimension from metrics_view"
-              value={currentContent}
-              on:input={(e) => handleContentChange(e.currentTarget.value)}
-            />
-            <p class="hint">
-              Replace <code>metrics_view</code> with an actual metrics view name
-              from your project. Use measure and dimension names from that metrics
-              view.
-            </p>
-          {:else if currentType === "sql"}
-            <div class="mb-3">
-              <InputLabel id="sql-connector" label="Connector (optional)" />
-              <Input
-                value={connector}
-                placeholder="duckdb"
-                size="md"
-                full
-                onInput={(value) => handleConnectorChange(value)}
-              />
-            </div>
-            <div class="flex items-center justify-between">
-              <InputLabel id="sql-query" label="SQL Query" />
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger asChild let:builder>
-                  <Button type="text" compact small builders={[builder]}>
-                    Templates
-                    <ChevronDownIcon size="12px" />
-                  </Button>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content align="end">
-                  {#each sqlTemplates as template}
-                    <DropdownMenu.Item on:click={() => applyTemplate(template)}>
-                      {template.label}
-                    </DropdownMenu.Item>
-                  {/each}
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </div>
-            <textarea
-              class="query-editor"
-              placeholder="select * from model_name"
-              value={currentContent}
-              on:input={(e) => handleContentChange(e.currentTarget.value)}
-            />
-            <p class="hint">
-              Replace <code>table</code> with an actual model or source name from
-              your project.
-            </p>
-          {:else if currentType === "resource_status"}
-            <InputLabel
-              id="resource-status-options"
-              label="Resource Status Options"
-            />
-            <div class="flex items-center gap-x-2 mt-1">
-              <Checkbox
-                checked={whereError}
-                onCheckedChange={(checked) => {
-                  if (typeof checked === "boolean") {
-                    handleWhereErrorChange(checked);
-                  }
-                }}
-              />
-              <span class="text-sm">Only show resources with errors</span>
-            </div>
-            <p class="hint">
-              Get the status of resources in your project. Enable the checkbox
-              to filter to only resources with errors.
-            </p>
-          {/if}
-        </div>
-
-        <!-- Error Display -->
-        {#if errorMessages.length > 0}
-          <div class="error-banner">
-            <AlertCircleIcon size="16px" class="flex-shrink-0" />
-            <div class="flex flex-col gap-y-1">
-              {#each errorMessages as message}
-                <span>{message}</span>
-              {/each}
-            </div>
-          </div>
-        {/if}
-      </div>
-
-      <!-- TEST SECTION -->
-      <div class="section-group test-section">
-        <div class="section-header">
-          <span class="section-title">Test</span>
-        </div>
-
-        <!-- Endpoint URL -->
-        <div class="section">
-          <InputLabel id="endpoint-url" label="Endpoint URL" />
-          <div
-            class="flex items-center gap-x-2 px-3 py-2 bg-surface-muted rounded-[2px] border text-sm font-mono"
-          >
-            <span class="text-fg-muted">GET</span>
-            <span class="flex-1 truncate text-fg-primary">{fullUrl}</span>
-          </div>
-        </div>
-
-        <!-- Arguments -->
-        <div class="section">
-          <div class="flex items-center justify-between">
-            <InputLabel id="test-arguments" label="Arguments" />
-            <Button type="text" compact onClick={addArg}>
-              <PlusIcon size="14px" />
-              Add
-            </Button>
-          </div>
-
-          {#if args.length === 0}
-            <p class="hint">
-              No arguments added. Click "Add" to add query parameters.
-            </p>
-          {:else}
-            <div class="flex flex-col gap-y-2">
-              {#each args as arg (arg.id)}
-                <div class="flex items-center gap-x-2">
-                  <Input
-                    bind:value={arg.key}
-                    placeholder="Key"
-                    size="md"
-                    width="180px"
-                  />
-                  <Input
-                    bind:value={arg.value}
-                    placeholder="Value"
-                    size="md"
-                    full
-                  />
-                  <Button
-                    type="ghost"
-                    square
-                    compact
-                    onClick={() => removeArg(arg.id)}
-                  >
-                    <Trash size="14px" />
-                  </Button>
-                </div>
-              {/each}
-            </div>
-          {/if}
-        </div>
-
-        <!-- Test Button -->
-        <div class="flex items-center gap-x-2">
-          <Button
-            type="primary"
-            onClick={testAPI}
-            disabled={hasErrors}
-            loading={isLoading}
-            loadingCopy="Testing..."
-          >
-            <PlayIcon size="14px" />
-            Test API
-          </Button>
-          {#if hasErrors}
-            <span class="text-sm text-destructive">
-              Fix errors above before testing
-            </span>
-          {/if}
-        </div>
-      </div>
-
-      <!-- Response Preview -->
-      <div
-        class="preview-area"
-        style:height="{previewHeight}px"
-        style:min-height="100px"
-      >
-        <Resizer
-          max={resizerMax}
-          direction="NS"
-          side="top"
-          bind:dimension={previewHeight}
-        />
-        <APIResponsePreview
-          response={apiResponse}
-          error={responseError}
-          {isLoading}
-          {apiName}
-        />
-      </div>
-    </div>
-  </div>
-</div>
-
-<style lang="postcss">
-  .wrapper {
-    @apply size-full max-w-full max-h-full flex-none;
-    @apply overflow-hidden;
-    @apply flex;
-  }
-
-  .main-area {
-    @apply flex flex-col size-full p-4 bg-surface-background;
-    @apply overflow-hidden;
-  }
-
-  .sections-container {
-    @apply flex flex-col flex-1 overflow-hidden gap-y-2;
-  }
-
-  .section-group {
-    @apply flex flex-col gap-y-4 p-4 bg-surface-background border rounded-[2px];
-  }
-
-  .section-group.build-section {
-    @apply flex-shrink-0 overflow-auto;
-  }
-
-  .section-group.test-section {
-    @apply flex-shrink-0;
-  }
-
-  .section-header {
-    @apply flex items-center gap-x-2 pb-2 border-b mb-2;
-  }
-
-  .section-title {
-    @apply text-xs font-semibold text-fg-secondary uppercase tracking-wide;
-  }
-
-  .section {
-    @apply flex flex-col gap-y-2 w-full;
-  }
-
-  .type-button {
-    @apply flex flex-col items-start p-3 rounded-[2px] border text-left transition-colors;
-    @apply bg-surface-subtle;
-  }
-
-  .type-button:hover {
-    @apply bg-surface-hover;
-  }
-
-  .type-button.selected {
-    @apply bg-surface-hover border-primary;
-  }
-
-  .type-label {
-    @apply text-sm font-medium;
-  }
-
-  .type-button.selected .type-label {
-    @apply text-fg-accent;
-  }
-
-  .type-description {
-    @apply text-xs text-fg-muted mt-0.5;
-  }
-
-  .query-editor {
-    @apply w-full h-56 p-3 font-mono text-sm border rounded-[2px] bg-input resize-none outline-none;
-  }
-
-  .query-editor:focus {
-    @apply ring-2 ring-primary/20 border-primary;
-  }
-
-  .hint {
-    @apply text-xs text-fg-muted;
-  }
-
-  .error-banner {
-    @apply flex items-start gap-x-2 p-3 rounded-[2px] border mt-4;
-    @apply bg-destructive/15 border-destructive text-destructive text-sm;
-  }
-
-  .preview-area {
-    @apply relative flex flex-col flex-shrink-0 overflow-hidden bg-surface-background border rounded-[2px];
-  }
-</style>
diff --git a/web-common/src/features/apis/editor/types.ts b/web-common/src/features/apis/editor/types.ts
new file mode 100644
index 000000000000..2f828651d3fb
--- /dev/null
+++ b/web-common/src/features/apis/editor/types.ts
@@ -0,0 +1,5 @@
+export interface Arg {
+  id: string;
+  key: string;
+  value: string;
+}
diff --git a/web-common/src/features/workspaces/APIWorkspace.svelte b/web-common/src/features/workspaces/APIWorkspace.svelte
index 83bae2b62656..9ed124d85af2 100644
--- a/web-common/src/features/workspaces/APIWorkspace.svelte
+++ b/web-common/src/features/workspaces/APIWorkspace.svelte
@@ -1,17 +1,22 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import { getNameFromFile } from "@rilldata/web-common/features/entity-management/entity-mappers";
   import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
-  import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
+  import {
+    ResourceKind,
+    resourceIsLoading,
+  } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { handleEntityRename } from "@rilldata/web-common/features/entity-management/ui-actions";
   import { mapParseErrorsToLines } from "@rilldata/web-common/features/metrics-views/errors";
   import APIEditor from "@rilldata/web-common/features/apis/editor/APIEditor.svelte";
-  import VisualAPIEditor from "@rilldata/web-common/features/apis/editor/VisualAPIEditor.svelte";
+  import type { Arg } from "@rilldata/web-common/features/apis/editor/types";
   import WorkspaceContainer from "@rilldata/web-common/layout/workspace/WorkspaceContainer.svelte";
   import WorkspaceHeader from "@rilldata/web-common/layout/workspace/WorkspaceHeader.svelte";
-  import { workspaces } from "@rilldata/web-common/layout/workspace/workspace-stores";
   import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { ChevronDownIcon } from "lucide-svelte";
 
   export let fileArtifact: FileArtifact;
 
@@ -25,14 +30,14 @@
     fileName,
   } = fileArtifact);
 
-  $: workspace = workspaces.get(filePath);
-
   $: apiName = $resourceName?.name ?? getNameFromFile(filePath);
+  $: host = $runtime.host || "http://localhost:9009";
 
   $: allErrorsQuery = fileArtifact.getAllErrors(queryClient, instanceId);
   $: allErrors = $allErrorsQuery;
   $: resourceQuery = fileArtifact.getResource(queryClient, instanceId);
   $: ({ data: resource } = $resourceQuery);
+  $: isReconciling = resourceIsLoading($resourceQuery.data);
 
   async function onChangeCallback(newTitle: string) {
     const newRoute = await handleEntityRename(
@@ -44,9 +49,104 @@
     if (newRoute) await goto(newRoute);
   }
 
-  $: selectedView = workspace.view;
-
   $: errors = mapParseErrorsToLines(allErrors, $remoteContent ?? "");
+
+  let args: Arg[] = [];
+
+  // Templates that modify the SQL/metrics_sql value in the YAML
+  const templates = [
+    {
+      label: "Add filter arg",
+      clause: `where dimension = '{{ .args.filter }}'`,
+    },
+    {
+      label: "Add limit arg",
+      clause: "limit {{ .args.limit }}",
+    },
+    {
+      label: "Add offset arg",
+      clause: "offset {{ .args.offset }}",
+    },
+    {
+      label: "Add sort args",
+      clause: "order by {{ .args.sort }} {{ .args.order }}",
+    },
+    {
+      label: "Add time range args",
+      clause: `where time >= '{{ .args.start }}' and time < '{{ .args.end }}'`,
+    },
+  ];
+
+  $: ({ editorContent, updateEditorContent } = fileArtifact);
+
+  // Regex to find the FROM clause and everything after it within the SQL value.
+  // Captures: (everything up to and including FROM <table>) (trailing clauses)
+  const fromPattern = /(\bfrom\s+\S+)([\s\S]*?)(\s*$)/i;
+
+  function applyTemplate(clause: string) {
+    const content = $editorContent ?? "";
+
+    // Find which SQL key is present
+    const sqlKeyMatch = content.match(/^(metrics_sql|sql)\s*:/m);
+    if (!sqlKeyMatch) return;
+
+    // Extract the full SQL value (handles both inline and multiline block scalar)
+    const sqlKey = sqlKeyMatch[1];
+    const keyIndex = content.indexOf(sqlKeyMatch[0]);
+    const afterKey = content.slice(keyIndex + sqlKeyMatch[0].length);
+
+    // Determine if it's a block scalar (| or >) or inline
+    const isBlock = /^\s*\|/.test(afterKey);
+
+    if (isBlock) {
+      // Block scalar: lines are indented under the key
+      // Find the block content start (after "|\n")
+      const blockStart = afterKey.indexOf("\n") + 1;
+      const fullBlockStart = keyIndex + sqlKeyMatch[0].length + blockStart;
+
+      // Collect indented lines
+      const restLines = content.slice(fullBlockStart).split("\n");
+      const blockLines: string[] = [];
+      let blockEnd = fullBlockStart;
+      for (const line of restLines) {
+        // Block continues while lines are indented or empty
+        if (line.match(/^\s+\S/) || line.trim() === "") {
+          blockLines.push(line);
+          blockEnd += line.length + 1;
+        } else {
+          break;
+        }
+      }
+
+      const blockText = blockLines.join("\n");
+      const match = blockText.match(fromPattern);
+      if (!match) return;
+
+      // Get the indentation from the first block line
+      const indent = blockLines[0]?.match(/^(\s+)/)?.[1] ?? "  ";
+      const newBlock = match[1] + "\n" + indent + clause;
+
+      const before = content.slice(0, fullBlockStart);
+      const after = content.slice(blockEnd);
+      updateEditorContent(before + newBlock + "\n" + after);
+    } else {
+      // Inline value: sql: select ... from table where ...
+      const valueStart = keyIndex + sqlKeyMatch[0].length;
+      const lineEnd = content.indexOf("\n", valueStart);
+      const sqlValue = content.slice(
+        valueStart,
+        lineEnd === -1 ? undefined : lineEnd,
+      );
+
+      const match = sqlValue.match(fromPattern);
+      if (!match) return;
+
+      const newValue = " " + match[1].trim() + " " + clause;
+      const before = content.slice(0, valueStart);
+      const after = lineEnd === -1 ? "" : content.slice(lineEnd);
+      updateEditorContent(before + newValue + after);
+    }
+  }
 </script>
 
 <WorkspaceContainer inspector={false}>
@@ -57,18 +157,40 @@
     hasUnsavedChanges={$hasUnsavedChanges}
     onTitleChange={onChangeCallback}
     slot="header"
-    codeToggle
     showInspectorToggle={false}
     titleInput={fileName}
-  />
+  >
+    <svelte:fragment slot="workspace-controls">
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild let:builder>
+          <Button type="text" compact small builders={[builder]}>
+            Templates
+            <ChevronDownIcon size="12px" />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" class="w-56">
+          {#each templates as template}
+            <DropdownMenu.Item
+              on:click={() => applyTemplate(template.clause)}
+            >
+              <span class="text-sm">{template.label}</span>
+            </DropdownMenu.Item>
+          {/each}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </svelte:fragment>
+  </WorkspaceHeader>
 
   <svelte:fragment slot="body">
-    {#if $selectedView === "code"}
-      <APIEditor bind:autoSave={$autoSave} {fileArtifact} {errors} {apiName} />
-    {:else}
-      {#key fileArtifact}
-        <VisualAPIEditor {errors} {fileArtifact} {apiName} />
-      {/key}
-    {/if}
+    <APIEditor
+      bind:autoSave={$autoSave}
+      {fileArtifact}
+      {errors}
+      {apiName}
+      {isReconciling}
+      {host}
+      {instanceId}
+      bind:args
+    />
   </svelte:fragment>
 </WorkspaceContainer>
diff --git a/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte b/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
index 1a1a705d3c7b..95c4fe30317d 100644
--- a/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
+++ b/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
@@ -21,7 +21,7 @@
     <div
       role="status"
       transition:slide={{ duration: LIST_SLIDE_DURATION }}
-      class="border border-destructive bg-destructive/15 dark:bg-destructive/30 text-fg-primary border-l-4 px-2 py-5 max-h-72 overflow-auto"
+      class="border border-destructive bg-destructive/15 dark:bg-destructive/30 text-fg-primary border-l-4 px-3 py-2.5 max-h-40 overflow-auto text-sm"
     >
       <div class="flex gap-x-2 items-center">
         <CancelCircle className="text-destructive" />{error}

From 813ad676b9e28969288c6bb8274036261ab6765c Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Thu, 5 Mar 2026 12:49:12 -0500
Subject: [PATCH 15/24] rename

---
 .../features/workspaces/APIWorkspace.svelte   | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/web-common/src/features/workspaces/APIWorkspace.svelte b/web-common/src/features/workspaces/APIWorkspace.svelte
index 9ed124d85af2..da6670533233 100644
--- a/web-common/src/features/workspaces/APIWorkspace.svelte
+++ b/web-common/src/features/workspaces/APIWorkspace.svelte
@@ -56,32 +56,31 @@
   // Templates that modify the SQL/metrics_sql value in the YAML
   const templates = [
     {
-      label: "Add filter arg",
+      label: "Filter Template",
       clause: `where dimension = '{{ .args.filter }}'`,
     },
     {
-      label: "Add limit arg",
+      label: "Limit Template",
       clause: "limit {{ .args.limit }}",
     },
     {
-      label: "Add offset arg",
+      label: "Offset Template",
       clause: "offset {{ .args.offset }}",
     },
     {
-      label: "Add sort args",
+      label: "Sort Template",
       clause: "order by {{ .args.sort }} {{ .args.order }}",
     },
     {
-      label: "Add time range args",
+      label: "Time range Template",
       clause: `where time >= '{{ .args.start }}' and time < '{{ .args.end }}'`,
     },
   ];
 
   $: ({ editorContent, updateEditorContent } = fileArtifact);
 
-  // Regex to find the FROM clause and everything after it within the SQL value.
-  // Captures: (everything up to and including FROM <table>) (trailing clauses)
-  const fromPattern = /(\bfrom\s+\S+)([\s\S]*?)(\s*$)/i;
+  // Matches FROM <table> and captures everything after it as trailing clauses
+  const fromPattern = /\bfrom\s+\S+/i;
 
   function applyTemplate(clause: string) {
     const content = $editorContent ?? "";
@@ -90,26 +89,21 @@
     const sqlKeyMatch = content.match(/^(metrics_sql|sql)\s*:/m);
     if (!sqlKeyMatch) return;
 
-    // Extract the full SQL value (handles both inline and multiline block scalar)
-    const sqlKey = sqlKeyMatch[1];
     const keyIndex = content.indexOf(sqlKeyMatch[0]);
     const afterKey = content.slice(keyIndex + sqlKeyMatch[0].length);
 
-    // Determine if it's a block scalar (| or >) or inline
+    // Determine if block scalar (| or >) or inline
     const isBlock = /^\s*\|/.test(afterKey);
 
     if (isBlock) {
-      // Block scalar: lines are indented under the key
-      // Find the block content start (after "|\n")
+      // Block scalar: collect indented lines after "|\n"
       const blockStart = afterKey.indexOf("\n") + 1;
       const fullBlockStart = keyIndex + sqlKeyMatch[0].length + blockStart;
 
-      // Collect indented lines
       const restLines = content.slice(fullBlockStart).split("\n");
       const blockLines: string[] = [];
       let blockEnd = fullBlockStart;
       for (const line of restLines) {
-        // Block continues while lines are indented or empty
         if (line.match(/^\s+\S/) || line.trim() === "") {
           blockLines.push(line);
           blockEnd += line.length + 1;
@@ -119,18 +113,19 @@
       }
 
       const blockText = blockLines.join("\n");
-      const match = blockText.match(fromPattern);
+      const match = fromPattern.exec(blockText);
       if (!match) return;
 
-      // Get the indentation from the first block line
+      // Keep everything up to and including "FROM <table>", replace rest
       const indent = blockLines[0]?.match(/^(\s+)/)?.[1] ?? "  ";
-      const newBlock = match[1] + "\n" + indent + clause;
+      const baseQuery = blockText.slice(0, match.index + match[0].length);
+      const newBlock = baseQuery + "\n" + indent + clause;
 
       const before = content.slice(0, fullBlockStart);
       const after = content.slice(blockEnd);
       updateEditorContent(before + newBlock + "\n" + after);
     } else {
-      // Inline value: sql: select ... from table where ...
+      // Inline: sql: select ... from table where ...
       const valueStart = keyIndex + sqlKeyMatch[0].length;
       const lineEnd = content.indexOf("\n", valueStart);
       const sqlValue = content.slice(
@@ -138,10 +133,13 @@
         lineEnd === -1 ? undefined : lineEnd,
       );
 
-      const match = sqlValue.match(fromPattern);
+      const match = fromPattern.exec(sqlValue);
       if (!match) return;
 
-      const newValue = " " + match[1].trim() + " " + clause;
+      // Keep everything up to and including "FROM <table>", replace rest
+      const baseQuery = sqlValue.slice(0, match.index + match[0].length);
+      const newValue = baseQuery + " " + clause;
+
       const before = content.slice(0, valueStart);
       const after = lineEnd === -1 ? "" : content.slice(lineEnd);
       updateEditorContent(before + newValue + after);

From c34565ba174f41ec7aabc24aad5d07fed6dc2c81 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Thu, 5 Mar 2026 12:53:00 -0500
Subject: [PATCH 16/24] reset review on nav

---
 web-common/src/features/apis/editor/APITestPanel.svelte   | 8 ++++++++
 .../src/layout/workspace/WorkspaceEditorContainer.svelte  | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/web-common/src/features/apis/editor/APITestPanel.svelte b/web-common/src/features/apis/editor/APITestPanel.svelte
index 8b626a0769f8..0a408eeceb94 100644
--- a/web-common/src/features/apis/editor/APITestPanel.svelte
+++ b/web-common/src/features/apis/editor/APITestPanel.svelte
@@ -26,6 +26,14 @@
   let isLoading = false;
   let previewHeight = 200;
 
+  // Clear response when switching to a different API
+  $: apiName, resetResponse();
+  function resetResponse() {
+    apiResponse = null;
+    responseError = null;
+    isLoading = false;
+  }
+
   $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
   $: fullUrl = buildFullUrl(baseUrl, args);
   $: isDisabled = hasErrors || isReconciling;
diff --git a/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte b/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
index 95c4fe30317d..8d574f8e08bb 100644
--- a/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
+++ b/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
@@ -21,7 +21,7 @@
     <div
       role="status"
       transition:slide={{ duration: LIST_SLIDE_DURATION }}
-      class="border border-destructive bg-destructive/15 dark:bg-destructive/30 text-fg-primary border-l-4 px-3 py-2.5 max-h-40 overflow-auto text-sm"
+      class="border border-destructive bg-destructive/15 dark:bg-destructive/30 text-fg-primary border-l-4 px-3 py-2.5 text-sm flex-shrink-0"
     >
       <div class="flex gap-x-2 items-center">
         <CancelCircle className="text-destructive" />{error}

From 8272f9b1e687637cd2b99ee3b8ead5355bd8d7cc Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Thu, 5 Mar 2026 13:00:04 -0500
Subject: [PATCH 17/24] reset

---
 .../src/features/apis/editor/APITestPanel.svelte   | 14 ++------------
 .../src/features/workspaces/APIWorkspace.svelte    |  4 +---
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/web-common/src/features/apis/editor/APITestPanel.svelte b/web-common/src/features/apis/editor/APITestPanel.svelte
index 0a408eeceb94..3a2c9ff3a50a 100644
--- a/web-common/src/features/apis/editor/APITestPanel.svelte
+++ b/web-common/src/features/apis/editor/APITestPanel.svelte
@@ -5,12 +5,7 @@
   import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
   import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
   import { copyToClipboard } from "@rilldata/web-common/lib/actions/copy-to-clipboard";
-  import {
-    PlusIcon,
-    PlayIcon,
-    ChevronDownIcon,
-    CopyIcon,
-  } from "lucide-svelte";
+  import { PlusIcon, PlayIcon, ChevronDownIcon, CopyIcon } from "lucide-svelte";
   import APIResponsePreview from "./APIResponsePreview.svelte";
   import type { Arg } from "./types";
 
@@ -104,12 +99,7 @@
   style:min-height="100px"
   style:max-height="60%"
 >
-  <Resizer
-    max={500}
-    direction="NS"
-    side="top"
-    bind:dimension={previewHeight}
-  />
+  <Resizer max={500} direction="NS" side="top" bind:dimension={previewHeight} />
 
   <div class="flex items-center gap-x-3 px-3 py-2 border-b">
     <div class="flex items-center gap-x-2 flex-1 min-w-0">
diff --git a/web-common/src/features/workspaces/APIWorkspace.svelte b/web-common/src/features/workspaces/APIWorkspace.svelte
index da6670533233..1bc83ff7f0e9 100644
--- a/web-common/src/features/workspaces/APIWorkspace.svelte
+++ b/web-common/src/features/workspaces/APIWorkspace.svelte
@@ -168,9 +168,7 @@
         </DropdownMenu.Trigger>
         <DropdownMenu.Content align="end" class="w-56">
           {#each templates as template}
-            <DropdownMenu.Item
-              on:click={() => applyTemplate(template.clause)}
-            >
+            <DropdownMenu.Item on:click={() => applyTemplate(template.clause)}>
               <span class="text-sm">{template.label}</span>
             </DropdownMenu.Item>
           {/each}

From 1dbc8f32b2c4e28396ef6120acce498586de8f34 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Thu, 5 Mar 2026 13:43:42 -0500
Subject: [PATCH 18/24] template overwrites

---
 .../apis/editor/APIResponsePreview.svelte     |  27 ++-
 .../features/apis/editor/APITestPanel.svelte  |  65 ++++++-
 .../features/apis/editor/template-utils.ts    |  98 +++++++++++
 .../features/workspaces/APIWorkspace.svelte   | 162 ++++++++----------
 4 files changed, 247 insertions(+), 105 deletions(-)
 create mode 100644 web-common/src/features/apis/editor/template-utils.ts

diff --git a/web-common/src/features/apis/editor/APIResponsePreview.svelte b/web-common/src/features/apis/editor/APIResponsePreview.svelte
index 9c31f34b4e5c..a0668fc8802e 100644
--- a/web-common/src/features/apis/editor/APIResponsePreview.svelte
+++ b/web-common/src/features/apis/editor/APIResponsePreview.svelte
@@ -20,7 +20,9 @@
   ];
 
   function handleViewModeChange(id: string) {
-    viewMode = id as ViewMode;
+    if (id === "table" || id === "json") {
+      viewMode = id;
+    }
   }
 
   $: columns = extractColumns(response);
@@ -33,12 +35,31 @@
       return [{ name: "value", type: "VARCHAR" }];
     }
 
-    return Object.keys(firstRow).map((key) => ({
+    const keys = Object.keys(firstRow);
+    const sampleSize = Math.min(data.length, 10);
+
+    return keys.map((key) => ({
       name: key,
-      type: inferType(firstRow[key as keyof typeof firstRow]),
+      type: inferTypeFromSample(data, key, sampleSize),
     }));
   }
 
+  function inferTypeFromSample(
+    rows: unknown[],
+    key: string,
+    sampleSize: number,
+  ): string {
+    for (let i = 0; i < sampleSize; i++) {
+      const row = rows[i];
+      if (typeof row !== "object" || row === null) continue;
+      const value = (row as Record<string, unknown>)[key];
+      if (value !== null && value !== undefined) {
+        return inferType(value);
+      }
+    }
+    return "VARCHAR";
+  }
+
   function inferType(value: unknown): string {
     if (value === null || value === undefined) return "VARCHAR";
     if (typeof value === "number") {
diff --git a/web-common/src/features/apis/editor/APITestPanel.svelte b/web-common/src/features/apis/editor/APITestPanel.svelte
index 3a2c9ff3a50a..c1333e6aa8e1 100644
--- a/web-common/src/features/apis/editor/APITestPanel.svelte
+++ b/web-common/src/features/apis/editor/APITestPanel.svelte
@@ -34,13 +34,17 @@
   $: isDisabled = hasErrors || isReconciling;
 
   function buildFullUrl(base: string, params: Arg[]): string {
-    const url = new URL(base);
-    params.forEach((arg) => {
-      if (arg.key.trim()) {
-        url.searchParams.set(arg.key, arg.value);
-      }
-    });
-    return url.toString();
+    try {
+      const url = new URL(base);
+      params.forEach((arg) => {
+        if (arg.key.trim()) {
+          url.searchParams.set(arg.key, arg.value);
+        }
+      });
+      return url.toString();
+    } catch {
+      return base;
+    }
   }
 
   function addArg() {
@@ -55,8 +59,49 @@
     copyToClipboard(fullUrl, "Copied endpoint URL to clipboard");
   }
 
+  function handleArgsKeydown(e: KeyboardEvent) {
+    if (e.key !== "Tab") return;
+
+    const container = (e.target as HTMLElement)?.closest(".args-container");
+    if (!container) return;
+
+    const inputs = Array.from(
+      container.querySelectorAll<HTMLInputElement>("input"),
+    );
+    const currentIndex = inputs.indexOf(e.target as HTMLInputElement);
+    if (currentIndex === -1) return;
+
+    if (e.shiftKey) {
+      // Shift+Tab: move to previous input, or let dropdown handle if at first
+      if (currentIndex > 0) {
+        e.preventDefault();
+        inputs[currentIndex - 1].focus();
+      }
+    } else {
+      // Tab: move to next input, or add a new arg row if at the last one
+      if (currentIndex < inputs.length - 1) {
+        e.preventDefault();
+        inputs[currentIndex + 1].focus();
+      } else {
+        e.preventDefault();
+        addArg();
+        // Focus the new row's key input after Svelte updates the DOM
+        requestAnimationFrame(() => {
+          const updatedInputs = Array.from(
+            container.querySelectorAll<HTMLInputElement>("input"),
+          );
+          updatedInputs[updatedInputs.length - 2]?.focus();
+        });
+      }
+    }
+  }
+
   function handleKeydown(e: KeyboardEvent) {
     if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && !isDisabled) {
+      // Don't fire when focus is in a dialog, modal, or navigation sidebar
+      const target = e.target as HTMLElement;
+      if (target?.closest?.('[role="dialog"], nav, [role="alertdialog"]'))
+        return;
       e.preventDefault();
       testAPI();
     }
@@ -127,7 +172,11 @@
           </Button>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content align="end" class="w-72 p-2">
-          <div class="flex flex-col gap-y-2">
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div
+            class="args-container flex flex-col gap-y-2"
+            on:keydown={handleArgsKeydown}
+          >
             {#if args.length === 0}
               <p class="text-xs text-fg-muted px-1 py-2">
                 No arguments. Click "Add" below.
diff --git a/web-common/src/features/apis/editor/template-utils.ts b/web-common/src/features/apis/editor/template-utils.ts
new file mode 100644
index 000000000000..7c5336d5fc17
--- /dev/null
+++ b/web-common/src/features/apis/editor/template-utils.ts
@@ -0,0 +1,98 @@
+export interface Template {
+  label: string;
+  description: string;
+  content: string;
+}
+
+const header = `# API YAML
+# Reference documentation: https://docs.rilldata.com/reference/project-files/apis
+# Test your API endpoint at http://localhost:9009/v1/instances/default/api/<filename>
+
+`;
+
+export const templates: Template[] = [
+  {
+    label: "SQL Query",
+    description:
+      "Query a model or source using SQL. Use {{ .args.param }} to accept dynamic arguments.",
+    content: `${header}type: api
+sql: |
+  SELECT * FROM model_name
+`,
+  },
+  {
+    label: "SQL Query with Limits",
+    description:
+      "Query a model with pagination controls. Pass 'limit' and 'offset' arguments to control page size and position.",
+    content: `${header}type: api
+sql: |
+  SELECT * FROM model_name
+  LIMIT {{ .args.limit }}
+  OFFSET {{ .args.offset }}
+`,
+  },
+  {
+    label: "Metrics SQL",
+    description:
+      "Query a metrics view using Metrics SQL. Reference measures and dimensions defined in your metrics view.",
+    content: `${header}type: api
+metrics_sql: |
+  SELECT measure, dimension FROM metrics_view_name
+`,
+  },
+  {
+    label: "Metrics SQL with Args",
+    description:
+      "Query a metrics view with dynamic filtering. Pass arguments to filter results at query time.",
+    content: `${header}type: api
+metrics_sql: |
+  SELECT measure, dimension FROM metrics_view_name
+  WHERE dimension = '{{ .args.filter }}'
+`,
+  },
+  {
+    label: "Metrics SQL with Pagination",
+    description:
+      "Query a metrics view with pagination controls. Pass 'limit' and 'offset' arguments to page through results.",
+    content: `${header}type: api
+metrics_sql: |
+  SELECT measure, dimension FROM metrics_view_name
+  LIMIT {{ .args.limit }}
+  OFFSET {{ .args.offset }}
+`,
+  },
+  {
+    label: "OpenAPI",
+    description:
+      "Define an API with an OpenAPI specification. Includes request and response schemas for documentation and validation.",
+    content: `${header}type: api
+metrics_sql: |
+  SELECT measure, dimension FROM metrics_view_name
+  WHERE dimension = '{{ .args.filter }}'
+openapi:
+  summary: Describe your API endpoint
+  request_schema:
+    type: object
+    properties:
+      filter:
+        type: string
+        description: Filter by dimension value
+  response_schema:
+    type: object
+    properties:
+      measure:
+        type: number
+      dimension:
+        type: string
+`,
+  },
+  {
+    label: "Resource Status",
+    description:
+      "Return the reconciliation status of resources in the project. Useful for health-check and monitoring endpoints.",
+    content: `${header}type: api
+resource_status:
+  where_error: true
+`,
+  },
+];
diff --git a/web-common/src/features/workspaces/APIWorkspace.svelte b/web-common/src/features/workspaces/APIWorkspace.svelte
index 1bc83ff7f0e9..988c688772fe 100644
--- a/web-common/src/features/workspaces/APIWorkspace.svelte
+++ b/web-common/src/features/workspaces/APIWorkspace.svelte
@@ -1,7 +1,22 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+  } from "@rilldata/web-common/components/alert-dialog/index.js";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import {
+    templates,
+    type Template,
+  } from "@rilldata/web-common/features/apis/editor/template-utils";
+  import type { Arg } from "@rilldata/web-common/features/apis/editor/types";
   import { getNameFromFile } from "@rilldata/web-common/features/entity-management/entity-mappers";
   import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import {
@@ -11,7 +26,6 @@
   import { handleEntityRename } from "@rilldata/web-common/features/entity-management/ui-actions";
   import { mapParseErrorsToLines } from "@rilldata/web-common/features/metrics-views/errors";
   import APIEditor from "@rilldata/web-common/features/apis/editor/APIEditor.svelte";
-  import type { Arg } from "@rilldata/web-common/features/apis/editor/types";
   import WorkspaceContainer from "@rilldata/web-common/layout/workspace/WorkspaceContainer.svelte";
   import WorkspaceHeader from "@rilldata/web-common/layout/workspace/WorkspaceHeader.svelte";
   import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
@@ -53,97 +67,24 @@
 
   let args: Arg[] = [];
 
-  // Templates that modify the SQL/metrics_sql value in the YAML
-  const templates = [
-    {
-      label: "Filter Template",
-      clause: `where dimension = '{{ .args.filter }}'`,
-    },
-    {
-      label: "Limit Template",
-      clause: "limit {{ .args.limit }}",
-    },
-    {
-      label: "Offset Template",
-      clause: "offset {{ .args.offset }}",
-    },
-    {
-      label: "Sort Template",
-      clause: "order by {{ .args.sort }} {{ .args.order }}",
-    },
-    {
-      label: "Time range Template",
-      clause: `where time >= '{{ .args.start }}' and time < '{{ .args.end }}'`,
-    },
-  ];
-
-  $: ({ editorContent, updateEditorContent } = fileArtifact);
-
-  // Matches FROM <table> and captures everything after it as trailing clauses
-  const fromPattern = /\bfrom\s+\S+/i;
-
-  function applyTemplate(clause: string) {
-    const content = $editorContent ?? "";
-
-    // Find which SQL key is present
-    const sqlKeyMatch = content.match(/^(metrics_sql|sql)\s*:/m);
-    if (!sqlKeyMatch) return;
-
-    const keyIndex = content.indexOf(sqlKeyMatch[0]);
-    const afterKey = content.slice(keyIndex + sqlKeyMatch[0].length);
+  $: ({ updateEditorContent } = fileArtifact);
 
-    // Determine if block scalar (| or >) or inline
-    const isBlock = /^\s*\|/.test(afterKey);
+  // Template confirmation dialog state
+  let dialogOpen = false;
+  let pendingTemplate: Template | null = null;
+  let dropdownOpen = false;
 
-    if (isBlock) {
-      // Block scalar: collect indented lines after "|\n"
-      const blockStart = afterKey.indexOf("\n") + 1;
-      const fullBlockStart = keyIndex + sqlKeyMatch[0].length + blockStart;
-
-      const restLines = content.slice(fullBlockStart).split("\n");
-      const blockLines: string[] = [];
-      let blockEnd = fullBlockStart;
-      for (const line of restLines) {
-        if (line.match(/^\s+\S/) || line.trim() === "") {
-          blockLines.push(line);
-          blockEnd += line.length + 1;
-        } else {
-          break;
-        }
-      }
-
-      const blockText = blockLines.join("\n");
-      const match = fromPattern.exec(blockText);
-      if (!match) return;
-
-      // Keep everything up to and including "FROM <table>", replace rest
-      const indent = blockLines[0]?.match(/^(\s+)/)?.[1] ?? "  ";
-      const baseQuery = blockText.slice(0, match.index + match[0].length);
-      const newBlock = baseQuery + "\n" + indent + clause;
-
-      const before = content.slice(0, fullBlockStart);
-      const after = content.slice(blockEnd);
-      updateEditorContent(before + newBlock + "\n" + after);
-    } else {
-      // Inline: sql: select ... from table where ...
-      const valueStart = keyIndex + sqlKeyMatch[0].length;
-      const lineEnd = content.indexOf("\n", valueStart);
-      const sqlValue = content.slice(
-        valueStart,
-        lineEnd === -1 ? undefined : lineEnd,
-      );
-
-      const match = fromPattern.exec(sqlValue);
-      if (!match) return;
-
-      // Keep everything up to and including "FROM <table>", replace rest
-      const baseQuery = sqlValue.slice(0, match.index + match[0].length);
-      const newValue = baseQuery + " " + clause;
+  function selectTemplate(template: Template) {
+    pendingTemplate = template;
+    dialogOpen = true;
+  }
 
-      const before = content.slice(0, valueStart);
-      const after = lineEnd === -1 ? "" : content.slice(lineEnd);
-      updateEditorContent(before + newValue + after);
+  function confirmTemplate() {
+    if (pendingTemplate) {
+      updateEditorContent(pendingTemplate.content);
     }
+    dialogOpen = false;
+    pendingTemplate = null;
   }
 </script>
 
@@ -159,16 +100,21 @@
     titleInput={fileName}
   >
     <svelte:fragment slot="workspace-controls">
-      <DropdownMenu.Root>
+      <DropdownMenu.Root bind:open={dropdownOpen}>
         <DropdownMenu.Trigger asChild let:builder>
-          <Button type="text" compact small builders={[builder]}>
-            Templates
-            <ChevronDownIcon size="12px" />
-          </Button>
+          <Tooltip distance={8} suppress={dropdownOpen}>
+            <Button type="text" compact small builders={[builder]}>
+              Templates
+              <ChevronDownIcon size="12px" />
+            </Button>
+            <TooltipContent slot="tooltip-content">
+              Insert a starter API template
+            </TooltipContent>
+          </Tooltip>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content align="end" class="w-56">
           {#each templates as template}
-            <DropdownMenu.Item on:click={() => applyTemplate(template.clause)}>
+            <DropdownMenu.Item on:click={() => selectTemplate(template)}>
               <span class="text-sm">{template.label}</span>
             </DropdownMenu.Item>
           {/each}
@@ -190,3 +136,31 @@
     />
   </svelte:fragment>
 </WorkspaceContainer>
+
+<AlertDialog bind:open={dialogOpen}>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>{pendingTemplate?.label ?? "Template"}</AlertDialogTitle
+      >
+      <AlertDialogDescription>
+        {pendingTemplate?.description ?? ""}
+        {#if $hasUnsavedChanges}
+          <br /><br />
+          <strong>This will replace your current editor content.</strong>
+        {/if}
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <Button
+        type="tertiary"
+        onClick={() => {
+          dialogOpen = false;
+          pendingTemplate = null;
+        }}
+      >
+        Cancel
+      </Button>
+      <Button type="primary" onClick={confirmTemplate}>Apply</Button>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>

From b04e4b9e96765e833b634dc621d9e23f81add5dc Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Thu, 5 Mar 2026 13:53:35 -0500
Subject: [PATCH 19/24] local PR reviews

---
 .../apis/editor/APIResponsePreview.svelte     | 17 ++++++---
 .../features/apis/editor/APITestPanel.svelte  | 38 +++++++++----------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/web-common/src/features/apis/editor/APIResponsePreview.svelte b/web-common/src/features/apis/editor/APIResponsePreview.svelte
index a0668fc8802e..0ad3fdc52eb6 100644
--- a/web-common/src/features/apis/editor/APIResponsePreview.svelte
+++ b/web-common/src/features/apis/editor/APIResponsePreview.svelte
@@ -88,12 +88,17 @@
   <div class="response-header">
     <span class="header-label">Response Preview</span>
     {#if response && response.length > 0}
-      <IconSwitcher
-        fields={viewModeOptions}
-        selected={viewMode}
-        onClick={handleViewModeChange}
-        small
-      />
+      <div class="flex items-center gap-x-2">
+        <span class="text-[11px] text-fg-muted"
+          >{response.length} {response.length === 1 ? "row" : "rows"}</span
+        >
+        <IconSwitcher
+          fields={viewModeOptions}
+          selected={viewMode}
+          onClick={handleViewModeChange}
+          small
+        />
+      </div>
     {/if}
   </div>
   <div class="response-content">
diff --git a/web-common/src/features/apis/editor/APITestPanel.svelte b/web-common/src/features/apis/editor/APITestPanel.svelte
index c1333e6aa8e1..952e28727b42 100644
--- a/web-common/src/features/apis/editor/APITestPanel.svelte
+++ b/web-common/src/features/apis/editor/APITestPanel.svelte
@@ -5,7 +5,10 @@
   import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
   import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
   import { copyToClipboard } from "@rilldata/web-common/lib/actions/copy-to-clipboard";
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { PlusIcon, PlayIcon, ChevronDownIcon, CopyIcon } from "lucide-svelte";
+  import { tick } from "svelte";
   import APIResponsePreview from "./APIResponsePreview.svelte";
   import type { Arg } from "./types";
 
@@ -21,12 +24,13 @@
   let isLoading = false;
   let previewHeight = 200;
 
-  // Clear response when switching to a different API
-  $: apiName, resetResponse();
-  function resetResponse() {
+  // Clear response and args when switching to a different API
+  $: apiName, resetState();
+  function resetState() {
     apiResponse = null;
     responseError = null;
     isLoading = false;
+    args = [];
   }
 
   $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
@@ -85,8 +89,10 @@
       } else {
         e.preventDefault();
         addArg();
-        // Focus the new row's key input after Svelte updates the DOM
-        requestAnimationFrame(() => {
+        // Focus the new row's key input after Svelte updates the DOM.
+        // Each arg row contributes 2 <input> elements (key + value),
+        // so length - 2 targets the new row's key input.
+        tick().then(() => {
           const updatedInputs = Array.from(
             container.querySelectorAll<HTMLInputElement>("input"),
           );
@@ -96,17 +102,6 @@
     }
   }
 
-  function handleKeydown(e: KeyboardEvent) {
-    if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && !isDisabled) {
-      // Don't fire when focus is in a dialog, modal, or navigation sidebar
-      const target = e.target as HTMLElement;
-      if (target?.closest?.('[role="dialog"], nav, [role="alertdialog"]'))
-        return;
-      e.preventDefault();
-      testAPI();
-    }
-  }
-
   async function testAPI() {
     isLoading = true;
     responseError = null;
@@ -136,8 +131,6 @@
   }
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
-
 <div
   class="preview-panel"
   style:height="{previewHeight}px"
@@ -153,9 +146,12 @@
     </div>
 
     <div class="flex items-center gap-x-2 shrink-0">
-      <Button type="text" compact small onClick={handleCopyUrl}>
-        <CopyIcon size="10px" />
-      </Button>
+      <Tooltip distance={8}>
+        <Button type="text" compact small onClick={handleCopyUrl}>
+          <CopyIcon size="10px" />
+        </Button>
+        <TooltipContent slot="tooltip-content">Copy URL</TooltipContent>
+      </Tooltip>
 
       <DropdownMenu.Root closeOnItemClick={false}>
         <DropdownMenu.Trigger asChild let:builder>

From c63a2530a2957f2373a4054e53496eeb7e19027a Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 11 Mar 2026 15:38:08 -0400
Subject: [PATCH 20/24] Remove unused `mapParseErrorsToLines` import in
 `+page.svelte`

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../(application)/(workspace)/files/[...file]/+page.svelte       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte b/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte
index b5652e12c484..a1bc233702bd 100644
--- a/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte
+++ b/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte
@@ -10,7 +10,6 @@
   import { getExtensionsForFile } from "@rilldata/web-common/features/editor/getExtensionsForFile";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { directoryState } from "@rilldata/web-common/features/file-explorer/directory-store";
-  import { mapParseErrorsToLines } from "@rilldata/web-common/features/metrics-views/errors";
   import APIWorkspace from "@rilldata/web-common/features/workspaces/APIWorkspace.svelte";
   import CanvasWorkspace from "@rilldata/web-common/features/workspaces/CanvasWorkspace.svelte";
   import ExploreWorkspace from "@rilldata/web-common/features/workspaces/ExploreWorkspace.svelte";

From c1ff4d670950b2bdcf53594bf1f928147189e748 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 11 Mar 2026 15:52:07 -0400
Subject: [PATCH 21/24] importing runtime changes

---
 .../src/features/workspaces/APIWorkspace.svelte    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/web-common/src/features/workspaces/APIWorkspace.svelte b/web-common/src/features/workspaces/APIWorkspace.svelte
index 988c688772fe..bcc26e8392b7 100644
--- a/web-common/src/features/workspaces/APIWorkspace.svelte
+++ b/web-common/src/features/workspaces/APIWorkspace.svelte
@@ -29,12 +29,13 @@
   import WorkspaceContainer from "@rilldata/web-common/layout/workspace/WorkspaceContainer.svelte";
   import WorkspaceHeader from "@rilldata/web-common/layout/workspace/WorkspaceHeader.svelte";
   import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { ChevronDownIcon } from "lucide-svelte";
 
   export let fileArtifact: FileArtifact;
 
-  $: ({ instanceId } = $runtime);
+  const runtimeClient = useRuntimeClient();
+
   $: ({
     hasUnsavedChanges,
     autoSave,
@@ -45,17 +46,18 @@
   } = fileArtifact);
 
   $: apiName = $resourceName?.name ?? getNameFromFile(filePath);
-  $: host = $runtime.host || "http://localhost:9009";
+  $: host = runtimeClient.host || "http://localhost:9009";
+  $: instanceId = runtimeClient.instanceId;
 
-  $: allErrorsQuery = fileArtifact.getAllErrors(queryClient, instanceId);
+  $: allErrorsQuery = fileArtifact.getAllErrors(queryClient);
   $: allErrors = $allErrorsQuery;
-  $: resourceQuery = fileArtifact.getResource(queryClient, instanceId);
+  $: resourceQuery = fileArtifact.getResource(queryClient);
   $: ({ data: resource } = $resourceQuery);
   $: isReconciling = resourceIsLoading($resourceQuery.data);
 
   async function onChangeCallback(newTitle: string) {
     const newRoute = await handleEntityRename(
-      instanceId,
+      runtimeClient,
       newTitle,
       filePath,
       fileName,

From 4b68698de4883e6e91591f87734d5fd51490ef8c Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 30 Mar 2026 17:35:09 -0400
Subject: [PATCH 22/24] migration svelte/vite

---
 .../features/apis/editor/APITestPanel.svelte  | 38 ++++++++++---------
 .../features/workspaces/APIWorkspace.svelte   | 34 ++++++++---------
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/web-common/src/features/apis/editor/APITestPanel.svelte b/web-common/src/features/apis/editor/APITestPanel.svelte
index 952e28727b42..f82e1877867d 100644
--- a/web-common/src/features/apis/editor/APITestPanel.svelte
+++ b/web-common/src/features/apis/editor/APITestPanel.svelte
@@ -22,7 +22,7 @@
   let apiResponse: unknown[] | null = null;
   let responseError: string | null = null;
   let isLoading = false;
-  let previewHeight = 200;
+  let previewHeight = 300;
 
   // Clear response and args when switching to a different API
   $: apiName, resetState();
@@ -135,14 +135,14 @@
   class="preview-panel"
   style:height="{previewHeight}px"
   style:min-height="100px"
-  style:max-height="60%"
+  style:max-height="80%"
 >
   <Resizer max={500} direction="NS" side="top" bind:dimension={previewHeight} />
 
   <div class="flex items-center gap-x-3 px-3 py-2 border-b">
     <div class="flex items-center gap-x-2 flex-1 min-w-0">
-      <span class="text-xs font-medium text-fg-secondary shrink-0">GET</span>
-      <span class="text-xs font-mono text-fg-muted truncate">{fullUrl}</span>
+      <span class="text-xs font-medium text-fg-secondary shrink-0">URL Preview: </span>
+      <span class="text-[11px] font-mono text-fg-muted truncate">{fullUrl}</span>
     </div>
 
     <div class="flex items-center gap-x-2 shrink-0">
@@ -154,24 +154,26 @@
       </Tooltip>
 
       <DropdownMenu.Root closeOnItemClick={false}>
-        <DropdownMenu.Trigger asChild let:builder>
-          <Button type="text" compact small builders={[builder]}>
-            Args
-            {#if args.length > 0}
-              <span
-                class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium bg-surface-active text-fg-accent rounded-full"
-              >
-                {args.length}
-              </span>
-            {/if}
-            <ChevronDownIcon size="10px" />
-          </Button>
+        <DropdownMenu.Trigger>
+          {#snippet child({ props })}
+            <Button {...props} type="text" compact small>
+              Args
+              {#if args.length > 0}
+                <span
+                  class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium bg-surface-active text-fg-accent rounded-full"
+                >
+                  {args.length}
+                </span>
+              {/if}
+              <ChevronDownIcon size="10px" />
+            </Button>
+          {/snippet}
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content align="end" class="w-72 p-2">
+        <DropdownMenu.Content align="end" class="w-96 p-3">
           <!-- svelte-ignore a11y-no-static-element-interactions -->
           <div
             class="args-container flex flex-col gap-y-2"
-            on:keydown={handleArgsKeydown}
+            onkeydown={handleArgsKeydown}
           >
             {#if args.length === 0}
               <p class="text-xs text-fg-muted px-1 py-2">
diff --git a/web-common/src/features/workspaces/APIWorkspace.svelte b/web-common/src/features/workspaces/APIWorkspace.svelte
index bcc26e8392b7..198ac50520c2 100644
--- a/web-common/src/features/workspaces/APIWorkspace.svelte
+++ b/web-common/src/features/workspaces/APIWorkspace.svelte
@@ -103,21 +103,23 @@
   >
     <svelte:fragment slot="workspace-controls">
       <DropdownMenu.Root bind:open={dropdownOpen}>
-        <DropdownMenu.Trigger asChild let:builder>
-          <Tooltip distance={8} suppress={dropdownOpen}>
-            <Button type="text" compact small builders={[builder]}>
-              Templates
-              <ChevronDownIcon size="12px" />
-            </Button>
-            <TooltipContent slot="tooltip-content">
-              Insert a starter API template
-            </TooltipContent>
-          </Tooltip>
+        <DropdownMenu.Trigger>
+          {#snippet child({ props })}
+            <Tooltip distance={8} suppress={dropdownOpen}>
+              <Button {...props} type="text" compact small>
+                Templates
+                <ChevronDownIcon size="12px" />
+              </Button>
+              <TooltipContent slot="tooltip-content">
+                Insert a starter API template
+              </TooltipContent>
+            </Tooltip>
+          {/snippet}
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content align="end" class="w-56">
+        <DropdownMenu.Content align="end" class="w-44">
           {#each templates as template}
-            <DropdownMenu.Item on:click={() => selectTemplate(template)}>
-              <span class="text-sm">{template.label}</span>
+            <DropdownMenu.Item onclick={() => selectTemplate(template)}>
+              <span class="text-xs">{template.label}</span>
             </DropdownMenu.Item>
           {/each}
         </DropdownMenu.Content>
@@ -146,10 +148,8 @@
       >
       <AlertDialogDescription>
         {pendingTemplate?.description ?? ""}
-        {#if $hasUnsavedChanges}
-          <br /><br />
-          <strong>This will replace your current editor content.</strong>
-        {/if}
+        <br /><br />
+        Warning: this will overwrite your current file.
       </AlertDialogDescription>
     </AlertDialogHeader>
     <AlertDialogFooter>

From 08af507758bbb4c4d17810184f154a89489b4f1e Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 30 Mar 2026 17:42:19 -0400
Subject: [PATCH 23/24] prettier

---
 .../features/apis/editor/APITestPanel.svelte  | 150 ++++++++++--------
 1 file changed, 80 insertions(+), 70 deletions(-)

diff --git a/web-common/src/features/apis/editor/APITestPanel.svelte b/web-common/src/features/apis/editor/APITestPanel.svelte
index f82e1877867d..85b222df5f58 100644
--- a/web-common/src/features/apis/editor/APITestPanel.svelte
+++ b/web-common/src/features/apis/editor/APITestPanel.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
   import Button from "@rilldata/web-common/components/button/Button.svelte";
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import Input from "@rilldata/web-common/components/forms/Input.svelte";
   import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
   import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
   import { copyToClipboard } from "@rilldata/web-common/lib/actions/copy-to-clipboard";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
-  import { PlusIcon, PlayIcon, ChevronDownIcon, CopyIcon } from "lucide-svelte";
+  import {
+    PlusIcon,
+    PlayIcon,
+    ChevronDownIcon,
+    ChevronRightIcon,
+    CopyIcon,
+  } from "lucide-svelte";
   import { tick } from "svelte";
   import APIResponsePreview from "./APIResponsePreview.svelte";
   import type { Arg } from "./types";
@@ -22,7 +27,8 @@
   let apiResponse: unknown[] | null = null;
   let responseError: string | null = null;
   let isLoading = false;
-  let previewHeight = 300;
+  let previewHeight = 500;
+  let argsOpen = false;
 
   // Clear response and args when switching to a different API
   $: apiName, resetState();
@@ -139,12 +145,12 @@
 >
   <Resizer max={500} direction="NS" side="top" bind:dimension={previewHeight} />
 
-  <div class="flex items-center gap-x-3 px-3 py-2 border-b">
-    <div class="flex items-center gap-x-2 flex-1 min-w-0">
-      <span class="text-xs font-medium text-fg-secondary shrink-0">URL Preview: </span>
-      <span class="text-[11px] font-mono text-fg-muted truncate">{fullUrl}</span>
-    </div>
-
+  <div class="flex items-center gap-x-2 px-3 py-2 border-b">
+    <span class="text-xs font-medium text-fg-primary uppercase tracking-wide"
+    >URL Preview: </span>
+    <span class="text-[11px] font-mono text-fg-muted truncate flex-1 min-w-0"
+      >{fullUrl}</span
+    >
     <div class="flex items-center gap-x-2 shrink-0">
       <Tooltip distance={8}>
         <Button type="text" compact small onClick={handleCopyUrl}>
@@ -152,68 +158,21 @@
         </Button>
         <TooltipContent slot="tooltip-content">Copy URL</TooltipContent>
       </Tooltip>
-
-      <DropdownMenu.Root closeOnItemClick={false}>
-        <DropdownMenu.Trigger>
-          {#snippet child({ props })}
-            <Button {...props} type="text" compact small>
-              Args
-              {#if args.length > 0}
-                <span
-                  class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium bg-surface-active text-fg-accent rounded-full"
-                >
-                  {args.length}
-                </span>
-              {/if}
-              <ChevronDownIcon size="10px" />
-            </Button>
-          {/snippet}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content align="end" class="w-96 p-3">
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
-          <div
-            class="args-container flex flex-col gap-y-2"
-            onkeydown={handleArgsKeydown}
+      <Button type="text" small compact onClick={() => (argsOpen = !argsOpen)}>
+        {#if argsOpen}
+          <ChevronDownIcon size="12px" />
+        {:else}
+          <ChevronRightIcon size="12px" />
+        {/if}
+        Args
+        {#if args.length > 0}
+          <span
+            class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium bg-primary-100 text-primary-600 rounded-full"
           >
-            {#if args.length === 0}
-              <p class="text-xs text-fg-muted px-1 py-2">
-                No arguments. Click "Add" below.
-              </p>
-            {:else}
-              {#each args as arg (arg.id)}
-                <div class="flex items-center gap-x-1">
-                  <Input
-                    bind:value={arg.key}
-                    placeholder="key"
-                    size="sm"
-                    width="100px"
-                  />
-                  <Input
-                    bind:value={arg.value}
-                    placeholder="value"
-                    size="sm"
-                    full
-                  />
-                  <Button
-                    type="ghost"
-                    square
-                    small
-                    compact
-                    onClick={() => removeArg(arg.id)}
-                  >
-                    <Trash size="12px" />
-                  </Button>
-                </div>
-              {/each}
-            {/if}
-            <Button type="text" compact small onClick={addArg}>
-              <PlusIcon size="12px" />
-              Add
-            </Button>
-          </div>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-
+            {args.length}
+          </span>
+        {/if}
+      </Button>
       <Button
         type="primary"
         small
@@ -232,6 +191,57 @@
     </div>
   </div>
 
+  {#if argsOpen}
+    <div class="border-b px-3 py-2">
+      <div class="flex items-center justify-between mb-2">
+        <span
+          class="text-[10px] font-semibold text-fg-primary uppercase tracking-wide"
+          >Query Parameters</span
+        >
+        <Button type="text" compact small onClick={addArg}>
+          <PlusIcon size="12px" />
+          Add
+        </Button>
+      </div>
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="args-container flex flex-col gap-y-2"
+        onkeydown={handleArgsKeydown}
+      >
+        {#if args.length === 0}
+          <p class="text-xs text-fg-muted py-1">
+            No query parameters. Click "Add" to create one.
+          </p>
+        {:else}
+          <div class="grid grid-cols-[1fr_1fr_28px] gap-x-2 gap-y-2">
+            <span
+              class="text-[10px] font-medium text-fg-muted uppercase tracking-wide"
+              >Key</span
+            >
+            <span
+              class="text-[10px] font-medium text-fg-muted uppercase tracking-wide"
+              >Value</span
+            >
+            <span></span>
+            {#each args as arg (arg.id)}
+              <Input bind:value={arg.key} placeholder="key" size="sm" />
+              <Input bind:value={arg.value} placeholder="value" size="sm" />
+              <Button
+                type="ghost"
+                square
+                small
+                compact
+                onClick={() => removeArg(arg.id)}
+              >
+                <Trash size="12px" />
+              </Button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+
   <div class="flex-1 overflow-auto">
     <APIResponsePreview
       response={apiResponse}

From e670982b7498a335d73ead022547836c5d8a3eba Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 30 Mar 2026 17:44:41 -0400
Subject: [PATCH 24/24] prettier

---
 web-common/src/features/apis/editor/APITestPanel.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web-common/src/features/apis/editor/APITestPanel.svelte b/web-common/src/features/apis/editor/APITestPanel.svelte
index 85b222df5f58..56750d9f5dbd 100644
--- a/web-common/src/features/apis/editor/APITestPanel.svelte
+++ b/web-common/src/features/apis/editor/APITestPanel.svelte
@@ -147,7 +147,8 @@
 
   <div class="flex items-center gap-x-2 px-3 py-2 border-b">
     <span class="text-xs font-medium text-fg-primary uppercase tracking-wide"
-    >URL Preview: </span>
+      >URL Preview:
+    </span>
     <span class="text-[11px] font-mono text-fg-muted truncate flex-1 min-w-0"
       >{fullUrl}</span
     >