webui: automation settings panel, set-location, responsive layout

- Automation tab: settings form (define_settings) beside the editor,
  stacking above it when narrow; script/settings save split.
- Set location modal: current location + reset checkbox.
- saveScriptSettings/setSavePath API wiring; plugins panel.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ookami125 2026-06-21 23:22:00 -04:00
parent 5a5b5f4330
commit 9a1d67acd4
11 changed files with 741 additions and 13 deletions

View file

@ -14,6 +14,17 @@ npm start
PORT=9000 npm start # custom port
```
The UI requires a login. If you do not configure one, the server prints a
generated password at startup for the default `admin` user. For a stable public
deployment, set credentials explicitly:
```bash
NAUT_AUTH_USER=admin NAUT_AUTH_PASSWORD='change-me' npm start
```
You can also set `NAUT_AUTH_PASSWORD_HASH` to a `pbkdf2-sha256$...` hash emitted
by the same password hashing format used by the server.
The server ships 24 mock torrents in varied states and runs a 1-second
**simulator** that fluctuates speeds, advances downloads, fills the piece map,
drifts the swarm, and accumulates session/ratio stats — so the UI is genuinely
@ -86,11 +97,49 @@ public/
detail.js Detail panel tabs + live refresh + resize
api.js fetch wrappers + EventSource live stream
format.js bytes/rate/eta/ratio/date/state formatters
plugins.js Frontend plugin registry and extension-point loader
plugins/
plugins.json Plugin manifest
health.js Example plugin
```
### Plugin system
Frontend plugins are ES modules listed in `public/plugins/plugins.json`. Each
module calls `window.Naut.registerPlugin()` and can contribute:
- `views` — new top-level tabs in the main tab bar.
- `sidebarSections` — new sections in the left sidebar, with optional mount code.
- `detailTabs` — new tabs in the selected torrent detail panel.
- `detailPanels` — additional information panels appended to the General detail tab.
Minimal plugin:
```js
window.Naut.registerPlugin({
id: 'example',
name: 'Example',
views: [{
id: 'example',
label: 'Example',
render(host, { state, f }) {
host.innerHTML = `<div class="pane">Loaded ${state.snapshot.torrents.length} torrents</div>`;
},
}],
});
```
Add the module path to `public/plugins/plugins.json`:
```json
{ "modules": ["/plugins/example.js"] }
```
### API (stub)
| Method | Path | Purpose |
|---|---|---|
| GET | `/api/auth/status` | Session state and login metadata |
| POST | `/api/login`, `/api/logout` | Create or clear a session |
| GET | `/api/plugins` | Authenticated plugin manifest |
| GET | `/api/stream` | **SSE** — pushes a compact snapshot (~1/s) |
| GET | `/api/snapshot` | One-shot snapshot (grid + server stats) |
| GET | `/api/meta` | Categories, tags, tracker hosts, prefs, search plugins |