Files

T

c4ch3c4d3 3e1805dab8 release: Mark VIII 1.0

2026-08-11 20:24:24 -07:00

73 KiB

Raw Blame History

Pineapple UI Clone Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Restyle the Pager WebUI (:8080) into a faithful clone of the stock Hak5 WiFi Pineapple UI (:1471) — light Material look, old icon-rail navigation, old information architecture — while reusing the existing backend and API surface (plus one new read-only endpoint).

Architecture: The SPA stays a no-build vanilla JS app running on the device's python3-light HTTP server. All front-end changes live under payload/user/general/pager-webui/www/. The design tokens, shell, navigation, and views are rewritten to mirror the old Angular/Material UI; the Live WS/poll channel, PagerAPI auth, and server.py session mechanics are untouched. One new backend route (GET /api/pineap/aps) runs iwinfo scan read-only.

Tech Stack: Vanilla JS (no framework, no bundler), hand-rolled CSS (Material look via custom properties), hand-rolled <canvas> line chart (no Chart.js — the old UI's Chart.js is inlined in its Angular bundle and no offline copy is available), Python server.py for the one new endpoint, unittest for backend tests.

Global Constraints

Device runtime: python3-light on WiFi Pineapple Pager 24.10.1 — no third-party pip packages, no build step, ES5-compatible JS only (device browser = stock Chromium-era, but keep to ES6 that modern mobile browsers support; the existing code already uses const/arrow functions and async/await).
No new /api/* surface except GET /api/pineap/aps (read-only, iwinfo scan).
Auth/session mechanics unchanged: AUTH_<serverid> HttpOnly cookie, login as user root with the device password.
Design tokens (from the old UI): content bg #fafafa, cards #fff with elevation shadow, toolbar + rail #424242, rail hover #a9a9a9 (dark #545454), active indicator #1976d2 (3px right border), primary #1976d2, danger #d32f2f, ok #7cb342, warn #f9a825, text #212121 / muted #686868; font stack Roboto, "Segoe UI", Arial, sans-serif. Dark theme (opt-in): rail #3a3a3a, surfaces #303030, cards #424242.
Info architecture (sidebar order): Dashboard, Campaigns, PineAP, Recon, Logging, Modules & Packages, Settings. Sub-pages: PineAP → Open/Clients/Filtering/APs/Impersonation (no Enterprise); Recon → Overview/Handshakes; Logging → Overview/System.
Login: password only (username fixed root), old-style card.
Terminal stays bottom-docked (existing behavior), restyled.
Existing Python unittest suite must stay green (tests/ run per-file).
Commits follow repo style (feat:, fix:, docs:).

Task 1: Backend — `GET /api/pineap/aps`

Files:

Modify: payload/user/general/pager-webui/server.py (add parser + handler + route next to the other pineap handlers/routes)
Test: tests/test_pineap_aps.py (new)

Interfaces:

Consumes: server.device_run(args, timeout=20) (exists), server.wifi_ifaces() (exists — returns wlan*/radio* iface names), server.ROUTER.add(method, pattern, handler) (exists), handler signature (ctx) -> (status, payload) where ctx.args is a tuple.
Produces:
- server.parse_iwinfo_scan(text) -> list[dict] with keys bssid (upper-case MAC), ssid (str, may be ''), channel (int or None), signal (int or None), encryption (str, may be 'none').
- server.aps_data() -> list[dict] — concatenation of parse_iwinfo_scan(out) per iface, each row augmented with iface.
- server.h_pineap_aps(ctx) -> (200, {'aps': [...], 'count': n}).
- Route: ROUTER.add('GET', r'/api/pineap/aps', h_pineap_aps).
Step 1: Write the failing test

Create tests/test_pineap_aps.py:

import os
import sys
import unittest

sys.path.insert(0, os.path.join(os.path.dirname(__file__), '..', 'payload', 'user', 'general', 'pager-webui'))
import server

SAMPLE = """Cell 01 - Address: AA:BB:CC:DD:EE:FF
          ESSID: "Hak5"
          Mode: Master  Channel: 6
          Signal: -45 dBm  Quality: 70/100
          Encryption: WPA2 PSK (CCMP)

Cell 02 - Address: 00:11:22:33:44:55
          ESSID: ""
          Mode: Master  Channel: 11
          Signal: -60 dBm  Quality: 55/100
          Encryption: none
"""

_orig_aps_data = server.aps_data


class ParseTest(unittest.TestCase):
    def test_parses_cells(self):
        rows = server.parse_iwinfo_scan(SAMPLE)
        self.assertEqual(len(rows), 2)
        self.assertEqual(rows[0]['bssid'], 'AA:BB:CC:DD:EE:FF')
        self.assertEqual(rows[0]['ssid'], 'Hak5')
        self.assertEqual(rows[0]['channel'], 6)
        self.assertEqual(rows[0]['signal'], -45)
        self.assertEqual(rows[0]['encryption'], 'WPA2 PSK (CCMP)')
        self.assertEqual(rows[1]['ssid'], '')
        self.assertEqual(rows[1]['encryption'], 'none')

    def test_empty_text(self):
        self.assertEqual(server.parse_iwinfo_scan(''), [])


class ApsHandlerTest(unittest.TestCase):
    def tearDown(self):
        server.aps_data = _orig_aps_data

    def test_handler(self):
        server.aps_data = lambda: [{'bssid': 'AA:BB:CC:DD:EE:FF', 'iface': 'wlan0mon'}]
        status, payload = server.h_pineap_aps(type('C', (), {'args': ()})())
        self.assertEqual(status, 200)
        self.assertEqual(payload['count'], 1)
        self.assertEqual(payload['aps'][0]['bssid'], 'AA:BB:CC:DD:EE:FF')

Step 2: Run the test to verify it fails

& "$env:LOCALAPPDATA\Programs\Python\Python311\python.exe" -m unittest tests.test_pineap_aps -v

Expected: FAIL with AttributeError: module 'server' has no attribute 'parse_iwinfo_scan'.

Step 3: Implement the parser, data function, handler, and route

In server.py, after assoc_clients() (near the existing wifi_ifaces/iwinfo helpers), add:

def parse_iwinfo_scan(text):
    aps = []
    cur = None
    for line in text.splitlines():
        m = re.match(r'^Cell \d+ - Address:\s*([0-9A-Fa-f:]+)', line)
        if m:
            if cur is not None:
                aps.append(cur)
            cur = {'bssid': m.group(1).upper(), 'ssid': '', 'channel': None,
                   'signal': None, 'encryption': ''}
            continue
        if cur is None:
            continue
        m = re.search(r'ESSID:\s*"([^"]*)"', line)
        if m:
            cur['ssid'] = m.group(1)
        m = re.search(r'Channel:\s*(\d+)', line)
        if m:
            cur['channel'] = int(m.group(1))
        m = re.search(r'Signal:\s*(-?\d+)', line)
        if m:
            cur['signal'] = int(m.group(1))
        m = re.search(r'Encryption:\s*(.+)', line)
        if m:
            cur['encryption'] = m.group(1).strip()
    if cur is not None:
        aps.append(cur)
    return aps


def aps_data():
    aps = []
    for name in wifi_ifaces():
        rc, out, err = device_run(['iwinfo', name, 'scan'])
        if rc != 0:
            continue
        for ap in parse_iwinfo_scan(out):
            ap['iface'] = name
            aps.append(ap)
    return aps


def h_pineap_aps(ctx):
    aps = aps_data()
    return 200, {'aps': aps, 'count': len(aps)}

In the ROUTER.add block (after the existing POST /api/pineap/clients/kick line), add:

ROUTER.add('GET', r'/api/pineap/aps', h_pineap_aps)

Step 4: Run the test to verify it passes

& "$env:LOCALAPPDATA\Programs\Python\Python311\python.exe" -m unittest tests.test_pineap_aps -v

Expected: PASS (3 tests).

Step 5: Run the existing suite to confirm no regressions

Get-ChildItem tests\test_*.py | ForEach-Object {
    $mod = "tests." + [IO.Path]::GetFileNameWithoutExtension($_.Name)
    & "$env:LOCALAPPDATA\Programs\Python\Python311\python.exe" -m unittest $mod -v
}

Expected: all existing modules PASS.

Step 6: Commit

git add payload/user/general/pager-webui/server.py tests/test_pineap_aps.py
git commit -m "feat: add read-only GET /api/pineap/aps (iwinfo scan)"

Task 2: Assets — fetch old-UI logo; add `icons.js`

Files:

Create: payload/user/general/pager-webui/www/assets/logo.png (copied from the old UI)
Create: payload/user/general/pager-webui/www/js/icons.js
Modify: payload/user/general/pager-webui/www/index.html (favicon link)

Interfaces:

Produces: window.PineappleIcons — a plain object mapping icon name → SVG markup string. Names used by later tasks: dashboard, campaigns, pineap, recon, logging, modules, settings, chevron, terminal, wifi, extension, receipt. Each string is a full inline <svg viewBox="0 0 24 24" ...>...</svg> at 24×24.
Step 1: Download the old-UI logo

curl.exe -s -o "payload\user\general\pager-webui\www\assets\logo.png" "http://172.16.42.1:1471/assets/icons/logo.png"

Verify: file is ~41 KB PNG ((Get-Item ...).Length).

Step 2: Extract the sidebar SVG paths from the old bundle

The Angular bundle was previously downloaded to %TEMP%\opencode\oldui_main.js (re-fetch with curl.exe -s --compressed -u "root:hak5pineapple" -m 60 "http://172.16.42.1:1471/main.ce5a318adf590e170f6d.js" -o "$env:TEMP\opencode\oldui_main.js" if missing). Extract the three inline nav icon paths:

$c = [IO.File]::ReadAllText("$env:TEMP\opencode\oldui_main.js")
$i = $c.IndexOf('["class","sidenav-entry"],["matTooltip","Dashboard"]')
$t = $c.Substring([Math]::Max(0, $i - 200), 30000) -replace '\s+', ' '
[regex]::Matches($t, '"d","([A-Za-z0-9,.\- ]+)"') | ForEach-Object { $_.Groups[1].Value }

Expected: three paths — view-dashboard (Dashboard), a gear (Campaigns), and a building/landmark (Recon).

Step 3: Write js/icons.js

'use strict';

const PineappleIcons = {
  dashboard: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12,16A3,3 0 0,1 9,13C9,11.88 9.61,10.9 10.5,10.39L20.21,4.77L14.68,14.35C14.18,15.33 13.17,16 12,16M12,3C13.81,3 15.5,3.5 16.97,4.32L14.87,5.53C14,5.19 13,5 12,5A8,8 0 0,0 4,13C4,15.21 4.89,17.21 6.34,18.65H6.35C6.74,19.04 6.74,19.67 6.35,20.06C5.96,20.45 5.32,20.45 4.93,20.07V20.07C3.12,18.26 2,15.76 2,13A10,10 0 0,1 12,3M22,13C22,15.76 20.88,18.26 19.07,20.07V20.07C18.68,20.45 18.05,20.45 17.66,20.06C17.27,19.67 17.27,19.04 17.66,18.65V18.65C19.11,17.2 20,15.21 20,13C20,12 19.81,11 19.46,10.1L20.67,8C21.5,9.5 22,11.18 22,13Z"/></svg>',
  campaigns: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 11.11V7A2 2 0 0 0 19 5H15V3A2 2 0 0 0 13 1H9A2 2 0 0 0 7 3V5H3A2 2 0 0 0 1 7V18A2 2 0 0 0 3 20H10.26A7 7 0 1 0 21 11.11M9 3H13V5H9M19 20A5 5 0 0 1 13 20A5 5 0 1 1 19 20M15 13H16.5V15.82L18.94 17.23L18.19 18.53L15 16.69V13"/></svg>',
  pineap: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12,21L15.6,16.2C16.2,15.4 16.8,14.5 17.2,13.6C18.1,11.5 18,9 18,9C18,6.5 16.5,4.3 15,3.5C13.5,2.7 10.5,2.7 9,3.5C7.5,4.3 6,6.5 6,9C6,9 5.9,11.5 6.8,13.6C7.2,14.5 7.8,15.4 8.4,16.2L12,21M12,5.5C13.4,5.5 14.5,6.6 14.5,8C14.5,9.4 13.4,10.5 12,10.5C10.6,10.5 9.5,9.4 9.5,8C9.5,6.6 10.6,5.5 12,5.5M7.1,13.1C7.1,13.1 8.2,14 12,14C15.8,14 16.9,13.1 16.9,13.1L15.9,12.1C15.9,12.1 14.8,12.8 12,12.8C9.2,12.8 8.1,12.1 8.1,12.1L7.1,13.1M12,17C10,17 9,17.6 9,17.6L10.3,19.3C10.3,19.3 11.1,19 12,19C12.9,19 13.7,19.3 13.7,19.3L15,17.6C15,17.6 14,17 12,17Z"/></svg>',
  recon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11,6H13V13H11V6M9,20A1,1 0 0,1 8,21H5A1,1 0 0,1 4,20V15L6,6H10V13A1,1 0 0,1 9,14V20M10,5H7V3H10V5M15,20V14A1,1 0 0,1 14,13V6H18L20,15V20A1,1 0 0,1 19,21H16A1,1 0 0,1 15,20M14,5V3H17V5H14Z"/></svg>',
  logging: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M14,17H4V15H14V17M14,13H4V11H14V13M14,9H4V7H14V9M18,13V11H16V9H18V7H20V9H22V11H20V13H18M20,3H2A2,2 0 0,0 0,5V19A2,2 0 0,0 2,21H20A2,2 0 0,0 22,19V17H20V19H2V5H20V3Z"/></svg>',
  modules: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.5,11H19V7C19,5.89 18.1,5 17,5H13V3.5A2.5,2.5 0 0,0 10.5,1A2.5,2.5 0 0,0 8,3.5V5H4A2,2 0 0,0 2,7V10.8H3.5C5,10.8 6.2,12 6.2,13.5C6.2,15 5,16.2 3.5,16.2H2V20A2,2 0 0,0 4,22H7.8V20.5C7.8,19 9,17.8 10.5,17.8C12,17.8 13.2,19 13.2,20.5V22H17A2,2 0 0,0 19,20V16H20.5A2.5,2.5 0 0,0 23,13.5A2.5,2.5 0 0,0 20.5,11Z"/></svg>',
  settings: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 11.11V7A2 2 0 0 0 19 5H15V3A2 2 0 0 0 13 1H9A2 2 0 0 0 7 3V5H3A2 2 0 0 0 1 7V18A2 2 0 0 0 3 20H10.26A7 7 0 1 0 21 11.11M9 3H13V5H9M19 20A5 5 0 0 1 13 20A5 5 0 1 1 19 20M15 13H16.5V15.82L18.94 17.23L18.19 18.53L15 16.69V13"/></svg>',
  chevron: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"/></svg>',
  terminal: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M5,7V9H7V7H5M9,7V11H13V7H9M15,7V9H19V7H15M5,11V13H7V11H5M5,15V17H7V15H5M9,15V19H13V15H9M15,15V17H19V15H15M15,19V21H19V19H15Z"/></svg>',
  wifi: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12,21L15.6,16.2C16.2,15.4 16.8,14.5 17.2,13.6C18.1,11.5 18,9 18,9C18,6.5 16.5,4.3 15,3.5C13.5,2.7 10.5,2.7 9,3.5C7.5,4.3 6,6.5 6,9C6,9 5.9,11.5 6.8,13.6C7.2,14.5 7.8,15.4 8.4,16.2L12,21Z"/></svg>',
  extension: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.5,11H19V7C19,5.89 18.1,5 17,5H13V3.5A2.5,2.5 0 0,0 10.5,1A2.5,2.5 0 0,0 8,3.5V5H4A2,2 0 0,0 2,7V10.8H3.5C5,10.8 6.2,12 6.2,13.5C6.2,15 5,16.2 3.5,16.2H2V20A2,2 0 0,0 4,22H7.8V20.5C7.8,19 9,17.8 10.5,17.8C12,17.8 13.2,19 13.2,20.5V22H17A2,2 0 0,0 19,20V16H20.5A2.5,2.5 0 0,0 23,13.5A2.5,2.5 0 0,0 20.5,11Z"/></svg>',
  receipt: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M14,17H4V15H14V17M14,13H4V11H14V13M14,9H4V7H14V9M18,13V11H16V9H18V7H20V9H22V11H20V13H18M20,3H2A2,2 0 0,0 0,5V19A2,2 0 0,0 2,21H20A2,2 0 0,0 22,19V17H20V19H2V5H20V3Z"/></svg>'
};

Note: campaigns, settings, and modules/extension intentionally share Material glyph shapes (gear / puzzle) exactly as the old bundle does. If Step 2's extraction produces different text than the literal strings above, prefer the bundle-extracted d attributes verbatim and update icons.js to match.

Step 4: Reference the favicon in index.html

Add <link rel="icon" type="image/png" href="assets/logo.png"> inside the <head> of payload/user/general/pager-webui/www/index.html.

Step 5: Verify assets serve locally

Serve the payload dir with the project dev server (or open the file path) and confirm assets/logo.png and js/icons.js load:

python -c "import http.server, functools, os; os.chdir(r'payload\user\general\pager-webui\www'); http.server.test(HandlerClass=http.server.SimpleHTTPRequestHandler, port=8000)"

Then curl.exe -s -o NUL -w "%{http_code} %{size_download}" http://127.0.0.1:8000/assets/logo.png and .../js/icons.js — both 200.

Step 6: Commit

git add payload/user/general/pager-webui/www/assets/logo.png payload/user/general/pager-webui/www/js/icons.js payload/user/general/pager-webui/www/index.html
git commit -m "feat: vendor pineapple logo and Material nav icons"

Task 3: Theme CSS — Material light/dark rewrite of `app.css`

Files:

Rewrite: payload/user/general/pager-webui/www/css/app.css

Interfaces:

Produces: CSS custom properties on :root (light) and html.dark (dark). Class names consumed by later tasks:
- Shell: #login-screen, .login-card, .login-logo, .login-title, .login-field, .login-error, .spinner, #topbar, .brand-logo, .brand-text, .toolbar-spacer, #live-status, #terminal-btn, #layout, #rail, #rail .entry, #rail .entry.active, #rail .entry .entry-icon, #rail .entry .entry-text, #rail .entry.divider, #rail .rail-footer, #rail.open, #content, #terminal-panel, #terminal-bar.
- Tabs: .tabbar, .tabbar .tab, .tabbar .tab.active, .tabbar .ink.
- Content: .page-title, .cards, .card, .card-label, .card-value, .section, .row, .tbl, .toggle, .badge, .badge.on, .badge.off, .btn, .btn.raised, .btn.ghost, .btn.danger, input, select, label, code, pre.logs, .empty, .toast.
Step 1: Replace app.css with the Material theme

Use CSS custom properties so light/dark swap via html.dark. Key values from Global Constraints. Structure:

:root {
  --bg: #fafafa; --surface: #fff; --surface-alt: #f5f5f5;
  --toolbar: #424242; --rail: #424242; --rail-hover: #545454;
  --text: #212121; --muted: #686868; --border: #e0e0e0;
  --primary: #1976d2; --primary-dark: #105694; --danger: #d32f2f;
  --ok: #7cb342; --warn: #f9a825; --terminal-bg: #000;
  --shadow: 0 2px 2px rgba(0,0,0,.24), 0 0 2px rgba(0,0,0,.12);
  --ink: #1976d2;
}
html.dark {
  --bg: #303030; --surface: #424242; --surface-alt: #3a3a3a;
  --toolbar: #424242; --rail: #3a3a3a; --rail-hover: #545454;
  --text: #fff; --muted: #bdbdbd; --border: #545454;
  --shadow: 0 2px 2px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 Roboto, "Segoe UI", Arial, sans-serif;
  display: flex; flex-direction: column;
}
.hidden { display: none !important; }

Implement all of the following styles (light values, dark automatically via variables):

#login-screen — flex:1; display:flex; align-items:center; justify-content:center; background:#9c9c9c;
.login-card — background:#fff; border-radius:2px; padding:32px; width:360px; box-shadow:0 8px 20px rgba(0,0,0,.4); text-align:center;
.login-logo — height:148px; margin-bottom:8px;
.login-title — margin:0 0 20px; font-size:26px; font-weight:400; color:#212121;
.login-field — full-width Material-style inputs: width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:2px; margin:6px 0; font-size:14px;
.login-error — color:#d32f2f; font-size:13px; min-height:18px;
.spinner — 18px ring loader (CSS border spinner, blue).
#topbar — height:64px; background:var(--toolbar); color:#fff; display:flex; align-items:center; padding:0 16px; box-shadow:0 2px 4px rgba(0,0,0,.4);
.brand-logo — height:32px; margin-right:10px;
.brand-text — font-size:20px; font-weight:400; letter-spacing:.5px;
.toolbar-spacer — flex:1;
#live-status — color:#e0e0e0; font-size:12px; margin-right:16px; font-variant-numeric:tabular-nums;
#terminal-btn — ghost white toolbar button.
#layout — flex:1; display:flex; min-height:0;
#rail — width:60px; background:var(--rail); color:#fff; display:flex; flex-direction:column; overflow-y:auto; transition:width .2s;
#rail.open — width:220px;
#rail .entry — height:48px; display:flex; align-items:center; padding:0 0 0 18px; color:#e0e0e0; cursor:pointer; border-right:3px solid transparent; font-size:14px;
#rail .entry:hover — background:var(--rail-hover);
#rail .entry.active — border-right:3px solid #1976d2; background:rgba(255,255,255,.08); color:#fff;
.entry-icon — font-size:24px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; margin-right:14px; flex:none;
.entry-icon svg — width:24px; height:24px; display:block;
#topbar .btn.ghost — color:#fff; border-color:#fff;
.entry-text — white-space:nowrap; opacity:0; transition:opacity .2s;
#rail.open .entry-text — opacity:1;
#rail .entry.divider — height:0; padding:0; margin:8px 0; border-top:1px solid #616161; flex:none;
.rail-footer — margin-top:auto;
#content — flex:1; overflow-y:auto; padding:20px 30px 5px 5px;
.tabbar — display:flex; border-bottom:2px solid #e0e0e0; margin-bottom:16px; position:relative;
.tabbar .tab — padding:10px 16px; cursor:pointer; color:var(--muted); font-size:14px; border-bottom:2px solid transparent; margin-bottom:-2px;
.tabbar .tab.active — color:var(--primary); border-bottom-color:var(--ink);
.page-title — font-size:24px; font-weight:400; margin:0 0 12px;
.cards — display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:12px;
.card — background:var(--surface); border-radius:2px; box-shadow:var(--shadow); padding:14px;
.card-label — font-size:12px; color:var(--muted);
.card-value — font-size:28px; font-weight:400; margin-top:4px;
.section — background:var(--surface); border-radius:2px; box-shadow:var(--shadow); padding:16px; margin-bottom:16px;
.section h2 — margin:0 0 12px; font-size:16px; font-weight:500;
.row — display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
.row > div — flex:1; min-width:140px;
.tbl — width:100%; border-collapse:collapse;
.tbl th, .tbl td — text-align:left; padding:8px 10px; border-bottom:1px solid var(--border);
.tbl th — color:var(--muted); font-size:12px; font-weight:500;
.tbl tr:hover td — background:var(--surface-alt);
.toggle — display:flex; align-items:center; gap:8px; margin:6px 0;
.badge — display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px;
.badge.on — background:#e8f5e9; color:#2e7d32; (dark: override color via html.dark or use var(--ok) text)
.badge.off — background:#fff3e0; color:#e65100;
.btn — background:var(--primary); color:#fff; border:0; border-radius:2px; padding:8px 14px; font-size:14px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3);
.btn:hover — background:var(--primary-dark);
.btn.ghost — background:transparent; color:var(--primary); box-shadow:none; border:1px solid var(--primary);
.btn.danger — background:var(--danger);
input, select — background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:2px; padding:8px 10px; width:100%;
label — display:block; font-size:12px; color:var(--muted); margin:8px 0 4px;
code — background:var(--surface-alt); padding:1px 5px; border-radius:2px;
pre.logs — background:var(--terminal-bg); color:#c9d1d9; padding:12px; overflow:auto; max-height:420px; font-size:12px; white-space:pre-wrap; border-radius:2px;
.empty — padding:24px; text-align:center; color:var(--muted);
#terminal-panel — border-top:1px solid var(--border); background:#000; height:280px; display:flex; flex-direction:column;
#terminal-bar — display:flex; justify-content:space-between; align-items:center; background:var(--toolbar); padding:4px 10px; font-size:12px; color:#e0e0e0;
#toast-container — position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:100;
.toast — padding:10px 14px; border-radius:2px; background:var(--surface); box-shadow:var(--shadow); color:var(--text);
.toast.error — border-left:4px solid var(--danger);
.toast.info — border-left:4px solid var(--primary);
Terminal xterm stays black; .xterm sizing preserved (#terminal .xterm { height:100%; }).

Write the full stylesheet — do not omit any listed selector.

Step 2: Sanity-check the file

Verify the file parses as CSS (balanced braces) and contains both :root and html.dark blocks, plus #rail and .tabbar selectors:

Select-String -Path payload\user\general\pager-webui\www\css\app.css -Pattern ':root','html.dark','#rail','.tabbar'

Expected: all four patterns found.

Step 3: Commit

git add payload/user/general/pager-webui/www/css/app.css
git commit -m "feat: Material light/dark theme CSS for UI clone"

Task 4: Shell markup — rewrite `index.html`

Files:

Rewrite: payload/user/general/pager-webui/www/index.html

Interfaces:

Consumes: js/icons.js (PineappleIcons), css/app.css classes from Task 3, existing js/xterm.min.js, js/xterm-addon-fit.min.js, js/xterm.css.
Produces: element IDs wired by js/app.js (Task 5): login-screen, login-form, login-password, login-error, login-button, app, topbar, brand-logo, brand-text, live-status, terminal-btn, layout, rail, content, terminal-panel, terminal-bar, terminal-close, terminal, toast-container.
Step 1: Replace index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>WiFi Pineapple</title>
<link rel="icon" type="image/png" href="assets/logo.png">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="js/xterm.css">
</head>
<body>
<section id="login-screen">
  <form id="login-form" class="login-card">
    <img class="login-logo" src="assets/logo.png" alt="WiFi Pineapple">
    <h2 class="login-title">WiFi Pineapple</h2>
    <input id="login-password" class="login-field" type="password" placeholder="Password" autocomplete="current-password" required>
    <p id="login-error" class="login-error"></p>
    <button id="login-button" class="btn" type="submit">Login</button>
  </form>
</section>

<div id="app" class="hidden">
  <header id="topbar">
    <img id="brand-logo" class="brand-logo" src="assets/logo.png" alt="WiFi Pineapple">
    <span id="brand-text" class="brand-text">WiFi Pineapple</span>
    <span class="toolbar-spacer"></span>
    <span id="live-status"></span>
    <button id="terminal-btn" class="btn ghost">Terminal</button>
  </header>
  <div id="layout">
    <nav id="rail"></nav>
    <main id="content"></main>
  </div>
  <div id="terminal-panel" class="hidden">
    <div id="terminal-bar">
      <span>Terminal</span>
      <button id="terminal-close" class="btn ghost">×</button>
    </div>
    <div id="terminal"></div>
  </div>
</div>

<div id="toast-container"></div>

<script src="js/config.js"></script>
<script src="js/icons.js"></script>
<script src="js/api.js"></script>
<script src="js/chart.js"></script>
<script src="js/xterm.min.js"></script>
<script src="js/xterm-addon-fit.min.js"></script>
<script src="js/terminal.js"></script>
<script src="js/views.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Note: #rail is rendered empty; Task 5 builds its entries from JS. js/chart.js is created in Task 5 — the script tag here is fine because it loads before app.js runs on DOMContentLoaded; until Task 5 lands, a missing file is expected and harmless in this interim commit only if you open the page before Task 5. To keep each task independently servable, create an empty placeholder js/chart.js in Task 4:

'use strict';
window.MiniChart = window.MiniChart || { draw: function () {} };

Step 2: Verify

curl.exe -s http://127.0.0.1:8000/ (dev server from Task 2) returns 200 and contains id="rail", assets/logo.png, js/icons.js, js/chart.js.

Step 3: Commit

git add payload/user/general/pager-webui/www/index.html payload/user/general/pager-webui/www/js/chart.js
git commit -m "feat: old-style app shell markup"

Task 5: Shell JS — routing, rail, theme, shortcuts, chart

Files:

Rewrite: payload/user/general/pager-webui/www/js/app.js
Create: payload/user/general/pager-webui/www/js/chart.js
Modify: payload/user/general/pager-webui/www/js/config.js (no change needed — leave as-is)

Interfaces:

Consumes: PagerAPI (login, get, post, del, on401, setBase), PineappleIcons (Task 2), DOM IDs from Task 4, Live (defined in app.js itself, as today).
Produces (used by js/views.js in Tasks 6–8):
- App.toast(msg, kind) — creates .toast in #toast-container, auto-removes after 4s.
- App.route() — reads location.hash, looks up views[name], calls views[name](rootEl), returns the view handle {destroy}.
- App.railItems — the ordered nav list: [{key:'dashboard', label:'Dashboard', hash:'#/dashboard', icon:'dashboard'}, {key:'campaigns', label:'Campaigns', hash:'#/campaigns', icon:'campaigns'}, {key:'pineap', label:'PineAP', hash:'#/pineap', icon:'pineap'}, {key:'recon', label:'Recon', hash:'#/recon', icon:'recon'}, {key:'logging', label:'Logging', hash:'#/logging', icon:'logging'}, {key:'modules', label:'Modules & Packages', hash:'#/modules', icon:'modules'}, {key:'settings', label:'Settings', hash:'#/settings', icon:'settings'}] with dividers after campaigns, logging, and before the footer.
- App.key — current nav key derived from hash (parent segment, e.g. #/pineap/clients → pineap).
- App.go(hash) — sets location.hash.
- Live.onTick(fn) — subscribes; Live.start() — WS /api/ws + 5s poll fallback (keep existing logic).
- MiniChart.draw(canvas, series, opts) (in chart.js) — draws a 2-series line chart.
- window.THEME helpers: Theme.apply() sets document.documentElement.classList.toggle('dark', localStorage.pw_theme === 'dark'); Theme.toggle(); Theme.current().
Keyboard shortcuts: d→#/dashboard, c→#/campaigns, p→#/pineap, r→#/recon, l→#/logging, m→#/modules, `→terminal toggle. Ignore when focus is in an input/textarea.
Step 1: Write js/chart.js (mini canvas line chart)

'use strict';

const MiniChart = (() => {
  function draw(canvas, series, opts) {
    const o = opts || {};
    const W = canvas.width = canvas.clientWidth * (window.devicePixelRatio || 1);
    const H = canvas.height = 140 * (window.devicePixelRatio || 1);
    const ctx = canvas.getContext('2d');
    ctx.scale(window.devicePixelRatio || 1, window.devicePixelRatio || 1);
    const w = canvas.clientWidth, h = 140;
    ctx.clearRect(0, 0, w, h);
    const max = Math.max(o.max || 10, ...series.map((s) => Math.max(...s.points, 0)), 1);
    const pad = 8;
    // gridlines
    ctx.strokeStyle = o.grid || '#e0e0e0';
    ctx.lineWidth = 1;
    for (let g = 0; g <= 4; g++) {
      const y = pad + (h - pad * 2) * g / 4;
      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
    }
    series.forEach((s) => {
      const pts = s.points;
      if (!pts || pts.length < 2) return;
      ctx.strokeStyle = s.color || '#1976d2';
      ctx.lineWidth = 2;
      ctx.beginPath();
      let started = false;
      pts.forEach((v, i) => {
        if (v == null) { started = false; return; }
        const x = pad + (w - pad * 2) * i / Math.max(pts.length - 1, 1);
        const y = h - pad - (h - pad * 2) * (v / max);
        if (!started) { ctx.moveTo(x, y); started = true; } else ctx.lineTo(x, y);
      });
      ctx.stroke();
      const last = pts[pts.length - 1];
      if (last != null) {
        const x = pad + (w - pad * 2) * (pts.length - 1) / Math.max(pts.length - 1, 1);
        const y = h - pad - (h - pad * 2) * (last / max);
        ctx.fillStyle = s.color || '#1976d2';
        ctx.beginPath(); ctx.arc(x, y, 3, 0, Math.PI * 2); ctx.fill();
      }
    });
  }
  return { draw };
})();

Step 2: Rewrite js/app.js

Keep the existing Live implementation verbatim (WS + poll fallback + updateBar), but change updateBar to also write the brand text, and replace the app shell logic:

'use strict';

const Theme = (() => {
  const KEY = 'pw_theme';
  function apply() {
    document.documentElement.classList.toggle('dark', localStorage.getItem(KEY) === 'dark');
  }
  function toggle() {
    localStorage.setItem(KEY, Theme.current() === 'dark' ? 'light' : 'dark');
    apply();
  }
  function current() { return document.documentElement.classList.contains('dark') ? 'dark' : 'light'; }
  return { apply, toggle, current, KEY };
})();

const App = (() => {
  const cfg = window.PAGER_CONFIG || {};
  const API_BASE = cfg.apiBase || '';
  const WS_BASE = (cfg.wsBase || location.origin).replace(/^http/, 'ws');
  const TERMINAL_WS = cfg.terminalWs || ('ws://' + location.hostname + ':1471/api/terminal/openWs');

  const els = {};
  let currentView = null;

  const railItems = [
    { key: 'dashboard', label: 'Dashboard', hash: '#/dashboard', icon: 'dashboard' },
    { key: 'campaigns', label: 'Campaigns', hash: '#/campaigns', icon: 'campaigns' },
    { key: 'pineap', label: 'PineAP', hash: '#/pineap', icon: 'pineap' },
    { key: 'recon', label: 'Recon', hash: '#/recon', icon: 'recon' },
    { key: 'logging', label: 'Logging', hash: '#/logging', icon: 'logging' },
    { key: 'modules', label: 'Modules & Packages', hash: '#/modules', icon: 'modules' },
    { key: 'settings', label: 'Settings', hash: '#/settings', icon: 'settings' }
  ];
  const railDividers = new Set(['campaigns', 'logging']);

  function keyOf(hash) {
    const seg = (hash || '#/dashboard').split('/')[0].replace('#/', '');
    return seg || 'dashboard';
  }

  function buildRail() {
    const rail = els.rail;
    rail.innerHTML = '';
    railItems.forEach((it) => {
      if (railDividers.has(it.key)) {
        const d = document.createElement('div');
        d.className = 'entry divider';
        rail.appendChild(d);
      }
      const a = document.createElement('a');
      a.className = 'entry';
      a.href = it.hash;
      a.title = it.label;
      a.innerHTML = '<span class="entry-icon">' + PineappleIcons[it.icon] + '</span><span class="entry-text">' + it.label + '</span>';
      a.addEventListener('click', (e) => { e.preventDefault(); location.hash = it.hash; });
      rail.appendChild(a);
    });
    const foot = document.createElement('div');
    foot.className = 'rail-footer';
    const open = document.createElement('a');
    open.className = 'entry';
    open.title = 'Open Menu';
    open.innerHTML = '<span class="entry-icon">' + PineappleIcons.chevron + '</span><span class="entry-text">Open Menu</span>';
    open.addEventListener('click', (e) => {
      e.preventDefault();
      const openState = localStorage.getItem('pw_rail') === 'open';
      localStorage.setItem('pw_rail', openState ? 'closed' : 'open');
      els.rail.classList.toggle('open', !openState);
    });
    foot.appendChild(open);
    rail.appendChild(foot);
  }

  function route() {
    const hash = location.hash || '#/dashboard';
    const name = routes[hash];
    if (currentView && currentView.destroy) currentView.destroy();
    els.content.innerHTML = '';
    if (!name || !views[name]) {
      const ph = document.createElement('div');
      ph.className = 'section empty';
      ph.textContent = 'View not available.';
      els.content.appendChild(ph);
      currentView = null;
    } else {
      currentView = views[name](els.content);
    }
    const key = keyOf(hash);
    Array.prototype.forEach.call(els.rail.querySelectorAll('.entry'), (a) => {
      a.classList.toggle('active', a.getAttribute('href') === hash || keyOf(a.getAttribute('href')) === key);
    });
  }

  function toast(msg, kind) {
    const d = document.createElement('div');
    d.className = 'toast ' + (kind || 'info');
    d.textContent = msg;
    els.toasts.appendChild(d);
    setTimeout(() => d.remove(), 4000);
  }

  function showApp() {
    els.login.classList.add('hidden');
    els.app.classList.remove('hidden');
    Theme.apply();
    Live.start();
    route();
  }

  function showLogin() {
    els.app.classList.add('hidden');
    els.login.classList.remove('hidden');
  }

  function init() {
    els.login = document.getElementById('login-screen');
    els.app = document.getElementById('app');
    els.rail = document.getElementById('rail');
    els.content = document.getElementById('content');
    els.toasts = document.getElementById('toast-container');

    document.getElementById('login-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const btn = document.getElementById('login-button');
      const pw = document.getElementById('login-password').value;
      document.getElementById('login-error').textContent = '';
      btn.disabled = true;
      PagerAPI.login('root', pw)
        .then(() => { document.getElementById('login-password').value = ''; showApp(); toast('Logged in'); })
        .catch((err) => {
          document.getElementById('login-error').textContent = (err && err.message && err.message !== 'unauthorized')
            ? 'Login failed.' : 'Invalid credentials.';
        })
        .finally(() => { btn.disabled = false; });
    });

    document.getElementById('terminal-btn').addEventListener('click', () => {
      if (typeof Term === 'undefined') toast('Terminal not available yet');
      else Term.toggle();
    });
    document.getElementById('terminal-close').addEventListener('click', () => {
      if (typeof Term === 'undefined') toast('Terminal not available yet');
      else Term.toggle();
    });
    window.addEventListener('hashchange', route);
    document.addEventListener('keydown', (e) => {
      const t = e.target;
      if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT')) return;
      if (e.ctrlKey || e.metaKey || e.altKey) return;
      const map = { d: '#/dashboard', c: '#/campaigns', p: '#/pineap', r: '#/recon', l: '#/logging', m: '#/modules' };
      if (map[e.key.toLowerCase()]) { location.hash = map[e.key.toLowerCase()]; }
      else if (e.key === '`') { if (typeof Term !== 'undefined') Term.toggle(); }
    });

    PagerAPI.setBase(API_BASE);
    PagerAPI.on401 = () => showLogin();
    buildRail();
    Theme.apply();
    checkSession();
  }

  function checkSession() {
    PagerAPI.get('/api/api_ping')
      .then(() => showApp())
      .catch(() => showLogin());
  }

  const routes = {
    '#/dashboard': 'dashboard',
    '#/campaigns': 'campaigns',
    '#/pineap': 'pineap',
    '#/pineap/open': 'pineap_open',
    '#/pineap/clients': 'pineap_clients',
    '#/pineap/filtering': 'pineap_filtering',
    '#/pineap/aps': 'pineap_aps',
    '#/pineap/impersonation': 'pineap_impersonation',
    '#/recon': 'recon',
    '#/recon/handshakes': 'recon_handshakes',
    '#/logging': 'logging',
    '#/logging/system': 'logging_system',
    '#/modules': 'modules',
    '#/settings': 'settings'
  };

  return { init, route, toast, showLogin, wsUrl: (p) => WS_BASE + p, terminalWs: TERMINAL_WS, apiBase: API_BASE,
           keyOf, railItems, go: (h) => { location.hash = h; } };
})();

const Live = (() => {
  let ws = null;
  let ever = false;
  let poll = null;
  const subs = [];
  let timer = null;
  function stopPoll() {
    if (poll) { clearInterval(poll); poll = null; }
  }
  function start() {
    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) return;
    stopPoll();
    try { ws = new WebSocket(App.wsUrl('/api/ws')); }
    catch (e) { fallback(); return; }
    ws.onopen = () => { ever = true; };
    ws.onmessage = (ev) => {
      let msg;
      try { msg = JSON.parse(ev.data); } catch (e) { return; }
      subs.forEach((fn) => fn(msg));
      updateBar(msg);
    };
    ws.onclose = () => {
      ws = null;
      clearTimeout(timer);
      if (ever) timer = setTimeout(start, 5000);
      else fallback();
    };
    ws.onerror = () => { try { ws.close(); } catch (e) {} };
  }
  function fallback() {
    stopPoll();
    poll = setInterval(async () => {
      try {
        const r = await PagerAPI.get('/api/status');
        const msg = { type: 'tick', status: r.data, clients: r.data.clients };
        subs.forEach((fn) => fn(msg));
        updateBar(msg);
      } catch (e) {}
    }, 5000);
  }
  function updateBar(msg) {
    const b = (msg.status || {}).battery || {};
    const n = (msg.clients || []).length;
    const el = document.getElementById('live-status');
    if (el) el.textContent = 'BAT ' + (b.level == null ? '--' : b.level + '%' + (b.charging ? '+' : '')) + '  CLIENTS ' + n;
  }
  return { start, onTick: (fn) => subs.push(fn) };
})();

document.addEventListener('DOMContentLoaded', () => App.init());

Step 3: Verify no syntax errors

$c = Get-Content -Raw payload\user\general\pager-webui\www\js\app.js
if ($c -match 'function|const' -and $c -match 'App.init') { 'app.js OK' }
$d = Get-Content -Raw payload\user\general\pager-webui\www\js\chart.js
if ($d -match 'MiniChart.draw') { 'chart.js OK' }

Also open http://127.0.0.1:8000/ in a browser (dev server from Task 2) — the login card renders with the logo and no console errors; the #rail renders 7 entries + footer.

Step 4: Commit

git add payload/user/general/pager-webui/www/js/app.js payload/user/general/pager-webui/www/js/chart.js
git commit -m "feat: shell JS - routing, icon rail, keyboard shortcuts, theme"

Task 6: Views — Dashboard, Campaigns, tab-bar helper

Files:

Modify: payload/user/general/pager-webui/www/js/views.js (replace everything; helper functions h, table, fmtTime, fmtDur, badge, btn are retained/restyled)

Interfaces:

Consumes: PagerAPI, App.toast, App.go, App.keyOf, Live.onTick, MiniChart.draw, DOM helpers.
Produces (used by Tasks 7–8): shared helpers h, table, fmtTime, fmtDur, btn, badge, plus tabBar(box, items, activeHash) which renders .tabbar with .tab items linking to activeHash values and a blue .ink bar; and view functions views.dashboard, views.campaigns (this task) and views.pineap_open … views.settings (Tasks 7–8).
Step 1: Replace views.js with helpers + Dashboard + Campaigns

Keep h, table, fmtTime, fmtDur, badge, btn from the current file (identical semantics) except btn, which must always carry the base btn class so Task 3's .btn/.btn.ghost/.btn.danger styles apply:

const btn = (label, onclk, cls) => h('button', { class: 'btn ' + (cls || ''), onclick: onclk, text: label });

const tabBar = (box, items, activeHash) => {
  const bar = h('div', { class: 'tabbar' });
  items.forEach((it) => {
    const t = h('a', { class: 'tab' + (it.hash === activeHash ? ' active' : ''), href: it.hash, text: it.label });
    t.addEventListener('click', (e) => { e.preventDefault(); location.hash = it.hash; });
    bar.appendChild(t);
  });
  box.appendChild(bar);
  return bar;
};

Replace views.dashboard:

views.dashboard = (root) => {
  const history = { clients: [], handshakes: [] };
  const max = 60;

  const title = h('h1', { class: 'page-title', text: 'Dashboard' });
  root.appendChild(title);

  const grid = h('div', { class: 'cards' });
  root.appendChild(grid);
  const defs = [
    ['clients', 'Clients Connected'], ['handshakes', 'Handshakes Captured'],
    ['disk', 'Disk Usage'], ['uptime', 'Uptime']
  ];
  const cards = {};
  defs.forEach(([k, label]) => {
    const card = h('div', { class: 'card' },
      h('div', { class: 'card-label', text: label }),
      h('div', { class: 'card-value', text: '--' }));
    grid.appendChild(card);
    cards[k] = card.querySelector('.card-value');
  });

  const chartBox = h('div', { class: 'section' },
    h('h2', {}, 'Clients'),
    h('canvas', { id: 'dash-chart', style: 'width:100%;height:140px' }));
  root.appendChild(chartBox);
  const canvas = chartBox.querySelector('#dash-chart');

  const update = (msg) => {
    const s = msg.status || {};
    const n = (msg.clients || []).length;
    history.clients.push(n);
    history.handshakes.push(0);
    if (history.clients.length > max) { history.clients.shift(); history.handshakes.shift(); }
    cards.clients.textContent = n;
    const b = s.battery || {};
    if (s.uptime != null) cards.uptime.textContent = fmtDur(s.uptime);
    if (s.disk) cards.disk.textContent = (s.disk.used / 1048576).toFixed(1) + ' / ' + (s.disk.size / 1048576).toFixed(1) + ' GB';
    if (typeof MiniChart !== 'undefined') {
      MiniChart.draw(canvas, [
        { label: 'Clients', color: '#1976d2', points: history.clients },
        { label: 'Handshakes', color: '#7cb342', points: history.handshakes }
      ]);
    }
  };
  Live.onTick(update);
  PagerAPI.get('/api/status').then((r) => update({ status: r.data, clients: r.data.clients }));
  PagerAPI.get('/api/pineap/handshakes').then((r) => {
    cards.handshakes.textContent = (r.data.files || []).length;
    history.handshakes = new Array(history.clients.length).fill((r.data.files || []).length);
  }).catch(() => {});

  const clBox = h('div', { class: 'section' },
    h('h2', {}, 'Connected Clients'),
    h('div', { id: 'dash-clients' }));
  root.appendChild(clBox);
  const hsBox = h('div', { class: 'section' },
    h('h2', {}, 'Captured WPA Handshakes'),
    h('div', { id: 'dash-handshakes' }));
  root.appendChild(hsBox);

  function loadClients() {
    PagerAPI.get('/api/pineap/clients').then((r) => {
      document.getElementById('dash-clients').innerHTML = '';
      document.getElementById('dash-clients').appendChild(table(
        [{ label: 'MAC', key: 'mac' }, { label: 'Interface', key: 'iface' }, { label: 'RSSI', key: 'rssi' },
         { label: '', render: () => '' }],
        r.data.clients,
        (c) => ({ style: 'cursor:pointer',
          onclick: () => { if (confirm('Deauthenticate ' + c.mac + '?')) PagerAPI.post('/api/pineap/deauth/client', { mac: c.mac }).then(() => App.toast('Deauthenticated')).then(loadClients); } })));
      const cols = ['MAC', 'Interface', 'RSSI'];
      document.getElementById('dash-clients').querySelectorAll('.tbl th').forEach((th, i) => { if (i >= cols.length) th.textContent = 'Deauth'; });
    }).catch(() => {});
  }
  function loadHandshakes() {
    PagerAPI.get('/api/pineap/handshakes').then((r) => {
      document.getElementById('dash-handshakes').innerHTML = '';
      document.getElementById('dash-handshakes').appendChild(table(
        [{ label: 'File', key: 'name' }, { label: 'Size', key: 'size' }, { label: 'Modified', key: 'mtime' }],
        (r.data.files || []).map((f) => ({ name: f.name, size: f.size, mtime: fmtTime(f.mtime) }))));
    }).catch(() => {});
  }
  loadClients();
  loadHandshakes();
  const iv = setInterval(loadClients, 10000);
  return { destroy: () => clearInterval(iv) };
};

Replace views.payloads... no — add views.campaigns:

views.campaigns = (root) => {
  root.appendChild(h('h1', { class: 'page-title', text: 'Campaigns' }));
  root.appendChild(h('div', { class: 'section empty' },
    'Campaigns are not supported on the WiFi Pineapple Pager.'));
  return { destroy: () => {} };
};

Remove the old views.payloads, views.logs, views.settings, views.pineap, views.recon, views.handshakes definitions from the file (they are re-added in Tasks 7–8). Keep the file loading without errors — every views.* referenced by App.routes must exist by the end of Task 8; for now, Tasks 7–8 add the rest.

Step 2: Verify

With the dev server running, log in and navigate to #/dashboard: the page renders the title, 4 cards, a chart canvas, and the two tables; no console errors. Navigate to #/campaigns → placeholder card.

Step 3: Commit

git add payload/user/general/pager-webui/www/js/views.js
git commit -m "feat: dashboard (cards+chart+tables) and campaigns placeholder"

Task 7: Views — PineAP Suite (5 tabs)

Files:

Modify: payload/user/general/pager-webui/www/js/views.js

Interfaces:

Consumes: tabBar, helpers, PagerAPI, App.toast, App.go.
Produces: views.pineap (wrapper that renders the tab bar and delegates to the active sub-view), views.pineap_open, views.pineap_clients, views.pineap_filtering, views.pineap_aps, views.pineap_impersonation.
Step 1: Add the PineAP views

const PINEAP_TABS = [
  { label: 'Open', hash: '#/pineap/open' },
  { label: 'Clients', hash: '#/pineap/clients' },
  { label: 'Filtering', hash: '#/pineap/filtering' },
  { label: 'APs', hash: '#/pineap/aps' },
  { label: 'Impersonation', hash: '#/pineap/impersonation' }
];

function pineapShell(root, activeHash, inner) {
  root.appendChild(h('h1', { class: 'page-title', text: 'PineAP Suite' }));
  tabBar(root, PINEAP_TABS, activeHash);
  const box = h('div', {});
  root.appendChild(box);
  return inner(box);
}

views.pineap = (root) => {
  const hash = location.hash || '#/pineap';
  if (hash === '#/pineap') { location.hash = '#/pineap/open'; return { destroy: () => {} }; }
  const view = hash.split('/')[2] || 'open';
  const map = {
    open: views.pineap_open, clients: views.pineap_clients,
    filtering: views.pineap_filtering, aps: views.pineap_aps,
    impersonation: views.pineap_impersonation
  };
  if (!map[view]) { location.hash = '#/pineap/open'; return { destroy: () => {} }; }
  return pineapShell(root, hash, (box) => map[view](box));
};

views.pineap_open = current views.pineap settings content (settings toggles + bands + reload) with the old labels:

views.pineap_open = (root) => {
  const settings = {};
  const toggleDefs = [
    ['mimic', 'Mimic'], ['advertise', 'Advertise'], ['collect_probes', 'Collect probes'],
    ['collect_handshakes', 'Collect handshakes'], ['random_mac', 'Random MAC'], ['wigle', 'WiGLE']
  ];
  const box = h('div', { class: 'section' }, h('h2', {}, 'PineAP Settings'));
  root.appendChild(box);
  toggleDefs.forEach(([k, label]) => {
    const cb = h('input', { type: 'checkbox', id: 'set-' + k });
    const wrap = h('label', { class: 'toggle' }, cb, ' ' + label);
    settings[k] = cb;
    cb.addEventListener('change', () => saveSettings());
    box.appendChild(wrap);
  });
  const bandsSel = h('select', { id: 'set-bands' },
    h('option', { value: '2.4', text: '2.4 GHz' }),
    h('option', { value: '5', text: '5 GHz' }),
    h('option', { value: 'dual', text: 'Dual' }));
  bandsSel.addEventListener('change', () => saveSettings());
  box.appendChild(h('label', {}, 'Bands', bandsSel));
  box.appendChild(h('div', { class: 'row' },
    h('div', {}, btn('Reload config', () => { PagerAPI.post('/api/pineap/settings', {}).then(loadSettings); }, 'ghost'))));

  function saveSettings() {
    const body = {};
    toggleDefs.forEach(([k]) => { body[k] = settings[k].checked; });
    body.bands = bandsSel.value;
    PagerAPI.post('/api/pineap/settings', body).then(() => App.toast('Settings saved'));
  }
  function loadSettings() {
    PagerAPI.get('/api/pineap/settings').then((r) => {
      const s = r.data.settings || {};
      toggleDefs.forEach(([k]) => { settings[k].checked = !!s[k]; });
      bandsSel.value = s.bands || '2.4';
    });
  }
  loadSettings();
  return { destroy: () => {} };
};

views.pineap_clients = current connected-clients list (from the old flat PineAP view):

views.pineap_clients = (root) => {
  const box = h('div', { class: 'section' }, h('h2', {}, 'Connected Clients'));
  root.appendChild(box);
  function render() {
    box.innerHTML = '';
    box.appendChild(h('h2', {}, 'Connected Clients'));
    box.appendChild(btn('Refresh', load, 'ghost'));
    box.appendChild(table(
      [{ label: 'MAC', key: 'mac' }, { label: 'Interface', key: 'iface' },
       { label: 'RSSI', key: 'rssi' }, { label: '', render: () => '' }],
      state.clients,
      (r) => ({ style: 'cursor:pointer',
        onclick: () => { if (confirm('Kick ' + r.mac + '?')) PagerAPI.post('/api/pineap/clients/kick', { mac: r.mac }).then(() => App.toast('Kicked')).then(load); } })));
    const cols = ['MAC', 'Interface', 'RSSI'];
    box.querySelectorAll('.tbl th').forEach((th, i) => { if (i >= cols.length) th.textContent = 'Kick'; });
  }
  function load() {
    PagerAPI.get('/api/pineap/clients').then((r) => { state.clients = r.data.clients; render(); });
  }
  const state = { clients: [] };
  load();
  const iv = setInterval(load, 10000);
  return { destroy: () => clearInterval(iv) };
};

views.pineap_filtering = current filter sections (Client Filter + SSID Filter) rendered side by side in two .sections:

views.pineap_filtering = (root) => {
  const state = { cMode: '', cEntries: [], sMode: '', sEntries: [] };
  const cfBox = h('div', { class: 'section' }, h('h2', {}, 'PineAP Client Filter'));
  const sfBox = h('div', { class: 'section' }, h('h2', {}, 'PineAP SSID Filter'));
  root.appendChild(cfBox);
  root.appendChild(sfBox);

  function renderFilter(box, kind) {
    box.innerHTML = '';
    box.appendChild(h('h2', {}, kind === 'client' ? 'PineAP Client Filter' : 'PineAP SSID Filter'));
    const list = kind === 'client' ? state.cEntries : state.sEntries;
    const mode = kind === 'client' ? state.cMode : state.sMode;
    const path = '/api/pineap/filters/' + kind;
    const modeSel = h('select', { id: 'mode-' + kind },
      h('option', { value: 'allow', text: 'Allow list' }),
      h('option', { value: 'deny', text: 'Deny list' }),
      h('option', { value: 'off', text: 'Off' }));
    modeSel.value = mode;
    modeSel.addEventListener('change', () => {
      PagerAPI.post(path, { action: 'set_mode', mode: modeSel.value }).then(() => refresh());
    });
    const valueIn = h('input', { id: 'val-' + kind });
    box.appendChild(h('div', { class: 'row' },
      h('div', {}, h('label', {}, 'Mode', modeSel)),
      h('div', {}, h('label', {}, 'Value', valueIn)),
      h('div', {}, btn('Add', () => {
        const v = document.getElementById('val-' + kind).value.trim();
        if (!v) return;
        PagerAPI.post(path, { action: 'add', value: v }).then(() => { refresh(); App.toast('Added'); });
      })),
      h('div', {}, btn('Clear', () => PagerAPI.post(path, { action: 'clear' }).then(refresh), 'danger'))));
    box.appendChild(table(
      [{ label: kind === 'client' ? 'MAC' : 'SSID', key: 'value' }],
      list.map((e) => ({ value: e })),
      (r) => ({ style: 'cursor:pointer',
        onclick: () => { if (confirm('Delete ' + r.value + '?')) PagerAPI.post(path, { action: 'delete', value: r.value }).then(refresh); } })));
  }
  function refresh() {
    PagerAPI.get('/api/pineap/filters/client').then((r) => { state.cMode = r.data.mode; state.cEntries = r.data.entries; renderFilter(cfBox, 'client'); });
    PagerAPI.get('/api/pineap/filters/ssid').then((r) => { state.sMode = r.data.mode; state.sEntries = r.data.entries; renderFilter(sfBox, 'ssid'); });
  }
  refresh();
  return { destroy: () => {} };
};

views.pineap_aps (uses the Task 1 endpoint):

views.pineap_aps = (root) => {
  const box = h('div', { class: 'section' }, h('h2', {}, 'Access Points'));
  root.appendChild(box);
  function load() {
    box.innerHTML = '';
    box.appendChild(h('h2', {}, 'Access Points'));
    box.appendChild(btn('Refresh', load, 'ghost'));
    PagerAPI.get('/api/pineap/aps').then((r) => {
      const rows = (r.data.aps || []).map((a) => ({
        bssid: a.bssid || '--', ssid: a.ssid || '--',
        channel: a.channel == null ? '--' : a.channel,
        signal: a.signal == null ? '--' : a.signal + ' dBm',
        encryption: a.encryption || '--', iface: a.iface || '--'
      }));
      box.appendChild(table(
        [{ label: 'BSSID', key: 'bssid' }, { label: 'SSID', key: 'ssid' },
         { label: 'Channel', key: 'channel' }, { label: 'Signal', key: 'signal' },
         { label: 'Encryption', key: 'encryption' }, { label: 'Interface', key: 'iface' }],
        rows));
      if (!rows.length) box.appendChild(h('div', { class: 'empty', text: 'No access points found.' }));
    }).catch(() => box.appendChild(h('div', { class: 'empty', text: 'Scan failed.' })));
  }
  load();
  const iv = setInterval(load, 30000);
  return { destroy: () => clearInterval(iv) };
};

views.pineap_impersonation = the current SSID pool section:

views.pineap_impersonation = (root) => {
  const state = { ssids: [] };
  const box = h('div', { class: 'section' }, h('h2', {}, 'SSID Impersonation'));
  root.appendChild(box);
  function render() {
    box.innerHTML = '';
    box.appendChild(h('h2', {}, 'SSID Impersonation'));
    const row = h('div', { class: 'row' },
      h('div', {}, h('label', {}, 'SSID', h('input', { id: 'pool-ssid' }))),
      h('div', {}, btn('Add', () => {
        const v = document.getElementById('pool-ssid').value.trim();
        if (!v) return;
        PagerAPI.post('/api/pineap/ssids', { action: 'add', ssid: v }).then((r) => { state.ssids = r.data.ssids; render(); App.toast('Added'); });
      })),
      h('div', {}, btn('Clear', () => PagerAPI.post('/api/pineap/ssids', { action: 'clear' }).then((r) => { state.ssids = r.data.ssids; render(); }), 'danger')));
    const actions = h('div', { class: 'row', style: 'margin-top:10px' },
      h('div', {}, btn('Start', () => PagerAPI.post('/api/pineap/ssidpool/start'))),
      h('div', {}, btn('Stop', () => PagerAPI.post('/api/pineap/ssidpool/stop'))),
      h('div', {}, btn('Collect start', () => PagerAPI.post('/api/pineap/ssidpool/collect_start'))),
      h('div', {}, btn('Collect stop', () => PagerAPI.post('/api/pineap/ssidpool/collect_stop'))));
    box.appendChild(row);
    box.appendChild(actions);
    box.appendChild(table([{ label: 'SSID', key: 'ssid' }], state.ssids.map((s) => ({ ssid: s }))));
    document.querySelectorAll('#pool-ssid').forEach((x) => { x.value = ''; });
  }
  function load() {
    PagerAPI.get('/api/pineap/ssids').then((r) => { state.ssids = r.data.ssids; render(); });
  }
  load();
  return { destroy: () => {} };
};

Step 2: Verify

Navigate #/pineap, #/pineap/open, #/pineap/clients, #/pineap/filtering, #/pineap/aps, #/pineap/impersonation — tab bar shows 5 tabs, active tab matches hash, each sub-view renders, APs table shows scan results or "No access points found."

Step 3: Commit

git add payload/user/general/pager-webui/www/js/views.js
git commit -m "feat: PineAP Suite with Open/Clients/Filtering/APs/Impersonation tabs"

Task 8: Views — Recon, Logging, Modules & Packages, Settings

Files:

Modify: payload/user/general/pager-webui/www/js/views.js

Interfaces:

Consumes: tabBar, helpers, PagerAPI, App.toast.
Produces: views.recon, views.recon_handshakes, views.logging, views.logging_system, views.modules, views.settings.
Step 1: Add Recon views

const RECON_TABS = [
  { label: 'Overview', hash: '#/recon' },
  { label: 'Handshakes', hash: '#/recon/handshakes' }
];
const LOGGING_TABS = [
  { label: 'Overview', hash: '#/logging' },
  { label: 'System', hash: '#/logging/system' }
];

views.recon = (root) => {
  root.appendChild(h('h1', { class: 'page-title', text: 'Recon' }));
  tabBar(root, RECON_TABS, '#/recon');
  const listBox = h('div', { class: 'section' }, h('h2', {}, 'Scans'));
  const detailBox = h('div', { class: 'section hidden' }, h('h2', {}, 'Scan Detail'));
  root.appendChild(listBox);
  root.appendChild(detailBox);

  function loadScans() {
    PagerAPI.get('/api/recon/scans').then((r) => {
      listBox.innerHTML = '';
      listBox.appendChild(h('h2', {}, 'Scans'));
      const row = h('div', { class: 'row' },
        h('div', {}, btn('New scan', () => PagerAPI.post('/api/recon/start').then(() => App.toast('Scan started')))),
        h('div', {}, btn('Stop', () => PagerAPI.post('/api/recon/stop').then(() => App.toast('Scan stopped')), 'danger')),
        h('div', {}, btn('Refresh', loadScans, 'ghost')));
      listBox.appendChild(row);
      listBox.appendChild(table(
        [{ label: 'ID', key: 'id' }, { label: 'Timestamp', key: 'timestamp' }],
        (r.data.scans || []).map((s) => ({ id: s.id, timestamp: fmtTime(s.timestamp) })),
        (s) => ({ style: 'cursor:pointer', onclick: () => loadDetail(s.id) })));
    });
  }
  function loadDetail(id) {
    PagerAPI.get('/api/recon/scans/' + id).then((r) => {
      detailBox.classList.remove('hidden');
      detailBox.innerHTML = '';
      detailBox.appendChild(h('h2', {}, 'Scan #' + id));
      const aps = r.data.aps || [], hs = r.data.handshakes || [];
      detailBox.appendChild(h('h3', { style: 'margin:8px 0 4px' }, 'APs (' + aps.length + ')'));
      detailBox.appendChild(table(
        [{ label: 'BSSID', key: 'bssid' }, { label: 'SSID', key: 'ssid' }],
        aps.map((a) => ({ bssid: a.bssid || a.mac || a.essid || a.wifi_device || '--', ssid: a.ssid || '--' }))));
      detailBox.appendChild(h('h3', { style: 'margin:8px 0 4px' }, 'Handshakes (' + hs.length + ')'));
      detailBox.appendChild(table(
        [{ label: 'BSSID', key: 'bssid' }, { label: 'Client', key: 'client' }],
        hs.map((x) => ({ bssid: x.bssid || x.ap_mac || '--', client: x.client || x.client_mac || '--' }))));
    });
  }
  loadScans();
  return { destroy: () => {} };
};

views.recon_handshakes = the loot files table (from the old flat views.handshakes):

views.recon_handshakes = (root) => {
  root.appendChild(h('h1', { class: 'page-title', text: 'Recon' }));
  tabBar(root, RECON_TABS, '#/recon/handshakes');
  const box = h('div', { class: 'section' }, h('h2', {}, 'Handshakes'));
  root.appendChild(box);
  function load() {
    PagerAPI.get('/api/pineap/handshakes').then((r) => {
      box.innerHTML = '';
      box.appendChild(h('h2', {}, 'Handshakes'));
      const row = h('div', { class: 'row' },
        h('div', {}, btn('Download all (zip)', () => { window.location = App.apiBase + '/api/loot/zip'; })),
        h('div', {}, btn('Archive', () => PagerAPI.post('/api/loot/archive').then(() => App.toast('Archived')))),
        h('div', {}, btn('Refresh', load, 'ghost')));
      box.appendChild(row);
      box.appendChild(table(
        [{ label: 'File', key: 'name' }, { label: 'Size', key: 'size' },
         { label: 'Modified', key: 'mtime' }, { label: '', render: () => '' }],
        (r.data.files || []).map((f) => ({ name: f.name, size: f.size, mtime: fmtTime(f.mtime) })),
        (f) => ({ style: 'cursor:pointer',
          onclick: () => { if (confirm('Delete ' + f.name + '?')) PagerAPI.del('/api/pineap/handshakes', { name: f.name }).then(load); } })));
      box.querySelectorAll('.tbl th')[3].textContent = 'Delete';
    });
  }
  load();
  return { destroy: () => {} };
};

Step 2: Add Logging views

views.logging = (root) => {
  root.appendChild(h('h1', { class: 'page-title', text: 'Logging' }));
  tabBar(root, LOGGING_TABS, '#/logging');
  const sysBox = h('div', { class: 'section' }, h('h2', {}, 'System Log'));
  const pineBox = h('div', { class: 'section' }, h('h2', {}, 'PineAP Log'));
  root.appendChild(sysBox);
  root.appendChild(pineBox);
  function render(box, kind) {
    PagerAPI.get('/api/logging/' + kind + '?lines=200').then((r) => {
      box.innerHTML = '';
      box.appendChild(h('h2', {}, kind === 'system' ? 'System Log' : 'PineAP Log'));
      box.appendChild(btn('Refresh', () => render(box, kind), 'ghost'));
      box.appendChild(h('pre', { class: 'logs' }, (r.data.lines || []).join('\n')));
    }).catch(() => {});
  }
  render(sysBox, 'system');
  render(pineBox, 'pineap');
  const iv = setInterval(() => render(sysBox, 'system'), 10000);
  return { destroy: () => clearInterval(iv) };
};

views.logging_system = (root) => {
  root.appendChild(h('h1', { class: 'page-title', text: 'Logging' }));
  tabBar(root, LOGGING_TABS, '#/logging/system');
  const box = h('div', { class: 'section' }, h('h2', {}, 'System Log'));
  root.appendChild(box);
  function render() {
    PagerAPI.get('/api/logging/system?lines=400').then((r) => {
      box.innerHTML = '';
      box.appendChild(h('h2', {}, 'System Log'));
      box.appendChild(btn('Refresh', render, 'ghost'));
      box.appendChild(h('pre', { class: 'logs' }, (r.data.lines || []).join('\n')));
    }).catch(() => {});
  }
  render();
  const iv = setInterval(render, 10000);
  return { destroy: () => clearInterval(iv) };
};

Step 3: Add Modules & Packages view (payload portal, from the old flat views.payloads, plus a search filter)

views.modules = (root) => {
  root.appendChild(h('h1', { class: 'page-title', text: 'Modules & Packages' }));
  const box = h('div', { class: 'section' }, h('h2', {}, 'Payloads'));
  root.appendChild(box);
  function load(filter) {
    PagerAPI.get('/api/payloads/index').then((r) => {
      box.innerHTML = '';
      box.appendChild(h('h2', {}, 'Payloads'));
      const search = h('input', { id: 'mod-search', placeholder: 'Search…', style: 'max-width:280px' });
      box.appendChild(search);
      box.appendChild(btn('Refresh', () => load(search.value), 'ghost'));
      const payloads = (r.data.payloads || r.data || [])
        .filter((p) => {
          const q = (filter || '').toLowerCase();
          if (!q) return true;
          return ((p.name || p.title || p.key || '') + ' ' + (p.desc || '')).toLowerCase().indexOf(q) !== -1;
        });
      box.appendChild(table(
        [{ label: 'Name', key: 'name' }, { label: 'Description', key: 'desc' }, { label: '', render: () => '' }],
        payloads.map((p) => ({ name: p.name || p.title || p.key, desc: p.desc || '', key: p.key || p.id || p.name })),
        (p) => ({ onclick: (e) => e.stopPropagation() })));
      const rows = box.querySelectorAll('.tbl tbody tr');
      rows.forEach((tr, i) => {
        const p = payloads[i];
        const td = tr.cells[2];
        td.appendChild(btn('Install', () => PagerAPI.post('/api/payloads/install', { key: p.key }).then(() => App.toast('Installing'))));
        td.appendChild(btn('Remove', () => PagerAPI.post('/api/payloads/remove', { key: p.key }).then(() => App.toast('Removed')), 'danger'));
      });
      search.addEventListener('input', () => load(search.value));
    });
  }
  load('');
  return { destroy: () => {} };
};

Step 4: Add Settings view (from the old flat views.settings, with a theme selector added)

views.settings = (root) => {
  root.appendChild(h('h1', { class: 'page-title', text: 'Settings' }));
  const general = h('div', { class: 'section' }, h('h2', {}, 'General'));
  const ntpBox = h('div', { class: 'section' }, h('h2', {}, 'Time (NTP)'));
  const passBox = h('div', { class: 'section' }, h('h2', {}, 'Device Password'));
  const webui = h('div', { class: 'section' }, h('h2', {}, 'WebUI Preferences'));
  root.appendChild(general);
  root.appendChild(ntpBox);
  root.appendChild(passBox);
  root.appendChild(webui);

  PagerAPI.get('/api/status').then((r) => {
    const s = r.data;
    general.appendChild(h('p', {}, 'Firmware: ', h('code', { text: s.firmware || '--' })));
    general.appendChild(h('p', {}, 'Model: ', h('code', { text: 'WiFi Pineapple Pager' })));
    general.appendChild(h('p', {}, 'Uptime: ', h('code', { text: fmtDur(s.uptime) })));
    general.appendChild(h('p', {}, 'Disk: ', h('code', { text: s.disk ? (s.disk.used / 1048576).toFixed(1) + ' / ' + (s.disk.size / 1048576).toFixed(1) + ' GB' : '--' })));
  });

  const hnInput = h('input', { id: 'set-hostname' });
  PagerAPI.get('/api/settings/hostname').then((r) => { hnInput.value = r.data.hostname || ''; });
  general.appendChild(h('div', { class: 'row' },
    h('div', {}, h('label', {}, 'Hostname', hnInput)),
    h('div', {}, btn('Save', () => PagerAPI.post('/api/settings/hostname', { hostname: hnInput.value }).then(() => App.toast('Saved'))))));

  PagerAPI.get('/api/settings/service').then((r) => {
    general.appendChild(h('p', {}, 'WebUI service: ',
      h('span', { class: 'badge ' + (r.data.running ? 'on' : 'off'), text: r.data.running ? 'RUNNING' : 'STOPPED' }),
      ' ', h('span', { class: 'muted', text: r.data.background ? '(background mode)' : '(foreground mode)' })));
  });

  const ntpEnabled = h('input', { type: 'checkbox', id: 'ntp-enabled' });
  const ntpServers = h('input', { id: 'ntp-servers' });
  PagerAPI.get('/api/settings/ntp').then((r) => {
    ntpEnabled.checked = !!r.data.enabled;
    ntpServers.value = (r.data.servers || []).join(', ');
  });
  ntpBox.appendChild(h('label', { class: 'toggle' }, ntpEnabled, ' Enabled'));
  ntpBox.appendChild(h('label', {}, 'NTP servers (comma separated)', ntpServers));
  ntpBox.appendChild(btn('Save', () => PagerAPI.post('/api/settings/ntp', {
    enabled: ntpEnabled.checked,
    servers: ntpServers.value.split(',').map((s) => s.trim()).filter(Boolean)
  }).then(() => App.toast('NTP saved')), 'ghost'));

  const newPw = h('input', { type: 'password', id: 'set-password' });
  passBox.appendChild(h('label', {}, 'New device password', newPw));
  passBox.appendChild(btn('Change password', () => {
    if (newPw.value.length < 4) { App.toast('Password too short', 'error'); return; }
    PagerAPI.post('/api/settings/password', { password: newPw.value }).then(() => { App.toast('Password changed'); newPw.value = ''; });
  }, 'danger'));

  const pollInput = h('input', { type: 'number', id: 'pref-poll', min: '2', max: '120' });
  pollInput.value = localStorage.getItem('pw-poll') || '5';
  pollInput.addEventListener('change', () => {
    localStorage.setItem('pw-poll', pollInput.value);
    App.toast('Poll interval saved (applies on next load)');
  });
  const themeSel = h('select', { id: 'pref-theme' },
    h('option', { value: 'light', text: 'Light' }),
    h('option', { value: 'dark', text: 'Dark' }));
  themeSel.value = Theme.current();
  themeSel.addEventListener('change', () => {
    localStorage.setItem(Theme.KEY, themeSel.value);
    Theme.apply();
    App.toast('Theme updated');
  });
  webui.appendChild(h('label', {}, 'Poll interval (s)', pollInput));
  webui.appendChild(h('label', {}, 'Theme', themeSel));

  return { destroy: () => {} };
};

Step 5: Remove leftover/duplicate definitions

Ensure the file defines exactly these views (no old flat views.pineap, views.recon, views.logs, views.payloads, views.handshakes, or the old views.settings in addition): dashboard, campaigns, pineap, pineap_open, pineap_clients, pineap_filtering, pineap_aps, pineap_impersonation, recon, recon_handshakes, logging, logging_system, modules, settings.

Verify with:

$v = Get-Content -Raw payload\user\general\pager-webui\www\js\views.js
@('dashboard','campaigns','pineap','pineap_open','pineap_clients','pineap_filtering','pineap_aps','pineap_impersonation','recon','recon_handshakes','logging','logging_system','modules','settings') | ForEach-Object { if ($v -match 'views\.' + $_ + ' ?=') { "$_ OK" } else { "$_ MISSING" } }

Expected: all OK.

Step 6: Verify every route

With the dev server running and logged in, visit each hash route and confirm the page renders without console errors: #/dashboard, #/campaigns, #/pineap/open, #/pineap/clients, #/pineap/filtering, #/pineap/aps, #/pineap/impersonation, #/recon, #/recon/handshakes, #/logging, #/logging/system, #/modules, #/settings. Test the theme selector toggles dark mode. Test keyboard shortcuts d, p, r, l, m, and backquote opens the terminal.

Step 7: Commit

git add payload/user/general/pager-webui/www/js/views.js
git commit -m "feat: Recon, Logging, Modules, Settings views with old IA tabs"

Task 9: Build, deploy, and on-device verification

Files:

No source changes.
Step 1: Run the full backend test suite

Get-ChildItem tests\test_*.py | ForEach-Object {
    $mod = "tests." + [IO.Path]::GetFileNameWithoutExtension($_.Name)
    & "$env:LOCALAPPDATA\Programs\Python\Python311\python.exe" -m unittest $mod -v
}

Expected: every module PASS (incl. new test_pineap_aps).

Step 2: Build and deploy to the Pager

& .\scripts\deploy.ps1 -SshKey "$HOME\.ssh\pager_key" -Password "<PAGER_PASSWORD>"

(If no key, use -Password "<PAGER_PASSWORD>" and rely on sshpass if installed; otherwise run the printed scp/ssh commands manually.)

Step 3: Verify the payload serves the new UI

curl.exe -s -o NUL -w "%{http_code} %{size_download}`n" http://172.16.52.1:8080/            # 200
curl.exe -s -o NUL -w "%{http_code} %{size_download}`n" http://172.16.52.1:8080/assets/logo.png   # 200, ~41k
curl.exe -s -o NUL -w "%{http_code} %{size_download}`n" http://172.16.52.1:8080/js/icons.js       # 200
curl.exe -s -o NUL -w "%{http_code} %{size_download}`n" http://172.16.52.1:8080/js/chart.js       # 200
curl.exe -s -o NUL -w "%{http_code} %{size_download}`n" http://172.16.52.1:8080/css/app.css       # 200
curl.exe -s -o NUL -w "%{http_code}`n" "http://172.16.52.1:8080/api/pineap/aps"                   # 401 (auth required)

Then log in via the browser and confirm /api/pineap/aps returns {"aps":[...],"count":n} when authenticated.

Step 4: On-device smoke pass (background + foreground modes)

Per spec v1 §8: run the payload in background mode, browse http://172.16.52.1:8080/, and walk every view in §Task 8 Step 6. Re-run in foreground mode (press B to stop) and repeat. Confirm: login card (gray bg, logo, password only), toolbar, rail expand/collapse + active indicator, tab bars, dashboard chart, theme toggle, keyboard shortcuts, terminal open/close, and that reboot persistence still holds (re-run payload, service auto-starts).

Step 5: Final commit of any smoke fixes

If any fix was needed during verification, commit it:

git add -A
git commit -m "fix: UI clone smoke-test fixes"

(Only if changes exist.)

Self-Review Notes (run before handing off)

Spec coverage: §3.2 tokens → Task 3; §3.3 shell → Tasks 4–5; §3.4 login → Tasks 4–5; §3.5 views → Tasks 6–8; §3.5 APs endpoint → Task 1; §3.6 data flow → Tasks 5–6; §3.7 error handling → retained toast/login-error logic; §4 testing → Task 9. Global Constraints (sidebar order, sub-pages, no Enterprise, password-only login, bottom-docked terminal) all enforced in Tasks 4–8.
Type/name consistency: h, table, fmtTime, fmtDur, btn, badge, tabBar are defined once (Task 6) and reused by Tasks 7–8; MiniChart.draw(canvas, series, opts) defined in Task 5 and consumed in Task 6; App.railItems/App.keyOf/App.go defined in Task 5; PineappleIcons keys (dashboard, campaigns, pineap, recon, logging, modules, settings, chevron, wifi, extension, receipt) match Task 2. The three Task-2 icons that Task 8 does not use (wifi, extension, receipt) are optional conveniences and may be dropped if unused.
Chart.js deviation: the old UI's Chart.js is inlined in its Angular bundle; no offline copy exists on the device or dev box, so the dashboard chart is a hand-rolled <canvas> renderer (Task 5) delivering the same visual (2-series line chart). This was flagged to the user during design; it replaces the vendored-Chart.js idea from the design discussion.
Git: each task commits independently; the spec (docs/specs/2026-08-11-pineapple-ui-clone-design.md) is already committed.

73 KiB Raw Blame History Unescape Escape

Pineapple UI Clone Implementation Plan

Global Constraints

Task 1: Backend — GET /api/pineap/aps

Task 2: Assets — fetch old-UI logo; add icons.js

Task 3: Theme CSS — Material light/dark rewrite of app.css

Task 4: Shell markup — rewrite index.html

Task 5: Shell JS — routing, rail, theme, shortcuts, chart

Task 6: Views — Dashboard, Campaigns, tab-bar helper

Task 7: Views — PineAP Suite (5 tabs)

Task 8: Views — Recon, Logging, Modules & Packages, Settings

Task 9: Build, deploy, and on-device verification

Self-Review Notes (run before handing off)

73 KiB

Raw Blame History

Task 1: Backend — `GET /api/pineap/aps`

Task 2: Assets — fetch old-UI logo; add `icons.js`

Task 3: Theme CSS — Material light/dark rewrite of `app.css`

Task 4: Shell markup — rewrite `index.html`