From e3213f5e4ccbe97b29a718218b3be22edaac2c09 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:08:13 -0500
Subject: [PATCH 1/5] mapping file and edit csv

---
 .../editor/FileWorkspaceHeader.svelte         |  22 +-
 .../entity-management/AddAssetButton.svelte   |  12 +-
 .../workspaces/MappingWorkspace.svelte        | 348 ++++++++++++++++++
 .../mapping/edit/[...file]/+page.svelte       |  98 +++++
 .../mapping/edit/[...file]/+page.ts           |  37 ++
 .../(workspace)/mapping/new/+page.svelte      |  15 +
 6 files changed, 530 insertions(+), 2 deletions(-)
 create mode 100644 web-common/src/features/workspaces/MappingWorkspace.svelte
 create mode 100644 web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.svelte
 create mode 100644 web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.ts
 create mode 100644 web-local/src/routes/(application)/(workspace)/mapping/new/+page.svelte

diff --git a/web-common/src/features/editor/FileWorkspaceHeader.svelte b/web-common/src/features/editor/FileWorkspaceHeader.svelte
index 74544c99511..e93d827df13 100644
--- a/web-common/src/features/editor/FileWorkspaceHeader.svelte
+++ b/web-common/src/features/editor/FileWorkspaceHeader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
   import { splitFolderAndFileName } from "@rilldata/web-common/features/entity-management/file-path-utils";
   import { handleEntityRename } from "@rilldata/web-common/features/entity-management/ui-actions";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
@@ -7,6 +8,7 @@
   import type { ResourceKind } from "../entity-management/resource-selectors";
   import { PROTECTED_FILES } from "../file-explorer/protected-paths";
   import type { V1Resource } from "@rilldata/web-common/runtime-client";
+  import { Table } from "lucide-svelte";
 
   export let filePath: string;
   export let hasUnsavedChanges: boolean;
@@ -17,6 +19,7 @@
 
   $: [, fileName] = splitFolderAndFileName(filePath);
   $: isProtectedFile = PROTECTED_FILES.includes(filePath);
+  $: isEditableCSV = filePath.startsWith("/data/") && filePath.endsWith(".csv");
 
   $: ({ instanceId } = $runtime);
 
@@ -29,6 +32,14 @@
     );
     if (route) await goto(route);
   };
+
+  async function handleEditInTable() {
+    // Remove leading slash for the route
+    const pathWithoutLeadingSlash = filePath.startsWith("/")
+      ? filePath.slice(1)
+      : filePath;
+    await goto(`/mapping/edit/${pathWithoutLeadingSlash}`);
+  }
 </script>
 
 <WorkspaceHeader
@@ -40,4 +51,13 @@
   showInspectorToggle={false}
   titleInput={fileName}
   {resource}
-/>
+>
+  <svelte:fragment slot="cta">
+    {#if isEditableCSV}
+      <Button type="secondary" onClick={handleEditInTable}>
+        <Table size="14px" />
+        Edit in Table
+      </Button>
+    {/if}
+  </svelte:fragment>
+</WorkspaceHeader>
diff --git a/web-common/src/features/entity-management/AddAssetButton.svelte b/web-common/src/features/entity-management/AddAssetButton.svelte
index de5ed2bf512..55b819ed0dd 100644
--- a/web-common/src/features/entity-management/AddAssetButton.svelte
+++ b/web-common/src/features/entity-management/AddAssetButton.svelte
@@ -4,7 +4,7 @@
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import { getScreenNameFromPage } from "@rilldata/web-common/features/file-explorer/telemetry";
-  import { Database, Folder, PlusCircleIcon } from "lucide-svelte";
+  import { Database, Folder, PlusCircleIcon, FileSpreadsheet } from "lucide-svelte";
   import CaretDownIcon from "../../components/icons/CaretDownIcon.svelte";
   import File from "../../components/icons/File.svelte";
   import { behaviourEvent } from "../../metrics/initMetrics";
@@ -153,6 +153,13 @@
 
     await goto(`/files/${path}`);
   }
+
+  /**
+   * Navigate to the mapping file workspace
+   */
+  async function handleAddMappingFile() {
+    await goto("/mapping/new");
+  }
 </script>
 
 <DropdownMenu.Root bind:open={active}>
@@ -283,6 +290,9 @@
         <DropdownMenu.Item class="flex gap-x-2" on:click={handleAddBlankFile}>
           <File size="16px" /> Blank file
         </DropdownMenu.Item>
+        <DropdownMenu.Item class="flex gap-x-2" on:click={handleAddMappingFile}>
+          <FileSpreadsheet size="16px" /> Mapping file
+        </DropdownMenu.Item>
         <DropdownMenu.Item
           class="flex gap-x-2"
           on:click={() => (generateDataDialog = true)}
diff --git a/web-common/src/features/workspaces/MappingWorkspace.svelte b/web-common/src/features/workspaces/MappingWorkspace.svelte
new file mode 100644
index 00000000000..a124409cf18
--- /dev/null
+++ b/web-common/src/features/workspaces/MappingWorkspace.svelte
@@ -0,0 +1,348 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { onMount } from "svelte";
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import InputWithConfirm from "@rilldata/web-common/components/forms/InputWithConfirm.svelte";
+  import { FileSpreadsheet, Plus, Trash2, Save } from "lucide-svelte";
+  import WorkspaceContainer from "@rilldata/web-common/layout/workspace/WorkspaceContainer.svelte";
+  import { createRuntimeServicePutFile } from "@rilldata/web-common/runtime-client";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { getFileNamesInDirectory } from "@rilldata/web-common/features/entity-management/file-selectors";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+
+  export let initialName = "mapping.csv";
+  export let initialColumns: string[] | undefined = undefined;
+  export let initialRows: string[][] | undefined = undefined;
+  export let isEditing = false;
+
+  const createFile = createRuntimeServicePutFile();
+
+  let fileName = initialName;
+  let hasUnsavedChanges = !isEditing;
+  let editing = false;
+  let isSaving = false;
+
+  // Table state
+  let columns: string[] = initialColumns ?? ["column1", "column2"];
+  let rows: string[][] = initialRows ?? [["", ""]];
+
+  $: ({ instanceId } = $runtime);
+
+  // Compute base name without .csv extension for display
+  $: baseName = fileName.endsWith(".csv") ? fileName.slice(0, -4) : fileName;
+
+  // On mount, check for unique name if creating new mapping
+  onMount(async () => {
+    if (!isEditing && instanceId) {
+      const uniqueName = await getUniqueBaseName(baseName);
+      if (uniqueName !== baseName) {
+        fileName = `${uniqueName}.csv`;
+      }
+    }
+  });
+
+  function addColumn() {
+    const newColName = `column${columns.length + 1}`;
+    columns = [...columns, newColName];
+    rows = rows.map((row) => [...row, ""]);
+    hasUnsavedChanges = true;
+  }
+
+  function removeColumn(index: number) {
+    if (columns.length <= 1) return;
+    columns = columns.filter((_, i) => i !== index);
+    rows = rows.map((row) => row.filter((_, i) => i !== index));
+    hasUnsavedChanges = true;
+  }
+
+  function addRow() {
+    rows = [...rows, new Array(columns.length).fill("")];
+    hasUnsavedChanges = true;
+  }
+
+  function removeRow(index: number) {
+    if (rows.length <= 1) return;
+    rows = rows.filter((_, i) => i !== index);
+    hasUnsavedChanges = true;
+  }
+
+  function updateCell(rowIndex: number, colIndex: number, value: string) {
+    rows[rowIndex][colIndex] = value;
+    rows = rows;
+    hasUnsavedChanges = true;
+  }
+
+  function updateColumnName(index: number, value: string) {
+    columns[index] = value;
+    columns = columns;
+    hasUnsavedChanges = true;
+  }
+
+  function handleKeydown(e: KeyboardEvent, rowIndex?: number, colIndex?: number) {
+    // Handle Ctrl+A or Cmd+A to select all text in the current cell
+    if ((e.ctrlKey || e.metaKey) && e.key === "a") {
+      e.preventDefault();
+      const input = e.target as HTMLInputElement;
+      input.select();
+    }
+
+    // Handle Tab at last cell of last row - auto create new row
+    if (
+      e.key === "Tab" &&
+      !e.shiftKey &&
+      rowIndex !== undefined &&
+      colIndex !== undefined &&
+      rowIndex === rows.length - 1 &&
+      colIndex === columns.length - 1
+    ) {
+      e.preventDefault();
+      addRow();
+      // Focus first cell of new row after DOM updates
+      setTimeout(() => {
+        const newRowInputs = document.querySelectorAll(
+          `[data-row="${rows.length - 1}"]`
+        );
+        if (newRowInputs.length > 0) {
+          (newRowInputs[0] as HTMLInputElement).focus();
+        }
+      }, 0);
+    }
+  }
+
+  function generateCSV(): string {
+    const header = columns.join(",");
+    const dataRows = rows.map((row) =>
+      row.map((cell) => {
+        // Escape quotes and wrap in quotes if contains comma or quote
+        if (cell.includes(",") || cell.includes('"') || cell.includes("\n")) {
+          return `"${cell.replace(/"/g, '""')}"`;
+        }
+        return cell;
+      }).join(",")
+    );
+    return [header, ...dataRows].join("\n");
+  }
+
+  function generateModelYAML(csvPath: string): string {
+    return `# Model YAML
+# Reference documentation: https://docs.rilldata.com/reference/project-files/models
+
+type: model
+materialize: true
+
+connector: duckdb
+sql: "select * from read_csv('${csvPath}', auto_detect=true, ignore_errors=1, header=true)"
+`;
+  }
+
+  async function getUniqueBaseName(name: string): Promise<string> {
+    // Get existing files in both directories
+    const [dataFiles, modelFiles] = await Promise.all([
+      getFileNamesInDirectory(queryClient, instanceId, "/data"),
+      getFileNamesInDirectory(queryClient, instanceId, "/models"),
+    ]);
+
+    const existingFiles = new Set([...dataFiles, ...modelFiles]);
+
+    // Check if base name files exist
+    if (
+      !existingFiles.has(`${name}.csv`) &&
+      !existingFiles.has(`${name}.yaml`)
+    ) {
+      return name;
+    }
+
+    // Auto-increment with _# suffix
+    let counter = 1;
+    while (
+      existingFiles.has(`${name}_${counter}.csv`) ||
+      existingFiles.has(`${name}_${counter}.yaml`)
+    ) {
+      counter++;
+    }
+
+    return `${name}_${counter}`;
+  }
+
+  async function handleSave() {
+    if (isSaving) return;
+    isSaving = true;
+
+    try {
+      // Get unique base name (auto-increment if files exist)
+      const uniqueBaseName = isEditing ? baseName : await getUniqueBaseName(baseName);
+
+      const csvPath = `data/${uniqueBaseName}.csv`;
+      const modelPath = `models/${uniqueBaseName}.yaml`;
+
+      const csvContent = generateCSV();
+      const modelContent = generateModelYAML(csvPath);
+
+      // Create CSV file
+      await $createFile.mutateAsync({
+        instanceId,
+        data: {
+          path: csvPath,
+          blob: csvContent,
+          create: true,
+          createOnly: false,
+        },
+      });
+
+      // Create model YAML file
+      await $createFile.mutateAsync({
+        instanceId,
+        data: {
+          path: modelPath,
+          blob: modelContent,
+          create: true,
+          createOnly: false,
+        },
+      });
+
+      hasUnsavedChanges = false;
+
+      // Navigate to the model file
+      await goto(`/files/${modelPath}`);
+    } catch (error) {
+      console.error("Failed to save mapping files:", error);
+    } finally {
+      isSaving = false;
+    }
+  }
+
+  function handleNameChange(newName: string) {
+    fileName = newName;
+    hasUnsavedChanges = true;
+  }
+</script>
+
+<WorkspaceContainer inspector={false}>
+  <header slot="header" class="flex flex-col py-2 gap-y-2">
+    <div class="second-level-wrapper">
+      <div class="flex gap-x-1 items-center w-full" class:truncate={!editing}>
+        <span class="flex-none">
+          <FileSpreadsheet size="19px" color="#10B981" />
+        </span>
+
+        <InputWithConfirm
+          bind:editing
+          size="md"
+          editable={true}
+          id="mapping-title-input"
+          textClass="text-xl font-semibold"
+          value={fileName}
+          onConfirm={handleNameChange}
+          showIndicator={hasUnsavedChanges}
+        />
+      </div>
+
+      <div class="flex items-center gap-x-2 w-fit flex-none">
+        <Button
+          type="primary"
+          disabled={isSaving}
+          onClick={handleSave}
+        >
+          <Save size="14px" />
+          {isSaving ? "Saving..." : "Save"}
+        </Button>
+      </div>
+    </div>
+  </header>
+
+  <div slot="body" class="h-full overflow-hidden overflow-y-auto p-4">
+    <div class="flex flex-col gap-4">
+      <div class="flex gap-2">
+        <Button type="secondary" onClick={addColumn}>
+          <Plus size="14px" /> Add Column
+        </Button>
+        <Button type="secondary" onClick={addRow}>
+          <Plus size="14px" /> Add Row
+        </Button>
+      </div>
+
+      <div class="table-container border rounded-md overflow-auto">
+        <table class="w-full border-collapse">
+          <thead>
+            <tr class="bg-gray-50">
+              <th class="w-10 border-b border-r p-2 text-center text-gray-500 text-sm">
+                #
+              </th>
+              {#each columns as col, colIndex (colIndex)}
+                <th class="border-b border-r p-0 min-w-[150px]">
+                  <div class="flex items-center">
+                    <input
+                      type="text"
+                      value={col}
+                      on:input={(e) => updateColumnName(colIndex, e.currentTarget.value)}
+                      on:keydown={handleKeydown}
+                      class="flex-1 p-2 font-semibold text-sm bg-transparent border-none outline-none focus:bg-blue-50"
+                    />
+                    {#if columns.length > 1}
+                      <button
+                        class="p-1 text-gray-400 hover:text-red-500"
+                        on:click={() => removeColumn(colIndex)}
+                      >
+                        <Trash2 size="14px" />
+                      </button>
+                    {/if}
+                  </div>
+                </th>
+              {/each}
+              <th class="w-10 border-b p-2"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each rows as row, rowIndex (rowIndex)}
+              <tr class="hover:bg-gray-50">
+                <td class="border-b border-r p-2 text-center text-gray-500 text-sm bg-gray-50">
+                  {rowIndex + 1}
+                </td>
+                {#each row as cell, colIndex (colIndex)}
+                  <td class="border-b border-r p-0 bg-white">
+                    <input
+                      type="text"
+                      value={cell}
+                      data-row={rowIndex}
+                      data-col={colIndex}
+                      on:input={(e) => updateCell(rowIndex, colIndex, e.currentTarget.value)}
+                      on:keydown={(e) => handleKeydown(e, rowIndex, colIndex)}
+                      class="w-full p-2 text-sm bg-white border-none outline-none focus:bg-blue-50"
+                    />
+                  </td>
+                {/each}
+                <td class="border-b p-2 text-center">
+                  {#if rows.length > 1}
+                    <button
+                      class="p-1 text-gray-400 hover:text-red-500"
+                      on:click={() => removeRow(rowIndex)}
+                    >
+                      <Trash2 size="14px" />
+                    </button>
+                  {/if}
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</WorkspaceContainer>
+
+<style lang="postcss">
+  .second-level-wrapper {
+    @apply px-4 py-2 w-full h-7;
+    @apply flex justify-between gap-x-2;
+    @apply items-center;
+  }
+
+
+  table {
+    border-spacing: 0;
+  }
+
+  input:focus {
+    outline: none;
+  }
+</style>
diff --git a/web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.svelte b/web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.svelte
new file mode 100644
index 00000000000..6ca1b48acee
--- /dev/null
+++ b/web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+  import MappingWorkspace from "@rilldata/web-common/features/workspaces/MappingWorkspace.svelte";
+  import DeveloperChat from "@rilldata/web-common/features/chat/DeveloperChat.svelte";
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+
+  $: ({ fileArtifact, filePath } = data);
+  $: remoteContent = fileArtifact.remoteContent;
+
+  // Extract filename from path (e.g., "/data/mapping.csv" -> "mapping.csv")
+  $: fileName = filePath.split("/").pop() ?? "mapping.csv";
+
+  // Parse CSV content into columns and rows
+  function parseCSV(content: string): { columns: string[]; rows: string[][] } {
+    if (!content || content.trim() === "") {
+      return { columns: ["column1", "column2"], rows: [["", ""]] };
+    }
+
+    const lines = content.split("\n").filter((line) => line.trim() !== "");
+    if (lines.length === 0) {
+      return { columns: ["column1", "column2"], rows: [["", ""]] };
+    }
+
+    // Parse header
+    const columns = parseCSVLine(lines[0]);
+
+    // Parse data rows
+    const rows = lines.slice(1).map((line) => {
+      const cells = parseCSVLine(line);
+      // Ensure each row has the same number of cells as columns
+      while (cells.length < columns.length) {
+        cells.push("");
+      }
+      return cells.slice(0, columns.length);
+    });
+
+    // Ensure at least one row
+    if (rows.length === 0) {
+      rows.push(new Array(columns.length).fill(""));
+    }
+
+    return { columns, rows };
+  }
+
+  // Parse a single CSV line, handling quoted values
+  function parseCSVLine(line: string): string[] {
+    const result: string[] = [];
+    let current = "";
+    let inQuotes = false;
+
+    for (let i = 0; i < line.length; i++) {
+      const char = line[i];
+      const nextChar = line[i + 1];
+
+      if (inQuotes) {
+        if (char === '"' && nextChar === '"') {
+          current += '"';
+          i++; // Skip next quote
+        } else if (char === '"') {
+          inQuotes = false;
+        } else {
+          current += char;
+        }
+      } else {
+        if (char === '"') {
+          inQuotes = true;
+        } else if (char === ",") {
+          result.push(current);
+          current = "";
+        } else {
+          current += char;
+        }
+      }
+    }
+    result.push(current);
+
+    return result;
+  }
+
+  $: csvData = parseCSV($remoteContent ?? "");
+</script>
+
+<svelte:head>
+  <title>Rill Developer | Edit {fileName}</title>
+</svelte:head>
+
+<div class="flex h-full overflow-hidden">
+  <div class="flex-1 overflow-hidden">
+    <MappingWorkspace
+      initialName={fileName}
+      initialColumns={csvData.columns}
+      initialRows={csvData.rows}
+      isEditing={true}
+    />
+  </div>
+  <DeveloperChat />
+</div>
diff --git a/web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.ts b/web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.ts
new file mode 100644
index 00000000000..78c78ffecc8
--- /dev/null
+++ b/web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.ts
@@ -0,0 +1,37 @@
+import { addLeadingSlash } from "@rilldata/web-common/features/entity-management/entity-mappers.js";
+import { fileArtifacts } from "@rilldata/web-common/features/entity-management/file-artifacts.js";
+import { error, redirect } from "@sveltejs/kit";
+
+export const load = async ({ params: { file }, parent }) => {
+  const parentData = await parent();
+
+  if (!parentData.initialized) {
+    throw redirect(303, "/");
+  }
+
+  const path = addLeadingSlash(file);
+
+  // Only allow CSV files in the data folder
+  if (!path.startsWith("/data/") || !path.endsWith(".csv")) {
+    throw error(400, "Only CSV files in the data folder can be edited");
+  }
+
+  const fileArtifact = fileArtifacts.getFileArtifact(path);
+
+  try {
+    await fileArtifact.fetchContent();
+
+    return {
+      fileArtifact,
+      filePath: path,
+    };
+  } catch (e) {
+    const statusCode = e.response?.status;
+
+    if (statusCode === 404 || statusCode === 400) {
+      throw error(404, "File not found: " + path);
+    } else {
+      throw error(e.response?.status ?? 500, e.response?.data?.message ?? "Unknown error");
+    }
+  }
+};
diff --git a/web-local/src/routes/(application)/(workspace)/mapping/new/+page.svelte b/web-local/src/routes/(application)/(workspace)/mapping/new/+page.svelte
new file mode 100644
index 00000000000..97d277cbac7
--- /dev/null
+++ b/web-local/src/routes/(application)/(workspace)/mapping/new/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import MappingWorkspace from "@rilldata/web-common/features/workspaces/MappingWorkspace.svelte";
+  import DeveloperChat from "@rilldata/web-common/features/chat/DeveloperChat.svelte";
+</script>
+
+<svelte:head>
+  <title>Rill Developer | New Mapping File</title>
+</svelte:head>
+
+<div class="flex h-full overflow-hidden">
+  <div class="flex-1 overflow-hidden">
+    <MappingWorkspace />
+  </div>
+  <DeveloperChat />
+</div>

From 9ff036ed93e6c0dc8f55fa470f130590a1bc8db4 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:08:33 -0500
Subject: [PATCH 2/5] prettier

---
 .../entity-management/AddAssetButton.svelte   |  7 ++-
 .../workspaces/MappingWorkspace.svelte        | 49 +++++++++++--------
 .../mapping/edit/[...file]/+page.ts           |  5 +-
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/web-common/src/features/entity-management/AddAssetButton.svelte b/web-common/src/features/entity-management/AddAssetButton.svelte
index 55b819ed0dd..c5424d1f2aa 100644
--- a/web-common/src/features/entity-management/AddAssetButton.svelte
+++ b/web-common/src/features/entity-management/AddAssetButton.svelte
@@ -4,7 +4,12 @@
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import { getScreenNameFromPage } from "@rilldata/web-common/features/file-explorer/telemetry";
-  import { Database, Folder, PlusCircleIcon, FileSpreadsheet } from "lucide-svelte";
+  import {
+    Database,
+    Folder,
+    PlusCircleIcon,
+    FileSpreadsheet,
+  } from "lucide-svelte";
   import CaretDownIcon from "../../components/icons/CaretDownIcon.svelte";
   import File from "../../components/icons/File.svelte";
   import { behaviourEvent } from "../../metrics/initMetrics";
diff --git a/web-common/src/features/workspaces/MappingWorkspace.svelte b/web-common/src/features/workspaces/MappingWorkspace.svelte
index a124409cf18..9306327058b 100644
--- a/web-common/src/features/workspaces/MappingWorkspace.svelte
+++ b/web-common/src/features/workspaces/MappingWorkspace.svelte
@@ -78,7 +78,11 @@
     hasUnsavedChanges = true;
   }
 
-  function handleKeydown(e: KeyboardEvent, rowIndex?: number, colIndex?: number) {
+  function handleKeydown(
+    e: KeyboardEvent,
+    rowIndex?: number,
+    colIndex?: number,
+  ) {
     // Handle Ctrl+A or Cmd+A to select all text in the current cell
     if ((e.ctrlKey || e.metaKey) && e.key === "a") {
       e.preventDefault();
@@ -100,7 +104,7 @@
       // Focus first cell of new row after DOM updates
       setTimeout(() => {
         const newRowInputs = document.querySelectorAll(
-          `[data-row="${rows.length - 1}"]`
+          `[data-row="${rows.length - 1}"]`,
         );
         if (newRowInputs.length > 0) {
           (newRowInputs[0] as HTMLInputElement).focus();
@@ -112,13 +116,15 @@
   function generateCSV(): string {
     const header = columns.join(",");
     const dataRows = rows.map((row) =>
-      row.map((cell) => {
-        // Escape quotes and wrap in quotes if contains comma or quote
-        if (cell.includes(",") || cell.includes('"') || cell.includes("\n")) {
-          return `"${cell.replace(/"/g, '""')}"`;
-        }
-        return cell;
-      }).join(",")
+      row
+        .map((cell) => {
+          // Escape quotes and wrap in quotes if contains comma or quote
+          if (cell.includes(",") || cell.includes('"') || cell.includes("\n")) {
+            return `"${cell.replace(/"/g, '""')}"`;
+          }
+          return cell;
+        })
+        .join(","),
     );
     return [header, ...dataRows].join("\n");
   }
@@ -170,7 +176,9 @@ sql: "select * from read_csv('${csvPath}', auto_detect=true, ignore_errors=1, he
 
     try {
       // Get unique base name (auto-increment if files exist)
-      const uniqueBaseName = isEditing ? baseName : await getUniqueBaseName(baseName);
+      const uniqueBaseName = isEditing
+        ? baseName
+        : await getUniqueBaseName(baseName);
 
       const csvPath = `data/${uniqueBaseName}.csv`;
       const modelPath = `models/${uniqueBaseName}.yaml`;
@@ -238,11 +246,7 @@ sql: "select * from read_csv('${csvPath}', auto_detect=true, ignore_errors=1, he
       </div>
 
       <div class="flex items-center gap-x-2 w-fit flex-none">
-        <Button
-          type="primary"
-          disabled={isSaving}
-          onClick={handleSave}
-        >
+        <Button type="primary" disabled={isSaving} onClick={handleSave}>
           <Save size="14px" />
           {isSaving ? "Saving..." : "Save"}
         </Button>
@@ -265,7 +269,9 @@ sql: "select * from read_csv('${csvPath}', auto_detect=true, ignore_errors=1, he
         <table class="w-full border-collapse">
           <thead>
             <tr class="bg-gray-50">
-              <th class="w-10 border-b border-r p-2 text-center text-gray-500 text-sm">
+              <th
+                class="w-10 border-b border-r p-2 text-center text-gray-500 text-sm"
+              >
                 #
               </th>
               {#each columns as col, colIndex (colIndex)}
@@ -274,7 +280,8 @@ sql: "select * from read_csv('${csvPath}', auto_detect=true, ignore_errors=1, he
                     <input
                       type="text"
                       value={col}
-                      on:input={(e) => updateColumnName(colIndex, e.currentTarget.value)}
+                      on:input={(e) =>
+                        updateColumnName(colIndex, e.currentTarget.value)}
                       on:keydown={handleKeydown}
                       class="flex-1 p-2 font-semibold text-sm bg-transparent border-none outline-none focus:bg-blue-50"
                     />
@@ -295,7 +302,9 @@ sql: "select * from read_csv('${csvPath}', auto_detect=true, ignore_errors=1, he
           <tbody>
             {#each rows as row, rowIndex (rowIndex)}
               <tr class="hover:bg-gray-50">
-                <td class="border-b border-r p-2 text-center text-gray-500 text-sm bg-gray-50">
+                <td
+                  class="border-b border-r p-2 text-center text-gray-500 text-sm bg-gray-50"
+                >
                   {rowIndex + 1}
                 </td>
                 {#each row as cell, colIndex (colIndex)}
@@ -305,7 +314,8 @@ sql: "select * from read_csv('${csvPath}', auto_detect=true, ignore_errors=1, he
                       value={cell}
                       data-row={rowIndex}
                       data-col={colIndex}
-                      on:input={(e) => updateCell(rowIndex, colIndex, e.currentTarget.value)}
+                      on:input={(e) =>
+                        updateCell(rowIndex, colIndex, e.currentTarget.value)}
                       on:keydown={(e) => handleKeydown(e, rowIndex, colIndex)}
                       class="w-full p-2 text-sm bg-white border-none outline-none focus:bg-blue-50"
                     />
@@ -337,7 +347,6 @@ sql: "select * from read_csv('${csvPath}', auto_detect=true, ignore_errors=1, he
     @apply items-center;
   }
 
-
   table {
     border-spacing: 0;
   }
diff --git a/web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.ts b/web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.ts
index 78c78ffecc8..d27a3f1a5b5 100644
--- a/web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.ts
+++ b/web-local/src/routes/(application)/(workspace)/mapping/edit/[...file]/+page.ts
@@ -31,7 +31,10 @@ export const load = async ({ params: { file }, parent }) => {
     if (statusCode === 404 || statusCode === 400) {
       throw error(404, "File not found: " + path);
     } else {
-      throw error(e.response?.status ?? 500, e.response?.data?.message ?? "Unknown error");
+      throw error(
+        e.response?.status ?? 500,
+        e.response?.data?.message ?? "Unknown error",
+      );
     }
   }
 };

From 6677252dcce3037b2271a8eb3f5c1442de9a4f34 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:15:03 -0500
Subject: [PATCH 3/5] e2e

---
 web-local/tests/mapping.spec.ts | 260 ++++++++++++++++++++++++++++++++
 1 file changed, 260 insertions(+)
 create mode 100644 web-local/tests/mapping.spec.ts

diff --git a/web-local/tests/mapping.spec.ts b/web-local/tests/mapping.spec.ts
new file mode 100644
index 00000000000..bcc0d988a63
--- /dev/null
+++ b/web-local/tests/mapping.spec.ts
@@ -0,0 +1,260 @@
+import { expect } from "@playwright/test";
+import { test } from "./setup/base";
+import { waitForFileNavEntry, fileNotPresent } from "./utils/waitHelpers";
+import { deleteFile } from "./utils/commonHelpers";
+
+test.describe("mapping workspace", () => {
+  test.use({ project: "Blank" });
+
+  test("Create new mapping file from Add menu", async ({ page }) => {
+    // Click Add button
+    await page.getByRole("button", { name: "Add Asset" }).click();
+
+    // Navigate to More submenu
+    await page.getByRole("menuitem", { name: "More" }).click();
+
+    // Click Mapping file
+    await page.getByRole("menuitem", { name: "Mapping file" }).click();
+
+    // Should navigate to mapping workspace
+    await page.waitForURL(/\/mapping\/new/);
+
+    // Should see the default filename
+    await expect(page.locator("#mapping-title-input")).toHaveValue("mapping.csv");
+
+    // Should see Add Column and Add Row buttons
+    await expect(page.getByRole("button", { name: "Add Column" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Add Row" })).toBeVisible();
+
+    // Should see Save button
+    await expect(page.getByRole("button", { name: "Save" })).toBeVisible();
+
+    // Should see default columns
+    const columnHeaders = page.locator("thead input");
+    await expect(columnHeaders).toHaveCount(2);
+  });
+
+  test("Edit cells and columns", async ({ page }) => {
+    // Navigate to mapping workspace
+    await page.goto("/mapping/new");
+    await page.waitForURL(/\/mapping\/new/);
+
+    // Edit first column name
+    const firstColumnInput = page.locator("thead input").first();
+    await firstColumnInput.click();
+    await firstColumnInput.fill("name");
+
+    // Edit second column name
+    const secondColumnInput = page.locator("thead input").nth(1);
+    await secondColumnInput.click();
+    await secondColumnInput.fill("value");
+
+    // Edit first cell
+    const firstCell = page.locator("tbody input").first();
+    await firstCell.click();
+    await firstCell.fill("test_name");
+
+    // Edit second cell
+    const secondCell = page.locator("tbody input").nth(1);
+    await secondCell.click();
+    await secondCell.fill("test_value");
+
+    // Verify values are set
+    await expect(firstColumnInput).toHaveValue("name");
+    await expect(secondColumnInput).toHaveValue("value");
+    await expect(firstCell).toHaveValue("test_name");
+    await expect(secondCell).toHaveValue("test_value");
+  });
+
+  test("Add and remove columns", async ({ page }) => {
+    await page.goto("/mapping/new");
+    await page.waitForURL(/\/mapping\/new/);
+
+    // Initially 2 columns
+    await expect(page.locator("thead input")).toHaveCount(2);
+
+    // Add a column
+    await page.getByRole("button", { name: "Add Column" }).click();
+    await expect(page.locator("thead input")).toHaveCount(3);
+
+    // Remove a column (click the trash icon in header)
+    await page.locator("thead button").first().click();
+    await expect(page.locator("thead input")).toHaveCount(2);
+  });
+
+  test("Add and remove rows", async ({ page }) => {
+    await page.goto("/mapping/new");
+    await page.waitForURL(/\/mapping\/new/);
+
+    // Initially 1 row
+    await expect(page.locator("tbody tr")).toHaveCount(1);
+
+    // Add a row
+    await page.getByRole("button", { name: "Add Row" }).click();
+    await expect(page.locator("tbody tr")).toHaveCount(2);
+
+    // Add another row
+    await page.getByRole("button", { name: "Add Row" }).click();
+    await expect(page.locator("tbody tr")).toHaveCount(3);
+
+    // Remove a row (click trash icon)
+    await page.locator("tbody tr").first().locator("button").click();
+    await expect(page.locator("tbody tr")).toHaveCount(2);
+  });
+
+  test("Tab creates new row at last cell", async ({ page }) => {
+    await page.goto("/mapping/new");
+    await page.waitForURL(/\/mapping\/new/);
+
+    // Initially 1 row
+    await expect(page.locator("tbody tr")).toHaveCount(1);
+
+    // Focus the last cell (second column of first row)
+    const lastCell = page.locator("tbody input").last();
+    await lastCell.click();
+
+    // Press Tab
+    await page.keyboard.press("Tab");
+
+    // Should create a new row
+    await expect(page.locator("tbody tr")).toHaveCount(2);
+
+    // First cell of new row should be focused
+    const newRowFirstCell = page.locator('tbody input[data-row="1"][data-col="0"]');
+    await expect(newRowFirstCell).toBeFocused();
+  });
+
+  test("Ctrl+A selects all text in cell", async ({ page }) => {
+    await page.goto("/mapping/new");
+    await page.waitForURL(/\/mapping\/new/);
+
+    // Fill a cell with text
+    const firstCell = page.locator("tbody input").first();
+    await firstCell.click();
+    await firstCell.fill("test content");
+
+    // Use Ctrl+A (or Cmd+A on Mac)
+    const modifier = process.platform === "darwin" ? "Meta" : "Control";
+    await page.keyboard.press(`${modifier}+a`);
+
+    // Text should be selected - we can verify by typing and seeing it replaces
+    await page.keyboard.type("replaced");
+    await expect(firstCell).toHaveValue("replaced");
+  });
+
+  test("Save creates CSV and YAML files", async ({ page }) => {
+    await page.goto("/mapping/new");
+    await page.waitForURL(/\/mapping\/new/);
+
+    // Edit column names
+    const firstColumnInput = page.locator("thead input").first();
+    await firstColumnInput.click();
+    await firstColumnInput.fill("city");
+
+    const secondColumnInput = page.locator("thead input").nth(1);
+    await secondColumnInput.click();
+    await secondColumnInput.fill("country");
+
+    // Edit cells
+    const firstCell = page.locator("tbody input").first();
+    await firstCell.click();
+    await firstCell.fill("Paris");
+
+    const secondCell = page.locator("tbody input").nth(1);
+    await secondCell.click();
+    await secondCell.fill("France");
+
+    // Click Save
+    await page.getByRole("button", { name: "Save" }).click();
+
+    // Should navigate to the model file
+    await page.waitForURL(/\/files\/models\/mapping\.yaml/);
+
+    // CSV file should exist in nav
+    await waitForFileNavEntry(page, "/data/mapping.csv", false);
+
+    // Model file should exist in nav
+    await waitForFileNavEntry(page, "/models/mapping.yaml", false);
+
+    // Clean up
+    await deleteFile(page, "/data/mapping.csv");
+    await deleteFile(page, "/models/mapping.yaml");
+  });
+
+  test("Auto-increment filename when files exist", async ({ page }) => {
+    // Create first mapping
+    await page.goto("/mapping/new");
+    await page.waitForURL(/\/mapping\/new/);
+
+    await page.getByRole("button", { name: "Save" }).click();
+    await page.waitForURL(/\/files\/models\/mapping\.yaml/);
+
+    // Create second mapping - should auto-increment
+    await page.goto("/mapping/new");
+    await page.waitForURL(/\/mapping\/new/);
+
+    // Title should show mapping_1.csv
+    await expect(page.locator("#mapping-title-input")).toHaveValue("mapping_1.csv");
+
+    await page.getByRole("button", { name: "Save" }).click();
+    await page.waitForURL(/\/files\/models\/mapping_1\.yaml/);
+
+    // Verify both files exist
+    await waitForFileNavEntry(page, "/data/mapping.csv", false);
+    await waitForFileNavEntry(page, "/data/mapping_1.csv", false);
+    await waitForFileNavEntry(page, "/models/mapping.yaml", false);
+    await waitForFileNavEntry(page, "/models/mapping_1.yaml", false);
+
+    // Clean up
+    await deleteFile(page, "/data/mapping.csv");
+    await deleteFile(page, "/data/mapping_1.csv");
+    await deleteFile(page, "/models/mapping.yaml");
+    await deleteFile(page, "/models/mapping_1.yaml");
+  });
+
+  test("Edit existing CSV file", async ({ page }) => {
+    // First create a mapping file
+    await page.goto("/mapping/new");
+    await page.waitForURL(/\/mapping\/new/);
+
+    const firstCell = page.locator("tbody input").first();
+    await firstCell.click();
+    await firstCell.fill("original");
+
+    await page.getByRole("button", { name: "Save" }).click();
+    await page.waitForURL(/\/files\/models\/mapping\.yaml/);
+
+    // Navigate to CSV file
+    await page.getByLabel("/data/mapping.csv Nav Entry").click();
+    await page.waitForURL(/\/files\/data\/mapping\.csv/);
+
+    // Click Edit in Table button
+    await page.getByRole("button", { name: "Edit in Table" }).click();
+    await page.waitForURL(/\/mapping\/edit\/data\/mapping\.csv/);
+
+    // Verify the data is loaded
+    const loadedCell = page.locator("tbody input").first();
+    await expect(loadedCell).toHaveValue("original");
+
+    // Edit the cell
+    await loadedCell.click();
+    await loadedCell.fill("modified");
+
+    // Save
+    await page.getByRole("button", { name: "Save" }).click();
+    await page.waitForURL(/\/files\/models\/mapping\.yaml/);
+
+    // Go back to CSV and verify via Edit in Table
+    await page.getByLabel("/data/mapping.csv Nav Entry").click();
+    await page.waitForURL(/\/files\/data\/mapping\.csv/);
+    await page.getByRole("button", { name: "Edit in Table" }).click();
+    await page.waitForURL(/\/mapping\/edit\/data\/mapping\.csv/);
+
+    await expect(page.locator("tbody input").first()).toHaveValue("modified");
+
+    // Clean up
+    await page.goto("/");
+    await deleteFile(page, "/data/mapping.csv");
+    await deleteFile(page, "/models/mapping.yaml");
+  });
+});

From bf402e3aae5ea53aaaf7b48379bd9379637db220 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:19:54 -0500
Subject: [PATCH 4/5] prettier

---
 web-local/tests/mapping.spec.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web-local/tests/mapping.spec.ts b/web-local/tests/mapping.spec.ts
index bcc0d988a63..ce1411060e4 100644
--- a/web-local/tests/mapping.spec.ts
+++ b/web-local/tests/mapping.spec.ts
@@ -20,10 +20,14 @@ test.describe("mapping workspace", () => {
     await page.waitForURL(/\/mapping\/new/);
 
     // Should see the default filename
-    await expect(page.locator("#mapping-title-input")).toHaveValue("mapping.csv");
+    await expect(page.locator("#mapping-title-input")).toHaveValue(
+      "mapping.csv",
+    );
 
     // Should see Add Column and Add Row buttons
-    await expect(page.getByRole("button", { name: "Add Column" })).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Add Column" }),
+    ).toBeVisible();
     await expect(page.getByRole("button", { name: "Add Row" })).toBeVisible();
 
     // Should see Save button
@@ -120,7 +124,9 @@ test.describe("mapping workspace", () => {
     await expect(page.locator("tbody tr")).toHaveCount(2);
 
     // First cell of new row should be focused
-    const newRowFirstCell = page.locator('tbody input[data-row="1"][data-col="0"]');
+    const newRowFirstCell = page.locator(
+      'tbody input[data-row="1"][data-col="0"]',
+    );
     await expect(newRowFirstCell).toBeFocused();
   });
 
@@ -194,7 +200,9 @@ test.describe("mapping workspace", () => {
     await page.waitForURL(/\/mapping\/new/);
 
     // Title should show mapping_1.csv
-    await expect(page.locator("#mapping-title-input")).toHaveValue("mapping_1.csv");
+    await expect(page.locator("#mapping-title-input")).toHaveValue(
+      "mapping_1.csv",
+    );
 
     await page.getByRole("button", { name: "Save" }).click();
     await page.waitForURL(/\/files\/models\/mapping_1\.yaml/);

From b445dbecb887e73721d013aa505cc50f15010465 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 21 Jan 2026 17:00:07 -0500
Subject: [PATCH 5/5] qual

---
 web-local/tests/mapping.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-local/tests/mapping.spec.ts b/web-local/tests/mapping.spec.ts
index ce1411060e4..fb747b27ddc 100644
--- a/web-local/tests/mapping.spec.ts
+++ b/web-local/tests/mapping.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
 import { test } from "./setup/base";
-import { waitForFileNavEntry, fileNotPresent } from "./utils/waitHelpers";
+import { waitForFileNavEntry } from "./utils/waitHelpers";
 import { deleteFile } from "./utils/commonHelpers";
 
 test.describe("mapping workspace", () => {