Step 1 in progress: the settings page server, probes, teaching pages and UI (not deployed yet)

- settings/server.py: read-only routes (overview, keys, computers, gear, companion, logs, history,
  help facts, key guide / cheat sheet / where things are), the editing-code check with a lockout,
  LAN-only binding with a per-minute rebind
- settings/probes.py: fixed read-only probes per computer; whole lists fetched and matched locally
- settings/keyguide.py: the generated teaching pages
- settings/ui: the page, every screen read-only
- status_panel.py: snapshot.json every 5 s for the page; the Companion database lookup prefers the
  running build's folder and skips a database that will not open (a stale v5.1 folder was breaking it)
- config.json: every computer's record (what runs there, network ports, done-by-hand ticks), the
  editing code (kept in the repo, the user's choice), an empty gear list
- install.sh: the settings page as a second LaunchAgent; settings/ and schema.py deployed

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

settings/ui/index.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Status Panel</title>
+<link rel="stylesheet" href="/style.css">
+</head>
+<body>
+<header class="top">
+  <div class="brand"><span class="dot" id="hbdot" title="watchdog heartbeat"></span><b>STATUS PANEL</b> <span id="sitename" class="muted"></span></div>
+  <input id="search" type="search" placeholder="find a key, computer, device, fix or setting" aria-label="search" autocomplete="off">
+  <div class="topright">
+    <button class="link" id="legendbtn" title="What the status words mean">?</button>
+    <button id="editbtn" class="toggle">Editing: off</button>
+  </div>
+</header>
+<div id="legend" class="legend" hidden>
+  <b>Status words, the same everywhere:</b>
+  <span><i class="l-ok"></i>OK</span>
+  <span><i class="l-problem"></i>Problem (with the reason)</span>
+  <span><i class="l-unknown"></i>Can't see from here – ask at the computer</span>
+  <span><i class="l-none"></i>Not needed</span>
+  <span><i class="l-hand"></i>Done by hand (who, when)</span>
+</div>
+<div id="searchresults" class="searchresults" hidden></div>
+<div class="shell">
+  <nav class="menu" id="menu">
+    <a href="#overview">Overview</a>
+    <a href="#keys">Keys</a>
+    <a href="#computers">Computers</a>
+    <a href="#logs">Logs</a>
+    <a href="#history">History</a>
+    <a href="#help">Help</a>
+    <div class="divider">Set up once</div>
+    <a href="#site">Site setup</a>
+    <a href="#fixes">Fixes</a>
+  </nav>
+  <main id="main"><p class="muted">Loading…</p></main>
+</div>
+<div id="dialog" class="dialog" hidden></div>
+<script src="/app.js"></script>
+</body>
+</html>