feat(studio): rate sheet editor + CSV import (EBE-105)

RateSheetsScreen was list/detail only. Now full management:
- Editor: name + carrier picker (from references) + a services rate table
  (add/remove rows: service_code, service_name, currency, cost, transit_days).
- CSV import: paste service rows (header-aware) → parsed into services.
- Create/update/delete via GraphQL create/update/delete_rate_sheet; RateSheet type
  + list query extended with services { service_code service_name currency cost
  min_weight max_weight weight_unit transit_days }.
- Live-verified create-with-services + read-back + delete round-trip.
parity spec: row→editor (services table) + create-with-CSV-import (2).
tsc/build clean.

Author: claude

apps/studio/src/lib/karrio/hooks/resources.ts

@@ -180,6 +180,7 @@ export function useWorkflows() {
 // === Rate sheets (GraphQL) ==================================================
 const RATE_SHEETS_QUERY = `query { rate_sheets { edges { node {
   id name slug carrier_name
+  services { id service_code service_name currency cost min_weight max_weight weight_unit transit_days }
 } } } }`;
 
 export function useRateSheets() {
@@ -191,6 +192,36 @@ export function useRateSheets() {
   });
 }
 
+// Rate sheet create/update/delete (GraphQL). services is a list of service levels.
+const CREATE_RATE_SHEET = `mutation($input: CreateRateSheetMutationInput!) {
+  create_rate_sheet(input: $input) { rate_sheet { id slug } errors { field messages } }
+}`;
+const UPDATE_RATE_SHEET = `mutation($input: UpdateRateSheetMutationInput!) {
+  update_rate_sheet(input: $input) { rate_sheet { id slug } errors { field messages } }
+}`;
+const DELETE_RATE_SHEET = `mutation($input: DeleteMutationInput!) { delete_rate_sheet(input: $input) { id } }`;
+
+export function useSaveRateSheet() {
+  const ctx = useKarrioCtx();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (vars: { id?: string; data: Record<string, unknown> }) =>
+      graphql(ctx, vars.id ? UPDATE_RATE_SHEET : CREATE_RATE_SHEET, {
+        input: vars.id ? { id: vars.id, ...vars.data } : vars.data,
+      }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["rate-sheets"] }),
+  });
+}
+
+export function useDeleteRateSheet() {
+  const ctx = useKarrioCtx();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => graphql(ctx, DELETE_RATE_SHEET, { input: { id } }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["rate-sheets"] }),
+  });
+}
+
 // === Mutations: address / parcel / product (GraphQL) ========================
 const CREATE_ADDRESS = `mutation($input: CreateAddressInput!) {
   create_address(input: $input) {

apps/studio/src/lib/karrio/types.ts

@@ -307,11 +307,23 @@ export type Workflow = {
 // RateSheet: live OSS schema fields are id, name, slug, carrier_name.
 // `services_count` and `is_system` do not exist on the OSS RateSheetType and
 // will always be undefined when fetched from OSS; screens degrade gracefully.
+export type RateSheetService = {
+  id?: string;
+  service_code: string;
+  service_name: string;
+  currency?: string;
+  cost?: number;
+  min_weight?: number;
+  max_weight?: number;
+  weight_unit?: string;
+  transit_days?: number;
+};
 export type RateSheet = {
   id: string;
   name: string;
   slug?: string;
   carrier_name?: string;
+  services?: RateSheetService[];
   /** OSS: always undefined — not exposed by the OSS GraphQL schema */
   services_count?: number;
   /** OSS: always undefined — not exposed by the OSS GraphQL schema */

apps/studio/src/screens/govern/RateSheetsScreen.tsx

@@ -1,40 +1,49 @@
-// RateSheetsScreen.tsx — Govern › Rate sheets (dashboard parity).
+// RateSheetsScreen.tsx — Govern › Rate sheets. Full management: list + editor
+// (name, carrier, services rate table) + CSV import. (EBE-105)
 import { useMemo, useState } from "react";
 import { CARRIERS, CarrierLogo } from "~/components/ui/CarrierLogo";
 import { Icon } from "~/components/ui/icons";
 import { PageHeader, StateRow, TableFooter } from "~/components/ui/primitives";
-import { KV, KVGrid, Section } from "~/components/ui/detail";
-import { Sheet } from "~/components/ui/Sheet";
-import { useRateSheets } from "~/lib/karrio/hooks";
+import { Sheet, Field } from "~/components/ui/Sheet";
+import { useRateSheets, useSaveRateSheet, useDeleteRateSheet } from "~/lib/karrio/hooks";
+import { useReferences } from "~/lib/karrio/references";
 import { carrierKey } from "~/lib/karrio/display";
-import type { RateSheet } from "~/lib/karrio/types";
+import type { RateSheet, RateSheetService } from "~/lib/karrio/types";
+
+type EditorState = "closed" | "create" | { edit: RateSheet };
 
 export function RateSheetsScreen() {
-  const [preview, setPreview] = useState<RateSheet | null>(null);
+  const [editor, setEditor] = useState<EditorState>("closed");
   const { data, isLoading, isError, error } = useRateSheets();
   const rows = useMemo(() => data ?? [], [data]);
 
   return (
     <div className="page" data-testid="screen-ratesheets">
-      <PageHeader title="Rate sheets" actions={<button className="btn btn-primary"><Icon.Plus size={14} /> New rate sheet</button>} />
+      <PageHeader
+        title="Rate sheets"
+        actions={
+          <button className="btn btn-primary" onClick={() => setEditor("create")} data-testid="ratesheet-create">
+            <Icon.Plus size={14} /> New rate sheet
+          </button>
+        }
+      />
       <div className="card card-scroll">
         <table className="table">
-          <thead><tr><th>Name</th><th>Carrier</th><th>Services</th><th>Type</th><th className="actions-cell" /></tr></thead>
+          <thead><tr><th>Name</th><th>Carrier</th><th>Services</th><th className="actions-cell" /></tr></thead>
           <tbody>
-            {isLoading && <StateRow colSpan={5} kind="loading" message="Loading rate sheets…" />}
-            {isError && !isLoading && <StateRow colSpan={5} kind="error" message={(error as Error)?.message ?? "Failed to load"} />}
-            {!isLoading && !isError && rows.length === 0 && <StateRow colSpan={5} kind="empty" message="No rate sheets yet." />}
+            {isLoading && <StateRow colSpan={4} kind="loading" message="Loading rate sheets…" />}
+            {isError && !isLoading && <StateRow colSpan={4} kind="error" message={(error as Error)?.message ?? "Failed to load"} />}
+            {!isLoading && !isError && rows.length === 0 && <StateRow colSpan={4} kind="empty" message="No rate sheets yet." />}
             {rows.map((rs) => (
-              <tr key={rs.id} onClick={() => setPreview(rs)} data-testid={`ratesheet-row-${rs.id}`}>
+              <tr key={rs.id} onClick={() => setEditor({ edit: rs })} data-testid={`ratesheet-row-${rs.id}`}>
                 <td className="recipient-name">{rs.name}</td>
                 <td>
                   <div className="svc-cell">
                     <CarrierLogo carrier={carrierKey(rs.carrier_name)} size="sm" />
                     <span>{CARRIERS[carrierKey(rs.carrier_name)]?.name ?? rs.carrier_name ?? "—"}</span>
                   </div>
                 </td>
-                <td>{rs.services_count ?? "—"}</td>
-                <td><span className="tag">{rs.is_system ? "system" : "custom"}</span></td>
+                <td>{rs.services?.length ?? rs.services_count ?? 0}</td>
                 <td className="actions-cell" onClick={(e) => e.stopPropagation()}><span className="icon-action"><Icon.Dots size={14} /></span></td>
               </tr>
             ))}
@@ -43,20 +52,185 @@ export function RateSheetsScreen() {
         <TableFooter shown={rows.length} total={rows.length} noun="rate sheets" />
       </div>
 
-      {preview && (
-        <Sheet open onClose={() => setPreview(null)} size="md" crumb="Rate sheets" title={preview.name} id={preview.id}>
-          <div className="sheet-body-pad" data-testid="ratesheet-sheet-body">
-            <Section title="Details">
-              <KVGrid>
-                <KV label="Name">{preview.name}</KV>
-                <KV label="Carrier">{preview.carrier_name ?? "—"}</KV>
-                <KV label="Services">{preview.services_count ?? "—"}</KV>
-                <KV label="Type">{preview.is_system ? "System" : "Custom"}</KV>
-              </KVGrid>
-            </Section>
-          </div>
-        </Sheet>
+      {editor !== "closed" && (
+        <RateSheetEditor
+          key={editor === "create" ? "create" : editor.edit.id}
+          initial={editor === "create" ? undefined : editor.edit}
+          onClose={() => setEditor("closed")}
+        />
       )}
     </div>
   );
 }
+
+const CSV_COLUMNS = ["service_code", "service_name", "currency", "cost", "min_weight", "max_weight", "transit_days"] as const;
+const NUMERIC = new Set(["cost", "min_weight", "max_weight", "transit_days"]);
+
+// Parse a simple CSV (with or without a header row) into service rows.
+function parseCsv(text: string): RateSheetService[] {
+  const lines = text.split(/\r?\n/).map((l) => l.trim()).filter(Boolean);
+  if (lines.length === 0) return [];
+  let header = CSV_COLUMNS as readonly string[];
+  let start = 0;
+  if (lines[0].toLowerCase().includes("service_code")) {
+    header = lines[0].split(",").map((h) => h.trim());
+    start = 1;
+  }
+  const out: RateSheetService[] = [];
+  for (let i = start; i < lines.length; i++) {
+    const cells = lines[i].split(",").map((c) => c.trim());
+    const row: Record<string, unknown> = {};
+    header.forEach((h, idx) => {
+      const v = cells[idx];
+      if (v === undefined || v === "") return;
+      row[h] = NUMERIC.has(h) ? Number(v) : v;
+    });
+    if (row.service_code || row.service_name) {
+      out.push({
+        service_code: String(row.service_code ?? `svc_${i}`),
+        service_name: String(row.service_name ?? row.service_code ?? `Service ${i}`),
+        currency: (row.currency as string) ?? "USD",
+        cost: row.cost as number | undefined,
+        min_weight: row.min_weight as number | undefined,
+        max_weight: row.max_weight as number | undefined,
+        transit_days: row.transit_days as number | undefined,
+      });
+    }
+  }
+  return out;
+}
+
+function RateSheetEditor({ initial, onClose }: { initial?: RateSheet; onClose: () => void }) {
+  const { data: refs } = useReferences();
+  const carriers = useMemo<[string, string][]>(
+    () => Object.entries(refs?.carriers ?? {}).sort((a, b) => a[1].localeCompare(b[1])),
+    [refs],
+  );
+
+  const [name, setName] = useState(initial?.name ?? "");
+  const [carrier, setCarrier] = useState(initial?.carrier_name ?? "");
+  const [services, setServices] = useState<RateSheetService[]>(initial?.services ?? []);
+  const [csv, setCsv] = useState("");
+  const [err, setErr] = useState<string | null>(null);
+
+  const save = useSaveRateSheet();
+  const del = useDeleteRateSheet();
+
+  const addService = () =>
+    setServices((s) => [...s, { service_code: "", service_name: "", currency: "USD" }]);
+  const updateService = (i: number, patch: Partial<RateSheetService>) =>
+    setServices((s) => s.map((row, idx) => (idx === i ? { ...row, ...patch } : row)));
+  const removeService = (i: number) => setServices((s) => s.filter((_, idx) => idx !== i));
+
+  const importCsv = () => {
+    const parsed = parseCsv(csv);
+    if (parsed.length === 0) return setErr("No service rows found in the CSV.");
+    setServices((s) => [...s, ...parsed]);
+    setCsv("");
+    setErr(null);
+  };
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setErr(null);
+    if (!name.trim()) return setErr("A name is required.");
+    if (!carrier) return setErr("Select a carrier.");
+    const valid = services.filter((s) => s.service_code.trim() && s.service_name.trim());
+    if (valid.length === 0) return setErr("Add at least one service (code + name).");
+    try {
+      await save.mutateAsync({
+        id: initial?.id,
+        data: {
+          name: name.trim(),
+          carrier_name: carrier,
+          services: valid.map((s) => ({
+            service_code: s.service_code.trim(),
+            service_name: s.service_name.trim(),
+            currency: s.currency || "USD",
+            cost: s.cost,
+            min_weight: s.min_weight,
+            max_weight: s.max_weight,
+            weight_unit: s.weight_unit || "KG",
+            transit_days: s.transit_days,
+          })),
+        },
+      });
+      onClose();
+    } catch (e2) {
+      setErr((e2 as Error)?.message ?? "Could not save the rate sheet.");
+    }
+  };
+
+  const onDelete = async () => {
+    if (!initial) return;
+    try {
+      await del.mutateAsync(initial.id);
+      onClose();
+    } catch {
+      setErr("Could not delete the rate sheet.");
+    }
+  };
+
+  return (
+    <Sheet
+      open onClose={onClose} size="lg" crumb="Rate sheets"
+      title={initial ? "Edit rate sheet" : "New rate sheet"} id={initial?.id}
+      footer={
+        <>
+          {initial && <button className="btn" onClick={onDelete} disabled={del.isPending} data-testid="ratesheet-delete">Delete</button>}
+          <div style={{ flex: 1 }} />
+          <button className="btn" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" form="ratesheet-form" type="submit" disabled={save.isPending} data-testid="ratesheet-save">
+            {save.isPending ? "Saving…" : "Save rate sheet"}
+          </button>
+        </>
+      }
+    >
+      <form id="ratesheet-form" className="sheet-body-pad" onSubmit={onSubmit} data-testid="ratesheet-sheet-body">
+        <div className="kv-grid">
+          <Field label="Name *"><input className="field-input" value={name} onChange={(e) => setName(e.target.value)} data-testid="rs-name" /></Field>
+          <Field label="Carrier *">
+            <select className="field-input" value={carrier} onChange={(e) => setCarrier(e.target.value)} disabled={!!initial} data-testid="rs-carrier">
+              <option value="">Select a carrier…</option>
+              {carriers.map(([id, label]) => <option key={id} value={id}>{label}</option>)}
+            </select>
+          </Field>
+        </div>
+
+        <div className="section-head" style={{ display: "flex", alignItems: "center", marginTop: 14 }}>
+          Services &amp; rates
+          <button type="button" className="btn btn-sm" style={{ marginLeft: "auto" }} onClick={addService} data-testid="rs-add-service"><Icon.Plus size={12} /> Add service</button>
+        </div>
+        <table className="table" data-testid="rs-services">
+          <thead><tr><th>Code</th><th>Name</th><th>Currency</th><th>Cost</th><th>Transit</th><th /></tr></thead>
+          <tbody>
+            {services.length === 0 && <tr><td colSpan={6}><div className="state-row" style={{ fontSize: 12 }}>No services yet — add one or import a CSV below.</div></td></tr>}
+            {services.map((s, i) => (
+              <tr key={i} data-testid={`rs-service-${i}`}>
+                <td><input className="field-input mono" style={{ minWidth: 90 }} value={s.service_code} onChange={(e) => updateService(i, { service_code: e.target.value })} data-testid={`rs-service-code-${i}`} /></td>
+                <td><input className="field-input" style={{ minWidth: 120 }} value={s.service_name} onChange={(e) => updateService(i, { service_name: e.target.value })} data-testid={`rs-service-name-${i}`} /></td>
+                <td><input className="field-input" style={{ width: 64 }} value={s.currency ?? ""} onChange={(e) => updateService(i, { currency: e.target.value })} /></td>
+                <td><input className="field-input" style={{ width: 72 }} type="number" step="0.01" value={s.cost ?? ""} onChange={(e) => updateService(i, { cost: e.target.value === "" ? undefined : Number(e.target.value) })} /></td>
+                <td><input className="field-input" style={{ width: 56 }} type="number" value={s.transit_days ?? ""} onChange={(e) => updateService(i, { transit_days: e.target.value === "" ? undefined : Number(e.target.value) })} /></td>
+                <td><button type="button" className="icon-action" onClick={() => removeService(i)} data-testid={`rs-service-remove-${i}`}><Icon.X size={13} /></button></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        <div className="section-head" style={{ marginTop: 14 }}>Import CSV</div>
+        <textarea
+          className="field-input mono"
+          style={{ width: "100%", height: 90, fontSize: 12 }}
+          placeholder="service_code,service_name,currency,cost,min_weight,max_weight,transit_days"
+          value={csv}
+          onChange={(e) => setCsv(e.target.value)}
+          data-testid="rs-csv"
+        />
+        <button type="button" className="btn btn-sm" style={{ marginTop: 6 }} onClick={importCsv} data-testid="rs-csv-import"><Icon.Download size={12} /> Import services from CSV</button>
+
+        {err && <div className="auth-error" data-testid="ratesheet-form-error">{err}</div>}
+      </form>
+    </Sheet>
+  );
+}

packages/e2e/tests/studio/parity.spec.ts

@@ -65,11 +65,30 @@ test.describe("Dashboard parity screens", () => {
     await expect(page.getByTestId("workflow-sheet-body")).toBeVisible();
   });
 
-  test("Rate sheets: list + row → sheet", async ({ page }) => {
+  test("Rate sheets: list + row → editor", async ({ page }) => {
     await page.goto("/ratesheets");
     await expect(page.getByTestId("ratesheet-row-rs_1")).toContainText("UPS Negotiated");
     await page.getByTestId("ratesheet-row-rs_1").click();
     await expect(page.getByTestId("ratesheet-sheet-body")).toBeVisible();
+    await expect(page.getByTestId("rs-services")).toBeVisible();
+  });
+
+  test("Rate sheets: create with CSV import of services", async ({ page }) => {
+    await page.route("**/v1/references**", (route) =>
+      route.fulfill({ status: 200, headers: { "content-type": "application/json", "access-control-allow-origin": "*" }, body: JSON.stringify({ carriers: { ups: "UPS", fedex: "FedEx" }, connection_fields: {} }) }));
+    await page.goto("/ratesheets");
+    await expect(page.getByTestId("ratesheet-row-rs_1")).toBeVisible();
+    await page.getByTestId("ratesheet-create").click();
+    await expect(page.getByTestId("ratesheet-sheet-body")).toBeVisible();
+    await page.getByTestId("rs-name").fill("My negotiated rates");
+    await page.getByTestId("rs-carrier").selectOption("fedex");
+    // Import services from CSV.
+    await page.getByTestId("rs-csv").fill("service_code,service_name,currency,cost,transit_days\nfedex_ground,Ground,USD,9.99,3\nfedex_2day,2 Day,USD,18.5,2");
+    await page.getByTestId("rs-csv-import").click();
+    await expect(page.getByTestId("rs-service-code-0")).toHaveValue("fedex_ground");
+    await expect(page.getByTestId("rs-service-code-1")).toHaveValue("fedex_2day");
+    await page.getByTestId("ratesheet-save").click();
+    await expect(page.getByTestId("ratesheet-sheet-body")).toHaveCount(0);
   });
 
   test("Usage: plan + metrics + trend charts render", async ({ page }) => {