diff --git a/services/web-ui/public/shell.jsx b/services/web-ui/public/shell.jsx
index 58345d6..4d4f148 100644
--- a/services/web-ui/public/shell.jsx
+++ b/services/web-ui/public/shell.jsx
@@ -162,6 +162,26 @@ function Topbar({ crumbs, onNavigate, right }) {
   );
 }
 
+// General-purpose read-only form field used by recorder modal and other forms.
+// Renders as a labeled select (when select=true) or text input.
+function Field({ label, value, select, children }) {
+  return (
+    <div className="field">
+      <label className="field-label">{label}</label>
+      {children || (select
+        ? (
+          <select className="field-input" defaultValue={value} style={{ appearance: 'auto' }}>
+            <option value={value}>{value}</option>
+          </select>
+        ) : (
+          <input className="field-input" defaultValue={value} readOnly />
+        )
+      )}
+    </div>
+  );
+}
+
 window.Sidebar = Sidebar;
 window.Topbar = Topbar;
 window.NAV_TREE = NAV_TREE;
+window.Field = Field;