nils/nixos-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add the appliance web UI look, interface names, MCP and REST API, local zone

Browse Source 
Web UI: dark/light themes (appliance layout, sidebar, switch checkboxes),
theme preference on the Advanced page, Changes page with the pending diff.

Interface names: router.interfaces.<name>.mac, lans.<l>.deviceName and
pppoe.vlanName; a rename is staged for the next reboot by router-apply.

Remote access: an MCP server (POST /mcp) and an OpenAPI REST API
(/api/v1, /api/openapi.json) with the same tokens, scopes, limits and audit
log; tools to read status, settings, leases, logs (get_logs), and to edit
and check the saved settings (never applied). Tokens on the API access page.

Firewall: a reserved `local` zone (the router itself) as the destination of
rules, so the web UI or SSH can be allowed from the WAN.

PLAN.md lists what is still left.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AeFqV9dZrK6nipHkPfyM4F
This commit is contained in:
nils
2026-11-01 16:56:59 +01:00
co-authored by Claude Sonnet 5.5
parent 95ab7223b9
commit 586274af4e
41 changed files with 3138 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkgs/router-webui/static/style.css
+101 -62
View File
@@ -1,37 +1,55 @@
/* Minimal, neutral, system fonts. Colours are tokens; dark follows the system. */
/* Left sidebar, panels with a header bar. Light and dark: follows the system
unless the page says data-theme="light" or "dark" (Advanced page). */
:root {
--fg: #c8e6c9; --muted: #6f8f72; --bg: #0a0c0a; --surface: #0d110d; --line: #1f3322; --field: #0a0c0a;
--accent: #4ade80; --on-accent: #04140a; --warn: #2b2a10; --bad: #ff6b6b; --ok: #10281a; --good: #4ade80;
--radius: 0; --shadow: none;
--mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
--fg: #1f2430; --muted: #5d6675; --bg: #eef0f3; --surface: #fff; --field: #fff; --line: #d5d9e0; --head: #e4e8ee; --zebra: #f6f8fa;
--accent: #1d6fd8; --accent-hover: #1859b0; --on-accent: #fff;
--side: #232a35; --side-fg: #c6cdd9; --side-muted: #7d889a; --side-hover: #323b49; --side-active: #1d6fd8;
--warn: #fff3cd; --warnline: #e0a100; --bad: #c62828; --ok: #dff3e4; --good: #1b7a3a;
--code: #eceff3; --switch: #b8c0cc; --tick: #8a94a5; --scroll: #b9c0cc;
--s0: #2457c5; --s1: #d9730d; --s2: #2f9e44; --s3: #9c36b5; --s4: #c92a2a; --s5: #0b7285; --s6: #862e9c; --s7: #5c940d; --s8: #a61e4d; --s9: #5f3dc4;
--radius: 4px; --shadow: 0 1px 2px rgba(16, 24, 40, .06);
color-scheme: light;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scrollbar-color: #2e4a33 var(--bg); scrollbar-width: thin; }
* { scrollbar-color: #2e4a33 var(--bg); scrollbar-width: thin; }
body { margin: 0; font: 13.5px/1.55 var(--mono); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--fg: #e4e8ee; --muted: #9aa4b5; --bg: #181c23; --surface: #212732; --field: #181c23; --line: #333b48; --head: #2a313d; --zebra: rgba(255, 255, 255, .03);
--accent: #6ea8fe; --accent-hover: #8dbaff; --on-accent: #0d1b33;
--side: #12151b; --side-fg: #c3cad6; --side-muted: #6c7688; --side-hover: #202631; --side-active: #6ea8fe;
--warn: #3b341a; --warnline: #f0b429; --bad: #ff8a80; --ok: #1c3527; --good: #5fd38d;
--code: #2c3441; --switch: #434d5e; --tick: #5b667a; --scroll: #3d4757;
--s0: #8ba4ff; --s1: #ffa94d; --s2: #69db7c; --s3: #da77f2; --s4: #ff8787; --s5: #66d9e8; --s6: #e599f7; --s7: #c0eb75; --s8: #faa2c1; --s9: #b197fc;
--shadow: none; color-scheme: dark;
}
}
:root[data-theme="dark"] {
--fg: #e4e8ee; --muted: #9aa4b5; --bg: #181c23; --surface: #212732; --field: #181c23; --line: #333b48; --head: #2a313d; --zebra: rgba(255, 255, 255, .03);
--accent: #6ea8fe; --accent-hover: #8dbaff; --on-accent: #0d1b33;
--side: #12151b; --side-fg: #c3cad6; --side-muted: #6c7688; --side-hover: #202631; --side-active: #6ea8fe;
--warn: #3b341a; --warnline: #f0b429; --bad: #ff8a80; --ok: #1c3527; --good: #5fd38d;
--code: #2c3441; --switch: #434d5e; --tick: #5b667a; --scroll: #3d4757;
--s0: #8ba4ff; --s1: #ffa94d; --s2: #69db7c; --s3: #da77f2; --s4: #ff8787; --s5: #66d9e8; --s6: #e599f7; --s7: #c0eb75; --s8: #faa2c1; --s9: #b197fc;
--shadow: none; color-scheme: dark;
}
* { box-sizing: border-box; scrollbar-color: var(--scroll) transparent; scrollbar-width: thin; }
body { margin: 0; padding-left: 15rem; font: 14.5px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 2px; }
header { position: sticky; top: 0; z-index: 20; display: flex; gap: 2rem; align-items: center; padding: .6rem 1.25rem;
background: var(--bg); border-bottom: 1px solid var(--accent); flex-wrap: wrap; }
header > strong { font-weight: 500; }
header > strong::before { content: "> "; color: var(--accent); }
header > strong::after { content: "_"; color: var(--accent); }
nav { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
nav > a, nav summary, nav button.link { padding: .3rem .65rem; color: var(--fg); text-decoration: none; cursor: pointer; }
nav > a:hover, nav summary:hover, nav details[open] > summary, nav button.link:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
nav form { display: inline; }
nav details { position: relative; margin: 0; }
nav summary { list-style: none; }
nav summary::-webkit-details-marker { display: none; }
nav summary::after { content: ""; display: inline-block; width: .35rem; height: .35rem; margin: 0 0 .15rem .45rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .55; }
nav details > div { position: absolute; z-index: 30; top: 2.2rem; left: 0; min-width: 12rem; display: flex; flex-direction: column; gap: 1px;
padding: .35rem; background: var(--surface); border: 1px solid var(--accent); }
nav details > div a { padding: .4rem .65rem; border-radius: 0; color: var(--fg); text-decoration: none; }
nav details > div a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
main { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
h1 { font-size: 1.15rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; margin: .25rem 0 1.25rem; }
h1::before { content: "# "; color: var(--accent); }
h2, legend { font-size: .85rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
h2 { margin: 0 0 .6rem; }
/* Sidebar */
header { position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; width: 15rem; display: flex; flex-direction: column; gap: 1rem; padding: 1rem .6rem; background: var(--side); overflow-y: auto; }
header > strong { padding: .2rem .7rem; font-size: 1.1rem; font-weight: 700; color: #fff; }
nav { display: flex; flex-direction: column; gap: 1px; }
nav > a, nav .group a, nav button.link { display: block; width: 100%; padding: .38rem .7rem; border-radius: var(--radius); color: var(--side-fg); text-decoration: none; text-align: left; }
nav .group a { padding-left: 1.4rem; }
nav a:hover, nav button.link:hover { background: var(--side-hover); color: #fff; }
nav a[aria-current] { background: var(--side-active); color: var(--on-accent); }
nav .group { margin: .8rem 0 0; }
nav .group > span { display: block; padding: 0 .7rem .25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted); }
nav form { margin-top: 1rem; }
nav button.link { background: none; border: 0; padding: .38rem .7rem; font-weight: 400; cursor: pointer; }
main { max-width: 74rem; padding: 1.5rem 2rem 3rem; }
h1 { font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; margin: .25rem 0 1.25rem; }
h2 { font-size: .95rem; font-weight: 600; margin: 0 0 .6rem; }
section { margin: 0 0 1.5rem; }
section.busy, section.pending { padding: .75rem 1rem; border-radius: var(--radius); background: var(--warn); }
.flash, .error { padding: .6rem .9rem; border-radius: var(--radius); margin: 0 0 1rem; }
@@ -43,61 +61,82 @@ section.busy, section.pending { padding: .75rem 1rem; border-radius: var(--radiu
dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.25rem; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
fieldset { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 1rem; padding: 1rem 1.15rem; overflow-x: auto; min-width: 0; }
legend { float: left; width: 100%; padding: 0; margin: 0 0 .7rem; }
/* Panels: a header bar (the legend) over a padded body */
fieldset { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 1rem; padding: 0 0 1rem; min-width: 0; overflow: hidden; }
legend { float: left; width: 100%; margin: 0 0 1rem; padding: .6rem 1rem; font-size: .95rem; font-weight: 600; background: var(--head); border-bottom: 1px solid var(--line); }
legend ~ * { clear: both; }
fieldset > :not(legend):not(input[type=hidden]) { margin-left: 1rem; margin-right: 1rem; }
fieldset > .scroll { margin-left: 0; margin-right: 0; padding: 0 1rem; overflow-x: auto; }
/* Fields: a caption above the input */
label { display: inline-flex; flex-direction: column; gap: .2rem; margin: 0 1rem .6rem 0; font-size: .85em; font-weight: 500; color: var(--muted); }
input, select, textarea, button { font: inherit; color: var(--fg); background: var(--field); border: 1px solid var(--line); border-radius: 0; padding: .4rem .6rem; }
input, select, textarea, button { font: inherit; color: var(--fg); background: var(--field); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .6rem; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--fg) 30%, var(--line)); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--accent); border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
textarea { width: 100%; font-size: 13px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 65%, transparent); }
textarea { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.narrow { max-width: 24rem; display: flex; flex-direction: column; gap: .8rem; }
.narrow label { margin: 0; }
/* Ticks: a switch in front of its text; a plain small box inside tables */
/* Ticks: a switch in front of its text; a plain box inside tables */
label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: .6rem; font-size: 1em; font-weight: 400; color: var(--fg); margin: 0 1.25rem .5rem 0; }
fieldset > label:has(> input[type=checkbox]), form > label:has(> input[type=checkbox]) { display: flex; }
input[type=checkbox] { appearance: none; flex: none; width: 2.4rem; height: 1.2rem; padding: 0; margin: 0; border-radius: 0; position: relative; cursor: pointer;
background: #1c2a1e; border: 0; transition: background .15s; vertical-align: middle; }
input[type=checkbox]::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 0; background: var(--muted); transition: transform .15s; }
input[type=checkbox]:checked { background: #14532d; }
input[type=checkbox]:checked::after { transform: translateX(1.2rem); background: var(--accent); }
td > input[type=checkbox], th > input[type=checkbox], p > label > input[type=checkbox] { width: 1.05rem; height: 1.05rem; border-radius: 0; border: 1.5px solid color-mix(in srgb, var(--fg) 40%, transparent); background: var(--field); }
input[type=checkbox] { appearance: none; flex: none; position: relative; width: 2.1rem; height: 1.2rem; padding: 0; margin: 0; border: 0; border-radius: 1rem; background: var(--switch); cursor: pointer; transition: background .15s; vertical-align: middle; }
input[type=checkbox]::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
input[type=checkbox]:checked { background: var(--accent); }
input[type=checkbox]:checked::after { transform: translateX(.9rem); }
td > input[type=checkbox], th > input[type=checkbox], p > label > input[type=checkbox] { width: 1.05rem; height: 1.05rem; border-radius: 3px; border: 1.5px solid var(--tick); background: var(--field); }
td > input[type=checkbox]::after, th > input[type=checkbox]::after, p > label > input[type=checkbox]::after { display: none; }
td > input[type=checkbox]:checked, th > input[type=checkbox]:checked, p > label > input[type=checkbox]:checked { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%2304140a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat; border-color: var(--accent); }
td > input[type=checkbox]:checked, th > input[type=checkbox]:checked, p > label > input[type=checkbox]:checked { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat; }
td:has(> input[type=checkbox]) { text-align: center; }
/* Buttons */
button { background: transparent; color: var(--accent); border-color: var(--accent); cursor: pointer; text-transform: uppercase; letter-spacing: .06em; padding: .4rem 1.05rem; }
button:hover { background: var(--accent); color: var(--on-accent); }
button.secondary { border-color: var(--line); color: var(--fg); }
button.secondary:hover { border-color: var(--accent); background: transparent; color: var(--accent); }
button.link { background: none; border: none; color: var(--fg); padding: .3rem .65rem; text-transform: none; letter-spacing: 0; }
button.link:hover { background: none; }
button { background: var(--accent); color: var(--on-accent); border-color: var(--accent); cursor: pointer; font-weight: 600; padding: .42rem 1.05rem; }
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.secondary { background: var(--surface); color: var(--fg); border-color: var(--line); }
button.secondary:hover { background: var(--zebra); border-color: var(--accent); }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 400; text-decoration: underline; }
button.link:hover { background: none; color: var(--accent-hover); }
.default { position: absolute; left: -9999px; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
/* Tables */
table { border-collapse: collapse; }
th { text-align: left; font-weight: 500; color: var(--accent); font-size: .8em; text-transform: uppercase; letter-spacing: .03em; padding: 0 .4rem .3rem; white-space: nowrap; }
td { padding: .2rem .4rem; }
pre.log { background: color-mix(in srgb, var(--fg) 5%, transparent); padding: .85rem 1rem; border-radius: var(--radius); overflow-x: auto; font-size: 12.5px; max-height: 30rem; }
code { font-size: .88em; overflow-wrap: anywhere; background: color-mix(in srgb, var(--fg) 7%, transparent); padding: .1em .35em; border-radius: 0; }
th { text-align: left; font-size: .82rem; font-weight: 600; color: var(--muted); padding: 0 .45rem .35rem; white-space: nowrap; border-bottom: 1px solid var(--line); }
td { padding: .3rem .45rem; }
table tr:nth-child(even) td { background: var(--zebra); }
pre.log { background: var(--code); padding: .85rem 1rem; border-radius: var(--radius); overflow-x: auto; font-size: 12.5px; max-height: 30rem; }
code { font-size: .88em; overflow-wrap: anywhere; background: var(--code); padding: .1em .35em; border-radius: 3px; }
pre code { background: none; padding: 0; }
.muted { color: var(--muted); }
.bad { color: var(--bad); }
.ok { color: var(--good); }
:root { --s0: #8ba4ff; --s1: #ffa94d; --s2: #69db7c; --s3: #da77f2; --s4: #ff8787; --s5: #66d9e8; --s6: #e599f7; --s7: #c0eb75; --s8: #faa2c1; --s9: #b197fc; }
body.bare { padding-left: 0; }
.bare header { position: static; width: auto; flex-direction: row; background: none; padding: 1rem 1.25rem; }
.bare header > strong { color: var(--fg); }
.bare main { margin: 0 auto; }
@media (max-width: 50rem) {
body { padding-left: 0; }
header { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1rem; }
nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .1rem .25rem; }
nav > a, nav .group a, nav button.link { width: auto; padding: .3rem .55rem; }
nav .group { display: contents; }
nav .group > span, nav form { display: none; }
nav form:has(button) { display: block; margin: 0; }
main { padding: 1rem; }
}
.ranges { display: flex; gap: .25rem; margin: 0 0 1rem; }
.ranges a { padding: .2rem .75rem; border: 1px solid var(--line); border-radius: 0; text-decoration: none; color: var(--fg); background: var(--surface); }
.ranges a:hover, .ranges a.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ranges a { padding: .25rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--fg); background: var(--surface); }
.ranges a:hover { border-color: var(--accent); color: var(--accent); }
.ranges a.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin: 0 0 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); box-shadow: var(--shadow); padding: .85rem 1.1rem; margin: 0; }
.card.up { border-left-color: var(--good); }
.card.degraded { border-left-color: #e8a600; }
.card.down { border-left-color: var(--bad); }
.card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .85rem 1.1rem; margin: 0; }
.card.up { border-top-color: var(--good); }
.card.degraded { border-top-color: var(--warnline); }
.card.down { border-top-color: var(--bad); }
.card .state { font-weight: 600; margin: 0 0 .5rem; }
.card dl { margin: 0; font-size: .92em; }
.events { list-style: none; margin: 0; padding: 0; font-size: .9em; }