From e8cfd7ea7b5c75128c13fb3dff79e114d69a0f4b Mon Sep 17 00:00:00 2001
From: Adam Daley <admdly@users.noreply.github.com>
Date: Sat, 8 Aug 2026 18:12:37 +0100
Subject: [PATCH] Rework the extension submission form's
 Publisher/License/select fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Several small UX passes on the "Submit an Extension" form
(src/components/ExtensionForm.astro), plus one catalogue filter fix:

- Publisher: replace the "Edit Developer Profile" text link (which was
  missing a space after the sentence) with an icon-only button, fixing
  the underlying cause too — the row was using `flex`+`gap` on a `<p>`
  mixing text and an inline element, which was quietly eating normal
  word-spacing across the whole sentence, not just before the link.
- Extension ID is now suggested live from Name (slugified to the
  server's `[a-z0-9]+(-[a-z0-9]+)*` pattern) and reordered above it,
  same override-once-edited pattern used throughout; Name/ID/Type
  reordered so naming happens before the id is suggested.
- Fixed two `<select>` fields (Type, Repository Host) missing `w-full`,
  and one on the homepage catalogue filter that had the wrong
  component class entirely (`input` instead of `select`, silently
  falling back to unstyled native rendering).
- License: replaced the free-text License Name input with a
  basecoat-css combobox searching the full current SPDX license list
  (spdx-license-ids), grouped into "Popular Licenses" (a presentational
  shortlist only — every id still comes from the same package, nothing
  is excluded from search) and "All Licenses (A-Z)", plus an
  "Other / Proprietary" option that reveals a custom-name field.
  Picking a recognized license auto-suggests its canonical
  https://spdx.org/licenses/<id>.html as the License URL. Submits
  through the existing license_spdx_id hidden input; extension-form.ts
  resolves the final license.name/spdx_id server-side so it's correct
  without JS too. Needed adding `basecoat-css/combobox` to the
  behavior modules this app imports (src/layouts/Base.astro) — it
  was never loaded before, unlike tabs/toast.
- Regenerated the extensions-v2 API client against the api repo's new
  license.spdx_id field (see the api repo's matching branch).

Also adds .claude/launch.json so the `run` skill can start this app's
dev server directly.
---
 .claude/launch.json                           |  11 +
 openapi/extensions-v2.json                    |   5 +
 package-lock.json                             |   7 +
 package.json                                  |   1 +
 src/components/ExtensionForm.astro            | 272 ++++++++++++++++--
 src/layouts/Base.astro                        |   1 +
 .../api/generated/extensions-v2/types.gen.ts  |   4 +
 src/lib/extension-form.ts                     |  42 ++-
 src/pages/account/extensions/[id]/edit.astro  |  24 +-
 src/pages/index.astro                         |   2 +-
 src/types/index.ts                            |   8 +
 test/extension-form.test.ts                   |  46 ++-
 12 files changed, 384 insertions(+), 39 deletions(-)
 create mode 100644 .claude/launch.json

diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 0000000..6e2aac9
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "extensions-dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 4321
+    }
+  ]
+}
diff --git a/openapi/extensions-v2.json b/openapi/extensions-v2.json
index 8a61019..66e34d7 100644
--- a/openapi/extensions-v2.json
+++ b/openapi/extensions-v2.json
@@ -171,6 +171,11 @@
             "minLength": 1,
             "maxLength": 100
           },
+          "spdx_id": {
+            "type": "string",
+            "description": "A current SPDX license identifier (https://spdx.org/licenses/). Omitted for custom or proprietary licenses.",
+            "example": "MIT"
+          },
           "URL": {
             "type": "string",
             "maxLength": 2048,
diff --git a/package-lock.json b/package-lock.json
index fde9d6a..cddba98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "marked": "^18.0.5",
         "sanitize-html": "^2.17.5",
         "semver": "^7.8.2",
+        "spdx-license-ids": "^3.0.23",
         "tailwindcss": "^4.3.0"
       },
       "devDependencies": {
@@ -6529,6 +6530,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.23",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.23.tgz",
+      "integrity": "sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==",
+      "license": "CC0-1.0"
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
diff --git a/package.json b/package.json
index cf1c602..c1b32fc 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "marked": "^18.0.5",
     "sanitize-html": "^2.17.5",
     "semver": "^7.8.2",
+    "spdx-license-ids": "^3.0.23",
     "tailwindcss": "^4.3.0"
   },
   "devDependencies": {
diff --git a/src/components/ExtensionForm.astro b/src/components/ExtensionForm.astro
index 187b9be..8cdfd95 100644
--- a/src/components/ExtensionForm.astro
+++ b/src/components/ExtensionForm.astro
@@ -1,8 +1,9 @@
 ---
-import { EXTENSION_TYPES, SOURCE_TYPES } from '@/types';
+import { EXTENSION_TYPES, SOURCE_TYPES, SPDX_LICENSE_IDS } from '@/types';
 import type { Developer, Extension } from '@/types';
-import { CircleAlert } from '@lucide/astro';
+import { CircleAlert, SquarePen } from '@lucide/astro';
 import { stripUrlScheme } from '@/lib/url-prefix';
+import { OTHER_LICENSE } from '@/lib/extension-form';
 
 interface Props {
   developer: Developer;
@@ -16,6 +17,38 @@ const isEdit = Boolean(extension);
 // nothing already published to carry through — an extension can reach this
 // form with no releases yet (rejected and never resubmitted).
 const requireRelease = !isEdit || extension!.releases.length === 0;
+
+const existingSpdxId = extension?.license.spdx_id;
+// An existing license only lands in the custom bucket when it truly isn't
+// one of the ids this form offers — covers both genuinely custom/proprietary
+// licenses and (defensively) a stored spdx_id this deployed list doesn't
+// recognize, e.g. after a downgrade.
+const isCustomLicense =
+  isEdit && (!existingSpdxId || !SPDX_LICENSE_IDS.includes(existingSpdxId));
+const licenseSelectValue = isCustomLicense
+  ? OTHER_LICENSE
+  : (existingSpdxId ?? '');
+
+// Surfaced first in the license combobox as a "Popular Licenses" group so
+// the common case doesn't need typing to find — a presentational shortcut
+// only. Every id here still comes from SPDX_LICENSE_IDS below; nothing
+// restricts submission to this set, and the full list remains searchable
+// underneath it.
+const POPULAR_SPDX_IDS = [
+  'MIT',
+  'Apache-2.0',
+  'GPL-2.0-only',
+  'GPL-3.0-only',
+  'AGPL-3.0-only',
+  'LGPL-3.0-only',
+  'MPL-2.0',
+  'BSD-2-Clause',
+  'BSD-3-Clause',
+  'ISC',
+  'Unlicense',
+] as const;
+const popularSpdxIds = new Set<string>(POPULAR_SPDX_IDS);
+const otherSpdxIds = SPDX_LICENSE_IDS.filter((id) => !popularSpdxIds.has(id));
 ---
 
 {
@@ -33,9 +66,20 @@ const requireRelease = !isEdit || extension!.releases.length === 0;
       <div role="group" aria-label="Extension fields" class="fieldset">
         <fieldset class="fieldset space-y-4">
           <legend>Publisher</legend>
-          <p>
-            Publishing as <strong>{developer.name}</strong> ({developer.id}).
-            <a href="/account/developer">Edit Developer Profile</a>
+          <p class="flex items-center gap-1">
+            <span>
+              Publishing as <strong>{developer.name}</strong> ({developer.id}).
+            </span>
+            <a
+              href="/account/developer"
+              class="btn"
+              data-variant="ghost"
+              data-size="icon-xs"
+              aria-label="Edit Developer Profile"
+              title="Edit Developer Profile"
+            >
+              <SquarePen class="size-4" />
+            </a>
           </p>
         </fieldset>
 
@@ -45,6 +89,19 @@ const requireRelease = !isEdit || extension!.releases.length === 0;
 
         <fieldset class="fieldset space-y-4">
           <legend>Extension</legend>
+          <div class="field">
+            <label for="name">
+              Name <span class="text-destructive">*</span>
+            </label>
+            <input
+              class="input"
+              type="text"
+              id="name"
+              name="name"
+              required
+              value={extension?.name}
+            />
+          </div>
           <div class="field">
             <label for="extension_id">
               Extension ID <span class="text-destructive">*</span>
@@ -59,13 +116,22 @@ const requireRelease = !isEdit || extension!.releases.length === 0;
               value={extension?.id}
               disabled={isEdit}
             />
-            {isEdit && <p>The ID can't be changed after submission.</p>}
+            {
+              isEdit ? (
+                <p>The ID can't be changed after submission.</p>
+              ) : (
+                <p class="text-muted-foreground">
+                  Suggested from the name above — edit if you'd like something
+                  different.
+                </p>
+              )
+            }
           </div>
           <div class="field">
             <label for="type">
               Type <span class="text-destructive">*</span>
             </label>
-            <select class="select" id="type" name="type" required>
+            <select class="select w-full" id="type" name="type" required>
               {
                 EXTENSION_TYPES.map((t) => (
                   <option value={t} selected={extension?.type === t}>
@@ -75,19 +141,6 @@ const requireRelease = !isEdit || extension!.releases.length === 0;
               }
             </select>
           </div>
-          <div class="field">
-            <label for="name">
-              Name <span class="text-destructive">*</span>
-            </label>
-            <input
-              class="input"
-              type="text"
-              id="name"
-              name="name"
-              required
-              value={extension?.name}
-            />
-          </div>
           <div class="field">
             <label for="description">
               Short Description <span class="text-destructive">*</span>
@@ -159,16 +212,108 @@ const requireRelease = !isEdit || extension!.releases.length === 0;
         <fieldset class="fieldset space-y-4">
           <legend>License</legend>
           <div class="field">
-            <label for="license_name">
-              License Name <span class="text-destructive">*</span>
+            <label for="license-search">
+              License <span class="text-destructive">*</span>
+            </label>
+            <div
+              id="license-combobox"
+              class="combobox w-full"
+              data-auto-highlight="true"
+            >
+              <input
+                type="text"
+                role="combobox"
+                id="license-search"
+                placeholder="Search SPDX licenses…"
+                autocomplete="off"
+                autocorrect="off"
+                spellcheck="false"
+                required
+                aria-autocomplete="list"
+                aria-expanded="false"
+                aria-controls="license-combobox-listbox"
+              />
+              <svg
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="combobox-trigger-icon"
+              >
+                <path d="m6 9 6 6 6-6"></path>
+              </svg>
+              <div
+                id="license-combobox-popover"
+                data-popover
+                aria-hidden="true"
+              >
+                <div
+                  role="listbox"
+                  id="license-combobox-listbox"
+                  class="scrollbar-sm max-h-70 overflow-y-auto"
+                  aria-orientation="vertical"
+                  data-empty="No matching license found."
+                >
+                  <div role="group" aria-labelledby="license-group-popular">
+                    <div role="heading" id="license-group-popular">
+                      Popular Licenses
+                    </div>
+                    {
+                      POPULAR_SPDX_IDS.map((id) => (
+                        <div role="option" data-value={id}>
+                          {id}
+                        </div>
+                      ))
+                    }
+                  </div>
+                  <hr role="separator" />
+                  <div role="group" aria-labelledby="license-group-all">
+                    <div role="heading" id="license-group-all">
+                      All Licenses (A–Z)
+                    </div>
+                    {
+                      otherSpdxIds.map((id) => (
+                        <div role="option" data-value={id}>
+                          {id}
+                        </div>
+                      ))
+                    }
+                  </div>
+                  <hr role="separator" />
+                  <div role="option" data-value={OTHER_LICENSE}>
+                    Other / Proprietary
+                  </div>
+                </div>
+              </div>
+              <input
+                type="hidden"
+                id="license_spdx_id"
+                name="license_spdx_id"
+                value={licenseSelectValue}
+              />
+            </div>
+          </div>
+          <div
+            class="field"
+            data-license-custom-field
+            hidden={!isCustomLicense}
+          >
+            <label for="license_name_custom">
+              Custom License Name <span class="text-destructive">*</span>
             </label>
             <input
               class="input"
               type="text"
-              id="license_name"
-              name="license_name"
-              required
-              value={extension?.license.name}
+              id="license_name_custom"
+              name="license_name_custom"
+              required={isCustomLicense}
+              value={isCustomLicense ? extension?.license.name : undefined}
             />
           </div>
           <div class="field">
@@ -200,7 +345,7 @@ const requireRelease = !isEdit || extension!.releases.length === 0;
           <legend>Source</legend>
           <div class="field">
             <label for="source_type">Repository Host</label>
-            <select class="select" id="source_type" name="source_type">
+            <select class="select w-full" id="source_type" name="source_type">
               {
                 SOURCE_TYPES.map((t) => (
                   <option value={t} selected={extension?.source.type === t}>
@@ -344,3 +489,76 @@ const requireRelease = !isEdit || extension!.releases.length === 0;
     </form>
   </section>
 </div>
+
+<script>
+  // Suggests an Extension ID from the Name field, matching the server's
+  // `[a-z0-9]+(-[a-z0-9]+)*` pattern. Stops once the user edits the ID
+  // directly, same as the slug-from-title pattern elsewhere (WordPress,
+  // GitHub repo creation, etc.) — a manual edit always wins. Only wired up
+  // for new extensions; the edit form disables this field entirely.
+  const nameInput = document.querySelector<HTMLInputElement>('#name');
+  const idInput = document.querySelector<HTMLInputElement>('#extension_id');
+
+  if (nameInput && idInput && !idInput.disabled) {
+    const slugify = (value: string) =>
+      value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+
+    let idEditedByUser = false;
+    idInput.addEventListener('input', () => {
+      idEditedByUser = true;
+    });
+    nameInput.addEventListener('input', () => {
+      if (!idEditedByUser) {
+        idInput.value = slugify(nameInput.value);
+      }
+    });
+  }
+</script>
+
+<script>
+  import { OTHER_LICENSE } from '@/lib/extension-form';
+
+  // Reveals the custom-name field only for "Other / Proprietary", and
+  // suggests each recognized license's canonical spdx.org page as the
+  // License URL — stops once the user edits that field directly, same
+  // override-wins rule as the ID slug above. The combobox (basecoat-css)
+  // submits through its own hidden #license_spdx_id input and reports
+  // picks via a `change` CustomEvent on the `.combobox` root rather than
+  // a native `change` on that input — see basecoat-css/dist/js/combobox.js.
+  const licenseCombobox =
+    document.querySelector<HTMLElement>('#license-combobox');
+  const customField = document.querySelector<HTMLElement>(
+    '[data-license-custom-field]',
+  );
+  const customInput = document.querySelector<HTMLInputElement>(
+    '#license_name_custom',
+  );
+  const urlInput = document.querySelector<HTMLInputElement>('#license_url');
+
+  if (licenseCombobox && customField && customInput) {
+    let urlEditedByUser = false;
+    urlInput?.addEventListener('input', () => {
+      urlEditedByUser = true;
+    });
+
+    licenseCombobox.addEventListener('change', (event) => {
+      // A native `change` from #license-search (e.g. typing then tabbing
+      // away without picking an option) bubbles up to this same element —
+      // only the combobox's own CustomEvent carries a real selection.
+      if (!(event instanceof CustomEvent)) return;
+
+      const value = (event as CustomEvent<{ value: string }>).detail.value;
+      const isOther = value === OTHER_LICENSE;
+      customField.hidden = !isOther;
+      customInput.required = isOther;
+
+      if (urlInput && !urlEditedByUser) {
+        urlInput.value =
+          !isOther && value ? `spdx.org/licenses/${value}.html` : '';
+      }
+    });
+  }
+</script>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index a1ddc4d..eee4b14 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -62,6 +62,7 @@ const { flash } = Astro.locals;
     </script>
     <script>
       import 'basecoat-css/basecoat';
+      import 'basecoat-css/combobox';
       import 'basecoat-css/tabs';
       import 'basecoat-css/toast';
     </script>
diff --git a/src/lib/api/generated/extensions-v2/types.gen.ts b/src/lib/api/generated/extensions-v2/types.gen.ts
index e0cd71e..6170da2 100644
--- a/src/lib/api/generated/extensions-v2/types.gen.ts
+++ b/src/lib/api/generated/extensions-v2/types.gen.ts
@@ -48,6 +48,10 @@ export type PublicDeveloper = {
 
 export type License = {
   name: string;
+  /**
+   * A current SPDX license identifier (https://spdx.org/licenses/). Omitted for custom or proprietary licenses.
+   */
+  spdx_id?: string;
   URL?: string;
 };
 
diff --git a/src/lib/extension-form.ts b/src/lib/extension-form.ts
index d5b15d8..9f3f718 100644
--- a/src/lib/extension-form.ts
+++ b/src/lib/extension-form.ts
@@ -1,4 +1,4 @@
-import { isExtensionType, isSourceType } from '@/types';
+import { isExtensionType, isSourceType, SPDX_LICENSE_IDS } from '@/types';
 import type { Extension, Release } from '@/types';
 import type { ExtensionCreate, ExtensionUpdate } from '@/lib/api/client';
 import { formString } from './form';
@@ -9,6 +9,41 @@ import { withHttpsScheme } from './url-prefix';
 // well-formed payload) — see the try/catch in new.astro/edit.astro.
 export class ExtensionValidationError extends Error {}
 
+// "Other / Proprietary" is a form-only sentinel, never a real spdx_id value
+// — buildLicense() reads it back out of license_spdx_id to decide whether
+// license_name_custom (vs. the spdx_id itself) becomes license.name. The
+// single export here is what ExtensionForm.astro and edit.astro both use,
+// rather than each hand-copying the string.
+export const OTHER_LICENSE = 'other';
+
+// The License field pair: a <select> of current SPDX ids (matching the api's
+// own spdx-license-ids-backed validation) plus an "Other / Proprietary"
+// sentinel that reveals a free-text name instead. Mirrors the server: a
+// recognized id becomes both `name` and `spdx_id`; "Other" carries only a
+// custom `name`.
+function buildLicense(form: FormData) {
+  const selected = formString(form, 'license_spdx_id');
+  const url = withHttpsScheme(formString(form, 'license_url'));
+
+  if (selected === OTHER_LICENSE) {
+    const customName = formString(form, 'license_name_custom');
+    if (!customName) {
+      throw new ExtensionValidationError(
+        'Enter a name for the custom or proprietary license.',
+      );
+    }
+    return { name: customName, URL: url };
+  }
+
+  if (!SPDX_LICENSE_IDS.includes(selected)) {
+    throw new ExtensionValidationError(
+      'Choose a license, or "Other / Proprietary" for one not listed.',
+    );
+  }
+
+  return { name: selected, spdx_id: selected, URL: url };
+}
+
 // Shared by both builders below. A new release is only appended when
 // version_tag is filled — required when there are no existing releases to
 // carry through (a brand new extension, or one resubmitting after rejection
@@ -83,10 +118,7 @@ function buildContent(
     description: str('description'),
     releases,
     website: withHttpsScheme(str('website')) ?? '',
-    license: {
-      name: str('license_name'),
-      URL: withHttpsScheme(str('license_url')),
-    },
+    license: buildLicense(form),
     icon_url: withHttpsScheme(str('icon_url')),
     readme: str('readme'),
     source: {
diff --git a/src/pages/account/extensions/[id]/edit.astro b/src/pages/account/extensions/[id]/edit.astro
index f7c5a34..8cca683 100644
--- a/src/pages/account/extensions/[id]/edit.astro
+++ b/src/pages/account/extensions/[id]/edit.astro
@@ -8,10 +8,12 @@ import { getOwnedExtension } from '@/lib/extensions-data';
 import {
   buildExtensionUpdatePayload,
   ExtensionValidationError,
+  OTHER_LICENSE,
 } from '@/lib/extension-form';
 import { formString } from '@/lib/form';
 import { formatDate } from '@/lib/format-date';
 import { setFlash } from '@/lib/flash';
+import { SPDX_LICENSE_IDS } from '@/types';
 import type { Extension } from '@/types';
 
 const env = Astro.locals.env;
@@ -62,6 +64,14 @@ let submitted: Extension | null = null;
 // form in that state (see the pendingRevision branch below).
 if (!owned.pendingRevision && Astro.request.method === 'POST') {
   const form = await Astro.request.formData();
+  // Mirrors buildLicense() in extension-form.ts, minus the validation —
+  // this is a best-effort echo of what the user submitted, not the
+  // payload itself, so an incomplete choice here is fine to redisplay
+  // as-is rather than reject.
+  const selectedLicenseId = formString(form, 'license_spdx_id');
+  const isRecognizedLicense =
+    selectedLicenseId !== OTHER_LICENSE &&
+    SPDX_LICENSE_IDS.includes(selectedLicenseId);
   submitted = {
     ...base,
     type: formString(form, 'type') as Extension['type'],
@@ -70,10 +80,16 @@ if (!owned.pendingRevision && Astro.request.method === 'POST') {
     website: formString(form, 'website'),
     icon_url: formString(form, 'icon_url') || undefined,
     readme: formString(form, 'readme'),
-    license: {
-      name: formString(form, 'license_name'),
-      URL: formString(form, 'license_url') || undefined,
-    },
+    license: isRecognizedLicense
+      ? {
+          name: selectedLicenseId,
+          spdx_id: selectedLicenseId,
+          URL: formString(form, 'license_url') || undefined,
+        }
+      : {
+          name: formString(form, 'license_name_custom'),
+          URL: formString(form, 'license_url') || undefined,
+        },
     source: {
       type: formString(form, 'source_type') as Extension['source']['type'],
       repo: formString(form, 'source_repo'),
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 58109b1..16b4758 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -92,7 +92,7 @@ const hasNextPage = Boolean(
         <div class="grid gap-4 sm:grid-cols-2 sm:items-end">
           <label class="flex flex-col gap-2">
             <span class="font-medium text-sm">Extension Type</span>
-            <select name="type" class="input w-full">
+            <select name="type" class="select w-full">
               <option value="">All Types</option>
               {
                 EXTENSION_TYPES.map((type) => (
diff --git a/src/types/index.ts b/src/types/index.ts
index 75ee492..d3f10fc 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,12 @@
 import gt from 'semver/functions/gt.js';
 import lt from 'semver/functions/lt.js';
+import SPDX_LICENSE_IDS from 'spdx-license-ids/index.json';
+
+// Current (non-deprecated) SPDX license identifiers — same package and same
+// list the api repo validates `license.spdx_id` against, so a license this
+// form offers is never rejected by the api. Not itself the source of truth;
+// re-exported so the id list only has one import site in this repo.
+export { SPDX_LICENSE_IDS };
 
 export const EXTENSION_TYPES = [
   'mod',
@@ -52,6 +59,7 @@ export type Repository = {
 
 export type License = {
   name: string;
+  spdx_id?: string;
   URL?: string;
 };
 
diff --git a/test/extension-form.test.ts b/test/extension-form.test.ts
index cbcf496..7d01549 100644
--- a/test/extension-form.test.ts
+++ b/test/extension-form.test.ts
@@ -13,7 +13,7 @@ function extensionForm(overrides: Record<string, string> = {}): FormData {
   form.set('name', 'Example');
   form.set('description', 'An example extension.');
   form.set('website', 'example.test');
-  form.set('license_name', 'MIT');
+  form.set('license_spdx_id', 'MIT');
   form.set('license_url', 'https://example.test/license');
   form.set('readme', '# Example');
   form.set('source_type', 'github');
@@ -42,7 +42,7 @@ const publishedExtension: Extension = {
     },
   ],
   website: 'https://example.test',
-  license: { name: 'MIT' },
+  license: { name: 'MIT', spdx_id: 'MIT' },
   readme: '# Example',
   source: { type: 'github', repo: 'fossbilling/example' },
   version: '0.9.0',
@@ -90,6 +90,48 @@ describe('buildExtensionCreatePayload', () => {
       ExtensionValidationError,
     );
   });
+
+  it('sets both name and spdx_id for a recognized license', () => {
+    const payload = buildExtensionCreatePayload(
+      extensionForm({ license_spdx_id: 'Apache-2.0' }),
+    );
+
+    expect(payload.license).toEqual({
+      name: 'Apache-2.0',
+      spdx_id: 'Apache-2.0',
+      URL: 'https://example.test/license',
+    });
+  });
+
+  it('rejects a license_spdx_id that is not a real SPDX identifier', () => {
+    const form = extensionForm({ license_spdx_id: 'not-a-real-license' });
+
+    expect(() => buildExtensionCreatePayload(form)).toThrow(
+      ExtensionValidationError,
+    );
+  });
+
+  it('uses the custom name with no spdx_id for Other / Proprietary', () => {
+    const payload = buildExtensionCreatePayload(
+      extensionForm({
+        license_spdx_id: 'other',
+        license_name_custom: 'Acme Proprietary License',
+      }),
+    );
+
+    expect(payload.license).toEqual({
+      name: 'Acme Proprietary License',
+      URL: 'https://example.test/license',
+    });
+  });
+
+  it('requires a custom name when Other / Proprietary is selected', () => {
+    const form = extensionForm({ license_spdx_id: 'other' });
+
+    expect(() => buildExtensionCreatePayload(form)).toThrow(
+      ExtensionValidationError,
+    );
+  });
 });
 
 describe('buildExtensionUpdatePayload', () => {