UX redesign V09: replace shell, split Program/Console/Settings

Implements the V09 mock end-to-end (per plans/2026-04-30_ux_redesign.md):

Top shell
- index.pug rebuilt around .app-shell with a slim 96px header.
- Underline-ribbon tab bar (Control / Program / Console / Settings)
  replaces the old side menu and the inline #tab1..#tab4 system.
- Single 'All systems' pill collapses the legacy WiFi/Camera/Rotary/
  IP/Version chip-soup into one popover (sys-popover) anchored to the
  header; rotary toggle, camera feed and shutdown live there.
- Octagonal 88x88px STOP button wraps the existing <estop> SVG; STATE
  pill with pulse-dot honors prefers-reduced-motion.

Routing
- app.js parse_hash maps every existing hash:
    #control                       -> Control
    #program / #program:auto       -> Program
    #console / #console:mdi|messages|indicators -> Console
    #settings, #admin-general,
    #admin-network, #motor:N, #tool, #io, #macros, #help,
    #cheat-sheet                  -> Settings (rail picks inner)
- All deep links are preserved.

Control panel (control-view.pug + .js)
- 720px jog grid + 4-axis DRO + 4 KPI cards + 8-macro row.
- Jog tiles use V09 flat slate (#3f4b63) with diagonal helpers and
  a ghost row for XY/Z origin shortcuts.
- Per-axis Settings/Set-zero/Home buttons grow to 72x72px.
- Status strip cards: State / Velocity-Feed / Spindle / Job. Tapping
  the Spindle card opens the new override-drawer with feed + spindle
  range inputs (resolved decision in plans/...).
- Macro row binds to state.macros.slice(0, 8); >8 lives in Settings.
- Drops the old <table> control-buttons, .info, .override and .tabs
  blocks entirely.

Program panel (program-view.pug + .js)
- Extracts the Auto bar, file selectors, gcode-viewer and path-viewer
  out of control-view.
- Action buttons (RUN/STOP/UPLOAD-FOLDER/UPLOAD-FILE/DOWNLOAD-FILE/
  DELETE) at 84px with explicit color affordances.
- Reuses control-view's existing methods via the new program-mixin.

Console panel (console-view.pug + .js)
- Three sub-tabs: MDI / Messages / Indicators. Sub-tab persists in the
  URL fragment (#console:messages etc.).
- MDI: terminal-style prompt + SEND, plus an 8-wide on-screen keypad
  (G0/G1/G2/G3/G28/G92/M3/M5 + axis letters + CLEAR/SEND).
- Messages: pulls from .messages_log (mirrored from
  state.messages); badge in the header tab counts unread.
- Indicators: mounts the existing <indicators> component.

Settings shell (settings-shell.pug + .js)
- New left rail navigator listing Display, Network, General/Firmware,
  Spindle&Tool, IO, Motors 0..3, Macros, Cheat Sheet, Help.
- Inner area mounts the existing settings family templates via an
  explicit v-if cascade (avoiding a Vue 1 :is reactivity quirk).
- Shutdown / Save buttons relocated from the dropped side menu.

JS plumbing
- main.js: Vue.config.async = false to keep dependent watchers in
  sync when reactive data is mutated outside Vue's normal event loop
  (e.g. from a hashchange listener).
- program-mixin.js extracted so control-view.js no longer carries the
  file/macro/gcode methods that are now Program-only.
- control-view.js trimmed to jog/DRO/probe/home logic.
- console-view.js / settings-shell-view.js use a hashchange listener
  + local data props because Vue 1 cannot reliably observe
  .sub_tab from a child component.

Stylus rewrite
- Removes the old .header (140px), .nav-header, .brand subtree, #menu,
  #main, .control-view block, .info, .override, .toolbar, .macros-div,
  .macros-button, the .tabs > input radio-tab system and the .control-
  view #control media-query overrides. None of these are referenced
  any more.
- Adds V09 tokens (jog/macro palette + accent + line/card colors) at
  the top, the new shell rules, .ktab / .sys-btn / .state-badge /
  .estop chrome, the .control-page grid, status strip + override
  drawer, .program-page action / file bars and program body,
  .console-page MDI keypad / messages / indicators panes, and the
  .settings-shell rail.
- Adds a 1820px breakpoint that stacks the right column under the jog
  on smaller portable monitors.

Hard cut: no config.ui.layout flag, the old shell is removed in this
single commit. side-menu.css is no longer included from index.pug.

Tested locally with agent-browser (1920x1080) on every top tab and
every settings sub-route; routing, active tab highlighting and inner
view selection all work without a controller connection.

src/js/settings-shell-view.js

@@ -0,0 +1,109 @@
+"use strict";
+
+// Wrapper that adds a left-rail navigator around the settings family
+// of views (Settings, Admin General, Admin Network, Tool, IO, Motor,
+// Macros, Help, Cheat Sheet). The inner view is selected by the URL
+// hash (parsed in app.js) and exposed as $root.sub_tab.
+
+// Vue 1 has trouble making child components reactive to `$root.sub_tab`
+// changes (whether via computed, watch, or prop binding through
+// `<component :is>`). The shell instead listens to `hashchange`
+// directly and parses the hash itself, mirroring app.js's logic, then
+// keeps a local data prop `sub` that the template binds to. This is
+// the only path that updates the rail's `:class` reactively.
+module.exports = {
+  template: "#settings-shell-view-template",
+  props: ["config", "template", "state", "index"],
+
+  components: {
+    "settings-view-inner":     require("./settings-view"),
+    "admin-general-view":      require("./admin-general-view"),
+    "admin-network-view":      require("./admin-network-view"),
+    "motor-view":              require("./motor-view"),
+    "tool-view":               require("./tool-view"),
+    "io-view":                 require("./io-view"),
+    "macros-view":             require("./macros"),
+    "help-view":               require("./help-view"),
+    "cheat-sheet-view": {
+      template: "#cheat-sheet-view-template",
+      data: function () {
+        return { showUnimplemented: false };
+      },
+    },
+  },
+
+  data: function () {
+    return {
+      sub: this.$root.sub_tab || "settings",
+      ridx: this.$root.index,  // local copy of the motor index
+      rail_items: [
+        { sub: "settings",       href: "#settings",       icon: "fa-display",                  label: "Display & Units" },
+        { sub: "admin-network",  href: "#admin-network",  icon: "fa-network-wired",            label: "Network" },
+        { sub: "admin-general",  href: "#admin-general",  icon: "fa-shield-halved",            label: "General / Firmware" },
+        { sub: "tool",           href: "#tool",           icon: "fa-bolt",                     label: "Spindle & Tool" },
+        { sub: "io",             href: "#io",             icon: "fa-plug",                     label: "I/O" },
+        { section: "Motors" },
+        { sub: "motor", motor: 0, href: "#motor:0", icon: "fa-arrows-up-down-left-right", label: "Motor 0" },
+        { sub: "motor", motor: 1, href: "#motor:1", icon: "fa-arrows-up-down-left-right", label: "Motor 1" },
+        { sub: "motor", motor: 2, href: "#motor:2", icon: "fa-arrows-up-down-left-right", label: "Motor 2" },
+        { sub: "motor", motor: 3, href: "#motor:3", icon: "fa-arrows-up-down-left-right", label: "Motor 3" },
+        { section: " " },
+        { sub: "macros",         href: "#macros",         icon: "fa-keyboard",     label: "Macros" },
+        { sub: "cheat-sheet",    href: "#cheat-sheet",    icon: "fa-book",         label: "G-code Cheat Sheet" },
+        { sub: "help",           href: "#help",           icon: "fa-circle-question", label: "Help" },
+      ],
+    };
+  },
+
+  ready: function () {
+    this._onHash = () => this.refresh_from_hash();
+    window.addEventListener("hashchange", this._onHash);
+    this.refresh_from_hash();
+  },
+
+  attached: function () {
+    // Vue 1 fires `attached` whenever the component is inserted into
+    // the DOM (which happens on every route change because the outer
+    // <component :is> recreates the instance). Re-bind the listener
+    // here so it works even after detach/attach cycles.
+    if (!this._onHash) {
+      this._onHash = () => this.refresh_from_hash();
+    }
+    window.addEventListener("hashchange", this._onHash);
+    this.refresh_from_hash();
+  },
+
+  detached: function () {
+    if (this._onHash) {
+      window.removeEventListener("hashchange", this._onHash);
+    }
+  },
+
+  beforeDestroy: function () {
+    if (this._onHash) {
+      window.removeEventListener("hashchange", this._onHash);
+    }
+  },
+
+  methods: {
+    refresh_from_hash: function () {
+      const hash = location.hash.substr(1) || "settings";
+      const parts = hash.split(":");
+      this.sub  = parts[0] || "settings";
+      this.ridx = parts[1] !== undefined ? parts[1] : -1;
+    },
+
+    is_active: function (item) {
+      if (!item || item.section) return false;
+      if (item.sub !== this.sub) return false;
+      if (item.sub === "motor") {
+        return "" + item.motor === "" + this.ridx;
+      }
+      return true;
+    },
+
+    showShutdownDialog: function () {
+      SvelteComponents.showDialog("Shutdown");
+    },
+  },
+};