frontend/src/productsApi.dialect.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { dialectLabel } from "./productsApi";
+
+describe("dialectLabel", () => {
+  it("labels canonical", () => expect(dialectLabel("canonical")).toBe("Canonical format"));
+  it("labels shopify as mapped (PUC-6)", () =>
+    expect(dialectLabel("shopify")).toBe("Shopify product CSV — mapped"));
+  it("passes through an unknown dialect verbatim", () =>
+    expect(dialectLabel("weird")).toBe("weird"));
+});

frontend/src/productsApi.ts

@@ -50,7 +50,9 @@ export type Result<T> = { ok: true; value: T } | { ok: false; error: ApiError; s
 
 // One label rule for CSV dialects, shared by Products history / preview / run detail.
 export function dialectLabel(d: string): string {
-  return d === "canonical" ? "Canonical format" : d;
+  if (d === "canonical") return "Canonical format";
+  if (d === "shopify") return "Shopify product CSV — mapped";
+  return d;
 }
 
 export type ExportStatus = "all" | "active" | "draft" | "archived";

frontend/src/screens/products/ImportUpload.tsx

@@ -50,9 +50,13 @@ export default function ImportUpload() {
         <span className="note">CSV, up to 5,000 rows</span>
       </label>
       <p className="note">
-        Works with the canonical format.{" "}
+        Works with the canonical format or a Shopify product CSV.{" "}
         <a href="/api/products/sample.csv" download>
           Download sample CSV
+        </a>{" "}
+        ·{" "}
+        <a href="/api/products/columns.md" target="_blank" rel="noopener">
+          Column reference
         </a>
       </p>
     </div>

frontend/src/screens/products/ProductsPage.tsx

@@ -113,6 +113,10 @@ export default function ProductsPage() {
           <p className="note">
             <a href="/api/products/sample.csv" download>
               Download sample CSV
+            </a>{" "}
+            ·{" "}
+            <a href="/api/products/columns.md" target="_blank" rel="noopener">
+              Column reference
             </a>
           </p>
         </div>