type: voice, Requirement.value, playable resource cards

A voice requirement records in the browser and ships PCM to the relay
as one binary frame (voice.js, same mount/stop contract as gesture);
its value becomes {key, digest, duration_ms}. Requirement.value
presets a field and, on a dynamic page, takes the URL segment - so
value: "{key}" tells the voice field where to record. A url resource
source takes the segment too. Resource items with an https `audio`
field render an <audio> player. The gesture widget reports picks to
the relay for ranking.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/app.rs

@@ -498,6 +498,28 @@ mod prosekit {
 // prosekit's hidden-input bridge for the value, yes.js's typed-handle
 // lifecycle for cleanup - it may own a live WebSocket to a
 // redoal-relay, which SPA navigation must close (`stop()`).
+#[cfg(feature = "hydrate")]
+#[cfg(feature = "hydrate")]
+mod voice {
+    use wasm_bindgen::prelude::*;
+
+    #[wasm_bindgen(module = "/voice.js")]
+    extern "C" {
+        pub type VoiceWidget;
+
+        #[wasm_bindgen(js_name = mountVoice)]
+        pub fn mount_voice(
+            container: &web_sys::HtmlDivElement,
+            hidden: &web_sys::HtmlInputElement,
+            relay_url: &str,
+            key: &str,
+        ) -> VoiceWidget;
+
+        #[wasm_bindgen(method)]
+        pub fn stop(this: &VoiceWidget);
+    }
+}
+
 #[cfg(feature = "hydrate")]
 mod gesture {
     use wasm_bindgen::prelude::*;
@@ -766,12 +788,16 @@ fn AlternativeCard(
                     .or_insert_with(|| RwSignal::new(Vec::new()));
                 select_multi.insert(req.name.clone(), req.multiple);
             } else {
-                if req.kind == "gesture" {
+                // Widget-owned fields hold JSON objects, not strings.
+                if req.kind == "gesture" || req.kind == "voice" {
                     gesture_fields.insert(req.name.clone());
                 }
+                // A voice field's preset is the key it records at,
+                // not a value to submit.
+                let preset = if req.kind == "voice" { String::new() } else { req.value.clone().unwrap_or_default() };
                 field_map
                     .entry(req.name.clone())
-                    .or_insert_with(|| RwSignal::new(String::new()));
+                    .or_insert_with(|| RwSignal::new(preset));
             }
         }
     }
@@ -1138,6 +1164,54 @@ fn AlternativeCard(
                                                     .into_any();
                                                 }
 
+                                                if req.kind == "voice" {
+                                                    let container_ref: NodeRef<leptos::html::Div> = NodeRef::new();
+                                                    let hidden_ref: NodeRef<leptos::html::Input> = NodeRef::new();
+
+                                                    #[cfg(feature = "hydrate")]
+                                                    {
+                                                        let relay = req.relay.clone().unwrap_or_default();
+                                                        let key = req.value.clone().unwrap_or_default();
+                                                        let widget: StoredValue<Option<voice::VoiceWidget>, LocalStorage> =
+                                                            StoredValue::new_local(None);
+                                                        Effect::new(move |_| {
+                                                            let (Some(container), Some(hidden)) =
+                                                                (container_ref.get(), hidden_ref.get())
+                                                            else {
+                                                                return;
+                                                            };
+                                                            if widget.with_value(|w| w.is_some()) {
+                                                                return;
+                                                            }
+                                                            widget.set_value(Some(voice::mount_voice(
+                                                                &container, &hidden, &relay, &key,
+                                                            )));
+                                                        });
+                                                        on_cleanup(move || {
+                                                            widget.update_value(|opt| {
+                                                                if let Some(w) = opt.take() {
+                                                                    w.stop();
+                                                                }
+                                                            });
+                                                        });
+                                                    }
+
+                                                    return view! {
+                                                        <div class="field">
+                                                            {label_text}
+                                                            <input
+                                                                id=field_id
+                                                                type="hidden"
+                                                                node_ref=hidden_ref
+                                                                prop:value=move || sig.get()
+                                                                on:input=move |ev| sig.set(event_target_value(&ev))
+                                                            />
+                                                            <div class="voice-wrap" node_ref=container_ref></div>
+                                                        </div>
+                                                    }
+                                                    .into_any();
+                                                }
+
                                                 if req.kind == "prosekit" {
                                                     let container_ref: NodeRef<leptos::html::Div> = NodeRef::new();
                                                     let hidden_ref: NodeRef<leptos::html::Input> = NodeRef::new();
@@ -1454,8 +1528,11 @@ fn ItemCard(item: serde_json::Value) -> impl IntoView {
     let name = text_field(&obj, &["name", "title"]);
     let description = text_field(&obj, &["description"]);
     let url = text_field(&obj, &["url", "html_url"]);
+    // A playable recording (an https URL to audio) renders as a
+    // player, not a link - the relay's /blob/<digest>.wav.
+    let audio = text_field(&obj, &["audio"]).filter(|a| a.starts_with("https://"));
 
-    let known = ["name", "title", "description", "url", "html_url"];
+    let known = ["name", "title", "description", "url", "html_url", "audio"];
     let extra: Vec<(String, String)> = obj
         .iter()
         .filter(|(k, v)| !known.contains(&k.as_str()) && !v.is_null())
@@ -1495,6 +1572,7 @@ fn ItemCard(item: serde_json::Value) -> impl IntoView {
                     }
                 })}
             {description.map(|d| view! { <p class="item-card-description">{d}</p> })}
+            {audio.map(|src| view! { <audio class="item-card-audio" controls preload="none" src=src></audio> })}
             {(!extra.is_empty())
                 .then(|| {
                     view! {