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/pug/templates/program-view.pug

@@ -0,0 +1,137 @@
+script#program-view-template(type="text/x-template")
+  .program-page
+
+    // ----- Modal dialogs -----
+    message(:show.sync="showGcodeMessage")
+      h3(slot="header") Processing New File
+      div(slot="body")
+        h3 Please wait..
+        p Simulating GCode to check for errors, calculate ETA and generate 3D view.
+      div(slot="footer")
+        label Simulating {{(toolpath_progress || 0) | percent}}
+
+    message(:show.sync="GCodeNotFound")
+      h3(slot="header") File not found
+      div(slot="body")
+        p It seems like the file you selected cannot be found. Try uploading again.
+      div(slot="footer")
+        button.pure-button.button-error(@click="GCodeNotFound=false") OK
+
+    message(:show.sync="uploading_files")
+      h3(slot="header") Files uploading
+      div(slot="body")
+        h3 Please wait...
+        p
+        p The files are currently being uploaded.
+        p Do not close the window.
+      div(slot="footer")
+
+    message.error-message(:show.sync="deleteGCode")
+      h3(slot="header") Select files to delete:
+      div(slot="body")
+        input.search-bar(type="text", v-model="search_query", placeholder="Search Files...")
+        .container
+          .folders
+            h3 Folders
+            div(v-for="(index, folder) in state.gcode_list", :key="index",
+              @click="populateFiles(index)",
+              class="folder-item",
+              :class="{ selected: index === selected_folder_index }") {{ folder.name }}
+          .files
+            h3 Files
+            label.file-item(v-for="item in gcode_filtered_files", :key="item")
+              input(type="checkbox", :value="item", v-model="selected_items_to_delete")
+              |  {{ item }}
+      div(slot="footer")
+        button.pure-button(@click="cancel_delete", style="height:50px") Cancel
+        button.pure-button.button-success(@click="delete_current", style="height:50px")
+          .fa.fa-trash
+          |  Selected
+
+    message(:show.sync="create_folder")
+      h3(slot="header") Enter folder name:
+      div(slot="body")
+        input.input-name(type="text", minlength="1", maxlength="15",
+          style="margin-top:1rem;margin-bottom:2rem;",
+          id="folder-name", v-model="folder_name", @keypress="edited_folder_name")
+      div(slot="footer")
+        button.pure-button(@click="cancel_new_folder") Cancel
+        button.pure-button.button-success(@click="create_new_folder", :disabled="!edited") Create
+
+    message(:show.sync="confirmDelete")
+      h3(slot="header") Delete Folder?
+      div(slot="body")
+        p Are you sure to delete the folder?
+      div(slot="footer")
+        button.pure-button(@click="confirmDelete=false") Cancel
+        button.pure-button.button-error(@click="delete_folder") Folder only
+        button.pure-button.button-success(@click="delete_folder_and_files") Folder and files
+
+    .program-card
+
+      // Action bar (RUN / STOP / Upload / Download / Delete)
+      .action-bar
+        button.action-btn.run(:class="{'attention': is_holding}",
+          @click="start_pause", :disabled="!state.selected",
+          :title="is_running ? 'Pause program.' : 'Start program.'")
+          .fa.fa-play.ico(v-if="!is_running")
+          .fa.fa-pause.ico(v-else)
+          span {{is_running ? 'PAUSE' : 'RUN'}}
+        button.action-btn.stop(@click="stop", title="Stop program.")
+          .fa.fa-stop.ico
+          span STOP
+        button.action-btn(@click="open_folder", :disabled="!is_ready",
+          title="Upload a new GCode folder.")
+          .fa.fa-folder-arrow-up.ico
+          span UPLOAD FOLDER
+        form.gcode-folder-input.file-upload
+          input#folderInput(type="file", @change="upload_folder",
+            :disabled="!is_ready", webkitdirectory, directory)
+        button.action-btn(@click="open_file", :disabled="!is_ready",
+          title="Upload a new GCode program.")
+          .fa.fa-file-arrow-up.ico
+          span UPLOAD FILE
+        form.gcode-file-input.file-upload
+          input(type="file", @change="upload_file", :disabled="!is_ready",
+            accept=".nc,.ngc,.gcode,.gc", multiple)
+        a(:href="state.selected ? '/api/file/' + state.selected : '#'",
+          download, :class="{disabled: !state.selected}",
+          title="Download the selected GCode program.")
+          button.action-btn(:disabled="!state.selected")
+            .fa.fa-file-arrow-down.ico
+            span DOWNLOAD FILE
+        button.action-btn.danger(@click="deleteGCode = true",
+          :disabled="!state.selected || !is_ready",
+          title="Delete current GCode program.")
+          .fa.fa-trash.ico
+          span DELETE
+
+      // File / folder selectors
+      .file-bar
+        button.file-btn(@click="create_folder=true", :disabled="!is_ready")
+          .fa.fa-folder-plus
+          |  Create Folder
+        button.file-btn(@click="confirmDelete=true", :disabled="!is_ready")
+          .fa.fa-folder-minus
+          |  Delete Folder
+        select.file-select(title="Select previously uploaded GCode folder.",
+          v-model="state.folder", @change="reset_gcode", :disabled="!is_ready")
+          option(selected, value="default") Default folder
+          option(v-for="file in gcode_folders", :value="file") {{file}}
+        select.file-select.primary(title="Select previously uploaded GCode programs.",
+          v-model="state.selected", @change="load", :disabled="!is_ready")
+          option(value="") (no file)
+          option(v-for="file in gcode_files", :value="file") {{file}}
+        button.file-btn(@click="toggle_sorting", :disabled="!is_ready")
+          .fa.fa-arrow-down-wide-short
+          |  {{files_sortby}}
+
+      // Body: gcode listing on the left, 3D viewer on the right
+      .program-body
+        gcode-viewer
+        path-viewer(:toolpath="toolpath", :state="state", :config="config")
+
+      .progress-bar(v-if="toolpath_progress && toolpath_progress < 1",
+        title="Simulating GCode to check for errors, calculate ETA and generate 3D view.")
+        div(:style="'width:' + (toolpath_progress || 0) * 100 + '%'")
+          label Simulating {{(toolpath_progress || 0) | percent}}