feat(home): show Wi-Fi and internet status on the home screen

CONTEXT.md

@@ -31,6 +31,9 @@ backgrounds and music, all on top of the webOS Luna service bus.
   `off`.
 - **Weather panel**: the home-screen card or inline weather line (`weather.ts`).
   The inline line also appears in the screensaver clock block.
+- **Network status**: the Wi-Fi/Ethernet and internet chip in the top bar, left of
+  the Settings gear (`network-status.ts`). Link type comes from the connection
+  manager; internet reachability comes from a two-host probe.
 - **Settings panel**: the category list and pane UI (`settings.ts`).
 - **Screensaver**: two different things. The system screensaver is LG's gallery
   saver (`screensaverMinutes`). The in-app screensaver is Ember's own

docs/agents/architecture.md

@@ -78,8 +78,8 @@ an object with methods plus the config accessor `applyConfig()`. The composition
 root calls those methods. Modules never call each other except through injected
 callbacks. Examples include `BackgroundController`, `MusicPlayer`, `AppGrid`,
 `FocusManager`, `SettingsPanelHandle`, `CustomScreensaver`,
-`WeatherPanelHandle`, `InputRowHandle`, `ChannelStripHandle`, `HomePaint` and
-`AllApps`.
+`WeatherPanelHandle`, `NetworkStatusHandle`, `InputRowHandle`,
+`ChannelStripHandle`, `HomePaint` and `AllApps`.
 
 Cross-cutting callbacks are passed in, such as `onToast`, `focusControl` and
 `onBeforeLaunch`. If a module needs to do something the host owns, add a

docs/agents/layout.md

@@ -29,7 +29,7 @@ grouped by domain:
 | `music/` | `@music` | The ambient music player and its built-in track manifest. |
 | `settings/` | `@settings` | The Settings panel (the composition root in `settings.ts`), the panel's key navigation and wheel scrolling (`navigation.ts`), backup/restore, field bindings, the text-field gate (`text-gate.ts`) and the pane seam (`pane.ts`). UI components live in `settings/components/`, category panes in `settings/panes/`. |
 | `focus/` | `@focus` | Focus manager and the row model it moves over. |
-| `home/` | `@home` | Home-screen rows and panels: TV inputs, channels, weather, and the home paint pass. |
+| `home/` | `@home` | Home-screen rows and panels: TV inputs, channels, weather, the network status chip, and the home paint pass. |
 | `config/` | `@config` | The config tree: load, save, normalize, and profiles. |
 | `luna/` | `@luna` | The webOS Luna service transport (`luna-transport.ts`), the service calls (`luna.ts`), the privileged root script (`root.ts`) and platform/device helpers. |
 | `lib/` | `@lib` | Shared vocabulary and utilities: `types.ts`, `compat.ts`, `version.ts`, `usb.ts`, `remote.ts`, and other cross-cutting helpers. |

src/index.html

@@ -23,6 +23,7 @@
         <div id="clock-weather" class="clock-weather"></div>
       </div>
       <div class="top-actions">
+        <button id="network-status" class="settings-icon network-status focusable" type="button" aria-label="Network status" data-focus-index="89" hidden></button>
         <button id="app-settings-btn" class="settings-icon focusable" type="button" aria-label="Settings" data-focus-index="90">
           <svg class="settings-icon-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="3"></circle>

src/styles/main.css

@@ -413,6 +413,19 @@ body.all-apps-open #background-layer.gradient-animated {
     0 0 30px rgba(var(--focus-halo-rgb), 0.3);
 }
 
+/* Network status: quiet white when fine, amber with no uplink, red with no link. */
+.network-status[hidden] {
+  display: none;
+}
+
+.network-status[data-state="no-internet"] {
+  color: #f2c078;
+}
+
+.network-status[data-state="offline"] {
+  color: #ff6b6b;
+}
+
 .clock-stack {
   position: absolute;
   top: 36px;
@@ -473,6 +486,11 @@ body.clock-right .clock-stack {
   max-width: calc(100% - 280px);
 }
 
+/* The network chip widens the top-right cluster: keep the clock clear of it. */
+body.has-network-status.clock-right .clock-stack {
+  right: 248px;
+}
+
 .clock {
   font-weight: 500;
   letter-spacing: 0.01em;
@@ -694,6 +712,11 @@ body.clock-left .weather-panel {
   right: 160px;
 }
 
+/* The network chip widens the top-right cluster: keep the forecast clear of it. */
+body.has-network-status.clock-left .weather-panel {
+  right: 248px;
+}
+
 .weather-glyph {
   display: block;
   flex: 0 0 auto;

src/ts/config/config.ts

@@ -10,7 +10,7 @@ const STORAGE_KEY = BRAND.storage.config;
 // means, its type or its name? Bump this and add an entry to CONFIG_MIGRATIONS
 // keyed by the new version: stored settings and restored backups from older
 // versions both run through those steps (see migrateConfig / configFromBackup).
-export const CONFIG_SCHEMA_VERSION = 28;
+export const CONFIG_SCHEMA_VERSION = 29;
 
 export const DEFAULT_CONFIG: Config = {
   version: CONFIG_SCHEMA_VERSION,
@@ -85,6 +85,8 @@ export const DEFAULT_CONFIG: Config = {
     channels: 'favourites',
     showClock: true,
     showDate: true,
+    // Wi-Fi/Ethernet and internet chip next to the Settings gear.
+    showNetworkStatus: true,
     // '24' (18:30) or '12' (6:30 PM), home screen and screensaver.
     clockFormat: '24',
     // Glass colour of the app tiles, inputs and Settings button: light (the
@@ -481,6 +483,13 @@ export const CONFIG_MIGRATIONS: Record<number, ConfigMigration> = {
     if (typeof config.launcher.tvSettingsTile !== 'boolean') {
       config.launcher.tvSettingsTile = true;
     }
+  },
+
+  // v29: the home-screen network status chip.
+  29: function addNetworkStatus(config) {
+    if (typeof config.launcher.showNetworkStatus !== 'boolean') {
+      config.launcher.showNetworkStatus = true;
+    }
   }
 };
 

src/ts/focus/focus.ts

@@ -661,7 +661,10 @@ export function createFocusManager(
       const primary = isHorizontal ? Math.abs(dx) : Math.abs(dy);
       const secondary = isHorizontal ? Math.abs(dy) : Math.abs(dx);
       // Prefer top-chrome when moving up so we hit Settings over a distant input.
-      const chromeBias = (keyCode === REMOTE_KEY.UP && isTopChrome(item)) ? -5000 : 0;
+      // The network chip shares that row; keep UP on Settings (Left reaches the chip).
+      const chromeBias = (keyCode === REMOTE_KEY.UP && isTopChrome(item))
+        ? (item.id === 'app-settings-btn' ? -6000 : -5000)
+        : 0;
       const score = primary * 100 + secondary + chromeBias;
 
       if (score < bestScore) {