feat(project-picker): show auto-derived project code in parent typeahead

t-paliad-222 follow-up — wire .code into the parent-project picker so
two same-titled projects in different trees can be disambiguated by
their auto-derived dotted code. Search includes the code; the badge
renders only when distinct from the manual reference.

Excel __meta sheet still pending — the JSON code field is populated
by PopulateProjectCodes for every list payload, so the export
generator only needs to add one row in a follow-up shift.

frontend/src/client/project-form.ts

@@ -8,6 +8,11 @@ export interface ProjectMini {
   title: string;
   type: string;
   reference?: string | null;
+  // t-paliad-222 / m/paliad#50: auto-derived dotted project code from
+  // the ancestor tree. Populated by the service projection on every
+  // /api/projects response, so the picker can show the code without an
+  // extra fetch.
+  code?: string;
 }
 
 export interface ProjectFormState {
@@ -90,18 +95,28 @@ export function initParentPicker() {
     }
     const matches = parentCandidates
       .filter((p) => {
-        const hay = (p.title + " " + (p.reference || "")).toLowerCase();
+        // Search across title + manual reference + auto-derived code
+        // so the user can type "EXMPL" or "INF.CFI" and find the row.
+        const hay = (p.title + " " + (p.reference || "") + " " + (p.code || "")).toLowerCase();
         return hay.includes(q);
       })
       .slice(0, 8);
     sugs.innerHTML = matches
-      .map(
-        (p) =>
-          `<div class="collab-suggestion" data-id="${esc(p.id)}" data-title="${esc(p.title)}">
+      .map((p) => {
+        // Render the auto-derived code (if any, and distinct from
+        // reference) as a small mono badge on the right so the user
+        // can disambiguate two same-titled projects by their tree
+        // position. Single template literal kept readable inline.
+        const code = p.code && p.code !== (p.reference || "") ? p.code : "";
+        const codeBadge = code
+          ? `<span class="entity-ref entity-ref-code">${esc(code)}</span>`
+          : "";
+        return `<div class="collab-suggestion" data-id="${esc(p.id)}" data-title="${esc(p.title)}">
             <strong>${esc(p.title)}</strong>
             <span class="entity-type-chip entity-type-${esc(p.type)}">${esc(tDyn("projects.type." + p.type) || p.type)}</span>
-          </div>`,
-      )
+            ${codeBadge}
+          </div>`;
+      })
       .join("");
     sugs.querySelectorAll<HTMLDivElement>(".collab-suggestion").forEach((el) => {
       el.addEventListener("click", () => {