From 49a0e1cba1cb0953eaf606320bada3dc4e9afb39 Mon Sep 17 00:00:00 2001 From: Jon Vanvik Date: Tue, 23 Jun 2026 12:59:22 +0200 Subject: [PATCH 01/13] Restyle UI with neon/terminal "hackertyper" theme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Darker phosphor-black background with ambient neon vignette, monospace everywhere, glowing neon-green accents, and CRT scanline + brand-flicker effects. Restyle only — every class name HTML/app.js depends on is preserved (status pills, fec-cell, slot-arrow, table classes, etc.). - Neon-green primary / cyan secondary / magenta-red danger, all with text-shadow + box-shadow glow - Glowing focus rings on inputs, glowing buttons and selected rows - CRT scanline overlay (body::after, non-interactive) + subtle flicker - Neon scrollbars and selection highlight Verified by rendering the login view offscreen via Electron. Co-Authored-By: Claude Opus 4.8 --- renderer/app.css | 248 ++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 200 insertions(+), 48 deletions(-) diff --git a/renderer/app.css b/renderer/app.css index 28565a2..ca61885 100644 --- a/renderer/app.css +++ b/renderer/app.css @@ -1,21 +1,40 @@ -/* Simple, dense, operator-oriented UI. - No framework — just hand-tuned CSS. */ +/* Neon / terminal "hackertyper" theme. + Dense, operator-oriented UI — no framework, hand-tuned CSS. + Class names are load-bearing (HTML + renderer/app.js reference them); + this file only restyles, it doesn't rename anything. */ :root { - --bg: #0e1116; - --bg-elev: #161b22; - --bg-elev-2: #1f2630; - --fg: #e7edf3; - --fg-dim: #8a94a3; - --border: #2a313c; - --accent: #3ea6ff; - --accent-hover: #65baff; - --ok: #3fb950; - --warn: #d29922; - --danger: #f85149; - --danger-hover: #ff6a62; - --info: #58a6ff; - --mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; + /* Near-black base, faintly green-shifted like a phosphor display. */ + --bg: #03070a; + --bg-elev: #070d12; + --bg-elev-2: #0c151c; + + /* Phosphor-tinted text. */ + --fg: #d7f7ea; + --fg-dim: #6f9b8e; + --border: #123026; + + /* Neon accents. */ + --neon: #00ffa3; /* primary — terminal green/cyan */ + --neon-soft: #19f9d8; + --cyan: #38e1ff; + --magenta: #ff3df0; + + --accent: var(--neon); + --accent-hover: var(--neon-soft); + --ok: #2bff88; + --warn: #ffc44d; + --danger: #ff3b6b; + --danger-hover: #ff5d85; + --info: var(--cyan); + + --mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; + + /* Reusable glow shadows. */ + --glow-neon: 0 0 6px rgba(0, 255, 163, 0.55); + --glow-neon-strong: 0 0 10px rgba(0, 255, 163, 0.7), 0 0 22px rgba(0, 255, 163, 0.35); + --glow-danger: 0 0 8px rgba(255, 59, 107, 0.6); + --glow-cyan: 0 0 8px rgba(56, 225, 255, 0.55); } * { box-sizing: border-box; } @@ -26,16 +45,69 @@ html, body { height: 100%; background: var(--bg); color: var(--fg); - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + /* Monospace everywhere — terminal feel. */ + font-family: var(--mono); font-size: 13px; line-height: 1.45; } -code { font-family: var(--mono); background: var(--bg-elev-2); padding: 1px 4px; border-radius: 3px; font-size: 12px; } +/* Ambient phosphor vignette behind everything. */ +body { + background: + radial-gradient(1200px 600px at 50% -10%, rgba(0, 255, 163, 0.08), transparent 60%), + radial-gradient(900px 500px at 100% 110%, rgba(56, 225, 255, 0.06), transparent 60%), + var(--bg); +} + +/* CRT scanline + flicker overlay. Non-interactive, sits above content. */ +body::after { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: 9999; + background: repeating-linear-gradient( + to bottom, + rgba(0, 0, 0, 0) 0px, + rgba(0, 0, 0, 0) 2px, + rgba(0, 0, 0, 0.18) 3px, + rgba(0, 0, 0, 0) 4px + ); + mix-blend-mode: multiply; + opacity: 0.5; + animation: scanflicker 6s steps(60) infinite; +} +@keyframes scanflicker { + 0%, 97%, 100% { opacity: 0.5; } + 98% { opacity: 0.62; } + 99% { opacity: 0.42; } +} + +::selection { background: rgba(0, 255, 163, 0.28); color: #fff; text-shadow: none; } + +/* Neon scrollbars (WebKit / Chromium — Electron). */ +::-webkit-scrollbar { width: 10px; height: 10px; } +::-webkit-scrollbar-track { background: var(--bg-elev); } +::-webkit-scrollbar-thumb { + background: #0f3a2c; + border-radius: 6px; + border: 1px solid var(--border); +} +::-webkit-scrollbar-thumb:hover { background: #135a44; box-shadow: var(--glow-neon); } + +code { + font-family: var(--mono); + background: var(--bg-elev-2); + padding: 1px 4px; + border-radius: 3px; + font-size: 12px; + color: var(--neon-soft); + border: 1px solid var(--border); +} .muted { color: var(--fg-dim); } .small { font-size: 12px; } .hidden { display: none !important; } -.error { color: var(--danger); } +.error { color: var(--danger); text-shadow: var(--glow-danger); } .row { display: flex; gap: 8px; align-items: center; } .inline { display: inline-flex; align-items: center; gap: 6px; } @@ -44,26 +116,41 @@ code { font-family: var(--mono); background: var(--bg-elev-2); padding: 1px 4px; align-items: center; gap: 16px; padding: 10px 16px; - background: var(--bg-elev); + background: linear-gradient(180deg, rgba(0, 255, 163, 0.05), transparent), var(--bg-elev); border-bottom: 1px solid var(--border); + box-shadow: 0 1px 0 rgba(0, 255, 163, 0.15), 0 6px 18px -10px rgba(0, 255, 163, 0.3); } -.topbar .brand { font-weight: 600; letter-spacing: 0.3px; } -.topbar .session { margin-left: auto; color: var(--fg-dim); font-family: var(--mono); font-size: 12px; } +.topbar .brand { + font-weight: 700; + letter-spacing: 2px; + text-transform: uppercase; + color: var(--neon); + text-shadow: var(--glow-neon-strong); + animation: brandflicker 4.5s infinite; +} +.topbar .brand::before { content: "▌ "; color: var(--neon); opacity: 0.8; } +@keyframes brandflicker { + 0%, 19%, 21%, 55%, 57%, 100% { opacity: 1; text-shadow: var(--glow-neon-strong); } + 20% { opacity: 0.7; } + 56% { opacity: 0.85; text-shadow: var(--glow-neon); } +} +.topbar .session { margin-left: auto; color: var(--cyan); font-family: var(--mono); font-size: 12px; text-shadow: var(--glow-cyan); } .view { display: flex; gap: 0; height: calc(100vh - 45px); } #view-login { justify-content: center; align-items: flex-start; padding-top: 60px; } .card { background: var(--bg-elev); - border: 1px solid var(--border); + border: 1px solid var(--neon); border-radius: 8px; padding: 24px; width: 440px; display: flex; flex-direction: column; gap: 12px; + box-shadow: var(--glow-neon-strong), inset 0 0 30px rgba(0, 255, 163, 0.05); } -.card h1 { margin: 0 0 4px; font-size: 18px; } +.card h1 { margin: 0 0 4px; font-size: 18px; color: var(--neon); text-shadow: var(--glow-neon); letter-spacing: 1px; } .card p { margin: 0 0 8px; } label { @@ -72,8 +159,10 @@ label { gap: 4px; color: var(--fg-dim); font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.5px; } -label.inline { flex-direction: row; align-items: center; gap: 6px; color: var(--fg); } +label.inline { flex-direction: row; align-items: center; gap: 6px; color: var(--fg); text-transform: none; letter-spacing: 0; } input[type="text"], input[type="password"], input[type="url"], input[type="number"], input[type="search"], input[type="datetime-local"], @@ -84,40 +173,90 @@ select { padding: 7px 9px; border-radius: 4px; font-size: 13px; - font-family: inherit; + font-family: var(--mono); outline: none; + transition: border-color 0.12s ease, box-shadow 0.12s ease; } -input:focus, select:focus { border-color: var(--accent); } +input::placeholder { color: #3f5e54; } +input:focus, select:focus { + border-color: var(--neon); + box-shadow: var(--glow-neon), inset 0 0 8px rgba(0, 255, 163, 0.12); + caret-color: var(--neon); +} +/* Glowing checkbox accent. */ +input[type="checkbox"] { accent-color: var(--neon); } button { - font-family: inherit; + font-family: var(--mono); font-size: 13px; + letter-spacing: 0.5px; padding: 7px 14px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--fg); cursor: pointer; + transition: border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, background 0.12s ease; +} +button:hover:not(:disabled) { border-color: var(--neon); color: var(--neon); box-shadow: var(--glow-neon); } +button:disabled { opacity: 0.4; cursor: not-allowed; } + +button.primary { + background: rgba(0, 255, 163, 0.1); + color: var(--neon); + border-color: var(--neon); + font-weight: 700; + text-transform: uppercase; + text-shadow: var(--glow-neon); + box-shadow: var(--glow-neon), inset 0 0 10px rgba(0, 255, 163, 0.12); +} +button.primary:hover:not(:disabled) { + background: rgba(0, 255, 163, 0.18); + color: #002a1c; + background-color: var(--neon); + box-shadow: var(--glow-neon-strong); + text-shadow: none; } -button:hover:not(:disabled) { border-color: var(--accent); } -button:disabled { opacity: 0.5; cursor: not-allowed; } -button.primary { background: var(--accent); color: #001828; border-color: var(--accent); font-weight: 600; } -button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } button.ghost { background: transparent; } -button.danger { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 600; } -button.danger:hover:not(:disabled) { background: var(--danger-hover); border-color: var(--danger-hover); } +button.ghost:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); } + +button.danger { + background: rgba(255, 59, 107, 0.12); + color: var(--danger); + border-color: var(--danger); + font-weight: 700; + text-transform: uppercase; + text-shadow: var(--glow-danger); + box-shadow: var(--glow-danger), inset 0 0 10px rgba(255, 59, 107, 0.12); +} +button.danger:hover:not(:disabled) { + background: var(--danger); + color: #1a0008; + border-color: var(--danger-hover); + box-shadow: 0 0 12px rgba(255, 59, 107, 0.8), 0 0 26px rgba(255, 59, 107, 0.4); + text-shadow: none; +} .panel-left { width: 320px; padding: 16px; border-right: 1px solid var(--border); - background: var(--bg-elev); + background: linear-gradient(180deg, rgba(0, 255, 163, 0.03), transparent 240px), var(--bg-elev); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } -.panel-left h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); margin: 12px 0 0; } +.panel-left h2 { + font-size: 12px; + text-transform: uppercase; + letter-spacing: 2px; + color: var(--neon); + text-shadow: var(--glow-neon); + margin: 12px 0 0; + padding-bottom: 4px; + border-bottom: 1px solid var(--border); +} .panel-left h2:first-child { margin-top: 0; } .panel-main { @@ -128,23 +267,27 @@ button.danger:hover:not(:disabled) { background: var(--danger-hover); border-col gap: 12px; overflow: hidden; } -.panel-main h2 { margin: 0; font-size: 15px; } +.panel-main h2 { margin: 0; font-size: 15px; color: var(--fg); letter-spacing: 0.5px; } .fleet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } +.fleet-head h2 span { color: var(--neon); text-shadow: var(--glow-neon); } .selected-summary { background: var(--bg-elev-2); padding: 8px 10px; border-radius: 4px; + border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; } +.selected-summary strong { color: var(--neon); text-shadow: var(--glow-neon); } .fleet-table-wrap { flex: 1; overflow: auto; border: 1px solid var(--border); border-radius: 4px; + box-shadow: inset 0 0 24px rgba(0, 255, 163, 0.04); } .fleet-table { width: 100%; @@ -157,8 +300,12 @@ button.danger:hover:not(:disabled) { background: var(--danger-hover); border-col background: var(--bg-elev); text-align: left; padding: 8px 10px; - border-bottom: 1px solid var(--border); - font-weight: 600; + border-bottom: 1px solid var(--neon); + color: var(--neon); + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 700; + text-shadow: var(--glow-neon); z-index: 1; } .fleet-table tbody td { @@ -171,13 +318,16 @@ button.danger:hover:not(:disabled) { background: var(--danger-hover); border-col text-overflow: ellipsis; max-width: 320px; } -.fleet-table tbody tr:hover { background: var(--bg-elev-2); } -.fleet-table tbody tr.selected { background: rgba(62, 166, 255, 0.12); } +.fleet-table tbody tr:hover { background: rgba(0, 255, 163, 0.06); } +.fleet-table tbody tr.selected { + background: rgba(0, 255, 163, 0.12); + box-shadow: inset 3px 0 0 var(--neon), inset 0 0 18px rgba(0, 255, 163, 0.12); +} -.status-ok { color: var(--ok); } -.status-warn { color: var(--warn); } -.status-err { color: var(--danger); } -.status-info { color: var(--info); } +.status-ok { color: var(--ok); text-shadow: 0 0 6px rgba(43, 255, 136, 0.55); } +.status-warn { color: var(--warn); text-shadow: 0 0 6px rgba(255, 196, 77, 0.5); } +.status-err { color: var(--danger); text-shadow: var(--glow-danger); } +.status-info { color: var(--info); text-shadow: var(--glow-cyan); } .status-pending { color: var(--fg-dim); } /* Compact FEC counter readout under the health pill in the preview @@ -188,10 +338,10 @@ button.danger:hover:not(:disabled) { background: var(--danger-hover); border-col /* Verify-view table cells contain stacked before/after blocks; let them wrap and align to the top so before/after lines line up. */ #verify-table tbody td { white-space: normal; vertical-align: top; } -#verify-table .delta-arrow { color: var(--fg-dim); font-size: 11px; } +#verify-table .delta-arrow { color: var(--neon); font-size: 11px; } #verify-table .before-line, #verify-table .after-line { display: block; } #verify-table .before-line { color: var(--fg-dim); font-size: 11px; } -.fec-pill { font-weight: 600; } +.fec-pill { font-weight: 700; } .fec-counters { display: block; margin-top: 3px; @@ -209,5 +359,7 @@ button.danger:hover:not(:disabled) { background: var(--danger-hover); border-col padding: 1px 6px; border-radius: 3px; background: var(--bg-elev-2); - border: 1px solid var(--border); + border: 1px solid var(--neon); + color: var(--neon); + text-shadow: var(--glow-neon); } From 7cc9649f03db9f71ba62011882abc2ef171bc841 Mon Sep 17 00:00:00 2001 From: Jon Vanvik Date: Tue, 23 Jun 2026 13:13:42 +0200 Subject: [PATCH 02/13] Fix unsupported prompt() confirm; bluer neon theme + themed modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: the OLT flooding-mode and ONU-delete flows gated on window.prompt() for the typed APPLY/DELETE confirmation, but Electron does not support prompt() — it returns null and shows nothing, so clicking OK on the first dialog silently fell through to "Cancelled." and nothing happened. Fix: replace window.confirm + window.prompt with an in-app confirmTyped() modal (Promise). It combines the summary and the typed-word gate into one dialog: the confirm button stays disabled until the operator types the exact word; Enter confirms, Escape/backdrop cancels. Wired into all three confirmations (OLT flood change, ONU delete, firmware execute). Theme: shift the palette electric-blue, turn up the glow (stronger multi-layer box/text shadows, bluer ambient vignette), and style the new modal to match (neon border, red glow for destructive variant). Verified: npm run check passes; rendered the login + modal offscreen and functionally confirmed the typed-word gate enables the button and resolves true on confirm. Co-Authored-By: Claude Opus 4.8 --- renderer/app.css | 150 +++++++++++++++++++++++++++++++---------------- renderer/app.js | 90 +++++++++++++++++++++++----- 2 files changed, 176 insertions(+), 64 deletions(-) diff --git a/renderer/app.css b/renderer/app.css index ca61885..b9170a6 100644 --- a/renderer/app.css +++ b/renderer/app.css @@ -1,28 +1,29 @@ -/* Neon / terminal "hackertyper" theme. +/* Neon / terminal "hackertyper" theme — electric-blue variant. Dense, operator-oriented UI — no framework, hand-tuned CSS. Class names are load-bearing (HTML + renderer/app.js reference them); this file only restyles, it doesn't rename anything. */ :root { - /* Near-black base, faintly green-shifted like a phosphor display. */ - --bg: #03070a; - --bg-elev: #070d12; - --bg-elev-2: #0c151c; + /* Blue-black base, like a cold CRT. */ + --bg: #02050c; + --bg-elev: #060c16; + --bg-elev-2: #0b1422; - /* Phosphor-tinted text. */ - --fg: #d7f7ea; - --fg-dim: #6f9b8e; - --border: #123026; + /* Blue-white text. */ + --fg: #d6ecff; + --fg-dim: #6f90b5; + --border: #163457; - /* Neon accents. */ - --neon: #00ffa3; /* primary — terminal green/cyan */ - --neon-soft: #19f9d8; - --cyan: #38e1ff; + /* Neon accents — blue-forward. */ + --neon: #21c8ff; /* primary — electric blue/cyan */ + --neon-soft: #7ce0ff; + --cyan: #46e6ff; + --blue: #2a7bff; --magenta: #ff3df0; --accent: var(--neon); --accent-hover: var(--neon-soft); - --ok: #2bff88; + --ok: #2bff9e; /* health "ok" stays green — it's semantic */ --warn: #ffc44d; --danger: #ff3b6b; --danger-hover: #ff5d85; @@ -30,11 +31,11 @@ --mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; - /* Reusable glow shadows. */ - --glow-neon: 0 0 6px rgba(0, 255, 163, 0.55); - --glow-neon-strong: 0 0 10px rgba(0, 255, 163, 0.7), 0 0 22px rgba(0, 255, 163, 0.35); - --glow-danger: 0 0 8px rgba(255, 59, 107, 0.6); - --glow-cyan: 0 0 8px rgba(56, 225, 255, 0.55); + /* Reusable glow shadows — turned up. */ + --glow-neon: 0 0 8px rgba(33, 200, 255, 0.65); + --glow-neon-strong: 0 0 12px rgba(33, 200, 255, 0.85), 0 0 30px rgba(33, 200, 255, 0.5), 0 0 56px rgba(33, 200, 255, 0.22); + --glow-danger: 0 0 10px rgba(255, 59, 107, 0.7), 0 0 24px rgba(255, 59, 107, 0.35); + --glow-cyan: 0 0 10px rgba(70, 230, 255, 0.6); } * { box-sizing: border-box; } @@ -51,11 +52,12 @@ html, body { line-height: 1.45; } -/* Ambient phosphor vignette behind everything. */ +/* Ambient neon vignette behind everything. */ body { background: - radial-gradient(1200px 600px at 50% -10%, rgba(0, 255, 163, 0.08), transparent 60%), - radial-gradient(900px 500px at 100% 110%, rgba(56, 225, 255, 0.06), transparent 60%), + radial-gradient(1200px 600px at 50% -10%, rgba(33, 200, 255, 0.12), transparent 60%), + radial-gradient(900px 520px at 100% 110%, rgba(42, 123, 255, 0.1), transparent 60%), + radial-gradient(700px 400px at 0% 100%, rgba(70, 230, 255, 0.07), transparent 60%), var(--bg); } @@ -70,7 +72,7 @@ body::after { to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, - rgba(0, 0, 0, 0.18) 3px, + rgba(0, 0, 0, 0.16) 3px, rgba(0, 0, 0, 0) 4px ); mix-blend-mode: multiply; @@ -83,17 +85,17 @@ body::after { 99% { opacity: 0.42; } } -::selection { background: rgba(0, 255, 163, 0.28); color: #fff; text-shadow: none; } +::selection { background: rgba(33, 200, 255, 0.32); color: #fff; text-shadow: none; } /* Neon scrollbars (WebKit / Chromium — Electron). */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-elev); } ::-webkit-scrollbar-thumb { - background: #0f3a2c; + background: #14385c; border-radius: 6px; border: 1px solid var(--border); } -::-webkit-scrollbar-thumb:hover { background: #135a44; box-shadow: var(--glow-neon); } +::-webkit-scrollbar-thumb:hover { background: #1c5d92; box-shadow: var(--glow-neon); } code { font-family: var(--mono); @@ -116,9 +118,9 @@ code { align-items: center; gap: 16px; padding: 10px 16px; - background: linear-gradient(180deg, rgba(0, 255, 163, 0.05), transparent), var(--bg-elev); - border-bottom: 1px solid var(--border); - box-shadow: 0 1px 0 rgba(0, 255, 163, 0.15), 0 6px 18px -10px rgba(0, 255, 163, 0.3); + background: linear-gradient(180deg, rgba(33, 200, 255, 0.08), transparent), var(--bg-elev); + border-bottom: 1px solid var(--neon); + box-shadow: 0 1px 0 rgba(33, 200, 255, 0.3), 0 8px 24px -10px rgba(33, 200, 255, 0.5); } .topbar .brand { font-weight: 700; @@ -128,7 +130,7 @@ code { text-shadow: var(--glow-neon-strong); animation: brandflicker 4.5s infinite; } -.topbar .brand::before { content: "▌ "; color: var(--neon); opacity: 0.8; } +.topbar .brand::before { content: "▌ "; color: var(--neon); opacity: 0.85; } @keyframes brandflicker { 0%, 19%, 21%, 55%, 57%, 100% { opacity: 1; text-shadow: var(--glow-neon-strong); } 20% { opacity: 0.7; } @@ -148,9 +150,9 @@ code { display: flex; flex-direction: column; gap: 12px; - box-shadow: var(--glow-neon-strong), inset 0 0 30px rgba(0, 255, 163, 0.05); + box-shadow: var(--glow-neon-strong), inset 0 0 40px rgba(33, 200, 255, 0.07); } -.card h1 { margin: 0 0 4px; font-size: 18px; color: var(--neon); text-shadow: var(--glow-neon); letter-spacing: 1px; } +.card h1 { margin: 0 0 4px; font-size: 18px; color: var(--neon); text-shadow: var(--glow-neon-strong); letter-spacing: 1px; } .card p { margin: 0 0 8px; } label { @@ -177,10 +179,10 @@ select { outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } -input::placeholder { color: #3f5e54; } +input::placeholder { color: #43607f; } input:focus, select:focus { border-color: var(--neon); - box-shadow: var(--glow-neon), inset 0 0 8px rgba(0, 255, 163, 0.12); + box-shadow: var(--glow-neon), inset 0 0 10px rgba(33, 200, 255, 0.15); caret-color: var(--neon); } /* Glowing checkbox accent. */ @@ -202,18 +204,17 @@ button:hover:not(:disabled) { border-color: var(--neon); color: var(--neon); box button:disabled { opacity: 0.4; cursor: not-allowed; } button.primary { - background: rgba(0, 255, 163, 0.1); + background: rgba(33, 200, 255, 0.12); color: var(--neon); border-color: var(--neon); font-weight: 700; text-transform: uppercase; text-shadow: var(--glow-neon); - box-shadow: var(--glow-neon), inset 0 0 10px rgba(0, 255, 163, 0.12); + box-shadow: var(--glow-neon), inset 0 0 12px rgba(33, 200, 255, 0.15); } button.primary:hover:not(:disabled) { - background: rgba(0, 255, 163, 0.18); - color: #002a1c; - background-color: var(--neon); + background: var(--neon); + color: #00121f; box-shadow: var(--glow-neon-strong); text-shadow: none; } @@ -221,19 +222,19 @@ button.ghost { background: transparent; } button.ghost:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); } button.danger { - background: rgba(255, 59, 107, 0.12); + background: rgba(255, 59, 107, 0.14); color: var(--danger); border-color: var(--danger); font-weight: 700; text-transform: uppercase; text-shadow: var(--glow-danger); - box-shadow: var(--glow-danger), inset 0 0 10px rgba(255, 59, 107, 0.12); + box-shadow: var(--glow-danger), inset 0 0 12px rgba(255, 59, 107, 0.14); } button.danger:hover:not(:disabled) { background: var(--danger); color: #1a0008; border-color: var(--danger-hover); - box-shadow: 0 0 12px rgba(255, 59, 107, 0.8), 0 0 26px rgba(255, 59, 107, 0.4); + box-shadow: 0 0 14px rgba(255, 59, 107, 0.85), 0 0 30px rgba(255, 59, 107, 0.45); text-shadow: none; } @@ -241,7 +242,7 @@ button.danger:hover:not(:disabled) { width: 320px; padding: 16px; border-right: 1px solid var(--border); - background: linear-gradient(180deg, rgba(0, 255, 163, 0.03), transparent 240px), var(--bg-elev); + background: linear-gradient(180deg, rgba(33, 200, 255, 0.05), transparent 260px), var(--bg-elev); overflow-y: auto; display: flex; flex-direction: column; @@ -287,7 +288,7 @@ button.danger:hover:not(:disabled) { overflow: auto; border: 1px solid var(--border); border-radius: 4px; - box-shadow: inset 0 0 24px rgba(0, 255, 163, 0.04); + box-shadow: inset 0 0 30px rgba(33, 200, 255, 0.05); } .fleet-table { width: 100%; @@ -318,14 +319,14 @@ button.danger:hover:not(:disabled) { text-overflow: ellipsis; max-width: 320px; } -.fleet-table tbody tr:hover { background: rgba(0, 255, 163, 0.06); } +.fleet-table tbody tr:hover { background: rgba(33, 200, 255, 0.08); } .fleet-table tbody tr.selected { - background: rgba(0, 255, 163, 0.12); - box-shadow: inset 3px 0 0 var(--neon), inset 0 0 18px rgba(0, 255, 163, 0.12); + background: rgba(33, 200, 255, 0.14); + box-shadow: inset 3px 0 0 var(--neon), inset 0 0 22px rgba(33, 200, 255, 0.16); } -.status-ok { color: var(--ok); text-shadow: 0 0 6px rgba(43, 255, 136, 0.55); } -.status-warn { color: var(--warn); text-shadow: 0 0 6px rgba(255, 196, 77, 0.5); } +.status-ok { color: var(--ok); text-shadow: 0 0 7px rgba(43, 255, 158, 0.6); } +.status-warn { color: var(--warn); text-shadow: 0 0 7px rgba(255, 196, 77, 0.55); } .status-err { color: var(--danger); text-shadow: var(--glow-danger); } .status-info { color: var(--info); text-shadow: var(--glow-cyan); } .status-pending { color: var(--fg-dim); } @@ -363,3 +364,54 @@ button.danger:hover:not(:disabled) { color: var(--neon); text-shadow: var(--glow-neon); } + +/* -------- Themed confirmation modal (confirmTyped) -------- */ +.modal-overlay { + position: fixed; + inset: 0; + z-index: 10000; + display: flex; + align-items: center; + justify-content: center; + background: rgba(2, 5, 12, 0.74); + backdrop-filter: blur(2px); + animation: modalfade 0.12s ease; +} +@keyframes modalfade { from { opacity: 0; } to { opacity: 1; } } + +.modal { + width: 480px; + max-width: calc(100vw - 40px); + background: var(--bg-elev); + border: 1px solid var(--neon); + border-radius: 8px; + padding: 22px; + display: flex; + flex-direction: column; + gap: 14px; + box-shadow: var(--glow-neon-strong), inset 0 0 40px rgba(33, 200, 255, 0.06); +} +.modal.modal-danger { + border-color: var(--danger); + box-shadow: 0 0 14px rgba(255, 59, 107, 0.8), 0 0 34px rgba(255, 59, 107, 0.45), inset 0 0 40px rgba(255, 59, 107, 0.06); +} +.modal h3 { + margin: 0; + font-size: 15px; + letter-spacing: 1.5px; + text-transform: uppercase; + color: var(--neon); + text-shadow: var(--glow-neon-strong); +} +.modal.modal-danger h3 { color: var(--danger); text-shadow: var(--glow-danger); } +.modal-body { color: var(--fg); font-size: 13px; line-height: 1.55; } +.modal-type { + display: flex; + flex-direction: column; + gap: 6px; + text-transform: none; + letter-spacing: 0; + color: var(--fg-dim); +} +.modal-type-label { display: block; } +.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; } diff --git a/renderer/app.js b/renderer/app.js index e400e06..a9bcf98 100644 --- a/renderer/app.js +++ b/renderer/app.js @@ -459,11 +459,15 @@ $('#btn-delete-selected').addEventListener('click', async () => { `You're about to DELETE ${ids.length} ONU(s) from MCMS ` + `(${downCount} currently down).\n\n` + `This removes the ONU-CFG document and service configuration. ` + - `Physical ONUs that come back online will re-register from scratch.\n\n` + - `Click OK to continue to the final confirmation.`; - if (!confirm(summary)) return; - const typed = prompt(`Type DELETE to confirm removal of ${ids.length} ONU(s):`); - if (typed !== 'DELETE') { + `Physical ONUs that come back online will re-register from scratch.`; + const confirmed = await confirmTyped({ + title: 'Delete ONUs from MCMS', + body: summary, + requireWord: 'DELETE', + confirmLabel: 'Delete', + danger: true, + }); + if (!confirmed) { $('#delete-status').textContent = 'Cancelled.'; return; } @@ -696,12 +700,13 @@ $('#btn-execute').addEventListener('click', async () => { ); } const fecWarning = warnings.length ? `\n\nWARNING:\n • ${warnings.join('\n • ')}` : ''; - if (!confirm( - `About to stage ${targetVersion} to the inactive bank on ${onuIds.length} ONU(s). ` + - `Proceed?${fecWarning}`, - )) { - return; - } + const proceed = await confirmTyped({ + title: 'Stage firmware upgrade', + body: `About to stage ${targetVersion} to the inactive bank on ${onuIds.length} ONU(s).${fecWarning}`, + confirmLabel: 'Execute upgrade', + danger: true, + }); + if (!proceed) return; $('#btn-execute').disabled = true; // Save the plan to CSV BEFORE writing anything to MCMS, so even if @@ -1284,6 +1289,56 @@ function escapeHtml(s) { .replace(/'/g, '''); } +// Themed confirmation modal. Replaces window.confirm + window.prompt — +// the latter is NOT supported in Electron (it returns null and shows +// nothing, which silently aborted the delete/flood-change flows). When +// `requireWord` is set, the operator must type it exactly to enable the +// confirm button (the "are you really sure" gate for destructive ops). +// Resolves true only on an explicit confirm; false on cancel/Escape. +function confirmTyped({ title, body, requireWord, confirmLabel = 'Confirm', danger = false } = {}) { + return new Promise((resolve) => { + const needWord = !!requireWord; + const overlay = document.createElement('div'); + overlay.className = 'modal-overlay'; + overlay.innerHTML = ` + `; + document.body.appendChild(overlay); + + const input = overlay.querySelector('.modal-input'); + const okBtn = overlay.querySelector('.modal-ok'); + const cancelBtn = overlay.querySelector('.modal-cancel'); + const matches = () => !needWord || (input && input.value === requireWord); + + const cleanup = (result) => { + document.removeEventListener('keydown', onKey, true); + overlay.remove(); + resolve(result); + }; + const onKey = (e) => { + if (e.key === 'Escape') { e.preventDefault(); cleanup(false); } + else if (e.key === 'Enter' && matches()) { e.preventDefault(); cleanup(true); } + }; + + if (input) input.addEventListener('input', () => { okBtn.disabled = !matches(); }); + okBtn.addEventListener('click', () => { if (matches()) cleanup(true); }); + cancelBtn.addEventListener('click', () => cleanup(false)); + overlay.addEventListener('mousedown', (e) => { if (e.target === overlay) cleanup(false); }); + document.addEventListener('keydown', onKey, true); + (input || okBtn).focus(); + }); +} + // -------- OLT inspector: bulk PON flooding mode change -------- $('#btn-to-olts').addEventListener('click', () => { @@ -1392,10 +1447,15 @@ $('#btn-olt-execute').addEventListener('click', async () => { `Apply "${fromMode} → ${targetMode}" to NNI services matching "${tagPattern}" ` + `on ${ids.length} OLT(s).\n\nThis GETs each OLT-CFG, mutates the matching ` + `NNI Networks entries, and PUTs the full document back. The operation is ` + - `irreversible from this app (no undo).\n\nClick OK to continue to the final confirmation.`; - if (!confirm(summary)) return; - const typed = prompt(`Type APPLY to confirm bulk mode change on ${ids.length} OLT(s):`); - if (typed !== 'APPLY') { + `irreversible from this app (no undo).`; + const confirmed = await confirmTyped({ + title: 'Apply PON flooding-mode change', + body: summary, + requireWord: 'APPLY', + confirmLabel: 'Execute change', + danger: true, + }); + if (!confirmed) { $('#olt-exec-status').textContent = 'Cancelled.'; return; } From 9106e5a071056050152558fd243faa1cae3ccaf2 Mon Sep 17 00:00:00 2001 From: Jon Vanvik Date: Tue, 23 Jun 2026 13:45:24 +0200 Subject: [PATCH 03/13] Add top tabs + telemetry Dashboard + animated edge glow Restructure the UI behind top-level tabs (Dashboard / ONU / OLT) so more features have room to land. showView() now drives the active tab via a VIEW_TO_TAB map, so sub-views (campaign/verify) keep the ONU tab lit. Tabs appear on login (landing on Dashboard) and hide on logout. Dashboard: a read-only network telemetry view modeled on the PONGo iOS app's DashboardViewModel. New api:dashboardStats aggregates, all in main.js (renderer just formats): - counts: ONUs, OLTs, controllers (controllers best-effort via /v3/controllers/configs/) - aggregate traffic (OLT TX BW = downstream, RX BW = upstream) - health: OLTs with laser off; abnormal-Rx count (rx < -28 || > -10) - ONU registration-state breakdown (clicking a state deep-links to the ONU tab pre-filtered) - opt-in detailed scan: per-ONU optical + FEC-health distribution fmtBps is a port of the iOS Format.bps. Edge glow: #edge-glow draws a neon conic-gradient beam masked to a 3px border ring and spins an @property --beam-angle 0->360deg, so a glow travels around the screen edge. Honors prefers-reduced-motion. mcms-api: add listAllControllerConfigs. Docs: CLAUDE.md section 15 + README + IPC table. Verified: npm run check passes; rendered the Dashboard + tabs + edge beam offscreen (beam frozen on the right edge to confirm it follows the border). Co-Authored-By: Claude Opus 4.8 --- CLAUDE.md | 63 ++++++++++++++-- README.md | 15 ++-- main.js | 113 +++++++++++++++++++++++++++++ preload.js | 2 + renderer/app.css | 141 ++++++++++++++++++++++++++++++++++++ renderer/app.js | 170 +++++++++++++++++++++++++++++++++++++++++++- renderer/index.html | 30 ++++++++ src/mcms-api.js | 11 +++ 8 files changed, 533 insertions(+), 12 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index fdf8301..050aa24 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -12,12 +12,13 @@ is the engineering counterpart. ## 1. What this app does -Electron desktop client for two bulk operations against **Ciena -MCMS 6.2** PON Manager: +Electron desktop client for operating a **Ciena MCMS 6.2** PON Manager +fleet. Top-level **tabs** (Dashboard / ONU / OLT) switch between: -1. **Bulk ONU firmware upgrades** (the original purpose). -2. **Bulk OLT PON flooding-mode changes** (private↔auto on NNI services — - see §14). +- **Dashboard** — read-only network telemetry (see §15). +- **ONU** — the fleet table + firmware-upgrade campaign + verify flows + (the original purpose: bulk ONU firmware upgrades). +- **OLT** — bulk OLT PON flooding-mode changes (private↔auto, see §14). Reference deployment: GNXS / Tibit MicroPlug ONUs running Interos Everest (EV051xxR / EV052xxR firmware family) behind Tibit OLTs. @@ -122,6 +123,7 @@ stream progress events back to the renderer. | `api:executeBulkTask` | Procedure 8 — single AUTO-TASK-CFG | — | | `api:getTaskConfig` / `api:getUpgradeStatus` | poll helpers | — | | `api:deleteOnus` | bulk delete (CFG + best-effort STATE) | `delete:progress` | +| `api:dashboardStats` | network telemetry aggregates (Dashboard tab) | — | | `api:listOlts` | OLT-CFG list + per-OLT NNI flood-mode summary | — | | `api:executeFloodChange` | bulk PON flooding-mode flip (GET→plan→PUT) | `olt-flood:progress` | | `api:fetchFecHealth` | pre-flight FEC pre/post + optical | `fec:progress` | @@ -721,4 +723,55 @@ entries pass through untouched. --- +## 15. Tabbed navigation & Dashboard + +### Tabs + +The topbar holds a `