Merge pull request #131 from saphid/fix/issue-87-recovery-polish

Fix remaining host-key recovery UI clipping and punctuation

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+- Keep the full host-key recovery explanation readable in Devices, including
+  long addresses, and remove doubled punctuation from the connection tooltip
+  (issue #87). Refresh stays within the header and switching headsets selects
+  the new headset's details.
+
 - Fix experimental PC screen capture on Windows builds whose streaming libraries
   lack Windows Graphics Capture. Whole screens use Desktop Duplication; individual
   windows are hidden with an explanation instead of failing when shown. A Windows

docs/devices.md

@@ -97,6 +97,12 @@ The app rereads the gateway every 5 seconds and Tailscale's state every
 
 ## The connection, stage by stage
 
+When a connection fails, the header pill keeps its compact offline state and
+retry countdown; its tooltip and connection dialog contain the full reason.
+Devices shows a short reason in the headset row (with the full reason in its
+tooltip) and a wrapping recovery explanation in the selected headset's details.
+**Use this headset** also selects that headset's details.
+
 The connector runs in the server (`frame_link.Link`) and moves through:
 
 1. **Checking this computer's network**: gateway, Wi-Fi, this computer's IP, Tailscale.

docs/testing.md

@@ -437,3 +437,18 @@ files, source preference, missing/invalid sensors and permission errors.
 `tests/control_center.cjs` covers charging states and optional health fields,
 alongside existing stale/offline handling. No headset is used. See
 [battery monitoring](battery-health.md) for sources, units and limitations.
+
+## Host-key recovery presentation
+
+`python3 -m unittest discover -s tests -p test_link_ui.py -v` runs the page's
+connection/banner/selection functions in Node and checks the recovery CSS guard.
+`test_link.py` covers connection failures and short probe reasons with fake SSH
+and local sockets. Neither suite uses a real headset.
+
+Browser verification on 2026-10-24 used the current page's markup, styles and
+recovery renderers with synthetic changed-key state and two headsets at
+1280×800. It caught a later `.item .s` rule overriding the earlier wrapping
+rule, which the original source-only assertion missed. Check computed wrapping,
+the complete explanation, tooltip punctuation, Refresh bounds and selection
+after **Use this headset** when changing these styles. This fixture does not
+exercise Electron integration or a real SSH identity change.

tests/test_link_ui.py

@@ -64,6 +64,7 @@ class LinkUI(unittest.TestCase):
   renderPill();
   assert.match($('conn').innerHTML, /<b>Office Frame<\/b><span>Offline<span class="via"> · retrying in 12 s<\/span>/);
   assert.ok($('conn').title.includes(changed.error.message));
+  assert.ok(!$('conn').title.includes('..'), $('conn').title);
   // Without a short reason: the stage that failed.
   link.s = {...changed, retry_at: null, error: {stage: 'identity', message: 'Something.'}};
   renderPill();
@@ -120,7 +121,9 @@ class LinkUI(unittest.TestCase):
 class HeaderLayout(unittest.TestCase):
     def test_the_devices_tab_explanation_wraps(self):
         # It was cut to one line with no way to read the rest.
-        self.assertIn(".dev-problem .s { white-space: normal; }", PAGE)
+        # More specific than the later .item .s rule: the old equal-specificity
+        # rule passed this test while the browser still clipped the explanation.
+        self.assertIn(".item.dev-problem .s { white-space: normal; overflow-wrap: anywhere; }", PAGE)
         self.assertEqual(len(re.findall(r'<div class="item dev-problem" role="alert">', PAGE)), 2)
 
     def test_the_header_buttons_dont_give_way(self):

ui/index.html

@@ -175,7 +175,8 @@
   .dev-panel select, .dlg select { background: rgba(0,0,0,.28); color: var(--text); border: 1px solid transparent; border-radius: 3px;
                                    padding: 8px 8px; font: inherit; font-size: 13px; }
   .addr .t { overflow-wrap: anywhere; }
-  .addr .s, .dev-problem .s { white-space: normal; }
+  .addr .s { white-space: normal; }
+  .item.dev-problem .s { white-space: normal; overflow-wrap: anywhere; }
   .addr-edit { display: grid; grid-template-columns: 2fr 1fr 1.4fr auto auto; gap: 8px; align-items: center; width: 100%; }
   .addr-add { display: grid; grid-template-columns: 2fr 1.4fr auto; gap: 8px; margin-top: 12px; }
   @media (max-width: 700px) { .dev-form, .addr-edit, .addr-add, .adv .dev-form, .conn-add, .conn-edit { grid-template-columns: 1fr; } }
@@ -6618,7 +6619,7 @@ function renderPill() {
   }
   $("conn").innerHTML = `<span class="dot ${dot}"></span><span class="pt"><b>${esc(dev)}</b><span>${esc(word)}` +
     `${via ? `<span class="via"> · ${esc(via)}</span>` : ""}</span></span>`;
-  $("conn").title = `${dev}: ${detail}. Click to see or change its addresses.`;
+  $("conn").title = `${dev}: ${detail.replace(/[.\s]+$/, "")}. Click to see or change its addresses.`;
   return true;
 }
 window.connPill = renderPill;