web: make the settings drawer readable and honest

crates/rkvm-web/index.html

@@ -159,7 +159,19 @@
         font: 400 13px var(--font); transition: border-color .12s, box-shadow .12s; }
       .drawer textarea { font-family: var(--mono); resize: vertical; }
       .drawer input[type=range] { width: auto; flex: 1; accent-color: var(--accent); margin: 0; }
-      .muted { color: var(--muted); font-size: 12px; word-break: break-all; }
+      .muted { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
+      .drawer .field { display: block; margin: 8px 0 0; }
+      .drawer .field > span { display: block; font-size: 12px; color: var(--muted); }
+      .drawer .hint { color: var(--faint); font-size: 12px; margin: 2px 0 6px; }
+      .drawer .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 8px;
+        font-size: 12px; }
+      .drawer .kv dt { color: var(--muted); }
+      .drawer .kv dd { margin: 0; overflow-wrap: anywhere; }
+      .drawer .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+        margin-right: 6px; background: var(--faint); vertical-align: 0; }
+      .drawer .dot.on { background: var(--success); }
+      .drawer ul.plain { margin: 4px 0; padding: 0; list-style: none; font: 400 12px var(--mono); }
+      .drawer ul.plain li { padding: 2px 0; overflow-wrap: anywhere; }
 
       .toggle { display: flex; align-items: center; gap: 10px; margin: 8px 0; cursor: pointer;
         font-size: 13px; }

crates/rkvm-web/src/app.rs

@@ -285,11 +285,14 @@ pub fn App() -> impl IntoView {
 
     let do_ocr = move |_| {
         let Some(video) = video_store.get_value() else { return };
-        ocr_text.set(Some("scanning…".to_string()));
+        ocr_text.set(Some("Reading text from the screen…".to_string()));
         spawn_local(async move {
             match crate::ocr::recognize(&video).await {
+                Ok(text) if text.trim().is_empty() => {
+                    ocr_text.set(Some("No text found on the screen.".to_string()))
+                }
                 Ok(text) => ocr_text.set(Some(text)),
-                Err(e) => ocr_text.set(Some(e)),
+                Err(e) => ocr_text.set(Some(format!("Could not read text: {e}"))),
             }
         });
     };
@@ -360,7 +363,7 @@ pub fn App() -> impl IntoView {
                         if v.width > 0 {
                             format!("{}×{} @ {:.0}fps", v.width, v.height, v.fps)
                         } else {
-                            "no signal".to_string()
+                            "No signal".to_string()
                         }
                     }}
                 </span>
@@ -373,7 +376,7 @@ pub fn App() -> impl IntoView {
                 <span class="tb-sep"></span>
 
                 <button on:click=toggle_mouse title="Switch absolute / relative pointer">
-                    {move || if mouse_relative.get() { "Mouse: Rel" } else { "Mouse: Abs" }}
+                    {move || if mouse_relative.get() { "Mouse: relative" } else { "Mouse: absolute" }}
                 </button>
                 <span class="tb-group">
                     <button
@@ -457,12 +460,13 @@ pub fn App() -> impl IntoView {
             <div class="panel">
                 <div class="card">
                     <h1>"Device setup"</h1>
+                    <label>"Sign-in"</label>
                     <select
                         prop:value=move || setup_mode.get()
                         on:change=move |ev| setup_mode.set(event_target_value(&ev))
                     >
-                        <option value="noPassword">"No password"</option>
-                        <option value="password">"Password"</option>
+                        <option value="noPassword">"No password (anyone on this network can connect)"</option>
+                        <option value="password">"Require a password"</option>
                     </select>
                     <Show when=move || setup_mode.get() == "password">
                         <input

crates/rkvm-web/src/ocr.rs

@@ -12,7 +12,7 @@ extern "C" {
 pub async fn recognize(video: &HtmlVideoElement) -> Result<String, String> {
     let (w, h) = (video.video_width(), video.video_height());
     if w == 0 || h == 0 {
-        return Err("no video frame to scan".to_string());
+        return Err("no video frame yet".to_string());
     }
 
     let document = web_sys::window().and_then(|w| w.document()).ok_or("no document")?;