--- /home/ray/ARMOR/apps/shire-mobile/limbforge-workspace/static/index.html	2026-08-05 11:53:39.542553077 +0800
+++ /tmp/shire-limbforge-oi.f8UkEb/stage/index.html	2026-08-06 16:33:50.014258822 +0800
@@ -814,6 +814,37 @@
                                     Yes — osseointegration
                                 </option>
                             </select>
+<span
+    class="shire-oi-hardware-field"
+    data-oi-source="project-oi"
+    style="display:none;margin-top:10px"
+>
+    <span style="display:block;margin-bottom:6px">
+        Osseointegration hardware type
+    </span>
+
+    <select id="project-oi-type">
+        <option value="none">
+            Select exact OI hardware type
+        </option>
+
+        <option value="dual_cone">
+            Dual Cone
+        </option>
+
+        <option value="legacy_abutment">
+            Legacy Abutment
+        </option>
+    </select>
+
+    <small
+        style="display:block;margin-top:6px;color:#94a3b8"
+    >
+        Required for the correct OI safety workflow.
+        This does not authorise manufacturing.
+    </small>
+</span>
+
                         </label>
 
                         <label>
@@ -993,6 +1024,37 @@
                         Yes — osseointegration
                     </option>
                 </select>
+<span
+    class="shire-oi-hardware-field"
+    data-oi-source="new-project-oi"
+    style="display:none;margin-top:10px"
+>
+    <span style="display:block;margin-bottom:6px">
+        Osseointegration hardware type
+    </span>
+
+    <select id="new-project-oi-type">
+        <option value="none">
+            Select exact OI hardware type
+        </option>
+
+        <option value="dual_cone">
+            Dual Cone
+        </option>
+
+        <option value="legacy_abutment">
+            Legacy Abutment
+        </option>
+    </select>
+
+    <small
+        style="display:block;margin-top:6px;color:#94a3b8"
+    >
+        Required for the correct OI safety workflow.
+        This does not authorise manufacturing.
+    </small>
+</span>
+
             </label>
         </div>
 
@@ -1189,6 +1251,11 @@
         elements.projectCoverClass.value = project.cover_class;
         elements.projectOi.value =
             String(project.osseointegration);
+        document.querySelector(
+            "#project-oi-type"
+        ).value = project.oi_type || "none";
+
+        shireSyncOiHardwareControls();
         elements.projectSpecialist.value =
             project.specialist_name;
         elements.projectClinic.value = project.clinic_name;
@@ -1380,12 +1447,26 @@
                     document.querySelector(
                         "#new-project-oi"
                     ).value === "true",
+                oi_type:
+                    document.querySelector(
+                        "#new-project-oi"
+                    ).value === "true"
+                        ? document.querySelector(
+                            "#new-project-oi-type"
+                        ).value
+                        : "none",
             }),
         });
 
         elements.newProjectDialog.close();
         elements.newProjectForm.reset();
 
+        document.querySelector(
+            "#new-project-oi-type"
+        ).value = "none";
+
+        shireSyncOiHardwareControls();
+
         await loadProjects();
         await openProject(project.id);
 
@@ -1410,6 +1491,12 @@
                         elements.projectCoverClass.value,
                     osseointegration:
                         elements.projectOi.value === "true",
+                    oi_type:
+                        elements.projectOi.value === "true"
+                            ? document.querySelector(
+                                "#project-oi-type"
+                            ).value
+                            : "none",
                     specialist_name:
                         elements.projectSpecialist.value,
                     clinic_name:
@@ -1612,6 +1699,69 @@
     }
 
     start().catch(reportError);
+
+// SHIRE-LIMBFORGE-OI-UI-0001
+function shireOiEnabled(id) {
+    return (
+        document.querySelector(`#${id}`)?.value
+        === "true"
+    );
+}
+
+function shireSyncOiHardwareControl(
+    oiId,
+    typeId,
+) {
+    const enabled = shireOiEnabled(oiId);
+    const typeControl =
+        document.querySelector(`#${typeId}`);
+    const field = document.querySelector(
+        `[data-oi-source="${oiId}"]`
+    );
+
+    if (!typeControl || !field) {
+        return;
+    }
+
+    field.style.display = enabled
+        ? "block"
+        : "none";
+
+    typeControl.disabled = !enabled;
+
+    if (!enabled) {
+        typeControl.value = "none";
+    }
+}
+
+function shireSyncOiHardwareControls() {
+    shireSyncOiHardwareControl(
+        "project-oi",
+        "project-oi-type",
+    );
+
+    shireSyncOiHardwareControl(
+        "new-project-oi",
+        "new-project-oi-type",
+    );
+}
+
+document.querySelector(
+    "#project-oi"
+)?.addEventListener(
+    "change",
+    shireSyncOiHardwareControls,
+);
+
+document.querySelector(
+    "#new-project-oi"
+)?.addEventListener(
+    "change",
+    shireSyncOiHardwareControls,
+);
+
+shireSyncOiHardwareControls();
+
 </script>
 </body>
 </html>