Refactor code structure for improved readability and maintainability

feat: Implement UVM Dashboard with frontend and backend integration
- Added dashboard.js for frontend functionality, including VM management and system health monitoring. - Created dashboard route to serve the dashboard HTML. - Introduced diagnostics route for token-protected host diagnostics. - Enhanced VMs router with bulk actions, VM log retrieval, and port management. - Updated lifecycle service to read VM log tails with truncation handling. - Integrated static file serving for dashboard assets in the FastAPI server. - Redirect root URL to the dashboard for improved user experience.
2026-09-20 09:08:45 +05:30 · 2026-09-19 10:50:29 +05:30
18 changed files with 3287 additions and 69 deletions
@@ -13,8 +13,10 @@ general-purpose Python library or a multi-host control plane.
 UVM installs host/guest assets, provisions private disks, and manages named
 VMs and private IPv4 TCP allowlists on one host. The CLI offers retained-disk
 start/stop/restart, deletion, fixed-target bulk operations, inspection, SSH,
-logs, doctor, and explicit port edits/sync. The optional API exposes only the
+logs, doctor, and explicit port edits/sync. The optional API and local dashboard
-existing health/install/create/list/inspect/stop/delete operations.
+expose health, installation, VM lifecycle controls, and managed port-policy
 controls, host diagnostics, bounded VM-log tails, and fixed-target bulk
 operations. Interactive SSH remains CLI-only.
 There is no autostart or background reconciler, multi-host control plane,
 tenancy/quotas, or UVM-provided Jailer/cgroup/namespace hardening. Private port
@@ -80,7 +82,10 @@ Packet integration tests must remain inside disposable isolated namespaces.
 │   ├── lifecycle.py          # Lifecycle, bulk operations, recovery, port intent
 │   ├── api_models.py         # Pydantic HTTP request/response models
 │   ├── server.py             # FastAPI factory and Uvicorn launcher
 │   ├── dashboard/            # Packaged local dashboard HTML, CSS, and JS
 │   ├── routers/
 │   │   ├── dashboard.py      # Dashboard document route
 │   │   ├── diagnostics.py    # Host diagnostic endpoint
 │   │   ├── dependencies.py   # API application/token dependencies
 │   │   ├── health.py         # Liveness endpoint
 │   │   ├── installation.py   # Installation endpoint
@@ -158,9 +163,12 @@ checks, not per-VM repair or guest application probes.
 ### HTTP Path
 Routers validate the token and Pydantic request, invoke application services,
-and render whitelisted response models. The CLI expansion does not imply HTTP
+and render whitelisted response models. Lifecycle, managed port-policy,
-endpoint parity: start/restart, port edits/sync, bulk operations, logs, doctor,
+diagnostics, and bounded log-tail operations have explicit HTTP routes for the
-and interactive SSH have no HTTP endpoints.
+dashboard. Bulk operations have a dedicated fixed-target HTTP route; interactive
 SSH has no HTTP endpoint. The public dashboard shell does not bypass token
 validation: it stores a supplied token only for the active browser session and
 sends it with management requests.
 Use only `uvm --serve` or `./uvm.py --serve` to launch the API. The
 `create_api()` factory requires an explicit host specifically to prevent it
@@ -645,13 +653,22 @@ or secret manager when that matters.
 | Method | Route | Router | Notes |
 |---|---|---|---|
 | `GET` | `/` | `server.py` | Redirect to `/dashboard` |
 | `GET` | `/dashboard` | `dashboard.py` | Public static dashboard shell |
 | `GET` | `/health` | `health.py` | Unauthenticated liveness response |
 | `GET` | `/diagnostics` | `diagnostics.py` | Host readiness checks |
 | `POST` | `/install` | `installation.py` | `{ "force": false }` body |
 | `GET` | `/vms` | `vms.py` | List persisted VM records and observed status |
 | `POST` | `/vms` | `vms.py` | `cpu`, `ram`, `guest_ip`, `username`, `password`, `name`, `ports`, `no_default_ports` |
 | `POST` | `/vms/actions` | `vms.py` | Fixed-ID snapshot bulk lifecycle action |
 | `GET` | `/vms/{identifier}` | `vms.py` | Inspect by exact ID, name, or guest IP |
-| `POST` | `/vms/{identifier}/stop` | `vms.py` | Stop while retaining private disk |
+| `POST` | `/vms/{identifier}/start` | `vms.py` | Boot a retained private disk |
-| `DELETE` | `/vms/{identifier}` | `vms.py` | Remove runtime files and state |
+| `POST` | `/vms/{identifier}/restart` | `vms.py` | Restart; optional `timeout` query parameter |
 | `POST` | `/vms/{identifier}/stop` | `vms.py` | Stop; optional `timeout` query parameter |
 | `DELETE` | `/vms/{identifier}` | `vms.py` | Remove runtime files/state; optional `timeout` query parameter |
 | `POST` | `/vms/{vm_id}/ports` | `vms.py` | Exact ID only; body has `mode` and `ports` |
 | `POST` | `/vms/{vm_id}/ports/sync` | `vms.py` | Exact ID only; reapply managed policy |
 | `GET` | `/vms/{identifier}/logs` | `vms.py` | Bounded non-following log tail |
 All management routes use `get_authorized_application()` and require:
@@ -671,14 +688,24 @@ unmanaged VM from an omitted policy. Names share CLI validation.
 VM responses include `name`, `ports`, `policy_status`, and `operation` alongside
 resource/status fields and username. The schema excludes password and
 disk/socket/config/log path fields; error messages may still contain paths.
-`ports: null` in a legacy response still means unmanaged. The existing
+`ports: null` in a legacy response still means unmanaged. Start/restart/stop
-stop/delete routes use service defaults; no timeout/dry-run/bulk HTTP schemas
+and port-policy mutations report the resulting policy status. Restart, stop,
-were added. Typed not-found/conflict errors map to 404/409.
+and delete accept an optional finite non-negative `timeout` query parameter;
 there is no dry-run HTTP schema. Port mutation bodies use
 `{"mode":"set"|"open"|"close", "ports":[...]}` and always resolve the
 target by exact ID to prevent name/IP reuse. A legacy policy must be set while
 stopped before it can be started or synced. Typed not-found/conflict errors map
 to 404/409.
-There are **no new start/restart, ports, or bulk HTTP endpoints**. The API also
+Log reads accept a `tail` query parameter from 0 through 1000 and never follow
-does not expose logs, doctor, interactive SSH, raw Firecracker calls, arbitrary
+the file. `LifecycleService.read_log_tail()` reads at most the final 256 KiB and
-command execution, or host path access. Public `/docs`, `/redoc`, and
+marks a response truncated when an oversized line or that bound prevents a full
-`/openapi.json` are informational, not privileged management routes.
+tail. Bulk bodies use an action plus either explicit identifiers or `all_vms`;
 the router resolves them before `run_many()` executes the fixed IDs under one
 operation lock. The API does not expose interactive SSH, raw Firecracker calls,
 arbitrary command execution, or host path access. Public `/`, `/dashboard`,
 `/docs`, `/redoc`, and `/openapi.json` do not perform privileged management
 requests.
 ## 14. Configuration Reference
@@ -810,7 +837,8 @@ on an isolated Linux host:
  `get_authorized_application()`, and register new routers in `create_api()`.
  Add API tests and update all route tables. New CLI commands do not implicitly
  authorize new HTTP endpoints; `/health` remains the only unauthenticated
-  operational route.
+  operational API route, while `/` and `/dashboard` only serve the public
  dashboard shell.
 - Host primitives: use the specific network/firewall/install/process module
  and `CommandRunner` for external commands. Define ownership, idempotence,
  and compensation before invoking a primitive from lifecycle code. Use fake
@@ -217,35 +217,63 @@ sudo env UVM_API_TOKEN="$UVM_API_TOKEN" \
 ```
 The default bind address is `127.0.0.1` and the default port is `8000`.
-OpenAPI documentation is available at `/docs` once the server is running.
+OpenAPI documentation is available at `/docs` once the server is running. The
 root URL redirects to the local dashboard at `/dashboard`; enter the API token
 there for the current browser session.
 The dashboard includes a fleet overview, searchable machine collection, private
 network and port-policy view, host diagnostics, and machine provisioning. Open a
 machine to manage its lifecycle, edit or sync its port rules, copy its SSH command,
 or read recent logs. Select machines in the collection for bulk operations.
 Use `Ctrl+K` / `⌘K` (or `/`) to find a machine or page. Fleet data refreshes every
 five seconds while the tab is visible; host checks refresh every thirty seconds
 and can also be run manually. Charts show observed machine states and allocated
 resources, rather than guest CPU or memory utilization. All frontend assets,
 including the font, are served locally; no frontend build step is required.
 The server exposes these routes:
 | Method | Route | Purpose |
 |---|---|---|
 | `GET` | `/` | Redirect to the local dashboard |
 | `GET` | `/dashboard` | Serve the local management dashboard |
 | `GET` | `/health` | Unauthenticated liveness response |
 | `GET` | `/diagnostics` | Run host readiness checks for the dashboard/system view |
 | `POST` | `/install` | Install or refresh host assets; body: `{ "force": false }` |
 | `GET` | `/vms` | List VM records and observed status |
 | `POST` | `/vms` | Create; supports `cpu`, `ram`, `guest_ip`, `username`, `password`, `name`, `ports`, `no_default_ports` |
 | `POST` | `/vms/actions` | Run a fixed snapshot of selected or all VM lifecycle actions |
 | `GET` | `/vms/{identifier}` | Inspect by exact ID, name, or guest IP |
-| `POST` | `/vms/{identifier}/stop` | Stop a VM while retaining its private disk |
+| `POST` | `/vms/{identifier}/start` | Boot a retained private disk |
-| `DELETE` | `/vms/{identifier}` | Delete a VM and release its resources |
+| `POST` | `/vms/{identifier}/restart` | Stop then boot a VM; optional `timeout` query parameter |
 | `POST` | `/vms/{identifier}/stop` | Stop a VM while retaining its private disk; optional `timeout` query parameter |
 | `DELETE` | `/vms/{identifier}` | Delete a VM and release its resources; optional `timeout` query parameter |
 | `POST` | `/vms/{vm_id}/ports` | Set, open, or close private port rules for an exact VM ID |
 | `POST` | `/vms/{vm_id}/ports/sync` | Reapply a managed private port policy for an exact VM ID |
 | `GET` | `/vms/{identifier}/logs` | Read a bounded, non-following tail of a VM log |
 API port rules are objects such as `{"port": 80, "protocol": "HTTP"}`;
-`no_default_ports` is a boolean, default `false`. Responses include `name`,
+`no_default_ports` is a boolean, default `false`. Port changes use
 `{"mode":"set"|"open"|"close", "ports":[...]}`. A legacy VM must be
 stopped and use `set` to establish a managed policy. Responses include `name`,
 `ports`, `policy_status`, and `operation`, but never passwords. See
 [USAGE.md](USAGE.md) for request examples and strict schema details.
 Log reads use an optional `tail` query parameter from `0` to `1000`, default
 `100`, and are capped at the final 256 KiB of the log.
-The endpoint set is unchanged: there are **no start/restart, port-management,
+Bulk requests use an action (`start`, `stop`, `restart`, `delete`, or
-or bulk HTTP endpoints**. SSH, logs, and doctor are also CLI-only. Use the
+`ports-sync`) plus either `identifiers` or `all_vms: true`; they return a result
-local CLI for those operations; the API is not a background reconciler.
+for each fixed target and do not prompt for confirmation. Interactive SSH
 remains CLI-only. The API and dashboard are not background reconcilers.
 ### API Security
 The server controls privileged host operations. `UVM_API_TOKEN` is required
 for every API server, including loopback-only deployments. All management
-routes require it in the `X-UVM-Token` header. FastAPI's informational `/docs`,
+routes require it in the `X-UVM-Token` header. The dashboard shell, liveness
-`/redoc`, and `/openapi.json` endpoints do not require a token.
+route, and FastAPI's informational `/docs`, `/redoc`, and `/openapi.json`
 endpoints do not require a token; the dashboard stores the entered token only
 for its current browser session and applies it to management requests.
 A non-loopback bind additionally requires TLS certificate and key paths:
@@ -406,6 +434,8 @@ Selected files:
 │   ├── lifecycle.py     # Lifecycle, bulk operations, recovery, port-policy intent
 │   ├── network.py       # IP/MAC/TAP/bridge/NAT management
 │   ├── firewall.py      # Owned nftables bridge policies and offline conntrack cleanup
 │   ├── dashboard/       # Local dashboard HTML, CSS, and JavaScript
 │   ├── routers/         # FastAPI routes, including the dashboard document
 │   └── firecracker/     # Firecracker config, API, and process adapters
 └── tests/               # Unit tests and opt-in isolated namespace packet tests
 ```
@@ -424,8 +454,9 @@ python3 -B -m unittest discover -s tests -v
 The unit tests do not need root, KVM, Firecracker, or host network changes.
 They cover validation, state migration and locking, integrity manifests,
 network/firewall rendering, Firecracker request ordering, process safety,
-retained-disk resume, bulk operations, and lifecycle rollback. API route tests
+retained-disk resume, bulk operations, lifecycle rollback, dashboard delivery,
-run when the FastAPI and `httpx` test dependencies are installed.
+and API routes. API route tests run when the FastAPI and `httpx` test
 dependencies are installed.
 Opt-in packet checks run **only in disposable isolated user/network
 namespaces**, which may require privileges and the installed network tools:
@@ -602,11 +602,12 @@ inventing identity fields in `state.json`.
 ## 10. Use the FastAPI Server
-The API uses the same local lifecycle services, but exposes only the existing
+The API uses the same local lifecycle services and exposes health, installation,
-health/install/create/list/inspect/stop/delete endpoints. There are no new
+VM lifecycle, diagnostics, bounded VM-log tails, and managed private-port
-start/restart, port-management, or bulk HTTP endpoints; SSH, logs, and doctor
+controls. The local dashboard at `/dashboard` uses those same endpoints. There
-also remain CLI-only. The server does not autostart VMs or reconcile rules,
+API also supports fixed-target bulk actions; interactive SSH remains CLI-only.
-and is not safe to expose directly to the public internet.
+The server does not autostart VMs or reconcile rules, and is not safe to expose
 directly to the public internet.
 ### Start a Local Server
@@ -620,15 +621,18 @@ sudo env \
  ./uvm.py --serve --host 127.0.0.1 --port 8000
 ```
-Liveness is at `http://127.0.0.1:8000/health`; OpenAPI docs are at
+Liveness is at `http://127.0.0.1:8000/health`; the dashboard is at
 `http://127.0.0.1:8000/dashboard`; OpenAPI docs are at
 `http://127.0.0.1:8000/docs`. The default bind is `127.0.0.1:8000`.
-The API token is required even for a loopback server. All VM and installation
+The API token is required even for a loopback server. All VM, diagnostics, and
-routes require it. FastAPI's informational `/docs`, `/redoc`, and
+installation routes require it. The dashboard shell, liveness route, and FastAPI's
-`/openapi.json` endpoints are also available without a token; they do not
+informational `/docs`, `/redoc`, and `/openapi.json` endpoints are available
-perform host mutations. Tokens must be visible ASCII with no whitespace.
+without a token; they do not perform host mutations. The dashboard keeps an
-Use a protected environment file or secret manager rather than recording a
+entered token only for the active browser session. Tokens must be visible ASCII
-real token in shell history; do not share tokens or guest passwords in reports.
+with no whitespace. Use a protected environment file or secret manager rather
 than recording a real token in shell history; do not share tokens or guest
 passwords in reports.
 ### Start a TLS Server
@@ -675,16 +679,26 @@ curl --cacert /path/to/ca.pem \
 | Method | Path | Operation |
 |---|---|---|
 | `GET` | `/` | Redirect to `/dashboard` |
 | `GET` | `/dashboard` | Serve the local management dashboard |
 | `GET` | `/health` | Unauthenticated liveness |
 | `GET` | `/diagnostics` | Run host readiness checks |
 | `POST` | `/install` | Install/refresh with a `force` boolean |
 | `GET` | `/vms` | List VM responses |
 | `POST` | `/vms` | Create and boot, HTTP 201 on success |
 | `POST` | `/vms/actions` | Run selected/all VM lifecycle actions from a fixed snapshot |
 | `GET` | `/vms/{identifier}` | Inspect by exact ID, name, or guest IP |
-| `POST` | `/vms/{identifier}/stop` | Stop and retain disk, using the default TERM wait |
+| `POST` | `/vms/{identifier}/start` | Start a retained VM |
-| `DELETE` | `/vms/{identifier}` | Delete VM and private disk |
+| `POST` | `/vms/{identifier}/restart` | Restart a VM; accepts `timeout` query parameter |
 | `POST` | `/vms/{identifier}/stop` | Stop and retain disk; accepts `timeout` query parameter |
 | `DELETE` | `/vms/{identifier}` | Delete VM and private disk; accepts `timeout` query parameter |
 | `POST` | `/vms/{vm_id}/ports` | Set, open, or close private ports for an exact VM ID |
 | `POST` | `/vms/{vm_id}/ports/sync` | Reapply the policy for an exact VM ID |
 | `GET` | `/vms/{identifier}/logs` | Read a bounded, non-following log tail |
-These stop/delete endpoints do not expose the CLI timeout, dry-run, or bulk
+Individual lifecycle requests do not expose a CLI dry-run flag and do not prompt
-flags and do not prompt for confirmation.
+for confirmation. `timeout` is an optional finite, non-negative query parameter
 on restart, stop, and delete; it has the same SIGTERM wait semantics as the CLI.
 ### Health, List, and Inspect
@@ -739,9 +753,19 @@ The response never includes the password. Omitting credentials still uses
 labels return HTTP `422`. Example passwords above are placeholders; real
 secrets in curl arguments can enter shell history and process listings.
-### Stop and Delete
+### Start, Restart, Stop, and Delete
 ```sh
 # Start a retained private disk.
 curl -X POST \
  -H "X-UVM-Token: $UVM_API_TOKEN" \
  "$UVM_API_URL/vms/api-web/start"
 # Restart with an explicit SIGTERM wait.
 curl -X POST \
  -H "X-UVM-Token: $UVM_API_TOKEN" \
  "$UVM_API_URL/vms/api-web/restart?timeout=10"
 curl -X POST \
  -H "X-UVM-Token: $UVM_API_TOKEN" \
  "$UVM_API_URL/vms/api-web/stop"
@@ -753,8 +777,95 @@ curl -X DELETE \
 ```
 Stop returns the VM response with `status: "stopped"`; delete returns its
-exact `id` and `status: "terminated"`. Start the retained disk through the
+exact `id` and `status: "terminated"`. Start and restart return the updated VM
-local CLI, not a new HTTP route.
+response. Start preserves the retained private disk and does not restore guest
 memory.
 ### Bulk Lifecycle Actions
 The dashboard batch toolbar uses this endpoint for selected VMs. The server
 resolves the selected identifiers into a fixed ID snapshot before it invokes the
 existing serialized bulk lifecycle service.
 ```sh
 # Restart two named VMs with a shared TERM wait.
 curl -X POST \
  -H "Content-Type: application/json" \
  -H "X-UVM-Token: $UVM_API_TOKEN" \
  -d '{"action":"restart","identifiers":["api-web","worker"],"timeout":10}' \
  "$UVM_API_URL/vms/actions"
 # Sync managed policies for every VM currently in the registry.
 curl -X POST \
  -H "Content-Type: application/json" \
  -H "X-UVM-Token: $UVM_API_TOKEN" \
  -d '{"action":"ports-sync","all_vms":true}' \
  "$UVM_API_URL/vms/actions"
 ```
 Valid actions are `start`, `stop`, `restart`, `delete`, and `ports-sync`.
 Provide `identifiers` or `all_vms: true`, but not both. The response contains
 one `{id, action, outcome, error}` object per selected VM. HTTP bulk requests
 do not prompt for confirmation or provide a dry-run; require an explicit
 operator confirmation in a caller before destructive use.
 ### Manage Private Ports
 The port mutation and sync routes require an **exact VM ID** returned by create
 or list. They deliberately do not resolve a name or guest IP, preventing a
 later name/IP reuse from changing the wrong policy. Port rules are strict JSON
 objects, not CLI colon strings.
 ```sh
 # Replace the full managed TCP allowlist.
 curl -X POST \
  -H "Content-Type: application/json" \
  -H "X-UVM-Token: $UVM_API_TOKEN" \
  -d '{"mode":"set","ports":[{"port":22,"protocol":"TCP"},{"port":443,"protocol":"HTTPS"}]}' \
  "$UVM_API_URL/vms/<vm-id>/ports"
 # Add or remove one or more rules without replacing the other rules.
 curl -X POST \
  -H "Content-Type: application/json" \
  -H "X-UVM-Token: $UVM_API_TOKEN" \
  -d '{"mode":"open","ports":[{"port":80,"protocol":"HTTP"}]}' \
  "$UVM_API_URL/vms/<vm-id>/ports"
 curl -X POST \
  -H "Content-Type: application/json" \
  -H "X-UVM-Token: $UVM_API_TOKEN" \
  -d '{"mode":"close","ports":[{"port":80,"protocol":"HTTP"}]}' \
  "$UVM_API_URL/vms/<vm-id>/ports"
 # Reapply a policy after an external firewall change.
 curl -X POST \
  -H "X-UVM-Token: $UVM_API_TOKEN" \
  "$UVM_API_URL/vms/<vm-id>/ports/sync"
 ```
 `set` can use an empty `ports` array to close every managed service. A legacy
 VM with `ports: null` must be stopped and use `set` before it can start or use
 the other policy operations. `open`, `close`, and `sync` reject a legacy policy.
 Mutating a live policy is subject to the same containment and confirmation rules
 as the CLI.
 ### Diagnostics and Log Tails
 The dashboard's System view calls the protected diagnostics endpoint. It runs
 the same host-readiness checks as `uvm doctor`, but does not repair a host or
 change VM state.
 ```sh
 curl -H "X-UVM-Token: $UVM_API_TOKEN" "$UVM_API_URL/diagnostics"
 # Read the final 200 lines without opening a streaming follow request.
 curl -H "X-UVM-Token: $UVM_API_TOKEN" \
  "$UVM_API_URL/vms/api-web/logs?tail=200"
 ```
 Log responses have `content` and `truncated` fields. `tail` is an integer from
 0 through 1000, defaulting to 100. Reads are limited to the final 256 KiB of a
 log; `truncated: true` means an oversized line or the read bound prevented a
 complete requested tail. Use `uvm logs VM --follow` for continuous output.
 ### Install or Refresh Through the API
@@ -20,4 +20,7 @@ test = ["httpx>=0.27,<1"]
 uvm = "uvm.cli:main"
 [tool.setuptools]
-packages = ["uvm", "uvm.firecracker", "uvm.routers"]
+packages = ["uvm", "uvm.firecracker", "uvm.routers", "uvm.dashboard"]
 [tool.setuptools.package-data]
 "uvm.dashboard" = ["static/*.html", "static/css/*.css", "static/js/*.js", "static/fonts/*.woff2", "static/fonts/*.txt"]
@@ -600,6 +600,23 @@ class LifecycleInspectionTests(LifecycleTestCase):
        self.assertFalse(settings.base.exists())
        self.assertEqual(self.host.events, [])
    def test_read_log_tail_is_bounded_and_marks_an_oversized_line(self) -> None:
        vm = self.create_vm(name="log-reader")
        path = Path(vm.log)
        path.write_bytes(b"old\n" * 100_000 + b"last\n" * 2)
        tail = self.service.read_log_tail(vm.id, tail=2)
        self.assertEqual(tail.content, "last\n" * 2)
        self.assertFalse(tail.truncated)
        with self.assertRaisesRegex(ValidationError, "non-negative"):
            self.service.read_log_tail(vm.id, tail=-1)
        path.write_bytes(b"x" * 300_000)
        truncated = self.service.read_log_tail(vm.id, tail=1)
        self.assertEqual(len(truncated.content), 262_144)
        self.assertTrue(truncated.truncated)
    def test_diagnostics_collects_failures_without_host_commands_or_lifecycle_effects(self) -> None:
        self.check_kvm.side_effect = UvmError("KVM unavailable")
        self.host.failures["firewall.check_available", None] = UvmError("nft unavailable")
@@ -13,7 +13,7 @@ from uvm.cli import build_parser, main
 from uvm.config import Settings
 from uvm.domain import PortRule, VmRecord, VmSpec
 from uvm.errors import ConfigurationError, ConflictError, NotFoundError, UvmError, ValidationError
-from uvm.lifecycle import ListedVm
+from uvm.lifecycle import ListedVm, OperationResult
 from uvm.server import _http_status_for, create_api, run_server
@@ -199,7 +199,21 @@ class FakeLifecycle:
        self.policy_status = "enforced"
        return self.vm
-    def stop(self, identifier: str) -> VmRecord:
+    def start(self, identifier: str) -> VmRecord:
        self.inspect(identifier)
        self.vm.status = "running"
        self.observed_status = "running"
        self.policy_status = "enforced"
        return self.vm
    def restart(self, identifier: str, *, timeout: float | None = None) -> VmRecord:
        self.inspect(identifier)
        self.vm.status = "running"
        self.observed_status = "running"
        self.policy_status = "enforced"
        return self.vm
    def stop(self, identifier: str, *, timeout: float | None = None) -> VmRecord:
        self.inspect(identifier)
        self.vm.status = "stopped"
        self.vm.pid = None
@@ -208,10 +222,55 @@ class FakeLifecycle:
        self.policy_status = "inactive"
        return self.vm
-    def destroy(self, identifier: str) -> VmRecord:
+    def destroy(self, identifier: str, *, timeout: float | None = None) -> VmRecord:
        self.inspect(identifier)
        return self.vm
    def read_log_tail(self, identifier: str, *, tail: int) -> SimpleNamespace:
        self.inspect(identifier)
        return SimpleNamespace(content=f"last {tail} log lines", truncated=False)
    def diagnostics(self) -> list[dict]:
        return [{"name": "kvm", "ok": True, "message": "available"}]
    def resolve_targets(self, identifiers: list[str], *, all_vms: bool = False) -> list[VmRecord]:
        if all_vms and identifiers:
            raise ValidationError("--all cannot be combined with explicit VM targets")
        if not all_vms and not identifiers:
            raise ValidationError("specify a VM or --all")
        if all_vms:
            return [self.vm]
        return [self.inspect(identifier).vm for identifier in identifiers]
    def run_many(
        self,
        action: str,
        vm_ids: list[str],
        *,
        timeout: float | None = None,
    ) -> list[OperationResult]:
        return [OperationResult(vm_id, action, "succeeded") for vm_id in vm_ids]
    def set_ports(self, identifier: str, ports: tuple[PortRule, ...], *, mode: str = "set") -> VmRecord:
        self.inspect(identifier)
        if mode == "set":
            self.vm.ports = ports
        elif mode == "open":
            existing = {p.port: p for p in self.vm.ports or ()}
            for p in ports:
                existing.setdefault(p.port, p)
            self.vm.ports = tuple(sorted(existing.values(), key=lambda r: r.port))
        elif mode == "close":
            drop = {p.port for p in ports}
            self.vm.ports = tuple(p for p in self.vm.ports or () if p.port not in drop)
        self.policy_status = "enforced"
        return self.vm
    def sync_ports(self, identifier: str) -> VmRecord:
        self.inspect(identifier)
        self.policy_status = "enforced"
        return self.vm
@unittest.skipUnless(FASTAPI_AVAILABLE, "FastAPI and httpx are required for API tests")
 class ApiRouterTests(unittest.TestCase):
@@ -236,18 +295,40 @@ class ApiRouterTests(unittest.TestCase):
        self.assertEqual(response.status_code, 200)
        self.assertEqual(response.json(), {"status": "ok"})
    def test_dashboard_and_assets_are_available_without_credentials(self) -> None:
        root = self.client.get("/", follow_redirects=False)
        dashboard = self.client.get("/dashboard")
        stylesheet = self.client.get("/dashboard/static/css/dashboard.css")
        script = self.client.get("/dashboard/static/js/dashboard.js")
        self.assertEqual(root.status_code, 307)
        self.assertEqual(root.headers["location"], "/dashboard")
        self.assertEqual(dashboard.status_code, 200)
        self.assertIn("UVM Control", dashboard.text)
        self.assertEqual(stylesheet.status_code, 200)
        self.assertIn("--acid", stylesheet.text)
        self.assertEqual(script.status_code, 200)
        self.assertIn("sessionStorage", script.text)
    def test_vm_routes_require_and_accept_the_api_token(self) -> None:
-        for method, path in (
+        for method, path, payload in (
-            ("GET", "/vms"),
+            ("GET", "/vms", {}),
-            ("POST", "/vms"),
+            ("POST", "/vms", {}),
-            ("GET", "/vms/test-vm"),
+            ("GET", "/vms/test-vm", {}),
-            ("POST", "/vms/test-vm/stop"),
+            ("GET", "/vms/test-vm/logs", {}),
-            ("DELETE", "/vms/test-vm"),
+            ("POST", "/vms/actions", {"action": "start", "identifiers": ["vm-test"]}),
-            ("POST", "/install"),
+            ("POST", "/vms/test-vm/start", {}),
            ("POST", "/vms/test-vm/restart", {}),
            ("POST", "/vms/test-vm/stop", {}),
            ("DELETE", "/vms/test-vm", {}),
            ("POST", "/vms/test-vm/ports", {}),
            ("POST", "/vms/test-vm/ports/sync", {}),
            ("GET", "/diagnostics", {}),
            ("POST", "/install", {}),
        ):
            for headers in ({}, {"X-UVM-Token": "wrong-token"}):
                with self.subTest(method=method, path=path, headers=headers):
-                    response = self.client.request(method, path, headers=headers, json={})
+                    response = self.client.request(method, path, headers=headers, json=payload)
                    self.assertEqual(response.status_code, 401)
        self.assertIsNone(self.lifecycle.last_spec)
        self.assertEqual(self.lifecycle.vm.status, "running")
@@ -435,6 +516,105 @@ class ApiRouterTests(unittest.TestCase):
                    self.assertEqual(destroyed.json()["id"], "vm-test")
                    destroy.assert_called_with(identifier)
    def test_lifecycle_timeouts_are_forwarded_when_supplied(self) -> None:
        with (
            patch.object(self.lifecycle, "restart", wraps=self.lifecycle.restart) as restart,
            patch.object(self.lifecycle, "stop", wraps=self.lifecycle.stop) as stop,
            patch.object(self.lifecycle, "destroy", wraps=self.lifecycle.destroy) as destroy,
        ):
            self.assertEqual(
                self.client.post("/vms/vm-test/restart?timeout=1.5", headers=self.headers).status_code,
                200,
            )
            self.assertEqual(
                self.client.post("/vms/vm-test/stop?timeout=2.5", headers=self.headers).status_code,
                200,
            )
            self.assertEqual(
                self.client.delete("/vms/vm-test?timeout=3.5", headers=self.headers).status_code,
                200,
            )
        restart.assert_called_once_with("vm-test", timeout=1.5)
        stop.assert_called_once_with("vm-test", timeout=2.5)
        destroy.assert_called_once_with("vm-test", timeout=3.5)
    def test_start_restart_and_port_routes_update_vm_state(self) -> None:
        started = self.client.post("/vms/vm-test/start", headers=self.headers)
        self.assertEqual(started.status_code, 200)
        self.assertEqual(started.json()["status"], "running")
        self.assertEqual(started.json()["policy_status"], "enforced")
        restarted = self.client.post("/vms/vm-test/restart", headers=self.headers)
        self.assertEqual(restarted.status_code, 200)
        self.assertEqual(restarted.json()["status"], "running")
        self.lifecycle.vm.status = "stopped"
        self.lifecycle.policy_status = "inactive"
        sync = self.client.post("/vms/vm-test/ports/sync", headers=self.headers)
        self.assertEqual(sync.status_code, 200)
        self.assertEqual(sync.json()["id"], "vm-test")
        self.assertEqual(sync.json()["policy_status"], "inactive")
    def test_bulk_action_resolves_targets_before_running_fixed_ids(self) -> None:
        with (
            patch.object(self.lifecycle, "resolve_targets", wraps=self.lifecycle.resolve_targets) as resolve,
            patch.object(self.lifecycle, "run_many", wraps=self.lifecycle.run_many) as run_many,
        ):
            response = self.client.post(
                "/vms/actions",
                headers=self.headers,
                json={"action": "restart", "identifiers": ["test-vm"], "timeout": 1.5},
            )
        self.assertEqual(response.status_code, 200)
        self.assertEqual(response.json(), [{"id": "vm-test", "action": "restart", "outcome": "succeeded", "error": None}])
        resolve.assert_called_once_with(["test-vm"], all_vms=False)
        run_many.assert_called_once_with("restart", ["vm-test"], timeout=1.5)
    def test_bulk_action_requires_exactly_one_selection_strategy(self) -> None:
        for payload in (
            {"action": "start"},
            {"action": "start", "identifiers": ["vm-test"], "all_vms": True},
        ):
            with self.subTest(payload=payload):
                response = self.client.post("/vms/actions", headers=self.headers, json=payload)
                self.assertEqual(response.status_code, 422)
    def test_log_and_diagnostic_routes_return_bounded_observability_data(self) -> None:
        logs = self.client.get("/vms/test-vm/logs?tail=5", headers=self.headers)
        diagnostics = self.client.get("/diagnostics", headers=self.headers)
        self.assertEqual(logs.status_code, 200)
        self.assertEqual(logs.json(), {"content": "last 5 log lines", "truncated": False})
        self.assertEqual(diagnostics.status_code, 200)
        self.assertEqual(diagnostics.json(), [{"name": "kvm", "ok": True, "message": "available"}])
    def test_port_update_modes_mutate_rules(self) -> None:
        set_resp = self.client.post(
            "/vms/vm-test/ports",
            headers=self.headers,
            json={"mode": "set", "ports": [{"port": 80, "protocol": "HTTP"}, {"port": 443, "protocol": "HTTPS"}]},
        )
        self.assertEqual(set_resp.status_code, 200)
        self.assertEqual(set_resp.json()["ports"], [{"port": 80, "protocol": "HTTP"}, {"port": 443, "protocol": "HTTPS"}])
        open_resp = self.client.post(
            "/vms/vm-test/ports",
            headers=self.headers,
            json={"mode": "open", "ports": [{"port": 22, "protocol": "TCP"}]},
        )
        self.assertEqual(open_resp.status_code, 200)
        self.assertEqual(open_resp.json()["ports"], [{"port": 22, "protocol": "TCP"}, {"port": 80, "protocol": "HTTP"}, {"port": 443, "protocol": "HTTPS"}])
        close_resp = self.client.post(
            "/vms/vm-test/ports",
            headers=self.headers,
            json={"mode": "close", "ports": [{"port": 80, "protocol": "HTTP"}]},
        )
        self.assertEqual(close_resp.status_code, 200)
        self.assertEqual(close_resp.json()["ports"], [{"port": 22, "protocol": "TCP"}, {"port": 443, "protocol": "HTTPS"}])
    def test_create_claims_enforcement_only_for_successful_managed_vms(self) -> None:
        for ports, status, operation, policy_status in (
            (None, "running", None, "unmanaged"),
@@ -456,9 +636,15 @@ class ApiRouterTests(unittest.TestCase):
        for method, path, operation in (
            ("GET", "/vms", "list_vms"),
            ("GET", "/vms/test-vm", "inspect"),
            ("GET", "/vms/test-vm/logs", "read_log_tail"),
            ("POST", "/vms", "create"),
            ("POST", "/vms/test-vm/start", "start"),
            ("POST", "/vms/test-vm/restart", "restart"),
            ("POST", "/vms/test-vm/stop", "stop"),
            ("DELETE", "/vms/test-vm", "destroy"),
            ("POST", "/vms/test-vm/ports", "set_ports"),
            ("POST", "/vms/test-vm/ports/sync", "sync_ports"),
            ("GET", "/diagnostics", "diagnostics"),
        ):
            for error, expected in (
                (NotFoundError("unknown guest"), 404),
@@ -480,19 +666,28 @@ class ApiRouterTests(unittest.TestCase):
        self.assertEqual(response.status_code, 404)
        self.assertEqual(response.json(), {"error": {"message": "VM not found: missing"}})
-    def test_api_schema_keeps_only_existing_operations(self) -> None:
+    def test_api_schema_exposes_dashboard_and_management_operations(self) -> None:
        schema = self.client.get("/openapi.json").json()
        self.assertEqual(
            {(path, method) for path, methods in schema["paths"].items() for method in methods},
            {
                ("/", "get"),
                ("/dashboard", "get"),
                ("/health", "get"),
                ("/install", "post"),
                ("/vms", "get"),
                ("/vms", "post"),
                ("/vms/actions", "post"),
                ("/vms/{identifier}", "get"),
                ("/vms/{identifier}/logs", "get"),
                ("/vms/{vm_id}/start", "post"),
                ("/vms/{vm_id}/restart", "post"),
                ("/vms/{vm_id}/stop", "post"),
                ("/vms/{vm_id}", "delete"),
                ("/vms/{vm_id}/ports", "post"),
                ("/vms/{vm_id}/ports/sync", "post"),
                ("/diagnostics", "get"),
            },
        )
        self.assertEqual(
@@ -73,6 +73,46 @@ class DestroyResponse(BaseModel):
    status: str = "terminated"
 class PortUpdateRequest(BaseModel):
    model_config = ConfigDict(extra="forbid")
    mode: Literal["set", "open", "close"] = "set"
    ports: list[PortRuleModel] = Field(default_factory=list)
 class PortSyncResponse(BaseModel):
    id: str
    policy_status: str
    status: str
 class VmLogResponse(BaseModel):
    content: str
    truncated: bool
 class DiagnosticResponse(BaseModel):
    name: str
    ok: bool
    message: str
 class VmBulkActionRequest(BaseModel):
    model_config = ConfigDict(extra="forbid")
    action: Literal["start", "stop", "restart", "delete", "ports-sync"]
    identifiers: list[str] = Field(default_factory=list)
    all_vms: bool = Field(default=False, strict=True)
    timeout: float | None = None
 class VmActionResultResponse(BaseModel):
    id: str
    action: str
    outcome: str
    error: str | None = None
 def vm_response(
    vm: VmRecord,
    *,
@@ -0,0 +1 @@
 # UVM Dashboard static assets package.
@@ -0,0 +1,943 @@
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
 }
 :root {
  --canvas: #e8e7ed;
  --canvas-deep: #dddae4;
  --paper: #faf9fc;
  --white: #fff;
  --ink: #35333e;
  --ink-soft: #55515f;
  --muted: #78717f;
  --faint: #a29cae;
  --line: rgba(110, 99, 135, .11);
  --acid: #ede39f;
  --yellow: #e6d783;
  --yellow-soft: #f4efce;
  --yellow-ink: #746633;
  --peach: #ddb5a9;
  --peach-soft: #f3e5e0;
  --sage: #a9b9a1;
  --sage-soft: #e9eee6;
  --lilac: #b9aed0;
  --lilac-soft: #eae4f2;
  --red: #bd766e;
  --red-soft: #f3e4e1;
  --shadow-card: 0 5px 14px rgba(66, 52, 92, .035), 0 18px 34px -23px rgba(66, 52, 92, .17);
  --radius: 21px;
  --sans: Manrope, 'Avenir Next', 'Segoe UI', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --ease: cubic-bezier(.22, .68, 0, 1.01);
 }
 *, *::before, *::after { box-sizing: border-box; }
 html { min-height: 100%; background: #dad8e0; }
 body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(ellipse at 20% 0, #eeedf1, transparent 65%), #dad8e0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
 }
 button, input, select, textarea { font: inherit; }
 button, a, input, select { -webkit-tap-highlight-color: transparent; }
 button { cursor: pointer; }
 button, input, select { color: inherit; }
 button { border: 0; }
 button:disabled { cursor: wait; opacity: .55; }
 a { color: inherit; text-decoration: none; }
 h1, h2, h3, p { margin: 0; }
 h1, h2, h3, strong { font-weight: 550; }
 h1, h2, h3 { line-height: 1.3; }
 h1:focus { outline: none; }
 fieldset { min-width: 0; }
 input { min-width: 0; }
 input::placeholder { color: #918a9e; }
 input[type='checkbox'] { width: 14px; height: 14px; accent-color: #9f9259; cursor: pointer; }
 ::selection { background: #ece1aa; color: var(--ink); }
 :focus-visible { outline: 2px solid #a79967; outline-offset: 4px; }
 [hidden] { display: none !important; }
 .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
 .icon { display: block; width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 .muted { color: var(--muted); }
 .mono { font-family: var(--mono); font-size: 10px; }
 .danger-text { color: #a45f57 !important; }
 .subtle-label { display: block; color: var(--muted); font-size: 10px; font-weight: 450; letter-spacing: .015em; }
 .dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--faint); }
 .dot-yellow { background: var(--yellow); box-shadow: 0 0 0 3px rgba(230, 215, 131, .11); }
 .dot-peach { background: var(--peach); }
 .dot-sage { background: var(--sage); }
 .dot-lilac { background: var(--lilac); }
 .dot-error { background: var(--red); }
 .status-inline { display: inline-flex; align-items: center; gap: 7px; }
 .button, .icon-button, .quiet-link, .mini-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
 .button {
  min-height: 37px;
  padding: 8px 17px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 30px;
  background: rgba(255, 255, 255, .57);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .2s, box-shadow .2s, transform .25s var(--ease);
 }
 .button:hover:not(:disabled) { transform: translateY(-1px); background: #fff; box-shadow: 0 4px 12px #5145660b; }
 .button:active:not(:disabled) { transform: translateY(0); }
 .button .icon { width: 15px; height: 15px; }
 .button-primary { background: var(--acid); border-color: #f6efc5; color: #554d30; box-shadow: 0 5px 13px #9784460a; }
 .button-primary:hover:not(:disabled) { background: #e9dc91; box-shadow: 0 6px 16px #97844616; }
 .button-danger { background: var(--red-soft); color: #96544d; border-color: #e8cfc9; }
 .button-danger:hover:not(:disabled) { background: #edd3cd; }
 .button-quiet { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
 .button-small { min-height: 31px; font-size: 10px; padding: 6px 12px; }
 .button-wide { width: 100%; justify-content: space-between; padding-inline: 20px; }
 .button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
 .icon-button { width: 33px; height: 33px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); transition: background .2s, color .2s, transform .2s; }
 .icon-button:hover:not(:disabled) { background: #ffffffa8; color: var(--ink); }
 .icon-button .icon { width: 16px; height: 16px; }
 .quiet-link { justify-content: flex-start; padding: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 450; transition: color .2s; }
 .quiet-link:hover { color: var(--ink); }
 .quiet-link .icon { width: 15px; height: 15px; }
 .mini-link { color: var(--muted); padding: 3px; border-radius: 50%; }
 .mini-link:hover { color: var(--ink); background: #fff8; }
 .mini-link .icon { width: 13px; height: 13px; }
 .round-icon { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; flex: 0 0 auto; background: #f7f5fa; border: 1px solid #fff9; border-radius: 14px; color: var(--muted); }
 .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; line-height: 1.4; padding: 6px 10px; border-radius: 20px; background: #ffffff67; color: var(--muted); white-space: nowrap; }
 .tag .icon { width: 13px; height: 13px; }
 .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: #ffffff69; border-radius: 20px; font-size: 10px; line-height: 1.4; font-weight: 450; color: var(--ink-soft); white-space: nowrap; }
 .badge::before { content: ''; width: 5px; height: 5px; flex: 0 0 auto; background: var(--faint); border-radius: 50%; }
 .badge-running::before { background: var(--yellow); }
 .badge-stopped::before { background: var(--peach); }
 .badge-good::before { background: #a1b292; }
 .badge-attention::before { background: var(--red); }
 .badge-attention { color: #a26259; background: #f5e9e57a; }
 .badge-pending::before { background: var(--lilac); }
 .port-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 7px; padding: 4px 7px; background: #f4f1f7; color: #756d81; font-size: 9px; white-space: nowrap; }
 .port-chip small { color: #918699; font-size: 8px; }
 .port-list { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-height: 34px; color: var(--muted); font-size: 11px; }
 .port-list .port-chip { padding: 7px 11px; font-size: 11px; background: #eee9f3; }
 .port-list .port-chip small { font-size: 9px; }
 /* A quiet, two-part navigation panel, lifted over the workspace. */
 .app-shell {
  display: grid;
  grid-template-columns: 402px minmax(0, 1fr);
  max-width: 1840px;
  height: calc(100dvh - 48px);
  min-height: 680px;
  margin: 24px auto;
  width: calc(100% - 48px);
  overflow: hidden;
  border: 1px solid #ffffffac;
  border-radius: 25px;
  background: linear-gradient(135deg, #ecebf1 0, #e6e4ec 100%);
  box-shadow: 0 24px 70px -35px #493e6640, 0 2px 7px #61546d06;
 }
 .workspace-drawer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px;
  gap: 16px;
  padding: 25px 17px 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(125deg, #f1f0f5dd, #f0eef4ba);
  border-radius: 24px 23px 28px 24px;
  border-right: 1px solid #ffffff4d;
  box-shadow: 7px 0 27px -18px #71628422;
  z-index: 2;
  scrollbar-width: none;
 }
 .sidebar { display: flex; flex-direction: column; min-width: 0; }
 .brand { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: #4d4857; line-height: 1; }
 .brand > span:nth-child(2) { font-size: 27px; font-weight: 650; letter-spacing: -1.8px; }
 .brand-period { color: #b3a166; }
 .brand-tag { align-self: end; margin: 0 0 3px 2px; color: #898291; font-size: 8px; letter-spacing: .025em; }
 .brand-flower { display: block; position: relative; width: 20px; height: 20px; flex: 0 0 auto; transform: rotate(-12deg); }
 .brand-flower i { position: absolute; width: 8px; height: 8px; border-radius: 2px 6px 2px 6px; background: var(--yellow); }
 .brand-flower i:nth-child(1) { left: 1px; top: 1px; }
 .brand-flower i:nth-child(2) { right: 1px; top: 1px; transform: rotate(90deg); background: #d9d3df; }
 .brand-flower i:nth-child(3) { left: 1px; bottom: 1px; transform: rotate(90deg); background: #b6adbf; }
 .brand-flower i:nth-child(4) { right: 1px; bottom: 1px; }
 .sidebar-heading { display: flex; gap: 10px; margin: 33px 0 22px; }
 .sidebar-heading-mark { margin-top: 2px; color: #827b8e; font-size: 17px; }
 .sidebar-heading h2 { font-size: 20px; font-weight: 450; letter-spacing: -.055em; line-height: 1.4; }
 .sidebar-heading h2 span { display: block; }
 .sidebar-search { display: flex; align-items: center; gap: 9px; padding: 0 4px; color: var(--muted); background: transparent; text-align: left; font-size: 10px; }
 .sidebar-search .icon { width: 15px; height: 15px; }
 .sidebar-search kbd { margin-left: auto; font-family: var(--sans); font-size: 10px; color: var(--faint); }
 .primary-nav { display: grid; gap: 5px; margin-top: 35px; }
 .nav-item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 10px; color: var(--muted); border-radius: 25px; font-size: 11px; font-weight: 450; transition: background .25s, box-shadow .25s, color .25s; }
 .nav-item > .icon { width: 15px; height: 15px; }
 .nav-item:hover { background: #ffffff5e; color: var(--ink); }
 .nav-item.active { background: #ffffffed; box-shadow: 0 5px 14px #62537608; color: var(--ink); }
 .nav-count { margin-left: auto; color: var(--muted); font-size: 9px; }
 .nav-indicator { display: none; width: 4px; height: 4px; margin-left: auto; background: var(--lilac); border-radius: 50%; }
 .nav-item.active .nav-indicator { display: block; }
 .nav-health-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; }
 .nav-item .nav-end-icon { width: 12px; height: 12px; margin-left: auto; color: var(--faint); }
 .nav-create { margin-top: 9px; }
 .sidebar-secondary { margin: 20px 7px 0; border-top: 1px solid var(--line); padding-top: 17px; }
 .sidebar-secondary .nav-item { padding-inline: 3px; font-size: 10px; }
 .sidebar-bottom { margin-top: auto; padding: 50px 5px 0; }
 .workspace-identity { display: flex; align-items: center; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); }
 .workspace-avatar { display: grid; place-items: center; width: 29px; height: 32px; flex: 0 0 auto; border: 1px solid #fff; border-radius: 10px; background: #e5dfed; color: #867b92; font-size: 18px; font-weight: 500; }
 .workspace-identity > div { display: grid; gap: 4px; }
 .workspace-identity strong { font-size: 9px; font-weight: 550; }
 .workspace-identity > div > span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; line-height: 1.2; }
 .workspace-identity .dot { width: 4px; height: 4px; }
 .sidebar-bottom > .quiet-link { font-size: 9px; margin-top: 22px; }
 .sidebar-bottom > .quiet-link .icon { width: 13px; height: 13px; }
 .context-rail { display: flex; flex-direction: column; gap: 17px; min-width: 0; padding-top: 53px; }
 .insight-card { position: relative; display: block; min-height: 161px; padding: 15px 14px 11px; border: 1px solid #ffffffd9; border-radius: 19px; background: linear-gradient(140deg, #fff, #fbfafc); box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s; }
 .insight-card::before { content: ''; position: absolute; top: -3px; left: 27px; right: 27px; height: 6px; border-radius: 20px; background: #e7cfdc; filter: blur(3px); z-index: -1; }
 .insight-card .card-caption { gap: 4px; font-size: 9px; }
 .insight-card .card-caption .icon { width: 12px; height: 12px; color: #9b8caa; }
 .insight-card p { color: var(--muted); font-size: 10px; line-height: 1.55; min-height: 42px; margin-top: 9px; }
 .insight-card p strong { color: #59505f; font-weight: 650; }
 .insight-matrix { display: grid; place-items: center; height: 35px; margin-top: 5px; background-image: radial-gradient(#b9adb93b .75px, transparent .9px); background-size: 4px 4px; mask-image: radial-gradient(ellipse, #000 15%, transparent 70%); }
 .insight-matrix span { display: block; width: 21px; height: 21px; background: repeating-conic-gradient(#92837b 0 25%, transparent 0 50%) 50% / 4px 4px; mask-image: radial-gradient(ellipse at center 75%, #000, transparent 70%); }
 .insight-footer { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 7px; color: #99919f; }
 .insight-footer .dot { width: 4px; height: 4px; }
 .collection { display: block; position: relative; border-radius: 18px; transition: transform .3s var(--ease); }
 .collection:hover, .insight-card:hover { transform: translateY(-3px); }
 .collection-label { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 65px; padding: 13px 14px; border: 1px solid #ffffffe6; border-radius: 18px; background: linear-gradient(130deg, #fffffff7, #fcfbfee6); box-shadow: var(--shadow-card); z-index: 1; }
 .collection-label > div { display: grid; gap: 3px; }
 .collection-label strong { font-size: 11px; font-weight: 550; }
 .collection-label span { color: var(--muted); font-size: 9px; }
 .collection-label > .icon { width: 13px; height: 13px; color: #8f849f; }
 .collection-art { position: relative; overflow: hidden; height: 64px; margin: 0 3px -11px; }
 .paper-machine { position: absolute; width: 100px; height: 91px; padding: 14px; border: 1px solid #fff; border-radius: 10px; background: linear-gradient(150deg, #fff, #eae8ed); box-shadow: -3px 1px 12px #6f5d8810; }
 .back-paper { left: 11px; top: 18px; transform: rotate(-14deg); }
 .front-paper { right: 6px; top: 5px; transform: rotate(9deg); }
 .paper-machine i { display: block; height: 2px; margin-top: 5px; border-radius: 3px; background: #dcd8e1; }
 .paper-machine i:nth-last-child(2) { width: 60%; }
 .paper-machine > span { display: block; width: 11px; height: 3px; background: #e7dca5; border-radius: 3px; margin-top: 5px; }
 .paper-machine .icon { width: 18px; height: 18px; color: #b5aaba; margin-bottom: 6px; }
 .collection-machines::after { content: ''; position: absolute; bottom: -2px; left: 21px; right: 21px; height: 13px; background: #ebe5c9; border-radius: 50%; filter: blur(10px); }
 .network-art { height: 62px; margin-bottom: -12px; }
 .network-paper { position: absolute; left: 0; right: 0; top: 7px; height: 79px; padding: 12px; border: 1px solid #eeeeef; border-radius: 16px; background: #e7e4ebaa; box-shadow: inset 0 7px 9px #fff6; }
 .network-paper::before { content: ''; position: absolute; left: 10px; right: 10px; top: 9px; height: 67px; background: #f3f0f7; border-radius: 11px; box-shadow: 0 0 0 1px #fff7; }
 .network-paper .icon { position: absolute; width: 16px; height: 16px; left: 18px; top: 19px; color: #b8acbe; }
 .network-paper i { position: absolute; top: 33px; width: 5px; height: 5px; border-radius: 50%; background: #c9bece; }
 .network-paper i:nth-of-type(1) { left: 50px; }
 .network-paper i:nth-of-type(2) { left: 88px; top: 19px; background: #e3d694; }
 .network-paper i:nth-of-type(3) { right: 13px; }
 .network-line { position: absolute; left: 52px; right: 16px; top: 20px; height: 17px; border-top: 1px solid #d9cedf; border-left: 1px solid #d9cedf; border-right: 1px solid #d9cedf; border-radius: 5px; z-index: 1; }
 .collection-network::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -3px; height: 10px; border-radius: 20px; background: #e4cad6; filter: blur(5px); }
 .collection-new .collection-label { background: #faf9fc9c; border-color: #ffffff96; box-shadow: 0 5px 15px #62537603; }
 .rail-footnote { margin-top: auto; padding: 7px 14px 0; color: #a098ac; font-size: 8px; line-height: 1.65; }
 /* The canvas stays light; grouping comes from tone and space. */
 .workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
 .topbar { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 0 27px; }
 .workspace-crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 29px; padding: 5px 13px; border-radius: 25px; background: #ffffffab; box-shadow: 0 3px 12px #67577d03; font-size: 10px; white-space: nowrap; }
 .workspace-crumb .dot { width: 5px; height: 5px; }
 .crumb-divider { color: #c0b9c9; padding: 0 1px; }
 #breadcrumb { color: #8e8499; }
 .refresh-button { width: 28px; height: 28px; }
 .refresh-button .icon { width: 13px; height: 13px; }
 .refresh-button.is-loading .icon { animation: spin 1.3s linear infinite; }
 .global-search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 260px; min-width: 135px; width: 100%; margin-left: auto; padding: 5px 2px; }
 .global-search > .icon { width: 14px; height: 14px; color: #62596f; }
 .global-search input { width: 100%; outline: none; border: 0; background: transparent; font-size: 10px; padding: 4px 0; }
 .global-search:focus-within { border-bottom: 1px solid #c7bdd3; }
 .global-search kbd { white-space: nowrap; color: #a499b1; font-family: var(--sans); font-size: 9px; }
 .topbar-create { width: 29px; height: 29px; border: 1px solid #fff9; background: #ffffff60; margin-left: 6px; }
 .mobile-menu { display: none; }
 .page-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 27px 25px; scrollbar-gutter: stable; }
 .page { animation: page-appear .35s var(--ease) both; }
 .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; min-height: 52px; }
 .page-heading h1 { font-size: 27px; font-weight: 450; letter-spacing: -.055em; margin-top: 5px; overflow-wrap: anywhere; }
 .heading-period { color: #aa9aac; }
 .page-heading .subtle-label { font-size: 9px; }
 .date-label { font-size: 9px; color: #898090; align-self: end; padding-bottom: 4px; }
 .overview-metrics { display: grid; grid-template-columns: .98fr 1.02fr 1fr; gap: 13px; }
 .metric-card { min-width: 0; min-height: 153px; padding: 16px 18px; border: 1px solid #ffffff73; border-radius: var(--radius); background: linear-gradient(120deg, #f9f8fba8, #f6f4f987); box-shadow: 0 5px 15px #55456602; }
 .card-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .card-caption h2 { font-size: 12px; font-weight: 500; letter-spacing: -.025em; }
 .caption-icon { width: 15px; height: 15px; color: #a59bb0; }
 .fleet-number { display: flex; align-items: center; gap: 16px; margin: 12px 0 13px; }
 .fleet-number > strong { font-size: 39px; font-weight: 350; letter-spacing: -.07em; line-height: 1.1; }
 .fleet-number > span { color: var(--muted); font-size: 9px; line-height: 1.55; }
 .metric-bottom { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; }
 .metric-bottom .dot { width: 5px; height: 5px; }
 .signal-readouts { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
 .signal-readouts > div { display: grid; align-items: center; grid-template-columns: 5px 1fr; gap: 2px 6px; }
 .signal-readouts .dot { width: 4px; height: 4px; }
 .signal-readouts strong { font-size: 16px; font-weight: 450; line-height: 1.4; }
 .signal-readouts small { grid-column: 2; color: var(--muted); font-size: 9px; }
 .segmented-track { display: flex; height: 3px; margin-top: 18px; border-radius: 5px; background: #e2dce9; overflow: hidden; }
 .segmented-track span { width: 0; transition: width .7s var(--ease); }
 .segmented-track span:first-child { background: linear-gradient(90deg, #b3c0a9, #d4dba6); }
 .segmented-track span:last-child { background: linear-gradient(90deg, #e0c4ae, #dbaa9f); }
 .range-labels { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: #94899f; font-size: 7px; }
 .resource-line { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 19px; }
 .resource-line > span { font-size: 12px; letter-spacing: -.02em; }
 .resource-line > small { color: var(--muted); font-size: 8px; text-align: right; }
 .resource-track { height: 3px; border-radius: 4px; background: #e5dfca8a; margin-top: 6px; overflow: hidden; }
 .resource-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #e6d88e; box-shadow: 0 0 5px #e7d89555; transition: width .7s var(--ease); }
 .second-resource { margin-top: 15px; }
 .memory-track { background: #e6dfeb; }
 .memory-track > span { background: #beb0d1; }
 .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
 .section-heading h2 { font-size: 14px; font-weight: 500; letter-spacing: -.03em; }
 .section-heading > div > span { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
 .portfolio-section { margin-top: 26px; }
 .portfolio-section > .section-heading { margin: 0 3px 12px; }
 .portfolio-content { min-height: 184px; }
 .table-scroll { overflow-x: auto; scrollbar-width: thin; }
 .portfolio-table { width: 100%; min-width: 565px; border-collapse: separate; border-spacing: 0 6px; text-align: left; }
 .portfolio-table th { color: var(--muted); font-size: 10px; font-weight: 450; padding: 0 10px 5px; white-space: nowrap; }
 .portfolio-table td { padding: 12px 10px; color: var(--ink-soft); font-size: 11px; transition: background .2s; }
 .portfolio-table th:first-child, .portfolio-table td:first-child { padding-left: 14px; }
 .portfolio-table tbody tr { background: #faf8fc22; }
 .portfolio-table tbody tr:nth-child(2n) { background: #ffffff7d; }
 .portfolio-table tbody tr:hover { background: #ffffffbf; }
 .portfolio-table td:first-child { border-radius: 13px 0 0 13px; }
 .portfolio-table td:last-child { border-radius: 0 13px 13px 0; width: 25px; padding-inline: 6px; }
 .portfolio-table .badge { font-size: 9px; padding: 4px 7px; }
 .portfolio-table .mini-link .icon { width: 12px; height: 12px; }
 .portfolio-name { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 11px; }
 .portfolio-name > .icon { width: 13px; height: 13px; color: #b4a6bd; }
 .portfolio-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
 .resource-inline { white-space: nowrap; font-size: 10px; }
 .resource-inline span { color: #aca0b6; padding: 0 4px; }
 .soft-panel { min-width: 0; padding: 21px; border: 1px solid #ffffff69; border-radius: var(--radius); background: linear-gradient(120deg, #f7f5fa8c, #f3f0f775); }
 .overview-bottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-top: 22px; }
 .activity-panel { padding: 19px 20px 13px; }
 .activity-panel .section-heading { margin-bottom: 8px; }
 .activity-body { display: flex; align-items: center; justify-content: center; gap: 34px; }
 .fleet-ring { position: relative; width: 208px; max-width: 56%; flex: 0 0 auto; aspect-ratio: 1; }
 .fleet-ring > svg { display: block; width: 100%; height: 100%; overflow: visible; }
 .fleet-ring circle { fill: none; stroke-width: 3; }
 .ring-track { stroke: #e2dce9; }
 .ring-segment { transform: rotate(-90deg); transform-origin: center; stroke-dasharray: 0 100; stroke-linecap: round; transition: stroke-dasharray .8s var(--ease), stroke-dashoffset .8s var(--ease); }
 .ring-running { stroke: #e7d98b; }
 .ring-stopped { stroke: #dcb2a5; }
 .ring-other { stroke: #baabcb; }
 .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 7px; }
 .ring-center > span { color: var(--muted); font-size: 9px; }
 .ring-center > strong { font-size: 43px; font-weight: 250; letter-spacing: -.06em; line-height: 1.4; }
 .ring-center > strong small { font-size: 26px; font-weight: 300; }
 .ring-center > span:last-child { font-size: 8px; }
 .ring-legend { display: grid; gap: 21px; flex: 1; max-width: 150px; padding-right: 3px; }
 .ring-legend > div { display: flex; align-items: flex-start; gap: 7px; }
 .ring-legend .dot { width: 4px; height: 4px; margin-top: 5px; }
 .ring-legend span { color: var(--ink-soft); font-size: 10px; line-height: 1.4; }
 .ring-legend small { display: block; color: var(--muted); font-size: 8px; margin-top: 4px; }
 .ring-legend strong { margin-left: auto; color: var(--ink-soft); font-size: 13px; font-weight: 400; }
 .notes-panel { padding: 20px 20px 15px; }
 .notes-panel .section-heading { margin-bottom: 12px; }
 .note-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #b5a6c016; }
 .note-row > .icon { width: 15px; height: 15px; color: #a89ab3; }
 .note-row > div { min-width: 0; }
 .note-row strong { display: block; color: var(--ink-soft); font-size: 11px; font-weight: 450; }
 .note-row small { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; }
 .note-row > span { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
 .note-row .icon:last-child { width: 11px; height: 11px; }
 .note-row:hover strong { color: #4f405b; }
 .notes-footer { margin-top: 15px; width: 100%; justify-content: space-between; font-size: 9px; }
 .page-footer { display: flex; justify-content: space-between; gap: 12px; color: #a292ad; margin: 21px 3px 0; font-size: 8px; }
 .page-footer > span:first-child { display: flex; align-items: center; gap: 6px; }
 .page-footer .dot { width: 4px; height: 4px; }
 .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 215px; padding: 30px 18px; text-align: center; border-radius: 18px; background: #f9f7fc47; }
 .empty-state .empty-icon { position: relative; display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 4px; border: 1px solid #ffffffed; border-radius: 15px; background: linear-gradient(135deg, #fff, #e7e1ee); color: #b0a1bd; box-shadow: 0 8px 13px -8px #9183aa38; transform: rotate(-7deg); }
 .empty-state .empty-icon::before { content: ''; position: absolute; inset: 4px -5px -3px 5px; border: 1px solid #ffffffbf; border-radius: 15px; z-index: -1; }
 .empty-state h3 { font-size: 14px; font-weight: 450; letter-spacing: -.035em; }
 .empty-state p { max-width: 290px; color: var(--muted); font-size: 11px; }
 .empty-state .button { margin-top: 7px; }
 .portfolio-content .empty-state { min-height: 191px; padding: 22px 15px; border: 1px solid #ffffff4d; }
 .portfolio-content .empty-state h3 { font-size: 13px; }
 .portfolio-content .empty-state p { font-size: 9px; max-width: none; }
 .portfolio-content .empty-state .button { min-height: 29px; font-size: 9px; }
 .loading-state { display: grid; place-items: center; min-height: 170px; color: var(--muted); font-size: 11px; }
 /* The machine collection. */
 .compact-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 25px; }
 .compact-metric { display: flex; align-items: center; gap: 15px; min-height: 100px; padding: 20px; border: 1px solid #ffffff80; border-radius: 19px; background: #f9f7fba6; }
 .compact-metric > .round-icon { width: 37px; height: 41px; background: #eee8f3; color: #9d8daa; }
 .compact-metric:nth-child(2) > .round-icon { background: #f3eed5; color: #ac9a65; }
 .compact-metric:nth-child(3) > .round-icon { background: #efe2e0; color: #ba9692; }
 .compact-metric > div { min-width: 0; }
 .compact-metric strong { display: block; font-size: 25px; font-weight: 350; line-height: 1.25; letter-spacing: -.05em; overflow-wrap: anywhere; }
 .compact-metric span { color: var(--muted); font-size: 10px; }
 .compact-metric .metric-word { font-size: 18px; }
 .fleet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
 .filter-tabs { display: flex; gap: 3px; padding: 4px; border: 1px solid #ffffff57; border-radius: 28px; background: #ffffff21; }
 .filter-tab { padding: 8px 13px; border-radius: 22px; background: transparent; color: var(--muted); font-size: 11px; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
 .filter-tab.active { background: #fff; color: #5f496c; box-shadow: 0 3px 9px #68517508; }
 .filter-tab:hover { color: var(--ink); }
 .select-wrap { position: relative; display: inline-flex; align-items: center; }
 .select-wrap::after { content: ''; position: absolute; right: 12px; width: 5px; height: 5px; border-right: 1px solid #92819f; border-bottom: 1px solid #92819f; transform: translateY(-2px) rotate(45deg); pointer-events: none; }
 .select-wrap select { appearance: none; max-width: 100%; min-height: 32px; border: 1px solid #ffffff70; border-radius: 18px; background: #f7f4fa9c; padding: 6px 28px 6px 12px; color: #897494; font-size: 9px; cursor: pointer; }
 .fleet-list-panel { padding: 5px 16px 0; border: 1px solid #ffffff73; border-radius: 21px; background: #f8f5fb57; }
 .list-search-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 1px 13px; }
 .search-field { display: flex; align-items: center; gap: 10px; max-width: 310px; width: 100%; color: #a18caf; }
 .search-field .icon { width: 15px; height: 15px; }
 .search-field input { width: 100%; padding: 7px 0; border: 0; outline: 0; background: transparent; font-size: 10px; }
 .search-field:focus-within { border-bottom: 1px solid #c7b9d4; }
 .list-search-row > span { font-size: 9px; color: #a18cab; white-space: nowrap; }
 .machine-table { width: 100%; min-width: 690px; border-collapse: separate; border-spacing: 0 7px; text-align: left; }
 .machine-table th { padding: 3px 9px 9px; color: var(--muted); font-size: 10px; font-weight: 450; }
 .machine-table td { padding: 14px 9px; background: #ffffff91; color: var(--ink-soft); font-size: 11px; transition: background .2s; }
 .machine-table tbody tr:nth-child(2n) td { background: #ffffff47; }
 .machine-table tbody tr:hover td { background: #fff; }
 .machine-table tr.selected td { background: #f6f0d9bb; }
 .machine-table td:first-child { border-radius: 13px 0 0 13px; }
 .machine-table td:last-child { border-radius: 0 13px 13px 0; }
 .machine-table .check-cell { width: 28px; padding-right: 3px; padding-left: 10px; }
 .machine-table input[type='checkbox'] { vertical-align: middle; }
 .machine-name { display: flex; align-items: center; gap: 9px; }
 .machine-name > .round-icon { width: 29px; height: 33px; border-radius: 10px; background: #eee7f280; }
 .machine-name .round-icon .icon { width: 15px; height: 15px; color: #b39cc0; }
 .machine-name > div { min-width: 80px; }
 .machine-name a { display: block; max-width: 175px; color: var(--ink); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .machine-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
 .machine-name small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
 .allocation-cell { white-space: nowrap; }
 .allocation-cell small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
 .table-ports { display: flex; flex-wrap: wrap; gap: 3px; max-width: 135px; }
 .table-ports .muted { font-size: 9px; color: #a78cb3; }
 .row-controls { display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
 .row-controls .icon-button { width: 27px; height: 27px; color: #aa91b6; }
 .row-controls .icon { width: 13px; height: 13px; }
 .row-controls-heading { width: 67px; }
 .list-footer { display: flex; justify-content: space-between; gap: 15px; padding: 17px 1px; color: #aa90b6; font-size: 8px; }
 .bulk-controls { display: flex; align-items: center; gap: 9px; margin: 2px 0 13px; padding: 7px 10px; border: 1px solid #f6efc8; border-radius: 14px; background: #f3edc67d; }
 .bulk-controls > span { margin-right: auto; font-size: 10px; color: #8a7945; }
 .bulk-controls .icon-button { width: 25px; height: 25px; }
 .operation-results { margin-top: 18px; padding: 17px 20px; border: 1px solid #fff8; border-radius: 17px; background: #f7f1eb; color: #957364; }
 .operation-results header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
 .operation-results h2 { font-size: 12px; }
 .operation-results ul { margin: 7px 0 0; padding-left: 17px; font-size: 10px; }
 .operation-results li { padding: 3px 0; overflow-wrap: anywhere; }
 /* Network and inspection. */
 .network-layout { display: grid; grid-template-columns: .85fr 1.4fr; gap: 16px; }
 .network-map-panel { padding: 24px; }
 .fabric-diagram { display: flex; flex-direction: column; align-items: center; padding: 23px 0; }
 .fabric-node { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; z-index: 1; }
 .fabric-node > .round-icon { background: #fbf9fc; width: 45px; height: 45px; border-radius: 15px; margin-bottom: 4px; box-shadow: 0 8px 16px #78618c07; }
 .fabric-node strong { font-size: 11px; font-weight: 500; }
 .fabric-node small { color: #a08bac; font-size: 8px; }
 .fabric-connector { width: 1px; height: 31px; margin: 8px 0; background: linear-gradient(#d7cbe1, #dccf94); }
 .fabric-gateway .round-icon { background: #f4eecf; color: #b09d61; }
 .fabric-branches { position: relative; display: flex; justify-content: space-between; width: 150px; height: 29px; margin-top: 21px; border-top: 1px solid #d8cce0; border-radius: 6px; }
 .fabric-branches::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 21px; background: #d8cce0; }
 .fabric-branches span { display: block; width: 1px; height: 20px; background: #d8cce0; }
 .fabric-guests { display: flex; justify-content: space-between; width: 173px; margin-bottom: 16px; }
 .fabric-guests .icon { width: 24px; height: 24px; color: #bba8c8; }
 .fabric-diagram > .muted { font-size: 9px; color: #a38baf; }
 .panel-footnote { color: var(--muted); font-size: 10px; line-height: 1.8; margin-top: 13px; overflow-wrap: anywhere; }
 .policy-row { display: block; padding: 16px 2px; border-bottom: 1px solid #b9a6c51f; }
 .policy-row:last-child { border-bottom: 0; }
 .policy-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
 .policy-row-heading strong { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
 .policy-row-heading .icon { width: 13px; height: 13px; color: #ad97b9; }
 .policy-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--muted); font-size: 10px; }
 .policy-row .table-ports { max-width: none; }
 .policy-row:hover strong { color: #967249; }
 .back-link { margin: 3px 0 21px; }
 .detail-heading { margin-bottom: 22px; }
 .detail-heading #detail-id { display: block; margin-top: 7px; color: #a58cb2; font-size: 8px; word-break: break-all; }
 .detail-heading h1 { max-width: 450px; }
 .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
 .detail-card { padding: 23px; }
 .detail-list { margin: 0; }
 .detail-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid #bcabca21; }
 .detail-list > div:last-child { border-bottom: 0; }
 .detail-list dt { color: var(--muted); font-size: 11px; }
 .detail-list dd { max-width: 66%; margin: 0; color: var(--ink-soft); text-align: right; font-size: 11px; overflow-wrap: anywhere; }
 .detail-list .mono { font-size: 10px; }
 .ssh-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 15px; padding: 18px 21px; }
 .ssh-panel > div:first-child { display: flex; align-items: center; gap: 12px; }
 .ssh-panel h2 { font-size: 12px; font-weight: 500; }
 .ssh-panel p { font-size: 10px; color: var(--muted); margin-top: 4px; max-width: 300px; }
 .ssh-command { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px 5px 14px; border: 1px solid #fff9; border-radius: 12px; background: #fdfbfc9c; }
 .ssh-command code { font-family: var(--mono); font-size: 10px; color: #918060; overflow-wrap: anywhere; }
 .ssh-command .icon-button { width: 27px; height: 27px; }
 .ports-panel, .log-panel { margin-top: 15px; }
 .port-editor { padding-top: 5px; }
 .log-output { max-height: 320px; min-height: 145px; margin: 0; padding: 17px; border: 1px solid #ffffff7a; border-radius: 13px; background: #e9e2ed8c; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; line-height: 1.9; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
 .detail-delete-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; padding: 0 4px; color: #ad94b6; font-size: 9px; }
 /* Provisioning uses the same paper-like surfaces. */
 .create-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, .9fr); align-items: start; gap: 17px; }
 .create-fields { display: grid; gap: 15px; min-width: 0; }
 .form-section { padding: 24px; }
 .form-section .section-heading { margin-bottom: 22px; }
 .form-section .section-heading h2 { display: flex; align-items: center; gap: 9px; }
 .form-section .section-heading > div > span { padding-left: 31px; font-size: 9px; }
 .step-number { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e9e0ee; color: #ac91b7; font-size: 9px; }
 .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
 .field > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 11px; }
 .field small { color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.6; }
 .field input { width: 100%; min-height: 39px; padding: 10px 12px; border: 1px solid #ffffffb3; border-radius: 11px; background: #fff9; color: var(--ink-soft); font-size: 12px; transition: background .2s, border-color .2s, box-shadow .2s; }
 .field input:focus { outline: none; background: #ffffffed; border-color: #c3b3a0; box-shadow: 0 0 0 3px #e6dca329; }
 .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
 .preset-fieldset { margin: 19px 0 0; padding: 0; border: 0; }
 .preset-fieldset legend { color: var(--muted); font-size: 10px; padding: 0 0 9px; }
 .size-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
 .size-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px; border: 1px solid #fff9; border-radius: 13px; background: #ffffff3b; transition: background .2s, border-color .2s; }
 .size-preset .icon { width: 17px; height: 17px; color: #b59dbf; margin-bottom: 4px; }
 .size-preset strong { font-size: 11px; font-weight: 450; color: var(--ink-soft); }
 .size-preset span { font-size: 9px; color: var(--muted); white-space: nowrap; }
 .size-preset.active { border-color: #e6dca2; background: #f6f0d991; }
 .size-preset.active .icon { color: #b7a367; }
 .size-preset.active strong { color: #9b8854; }
 .size-preset:hover { background: #fff9; }
 .password-field { display: flex; align-items: center; position: relative; }
 .password-field input { padding-right: 37px; }
 .password-field > .icon-button { position: absolute; right: 5px; width: 27px; height: 27px; }
 .toggle-field { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; cursor: pointer; }
 .toggle-field > span:first-child { display: grid; gap: 4px; }
 .toggle-field strong { font-size: 11px; font-weight: 450; color: var(--ink-soft); }
 .toggle-field small { font-size: 9px; color: var(--muted); }
 .toggle-field > input { position: absolute; right: 0; opacity: 0; width: 33px; height: 20px; }
 .toggle-track { position: relative; width: 31px; height: 18px; flex: 0 0 auto; border-radius: 15px; background: #d8cce1; transition: background .25s; }
 .toggle-track::after { content: ''; position: absolute; width: 12px; height: 12px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #79658721; transition: transform .25s var(--ease); }
 .toggle-field > input:checked + .toggle-track { background: #d7c782; }
 .toggle-field > input:checked + .toggle-track::after { transform: translateX(13px); }
 .toggle-field > input:focus-visible + .toggle-track { outline: 2px solid #aa9560; outline-offset: 4px; }
 .create-summary { position: sticky; top: 0; padding: 24px 22px; background: linear-gradient(140deg, #fefcffa6, #f5f0f76b); }
 .summary-art { position: relative; height: 105px; margin-bottom: 20px; }
 .summary-art > div, .summary-art > span { position: absolute; width: 90px; height: 72px; left: 50%; top: 14px; border: 1px solid #fff; border-radius: 17px; background: #eeebf1; box-shadow: 0 10px 21px -10px #9b87ad40; }
 .summary-art > div:nth-child(1) { transform: translateX(-38%) rotate(15deg); background: #e8e2ed; }
 .summary-art > div:nth-child(2) { transform: translateX(-62%) rotate(-12deg); background: #f4f0f8; }
 .summary-art > span { display: grid; place-items: center; transform: translateX(-50%) rotate(-3deg); background: linear-gradient(130deg, #fffeff, #f1eadb); }
 .summary-art .icon { width: 31px; height: 31px; color: #b8a990; }
 .create-summary > .subtle-label { font-size: 8px; color: #ab91b3; }
 .create-summary > h2 { margin-top: 8px; color: var(--ink-soft); font-size: 20px; font-weight: 400; letter-spacing: -.055em; overflow-wrap: anywhere; }
 .create-summary > p:not(.form-error) { margin-top: 10px; color: var(--muted); font-size: 10px; }
 .create-summary .detail-list { margin: 23px 0; }
 .create-summary .detail-list dt, .create-summary .detail-list dd { font-size: 10px; }
 .create-summary .button { font-size: 10px; }
 .summary-cancel { display: flex; justify-content: center; margin-top: 13px; font-size: 9px; color: #b29ab9; }
 .summary-note { display: flex; justify-content: center; align-items: center; gap: 6px; color: #b9a3bd; font-size: 8px; margin-top: 26px; }
 .summary-note .icon { width: 12px; height: 12px; }
 .form-error { color: #b1726b; font-size: 10px; line-height: 1.7; margin: 9px 0; overflow-wrap: anywhere; }
 .form-error:empty { display: none; }
 /* Host readiness and installation. */
 .health-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
 .health-side { display: grid; gap: 16px; }
 .diagnostics-panel { padding: 22px; }
 .diagnostics-list { display: grid; gap: 8px; }
 .diagnostic-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px 12px; border: 1px solid #ffffff61; border-radius: 13px; background: #ffffff47; }
 .diagnostic-item > .diagnostic-icon { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 9px; background: #e8ebe1; color: #98a383; }
 .diagnostic-icon .icon { width: 13px; height: 13px; }
 .diagnostic-item.attention > .diagnostic-icon { background: #efe0d8; color: #c19e8a; }
 .diagnostic-item > div { min-width: 0; flex: 1; }
 .diagnostic-item h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ink-soft); font-size: 11px; font-weight: 500; }
 .diagnostic-item h3 > span { font-size: 9px; font-weight: 450; white-space: nowrap; color: #7a8562; }
 .diagnostic-item.attention h3 > span { color: #a2856a; }
 .diagnostic-item p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
 .install-panel { padding: 24px; }
 .install-panel > .round-icon { width: 44px; height: 44px; background: #f2eacb; color: #b09c67; margin-bottom: 18px; }
 .install-panel h2 { font-size: 16px; font-weight: 450; letter-spacing: -.04em; }
 .install-panel > p { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.8; }
 .install-assets { display: grid; gap: 12px; margin: 24px 0; padding: 17px 0; border-block: 1px solid #beabcc24; }
 .install-assets > span { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--muted); }
 .install-assets .icon { width: 14px; height: 14px; color: #bca5c3; }
 .install-panel .toggle-field { margin-top: 6px; }
 .install-panel .toggle-field strong { font-size: 9px; }
 .install-panel .button { font-size: 10px; }
 .install-result { max-height: 280px; margin: 17px 0 0; padding: 13px; border-radius: 12px; background: #e9e1ee; color: #95749d; font-family: var(--mono); font-size: 9px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; }
 .server-info { padding: 23px; }
 .server-info .detail-list { margin: 0 0 18px; }
 .server-info .detail-list > div { flex-direction: column; gap: 3px; }
 .server-info .detail-list dd { max-width: 100%; text-align: left; }
 .server-info .quiet-link { font-size: 9px; }
 /* Authentication is part of the same workspace, not a different product. */
 .auth-screen { display: grid; place-items: center; min-height: 100dvh; padding: 32px; }
 .auth-window { display: grid; grid-template-columns: 1.08fr 1fr; width: min(100%, 990px); min-height: 620px; overflow: hidden; border: 1px solid #ffffffe0; border-radius: 29px; background: #f3f0f6; box-shadow: 0 25px 75px -36px #7158834d; }
 .auth-story { display: flex; flex-direction: column; position: relative; padding: 35px 40px 26px; overflow: hidden; background: linear-gradient(130deg, #edeaf1, #e4deeb); border-right: 1px solid #ffffffa1; border-radius: 28px; }
 .auth-story-copy { position: relative; margin-top: 55px; z-index: 1; }
 .auth-story-copy > .subtle-label { font-size: 9px; color: #a68dad; }
 .auth-story-copy h1 { font-size: 43px; letter-spacing: -.065em; line-height: 1.2; font-weight: 400; color: #64556e; margin-top: 14px; }
 .auth-story-copy p { color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 18px; }
 .auth-sculpture { position: relative; flex: 1; min-height: 255px; }
 .sculpture-card { position: absolute; width: 155px; height: 125px; left: 50%; top: 74px; border-radius: 22px; border: 1px solid #ffffffe0; background: linear-gradient(130deg, #fefcff, #eee6f1); box-shadow: 0 18px 25px -15px #7b608d59; }
 .sculpture-back { transform: translateX(-63%) rotate(-22deg) translateY(-25px); background: #e4dbea; }
 .sculpture-middle { transform: translateX(-37%) rotate(15deg) translateY(-15px); }
 .sculpture-front { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 20px 24px; transform: translateX(-50%) rotate(-4deg); background: linear-gradient(130deg, #fff, #f2ecd9); }
 .sculpture-front > .icon { width: 30px; height: 30px; color: #b5a68c; }
 .sculpture-front > span { color: #a58c8a; font-size: 10px; }
 .sculpture-lights { display: flex; gap: 5px; }
 .sculpture-lights i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #e0cf85; }
 .sculpture-lights i:nth-child(2) { background: #d5cbdc; }
 .sculpture-orbit { position: absolute; width: 260px; height: 260px; left: 50%; top: 3px; border: 1px solid #c9b9d438; border-radius: 50%; transform: translateX(-50%); }
 .orbit-inner { width: 206px; height: 206px; top: 30px; border-color: #fff7; }
 .orbit-outer::after { content: ''; position: absolute; top: 31px; left: 36px; width: 7px; height: 7px; border-radius: 50%; background: #e1d094; box-shadow: 0 0 0 5px #e6d9b326; }
 .sculpture-caption { position: absolute; left: 0; right: 0; top: 240px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #af93b5; font-size: 8px; }
 .sculpture-caption .dot { width: 4px; height: 4px; }
 .auth-story-footer { position: relative; margin-top: 37px; color: #ae96b5; font-size: 8px; }
 .auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 48px 45px; background: linear-gradient(150deg, #faf8fc, #f1ebf5); }
 .auth-panel-inner { width: 100%; max-width: 310px; }
 .auth-lock { width: 43px; height: 43px; background: #eee7f2; color: #a18aaa; margin-bottom: 28px; }
 .auth-panel h2 { margin: 9px 0 13px; font-size: 27px; font-weight: 400; letter-spacing: -.055em; color: #735b7d; }
 .auth-panel-inner > p { color: var(--muted); font-size: 12px; line-height: 1.85; }
 .auth-panel form { margin-top: 29px; }
 .auth-panel .field input { background: #fdfbfe; border-color: #e7dcec; min-height: 43px; }
 .auth-panel .button { margin-top: 16px; min-height: 41px; }
 .auth-panel-inner > .auth-note { display: flex; align-items: center; gap: 6px; font-size: 8px; color: #b39bbd; margin-top: 19px; }
 .auth-note .icon { width: 12px; height: 12px; }
 .auth-help { position: absolute; bottom: 30px; color: #b39bbd; font-size: 8px; }
 /* Small interactions, accessible dialogs, and a useful search. */
 .search-results { position: absolute; top: calc(100% + 10px); right: -8px; width: 330px; max-width: calc(100vw - 40px); max-height: 380px; padding: 7px; overflow-y: auto; z-index: 12; border: 1px solid #fff; border-radius: 17px; background: #faf7fceF; box-shadow: 0 12px 35px #6f538526; backdrop-filter: blur(20px); }
 .search-result { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 11px; color: #8b6f98; font-size: 10px; }
 .search-result[aria-selected='true'], .search-result:hover { background: #eee5f4; }
 .search-result > .icon { width: 15px; height: 15px; color: #b398c2; }
 .search-result > div { min-width: 0; flex: 1; }
 .search-result strong { display: block; font-size: 10px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .search-result small { display: block; margin-top: 2px; font-size: 8px; color: #b296c0; }
 .search-empty { padding: 20px; color: #ac8cb9; font-size: 10px; }
 .action-menu { position: fixed; width: 181px; padding: 6px; z-index: 30; border: 1px solid #fff; border-radius: 15px; background: #fcf9feee; backdrop-filter: blur(18px); box-shadow: 0 12px 30px #71538025; }
 .action-menu button { display: flex; align-items: center; gap: 9px; padding: 10px; width: 100%; border-radius: 10px; background: transparent; color: #8b6b9a; font-size: 10px; text-align: left; }
 .action-menu button:hover, .action-menu button:focus { background: #ede3f4; outline: none; }
 .action-menu .icon { width: 14px; height: 14px; color: #b599c3; }
 .action-menu .menu-danger { color: #b77970; }
 .action-menu .menu-danger .icon { color: #c7978f; }
 .notice { display: flex; align-items: center; gap: 9px; padding: 12px 15px; margin-bottom: 20px; border: 1px solid #fff9; border-radius: 13px; background: #f3ebe0; color: #a38a67; font-size: 10px; overflow-wrap: anywhere; }
 .notice > .icon { width: 15px; height: 15px; }
 .notice > .quiet-link { margin-left: auto; flex-shrink: 0; color: inherit; }
 .notice-error { background: #f3e6e3; color: #ad7973; }
 .confirm-dialog { width: min(420px, calc(100% - 34px)); max-height: calc(100dvh - 50px); padding: 29px; border: 1px solid #fff; border-radius: 24px; background: #f8f5fb; color: var(--ink); box-shadow: 0 30px 90px #69537738; overflow-y: auto; }
 .confirm-dialog[open] { animation: dialog-appear .25s var(--ease); }
 .confirm-dialog::backdrop { background: #6655722e; backdrop-filter: blur(6px); }
 .confirm-dialog .round-icon { background: #ece4f1; margin-bottom: 19px; }
 .confirm-dialog .subtle-label { font-size: 9px; }
 .confirm-dialog h2 { color: var(--ink); font-size: 21px; font-weight: 450; letter-spacing: -.045em; margin-top: 8px; overflow-wrap: anywhere; }
 .confirm-dialog p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 13px; }
 .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 26px; }
 .toast-container { position: fixed; bottom: 27px; right: 30px; display: grid; gap: 9px; max-width: min(370px, calc(100vw - 34px)); z-index: 60; }
 .toast { display: flex; align-items: flex-start; gap: 10px; padding: 14px 17px; border: 1px solid #fff; border-radius: 15px; background: #fbf8fef5; color: #9271a1; box-shadow: 0 9px 35px #77568521; font-size: 11px; animation: toast-appear .35s var(--ease); overflow-wrap: anywhere; }
 .toast > .icon { width: 16px; height: 16px; color: #b2b98a; margin-top: 1px; }
 .toast.toast-error { color: #b7786e; }
 .toast.toast-error > .icon { color: #c68d81; }
 .noscript-message { padding: 20px; text-align: center; color: #8c6d98; }
 .nav-scrim { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes page-appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialog-appear { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
 * { scrollbar-width: thin; scrollbar-color: #c9bdd354 transparent; }
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-thumb { border-radius: 8px; background: #c9bdd36b; }
 ::-webkit-scrollbar-thumb:hover { background: #b5a4c18f; }
@media (min-width: 1650px) {
  .app-shell { grid-template-columns: 423px minmax(0, 1fr); }
  .workspace-drawer { grid-template-columns: minmax(0, 1fr) 174px; gap: 19px; padding-inline: 24px 21px; }
  .nav-item { font-size: 11px; min-height: 40px; }
  .sidebar-heading h2 { font-size: 23px; }
  .context-rail { gap: 20px; }
  .insight-card { min-height: 177px; padding: 17px; }
  .insight-card .card-caption { font-size: 10px; }
  .insight-card p { font-size: 10px; }
  .collection-label { min-height: 72px; }
  .collection-label strong { font-size: 11px; }
  .collection-label span { font-size: 9px; }
  .collection-art { height: 79px; }
  .topbar { min-height: 79px; }
  .page-content { padding: 15px 33px 30px; }
  .metric-card { min-height: 169px; padding: 20px 23px; }
  .card-caption h2 { font-size: 12px; }
  .fleet-number { margin-block: 15px; }
  .fleet-number > strong { font-size: 45px; }
  .fleet-number > span, .metric-bottom, .signal-readouts small { font-size: 9px; }
  .range-labels { font-size: 8px; }
  .signal-readouts { margin-top: 20px; }
  .resource-line > span { font-size: 12px; }
  .resource-line > small { font-size: 8px; }
  .resource-line { margin-top: 23px; }
  .second-resource { margin-top: 17px; }
  .section-heading h2 { font-size: 15px; }
  .section-heading > div > span { font-size: 10px; }
  .portfolio-section { margin-top: 31px; }
  .portfolio-table th { font-size: 9px; }
  .portfolio-table td { padding-block: 15px; font-size: 10px; }
  .portfolio-table .badge { font-size: 9px; }
  .portfolio-name { font-size: 11px; }
  .overview-bottom { margin-top: 27px; }
  .fleet-ring { width: 226px; }
  .ring-center > strong { font-size: 51px; }
  .ring-center > span, .ring-legend span { font-size: 10px; }
  .ring-center > span:last-child, .ring-legend small { font-size: 8px; }
  .ring-legend { max-width: 195px; gap: 25px; }
  .note-row { padding-block: 18px; }
  .note-row strong { font-size: 11px; }
  .note-row small { font-size: 9px; }
  .notes-footer { font-size: 10px; }
  .machine-table th { font-size: 10px; }
  .machine-table td { padding-block: 18px; font-size: 11px; }
  .machine-name a { max-width: 260px; font-size: 12px; }
  .machine-name small { font-size: 9px; }
 }
@media (max-width: 1360px) {
  .app-shell { grid-template-columns: 342px minmax(0, 1fr); width: calc(100% - 32px); height: calc(100dvh - 32px); margin: 16px auto; }
  .workspace-drawer { grid-template-columns: minmax(0, 1fr) 142px; gap: 12px; padding-inline: 16px 14px; }
  .sidebar-heading h2 { font-size: 19px; }
  .brand-tag { display: none; }
  .nav-item { font-size: 9px; gap: 8px; padding-inline: 9px; }
  .insight-card { padding-inline: 12px; }
  .insight-card .card-caption { font-size: 8px; }
  .insight-card p { font-size: 8px; }
  .collection-label { padding-inline: 12px; }
  .collection-label span { font-size: 7px; }
  .topbar { padding-inline: 20px; }
  .page-content { padding-inline: 20px; }
  .metric-card { padding: 15px; }
  .card-caption h2 { font-size: 10px; }
  .fleet-number > span { font-size: 7px; }
  .fleet-number { gap: 10px; }
  .metric-bottom { font-size: 7px; }
  .overview-bottom { grid-template-columns: 1.15fr 1fr; }
  .activity-panel, .notes-panel { padding-inline: 16px; }
  .fleet-ring { width: 165px; }
  .ring-center > strong { font-size: 37px; }
  .ring-legend { gap: 18px; }
  .ring-legend small { display: none; }
  .note-row { padding-block: 11px; }
  .note-row strong { font-size: 8px; }
  .note-row small { font-size: 7px; }
  .notes-footer { font-size: 7px; }
  .create-layout { grid-template-columns: minmax(0, 1.7fr) minmax(195px, .85fr); gap: 13px; }
  .form-section { padding: 19px; }
  .create-summary { padding: 21px 17px; }
  .size-preset { padding: 10px 9px; }
  .size-preset span { font-size: 7px; }
  .compact-metric { padding: 17px; gap: 11px; }
  .health-layout { grid-template-columns: 1.2fr 1fr; gap: 13px; }
 }
@media (max-width: 1150px) {
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .workspace-drawer { display: flex; padding: 25px 17px; }
  .sidebar { width: 100%; }
  .context-rail { display: none; }
  .brand-tag { display: inline; }
  .nav-item { font-size: 10px; }
  .sidebar-heading h2 { font-size: 21px; }
  .overview-bottom { grid-template-columns: 1.2fr 1fr; }
  .health-layout { grid-template-columns: 1.15fr 1fr; }
  .diagnostics-panel, .install-panel, .server-info { padding: 19px; }
  .create-layout { grid-template-columns: minmax(0, 1.7fr) minmax(208px, .9fr); }
  .detail-heading { align-items: flex-start; }
  .ssh-panel { align-items: flex-start; flex-direction: column; gap: 15px; }
  .ssh-command { width: 100%; }
 }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 182px minmax(0, 1fr); }
  .workspace-drawer { padding-inline: 13px; }
  .brand-tag { display: none; }
  .nav-item { font-size: 9px; }
  .global-search { max-width: 185px; }
  .global-search kbd { display: none; }
  .topbar { padding-inline: 18px; gap: 6px; }
  .workspace-crumb { font-size: 8px; gap: 6px; padding-inline: 10px; }
  .page-content { padding-inline: 18px; }
  .page-heading h1 { font-size: 24px; }
  .date-label { font-size: 8px; }
  .overview-metrics { grid-template-columns: 1fr 1fr; gap: 11px; }
  .resources-metric { grid-column: 1 / -1; min-height: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; padding-block: 14px; }
  .resources-metric .card-caption { grid-column: 1 / -1; }
  .resources-metric .resource-line { grid-row: 2; margin-top: 13px; }
  .resources-metric .resource-track { grid-row: 3; }
  .resources-metric .second-resource { grid-column: 2; }
  .overview-bottom { grid-template-columns: 1fr; }
  .activity-body { justify-content: center; gap: 30px; }
  .fleet-ring { width: 185px; }
  .ring-legend { max-width: 165px; gap: 23px; }
  .ring-legend small { display: block; }
  .notes-panel { padding: 20px; }
  .note-row { padding-block: 12px; }
  .note-row strong { font-size: 10px; }
  .note-row small { font-size: 8px; }
  .notes-footer { font-size: 9px; }
  .compact-metrics { gap: 9px; }
  .compact-metric { padding: 15px; gap: 9px; }
  .compact-metric > .round-icon { display: none; }
  .compact-metric strong { font-size: 24px; }
  .compact-metric span { font-size: 8px; }
  .filter-tab { padding-inline: 10px; font-size: 9px; }
  .fleet-toolbar { flex-wrap: wrap; gap: 11px; }
  .health-layout, .network-layout { grid-template-columns: 1fr; }
  .health-side { grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; }
  .fabric-diagram { padding-block: 10px; }
  .network-map-panel .fabric-diagram { display: grid; grid-template-columns: 1fr 50px 1fr; justify-items: center; }
  .network-map-panel .fabric-connector { height: 1px; width: 45px; }
  .network-map-panel .fabric-branches, .network-map-panel .fabric-guests { display: none; }
  .network-map-panel .fabric-diagram > .muted { grid-column: 1 / -1; margin-top: 25px; }
  .network-map-panel .panel-footnote { text-align: center; }
  .create-layout { grid-template-columns: 1fr; }
  .create-summary { position: static; padding: 23px; }
  .summary-art { display: none; }
  .create-summary .detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; margin-block: 15px; }
  .create-summary > .button { max-width: 300px; margin: auto; display: flex; }
  .summary-note { margin-top: 17px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-heading { flex-direction: column; gap: 17px; }
  .auth-window { min-height: 590px; }
  .auth-story { padding: 29px; }
  .auth-story-copy h1 { font-size: 37px; }
  .auth-panel { padding-inline: 30px; }
 }
@media (max-width: 700px) {
  html, body { background: #e9e5ef; }
  .app-shell { display: block; width: calc(100% - 20px); height: auto; min-height: calc(100dvh - 20px); margin: 10px; border-radius: 21px; overflow: clip; }
  .workspace { min-height: calc(100dvh - 22px); }
  .workspace-drawer { position: fixed; inset: 10px auto 10px 10px; width: 237px; z-index: 42; padding: 25px 20px; background: #f2edf7f5; border: 1px solid #fff; border-radius: 22px; backdrop-filter: blur(25px); transform: translateX(calc(-100% - 16px)); visibility: hidden; transition: transform .3s var(--ease), visibility .3s; box-shadow: 15px 0 45px #72508412; }
  .app-shell.nav-open .workspace-drawer { visibility: visible; transform: translateX(0); }
  .nav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 41; background: #80648e36; backdrop-filter: blur(3px); }
  .brand-tag { display: inline; }
  .nav-item { font-size: 11px; min-height: 41px; }
  .sidebar-heading h2 { font-size: 23px; }
  .sidebar-bottom { padding-top: 35px; }
  .sidebar-bottom > .quiet-link { margin-top: 20px; }
  .mobile-menu { display: inline-flex; width: 29px; height: 29px; flex: 0 0 auto; }
  .topbar { min-height: 61px; padding-inline: 14px; gap: 7px; }
  .workspace-crumb { background: transparent; padding-inline: 2px; font-size: 10px; box-shadow: none; }
  .workspace-crumb > span:not(:last-child) { display: none; }
  #breadcrumb { color: #92749d; }
  .refresh-button { margin-right: 2px; }
  .global-search { max-width: 215px; min-width: 80px; }
  .global-search input { font-size: 9px; }
  .topbar-create { flex-shrink: 0; margin-left: 1px; }
  .page-content { flex: 1 0 auto; overflow: visible; padding: 13px 17px 24px; scrollbar-gutter: auto; }
  .page-heading { gap: 12px; margin-bottom: 20px; }
  .page-heading h1 { font-size: 26px; }
  .page-heading .subtle-label { font-size: 9px; }
  .date-label { display: none; }
  .metric-card { min-height: 147px; padding: 17px; }
  .card-caption h2 { font-size: 11px; }
  .fleet-number > strong { font-size: 39px; }
  .fleet-number > span { font-size: 8px; }
  .metric-bottom { font-size: 8px; }
  .resources-metric { min-height: 101px; }
  .portfolio-section { margin-top: 25px; }
  .portfolio-table { min-width: 540px; }
  .overview-bottom { margin-top: 19px; }
  .activity-panel, .notes-panel { padding: 20px; }
  .activity-body { gap: 24px; }
  .fleet-ring { width: 192px; }
  .ring-center > strong { font-size: 43px; }
  .ring-legend span { font-size: 10px; }
  .ring-legend small { font-size: 8px; }
  .page-footer { flex-direction: column; gap: 5px; font-size: 8px; margin-top: 20px; }
  .compact-metrics { margin-bottom: 21px; gap: 8px; }
  .compact-metric { min-height: 83px; padding: 14px; }
  .compact-metric strong { font-size: 26px; }
  .compact-metric .metric-word { font-size: 17px; }
  .compact-metric span { font-size: 8px; }
  .fleet-toolbar { margin-bottom: 13px; }
  .fleet-list-panel { padding-inline: 11px; }
  .filter-tabs { width: 100%; justify-content: space-between; gap: 0; }
  .filter-tab { flex: 1; font-size: 9px; padding-inline: 9px; }
  .fleet-toolbar > .select-wrap { margin-left: auto; }
  .list-search-row { gap: 8px; }
  .search-field input { font-size: 9px; }
  .list-search-row > span { font-size: 8px; }
  .list-footer { font-size: 8px; }
  .list-footer > span:last-child { display: none; }
  .bulk-controls { flex-wrap: wrap; gap: 7px; }
  .bulk-controls > span { font-size: 9px; }
  .bulk-controls select { font-size: 8px; }
  .bulk-controls .button { font-size: 9px; }
  .health-side { grid-template-columns: 1fr; }
  .health-layout { gap: 13px; }
  .install-panel, .server-info, .diagnostics-panel { padding: 22px; }
  .diagnostic-item p { font-size: 9px; }
  .diagnostic-item h3 { font-size: 11px; }
  .install-panel > p { font-size: 11px; }
  .install-panel .toggle-field strong { font-size: 10px; }
  .server-info .detail-list > div { flex-direction: row; }
  .server-info .detail-list dd { max-width: 65%; text-align: right; }
  .form-section { padding: 21px; }
  .create-summary { padding: 23px; }
  .size-preset { padding: 12px; }
  .size-preset span { font-size: 8px; }
  .field input { font-size: 12px; }
  .detail-delete-row { align-items: flex-start; }
  .detail-delete-row > span { max-width: 170px; }
  .ports-panel > .section-heading, .log-panel > .section-heading { align-items: flex-start; }
  .ports-panel > .section-heading > div:first-child, .log-panel > .section-heading > div:first-child { flex: 1; }
  .auth-screen { padding: 20px; }
  .auth-window { grid-template-columns: 1fr; min-height: 0; max-width: 440px; }
  .auth-story { min-height: 240px; padding: 26px; border-right: 0; }
  .auth-story-copy { margin-top: 27px; }
  .auth-story-copy > .subtle-label { font-size: 8px; }
  .auth-story-copy h1 { font-size: 34px; margin-top: 8px; }
  .auth-story-copy p { display: none; }
  .auth-sculpture { position: absolute; width: 130px; height: 150px; min-height: 0; right: -2px; bottom: 23px; opacity: .65; transform: scale(.62); transform-origin: right bottom; }
  .sculpture-caption { display: none; }
  .auth-story-footer { margin-top: 19px; font-size: 7px; }
  .auth-panel { padding: 31px 28px 60px; }
  .auth-lock { display: none; }
  .auth-panel h2 { font-size: 25px; }
  .auth-panel form { margin-top: 22px; }
  .auth-help { bottom: 23px; }
  .toast-container { bottom: 17px; right: 17px; }
  .notice { align-items: flex-start; font-size: 9px; }
 }
@media (max-width: 390px) {
  .topbar { gap: 3px; padding-inline: 11px; }
  .workspace-crumb { font-size: 9px; }
  .global-search input { font-size: 8px; }
  .page-content { padding-inline: 13px; }
  .page-heading h1 { font-size: 23px; }
  .page-heading > .button { padding-inline: 12px; font-size: 9px; }
  .page-heading > .tag { font-size: 8px; padding-inline: 8px; }
  .card-caption h2 { font-size: 10px; }
  .metric-card { padding: 14px; }
  .fleet-number > span { font-size: 7px; }
  .metric-bottom { font-size: 7px; }
  .signal-readouts small { font-size: 7px; }
  .range-labels { font-size: 6px; }
  .activity-body { gap: 12px; }
  .fleet-ring { width: 160px; }
  .ring-center > strong { font-size: 36px; }
  .ring-legend span { font-size: 9px; }
  .ring-legend small { font-size: 7px; }
  .form-section { padding: 17px; }
  .size-presets { gap: 7px; }
  .size-preset { padding: 10px; }
  .size-preset span { font-size: 7px; }
  .form-grid { gap: 11px; }
  .field > span:first-child { font-size: 9px; }
  .section-heading h2 { font-size: 12px; }
  .log-panel .section-heading { flex-wrap: wrap; }
  .auth-screen { padding: 13px; }
 }
@media (max-height: 820px) and (min-width: 1151px) {
  .context-rail { gap: 13px; padding-top: 46px; }
  .insight-card { min-height: 150px; }
  .collection-art { height: 53px; }
  .collection-label { min-height: 60px; }
  .rail-footnote { display: none; }
  .sidebar-bottom { padding-top: 30px; }
 }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
 }
@@ -0,0 +1,92 @@
 Copyright 2018 The Manrope Project Authors (https://github.com/googlefonts/manrope)
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
 http://scripts.sil.org/OFL
 -----------------------------------------------------------
 SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 -----------------------------------------------------------
 PREAMBLE
 The goals of the Open Font License (OFL) are to stimulate worldwide
 development of collaborative font projects, to support the font creation
 efforts of academic and linguistic communities, and to provide a free and
 open framework in which fonts may be shared and improved in partnership
 with others.
 The OFL allows the licensed fonts to be used, studied, modified and
 redistributed freely as long as they are not sold by themselves. The
 fonts, including any derivative works, can be bundled, embedded,
 redistributed and/or sold with any software provided that any reserved
 names are not used by derivative works. The fonts and derivatives,
 however, cannot be released under any other type of license. The
 requirement for fonts to remain under this license does not apply
 to any document created using the fonts or their derivatives.
 DEFINITIONS
 "Font Software" refers to the set of files released by the Copyright
 Holder(s) under this license and clearly marked as such. This may
 include source files, build scripts and documentation.
 "Reserved Font Name" refers to any names specified as such after the
 copyright statement(s).
 "Original Version" refers to the collection of Font Software components as
 distributed by the Copyright Holder(s).
 "Modified Version" refers to any derivative made by adding to, deleting,
 or substituting -- in part or in whole -- any of the components of the
 Original Version, by changing formats or by porting the Font Software to a
 new environment.
 "Author" refers to any designer, engineer, programmer, technical
 writer or other person who contributed to the Font Software.
 PERMISSION & CONDITIONS
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of the Font Software, to use, study, copy, merge, embed, modify,
 redistribute, and sell modified and unmodified copies of the Font
 Software, subject to the following conditions:
 1) Neither the Font Software nor any of its individual components,
 in Original or Modified Versions, may be sold by itself.
 2) Original or Modified Versions of the Font Software may be bundled,
 redistributed and/or sold with any software, provided that each copy
 contains the above copyright notice and this license. These can be
 included either as stand-alone text files, human-readable headers or
 in the appropriate machine-readable metadata fields within text or
 binary files as long as those fields can be easily viewed by the user.
 3) No Modified Version of the Font Software may use the Reserved Font
 Name(s) unless explicit written permission is granted by the corresponding
 Copyright Holder. This restriction only applies to the primary font name as
 presented to the users.
 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
 Software shall not be used to promote, endorse or advertise any
 Modified Version, except to acknowledge the contribution(s) of the
 Copyright Holder(s) and the Author(s) or with their explicit written
 permission.
 5) The Font Software, modified or unmodified, in part or in whole,
 must be distributed entirely under this license, and must not be
 distributed under any other license. The requirement for fonts to
 remain under this license does not apply to any document created
 using the Font Software.
 TERMINATION
 This license becomes null and void if any of the above conditions are
 not met.
 DISCLAIMER
 THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
 OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
 COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
 DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
@@ -0,0 +1,205 @@
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#e8e7ed" />
  <meta name="color-scheme" content="light" />
  <title>UVM Control</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='10' fill='%23eee7ac'/%3E%3Cpath d='M9 11v7a7 7 0 0 0 14 0v-7' fill='none' stroke='%234b4854' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E" />
  <link rel="preload" href="/dashboard/static/fonts/manrope-latin.woff2" as="font" type="font/woff2" crossorigin />
  <link rel="stylesheet" href="/dashboard/static/css/dashboard.css?v=2" />
  <script src="/dashboard/static/js/dashboard.js?v=2" defer></script>
 </head>
 <body>
  <svg class="icon-sprite" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <symbol id="i-grid" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="6" height="6" rx="1.7"/><rect x="14.5" y="3.5" width="6" height="6" rx="1.7"/><rect x="3.5" y="14.5" width="6" height="6" rx="1.7"/><rect x="14.5" y="14.5" width="6" height="6" rx="1.7"/></symbol>
    <symbol id="i-server" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="6" rx="2"/><rect x="3" y="14" width="18" height="6" rx="2"/><path d="M7 7h.01M7 17h.01M15 7h3M15 17h3"/></symbol>
    <symbol id="i-network" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="5" rx="1.5"/><rect x="2" y="16" width="6" height="5" rx="1.5"/><rect x="16" y="16" width="6" height="5" rx="1.5"/><path d="M12 8v4M5 16v-4h14v4"/></symbol>
    <symbol id="i-heart" viewBox="0 0 24 24"><path d="M20.8 5.8a5.2 5.2 0 0 0-7.4 0L12 7.2l-1.4-1.4a5.2 5.2 0 0 0-7.4 7.4L12 22l8.8-8.8a5.2 5.2 0 0 0 0-7.4Z" transform="translate(0 -2) scale(1 0.95)"/><path d="M5 11h3l2-3 3 7 2-4h4"/></symbol>
    <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
    <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h14m-5-5 5 5-5 5"/></symbol>
    <symbol id="i-back" viewBox="0 0 24 24"><path d="M19 12H5m5-5-5 5 5 5"/></symbol>
    <symbol id="i-chevron" viewBox="0 0 24 24"><path d="m9 5 7 7-7 7"/></symbol>
    <symbol id="i-search" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4.5 4.5"/></symbol>
    <symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 10a8 8 0 0 0-14-4L3 9m0-6v6h6M4 14a8 8 0 0 0 14 4l3-3m-6 0h6v6"/></symbol>
    <symbol id="i-book" viewBox="0 0 24 24"><path d="M12 5v15M12 5C8 2 3 4 3 4v15s5-2 9 1c4-3 9-1 9-1V4s-5-2-9 1Z"/></symbol>
    <symbol id="i-logout" viewBox="0 0 24 24"><path d="M10 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5M8 12h13m-5-5 5 5-5 5"/></symbol>
    <symbol id="i-lock" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="11" rx="3"/><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v3"/></symbol>
    <symbol id="i-spark" viewBox="0 0 24 24"><path d="m12 3 2.7 6.3L21 12l-6.3 2.7L12 21l-2.7-6.3L3 12l6.3-2.7L12 3Z"/></symbol>
    <symbol id="i-shield" viewBox="0 0 24 24"><path d="m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6l8-3Z"/><path d="m8 12 3 3 5-6"/></symbol>
    <symbol id="i-cpu" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="3"/><rect x="9" y="9" width="6" height="6" rx="1"/><path d="M9 3v3m6-3v3M9 18v3m6-3v3M3 9h3m-3 6h3m12-6h3m-3 6h3"/></symbol>
    <symbol id="i-memory" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M7 10h3v4H7zm7 0h3v4h-3zM7 18v3m5-3v3m5-3v3"/></symbol>
    <symbol id="i-play" viewBox="0 0 24 24"><path d="m8 4 12 8-12 8V4Z"/></symbol>
    <symbol id="i-stop" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></symbol>
    <symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></symbol>
    <symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7"/></symbol>
    <symbol id="i-copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></symbol>
    <symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="3"/><path d="m7 9 3 3-3 3m6 0h4"/></symbol>
    <symbol id="i-check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
    <symbol id="i-close" viewBox="0 0 24 24"><path d="m6 6 12 12M6 18 18 6"/></symbol>
    <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7h.01"/></symbol>
    <symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></symbol>
    <symbol id="i-eye" viewBox="0 0 24 24"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></symbol>
    <symbol id="i-download" viewBox="0 0 24 24"><path d="M12 3v12m-5-5 5 5 5-5M4 16v4h16v-4"/></symbol>
  </svg>
  <section id="auth-screen" class="auth-screen">
    <div class="auth-window">
      <div class="auth-story">
        <a href="#overview" class="brand" aria-label="UVM Control"><span class="brand-flower" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span>uvm<span class="brand-period">.</span></span><span class="brand-tag">workspace</span></a>
        <div class="auth-story-copy"><span class="subtle-label">A little space for big ideas</span><h1>Your compute.<br />A little calmer.</h1><p>A considered workspace for your machines,<br />your network, and everything in between.</p></div>
        <div class="auth-sculpture" aria-hidden="true">
          <div class="sculpture-orbit orbit-outer"></div><div class="sculpture-orbit orbit-inner"></div>
          <div class="sculpture-card sculpture-back"><span></span><i></i><i></i><i></i></div>
          <div class="sculpture-card sculpture-middle"><span></span><i></i><i></i><i></i></div>
          <div class="sculpture-card sculpture-front"><svg class="icon"><use href="#i-server"/></svg><span>Room to create.</span><div class="sculpture-lights"><i></i><i></i><i></i></div></div>
          <div class="sculpture-caption"><span class="dot dot-yellow"></span>Small footprint. Your possibilities.</div>
        </div>
        <span class="auth-story-footer">MicroVMs, thoughtfully managed.</span>
      </div>
      <main class="auth-panel">
        <div class="auth-panel-inner">
          <span class="round-icon auth-lock"><svg class="icon"><use href="#i-lock"/></svg></span>
          <span class="subtle-label">Your local workspace</span>
          <h2>Welcome to UVM</h2>
          <p>Bring your machines into view.<br />Connect with your management token to begin.</p>
          <form id="auth-form">
            <label class="field" for="token-input"><span>Management token</span><input id="token-input" name="token" type="password" placeholder="Enter your API token" autocomplete="off" spellcheck="false" required aria-describedby="auth-error" /></label>
            <p id="auth-error" class="form-error" role="alert"></p>
            <button id="auth-btn" class="button button-primary button-wide" type="submit"><span>Open workspace</span><svg class="icon"><use href="#i-arrow"/></svg></button>
          </form>
          <p class="auth-note"><svg class="icon"><use href="#i-shield"/></svg>Saved only for this browser session.</p>
        </div>
        <a class="quiet-link auth-help" href="/docs" target="_blank" rel="noopener">Explore the API <svg class="icon"><use href="#i-arrow"/></svg></a>
      </main>
    </div>
  </section>
  <section id="main-app" class="app-shell" hidden>
    <button id="nav-scrim" class="nav-scrim" aria-label="Close navigation" hidden></button>
    <aside id="workspace-nav" class="workspace-drawer" aria-label="Workspace navigation">
      <div class="sidebar">
        <a class="brand" href="#overview" aria-label="UVM Control overview"><span class="brand-flower" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span>uvm<span class="brand-period">.</span></span><span class="brand-tag">workspace</span></a>
        <div class="sidebar-heading"><span class="sidebar-heading-mark" aria-hidden="true">↳</span><h2><span id="sidebar-title">Management</span><span id="sidebar-subtitle">Overview</span></h2></div>
        <button class="sidebar-search" type="button" data-action="search"><svg class="icon"><use href="#i-search"/></svg><span>Find in workspace</span><kbd>/</kbd></button>
        <nav class="primary-nav" aria-label="Primary">
          <a class="nav-item" href="#overview" data-nav="overview"><svg class="icon"><use href="#i-grid"/></svg><span>Overview</span><span class="nav-indicator"></span></a>
          <a class="nav-item" href="#vms" data-nav="vms"><svg class="icon"><use href="#i-server"/></svg><span>Machines</span><span class="nav-count" id="nav-vm-count">—</span></a>
          <a class="nav-item" href="#network" data-nav="network"><svg class="icon"><use href="#i-network"/></svg><span>Network & ports</span><span class="nav-indicator"></span></a>
          <a class="nav-item" href="#system" data-nav="system"><svg class="icon"><use href="#i-heart"/></svg><span>Host health</span><span class="nav-health-dot" id="nav-health-dot"></span></a>
          <a class="nav-item nav-create" href="#create" data-nav="create"><svg class="icon"><use href="#i-plus"/></svg><span>New machine</span><svg class="icon nav-end-icon"><use href="#i-plus"/></svg></a>
        </nav>
        <div class="sidebar-secondary"><a class="nav-item" href="/docs" target="_blank" rel="noopener"><svg class="icon"><use href="#i-book"/></svg><span>API reference</span><svg class="icon nav-end-icon"><use href="#i-arrow"/></svg></a></div>
        <div class="sidebar-bottom">
          <div class="workspace-identity"><span class="workspace-avatar">u</span><div><strong>Local workspace</strong><span><i id="connection-dot" class="dot"></i><span id="connection-label">Connecting</span></span></div></div>
          <button id="logout-btn" class="quiet-link" type="button"><svg class="icon"><use href="#i-logout"/></svg>End session</button>
        </div>
      </div>
      <div class="context-rail" aria-label="Workspace at a glance">
        <a href="#system" class="insight-card">
          <div class="card-caption"><span>Workspace insights</span><svg class="icon"><use href="#i-spark"/></svg></div>
          <p id="insight-copy">A fresh perspective on your local compute.</p>
          <div class="insight-matrix" aria-hidden="true"><span></span></div>
          <span class="insight-footer"><span class="dot dot-yellow"></span><span id="insight-footer">Looking at the details</span></span>
        </a>
        <a href="#vms" class="collection collection-machines">
          <div class="collection-art machine-art" aria-hidden="true"><div class="paper-machine back-paper"><span></span><i></i><i></i></div><div class="paper-machine front-paper"><svg class="icon"><use href="#i-server"/></svg><i></i><i></i><span></span></div></div>
          <div class="collection-label"><div><strong>Machines</strong><span id="rail-machines">Your private fleet</span></div><svg class="icon"><use href="#i-chevron"/></svg></div>
        </a>
        <a href="#network" class="collection collection-network">
          <div class="collection-art network-art" aria-hidden="true"><div class="network-paper"><span class="network-line"></span><i></i><i></i><i></i><svg class="icon"><use href="#i-network"/></svg></div></div>
          <div class="collection-label"><div><strong>Network</strong><span id="rail-network">Connections, considered</span></div><svg class="icon"><use href="#i-chevron"/></svg></div>
        </a>
        <a href="#system" class="collection collection-simple"><div class="collection-label"><div><strong>Host health</strong><span id="rail-health">Checking the essentials</span></div><svg class="icon"><use href="#i-chevron"/></svg></div></a>
        <a href="#create" class="collection collection-simple collection-new"><div class="collection-label"><div><strong>Something new?</strong><span>Make room for an idea</span></div><svg class="icon"><use href="#i-plus"/></svg></div></a>
        <span class="rail-footnote">A small cloud.<br />Entirely yours.</span>
      </div>
    </aside>
    <div class="workspace">
      <header class="topbar">
        <button id="nav-toggle" class="icon-button mobile-menu" type="button" aria-label="Open navigation" aria-expanded="false" aria-controls="workspace-nav"><svg class="icon"><use href="#i-menu"/></svg></button>
        <div class="workspace-crumb"><span class="dot dot-yellow"></span><span>Workspace</span><span class="crumb-divider">/</span><span id="breadcrumb">Overview</span></div>
        <button id="refresh-btn" class="icon-button refresh-button" type="button" aria-label="Refresh workspace" title="Refresh workspace"><svg class="icon"><use href="#i-refresh"/></svg></button>
        <div class="global-search">
          <svg class="icon"><use href="#i-search"/></svg><input id="global-search" type="search" placeholder="Find a machine or a page" autocomplete="off" role="combobox" aria-label="Search workspace" aria-autocomplete="list" aria-expanded="false" aria-controls="search-results" /><kbd>⌘ K</kbd>
          <div id="search-results" class="search-results" role="listbox" aria-label="Search results" hidden></div>
        </div>
        <a href="#create" class="icon-button topbar-create" aria-label="Create a new machine" title="Create a new machine"><svg class="icon"><use href="#i-plus"/></svg></a>
      </header>
      <main id="main-content" class="page-content">
        <div id="connection-banner" class="notice notice-error" role="status" hidden><svg class="icon"><use href="#i-info"/></svg><span id="connection-message"></span><button class="quiet-link" type="button" data-action="refresh">Try again</button></div>
        <section id="page-overview" class="page" aria-labelledby="overview-heading" hidden>
          <div class="page-heading"><div><span class="subtle-label">The bigger picture</span><h1 id="overview-heading" tabindex="-1">Workspace overview<span class="heading-period">.</span></h1></div><span id="today-label" class="date-label"></span></div>
          <div class="overview-metrics">
            <article class="metric-card fleet-metric"><div class="card-caption"><h2>Your machine fleet</h2><a href="#vms" class="mini-link" aria-label="View all machines"><svg class="icon"><use href="#i-chevron"/></svg></a></div><div class="fleet-number"><strong id="metric-total">—</strong><span>little machines,<br />endless possibilities</span></div><div class="metric-bottom"><span class="status-inline"><i class="dot dot-yellow"></i><span id="metric-running">Waiting for the fleet</span></span><span id="metric-stopped" class="muted">—</span></div></article>
            <article class="metric-card"><div class="card-caption"><h2>Host signals</h2><a href="#system" class="mini-link" aria-label="View host signals"><svg class="icon"><use href="#i-chevron"/></svg></a></div><div class="signal-readouts"><div><span class="dot dot-sage"></span><strong id="checks-ready">—</strong><small>Ready</small></div><div><span class="dot dot-peach"></span><strong id="checks-attention">—</strong><small>Attention</small></div><div><span class="dot dot-lilac"></span><strong id="checks-total">—</strong><small>Checks</small></div></div><div class="segmented-track" aria-hidden="true"><span id="checks-ready-bar"></span><span id="checks-attention-bar"></span></div><div class="range-labels"><span>Host readiness</span><span id="checks-summary">Taking a look</span></div></article>
            <article class="metric-card resources-metric"><div class="card-caption"><h2>Resource allocation</h2><svg class="icon caption-icon"><use href="#i-cpu"/></svg></div><div class="resource-line"><span id="metric-cpu">— vCPU</span><small id="cpu-active-label">Allocated</small></div><div class="resource-track"><span id="cpu-allocation-bar"></span></div><div class="resource-line second-resource"><span id="metric-ram">— MiB</span><small id="ram-active-label">Allocated</small></div><div class="resource-track memory-track"><span id="ram-allocation-bar"></span></div></article>
          </div>
          <section class="portfolio-section" aria-labelledby="portfolio-heading"><header class="section-heading"><div><h2 id="portfolio-heading">Machine portfolio</h2><span>A place for every workload.</span></div><a class="quiet-link" href="#vms">View all <svg class="icon"><use href="#i-arrow"/></svg></a></header><div id="overview-machines" class="portfolio-content"><div class="loading-state">Bringing your machines into view…</div></div></section>
          <div class="overview-bottom">
            <article class="activity-panel soft-panel"><header class="section-heading"><div><h2>Fleet activity</h2><span>A snapshot of your machine states.</span></div><svg class="icon caption-icon"><use href="#i-grid"/></svg></header><div class="activity-body"><div class="fleet-ring" role="img" id="fleet-ring" aria-label="Waiting for machine activity"><svg viewBox="0 0 200 200" aria-hidden="true"><circle class="ring-track" cx="100" cy="100" r="82"/><circle id="ring-running" class="ring-segment ring-running" cx="100" cy="100" r="82" pathLength="100"/><circle id="ring-stopped" class="ring-segment ring-stopped" cx="100" cy="100" r="82" pathLength="100"/><circle id="ring-other" class="ring-segment ring-other" cx="100" cy="100" r="82" pathLength="100"/></svg><div class="ring-center"><span>Running now</span><strong id="ring-percent">—<small>%</small></strong><span id="ring-total">Your fleet, in balance</span></div></div><div class="ring-legend"><div><i class="dot dot-yellow"></i><span>Running<small>Doing their thing</small></span><strong id="legend-running">—</strong></div><div><i class="dot dot-peach"></i><span>Stopped<small>Taking a breather</small></span><strong id="legend-stopped">—</strong></div><div><i class="dot dot-lilac"></i><span>Other states<small>A closer look</small></span><strong id="legend-other">—</strong></div></div></div></article>
            <article class="notes-panel soft-panel"><header class="section-heading"><div><h2>Worth a little attention</h2><span>The useful details, together.</span></div><svg class="icon caption-icon"><use href="#i-spark"/></svg></header><div id="workspace-notes" class="workspace-notes"></div><a href="#system" class="notes-footer quiet-link">A closer look at your host <svg class="icon"><use href="#i-arrow"/></svg></a></article>
          </div>
          <footer class="page-footer"><span><i class="dot" id="footer-dot"></i>Live from your local control plane</span><span id="last-updated">Waiting for an update</span></footer>
        </section>
        <section id="page-vms" class="page" aria-labelledby="machines-heading" hidden>
          <div class="page-heading"><div><span class="subtle-label">A collection of possibilities</span><h1 id="machines-heading" tabindex="-1">Your machines<span class="heading-period">.</span></h1></div><a class="button button-primary" href="#create"><svg class="icon"><use href="#i-plus"/></svg>New machine</a></div>
          <div id="fleet-summary" class="compact-metrics"></div>
          <div class="fleet-toolbar"><div class="filter-tabs" role="group" aria-label="Filter machines by state"><button type="button" class="filter-tab active" data-filter="all" aria-pressed="true">All machines</button><button type="button" class="filter-tab" data-filter="running" aria-pressed="false">Running</button><button type="button" class="filter-tab" data-filter="stopped" aria-pressed="false">Stopped</button><button type="button" class="filter-tab" data-filter="attention" aria-pressed="false">Attention</button></div><label class="select-wrap"><span class="sr-only">Sort machines</span><select id="vm-sort"><option value="recent">Newest first</option><option value="name">Name A–Z</option><option value="status">Machine state</option></select></label></div>
          <div class="fleet-list-panel"><div class="list-search-row"><label class="search-field"><svg class="icon"><use href="#i-search"/></svg><input id="vm-search" type="search" placeholder="Find by name, ID, or address" aria-label="Search machines" /></label><span id="visible-count" class="muted"></span></div><div id="bulk-controls" class="bulk-controls" hidden><span id="bulk-count"></span><label class="select-wrap"><span class="sr-only">Bulk action</span><select id="bulk-action"><option value="start">Start machines</option><option value="stop">Stop machines</option><option value="restart">Restart machines</option><option value="ports-sync">Sync port policies</option><option value="delete">Delete machines</option></select></label><button id="bulk-run-btn" class="button button-small button-primary" type="button">Apply</button><button class="icon-button" type="button" data-action="clear-selection" aria-label="Clear selection"><svg class="icon"><use href="#i-close"/></svg></button></div><div id="machine-table-wrap" class="table-scroll"><table class="machine-table"><thead><tr><th class="check-cell"><input id="vm-select-all" type="checkbox" aria-label="Select all visible machines" /></th><th>Machine</th><th>State</th><th>Allocation</th><th>Ingress</th><th>Policy</th><th class="row-controls-heading"><span class="sr-only">Actions</span></th></tr></thead><tbody id="machine-rows"></tbody></table></div><div id="machines-empty" hidden></div><div class="list-footer"><span id="fleet-list-caption">Your private machine registry.</span><span>Made for a small footprint.</span></div></div>
          <div id="bulk-results" class="operation-results" aria-live="polite" hidden></div>
        </section>
        <section id="page-network" class="page" aria-labelledby="network-heading" hidden>
          <div class="page-heading"><div><span class="subtle-label">Good connections start here</span><h1 id="network-heading" tabindex="-1">Network & ports<span class="heading-period">.</span></h1></div><span class="tag"><svg class="icon"><use href="#i-network"/></svg>Private IPv4 · TCP</span></div>
          <div id="network-summary" class="compact-metrics"></div>
          <div class="network-layout"><article class="soft-panel network-map-panel"><header class="section-heading"><div><h2>Your private fabric</h2><span>One host. Room to connect.</span></div></header><div class="fabric-diagram"><div class="fabric-node"><span class="round-icon"><svg class="icon"><use href="#i-server"/></svg></span><strong>Local host</strong><small>UVM control plane</small></div><div class="fabric-connector"></div><div class="fabric-node fabric-gateway"><span class="round-icon"><svg class="icon"><use href="#i-network"/></svg></span><strong id="network-gateway">No gateway yet</strong><small>Private gateway</small></div><div class="fabric-branches" aria-hidden="true"><span></span><span></span><span></span></div><div class="fabric-guests" aria-hidden="true"><svg class="icon"><use href="#i-server"/></svg><svg class="icon"><use href="#i-server"/></svg><svg class="icon"><use href="#i-server"/></svg></div><span id="network-machine-count" class="muted">Waiting for your fleet</span></div><p class="panel-footnote">Port rules allow private guest TCP traffic. HTTP and HTTPS are descriptive labels for TCP services.</p></article><article class="soft-panel network-policies"><header class="section-heading"><div><h2>Ports, with purpose</h2><span>Choose a machine to manage its rules.</span></div><svg class="icon caption-icon"><use href="#i-shield"/></svg></header><div id="network-policies"></div></article></div>
        </section>
        <section id="page-vm-detail" class="page" aria-labelledby="detail-heading" hidden>
          <a class="quiet-link back-link" href="#vms"><svg class="icon"><use href="#i-back"/></svg>Back to machines</a>
          <div id="detail-loading" class="loading-state">Getting to know this machine…</div>
          <div id="detail-content" hidden>
            <div class="page-heading detail-heading"><div><span class="subtle-label">A closer look</span><h1 id="detail-heading" tabindex="-1"></h1><span id="detail-id" class="mono muted"></span></div><div id="detail-actions" class="button-row"></div></div>
            <div id="detail-error" class="notice notice-error" hidden></div>
            <div class="detail-grid"><article class="soft-panel detail-card"><header class="section-heading"><h2>The essentials</h2><span id="detail-status"></span></header><dl id="detail-config" class="detail-list"></dl></article><article class="soft-panel detail-card"><header class="section-heading"><h2>A place in the network</h2><svg class="icon caption-icon"><use href="#i-network"/></svg></header><dl id="detail-network" class="detail-list"></dl></article></div>
            <article class="soft-panel ssh-panel"><div><span class="round-icon"><svg class="icon"><use href="#i-terminal"/></svg></span><div><h2>A direct connection</h2><p id="ssh-hint" class="muted"></p></div></div><div class="ssh-command"><code id="ssh-command"></code><button class="icon-button" data-action="copy-ssh" type="button" aria-label="Copy SSH command"><svg class="icon"><use href="#i-copy"/></svg></button></div></article>
            <article class="soft-panel ports-panel"><header class="section-heading"><div><h2>Private port policy</h2><span>Just the connections this machine needs.</span></div><div class="button-row"><button id="edit-ports-btn" class="button button-small" type="button" data-action="edit-ports">Edit rules</button><button id="sync-ports-btn" class="icon-button" type="button" data-action="sync-ports" aria-label="Sync port policy" title="Sync port policy"><svg class="icon"><use href="#i-refresh"/></svg></button></div></header><div id="detail-ports" class="port-list"></div><form id="port-editor" class="port-editor" hidden><label class="field" for="port-input"><span>Port rules <small>PORT:TCP, PORT:HTTP, or PORT:HTTPS</small></span><input id="port-input" type="text" placeholder="22:TCP, 80:HTTP, 443:HTTPS" spellcheck="false" /></label><p id="port-error" class="form-error" role="alert"></p><div class="button-row"><button class="button button-primary button-small" type="submit" value="set">Replace rules</button><button id="open-ports-btn" class="button button-small" type="submit" value="open">Open ports</button><button id="close-ports-btn" class="button button-small" type="submit" value="close">Close ports</button><button class="button button-quiet button-small" type="button" data-action="cancel-ports">Cancel</button></div><p class="panel-footnote">An empty replacement creates a managed policy with no inbound TCP ports.</p></form></article>
            <article class="soft-panel log-panel"><header class="section-heading"><div><h2>A window into the runtime</h2><span>Recent Firecracker log entries.</span></div><div class="button-row"><label class="select-wrap"><span class="sr-only">Log tail length</span><select id="log-tail"><option value="100">100 lines</option><option value="250">250 lines</option><option value="500">500 lines</option><option value="1000">1,000 lines</option></select></label><button id="log-refresh-btn" class="icon-button" type="button" data-action="refresh-logs" aria-label="Refresh logs"><svg class="icon"><use href="#i-refresh"/></svg></button></div></header><pre id="log-output" class="log-output" tabindex="0"></pre><p id="log-meta" class="panel-footnote"></p></article>
            <div class="detail-delete-row"><span>Every machine has its own private disk.</span><button class="quiet-link danger-text" type="button" data-action="delete-current"><svg class="icon"><use href="#i-trash"/></svg>Delete machine</button></div>
          </div>
        </section>
        <section id="page-create" class="page" aria-labelledby="create-heading" hidden>
          <div class="page-heading"><div><span class="subtle-label">Every idea starts somewhere</span><h1 id="create-heading" tabindex="-1">Make something new<span class="heading-period">.</span></h1></div><a class="quiet-link" href="#vms">Back to machines <svg class="icon"><use href="#i-arrow"/></svg></a></div>
          <form id="create-form" class="create-layout">
            <div class="create-fields"><section class="soft-panel form-section"><header class="section-heading"><div><h2><span class="step-number">01</span>A name and a little space</h2><span>Give your new machine a shape.</span></div></header><label class="field" for="create-name"><span>Machine name <small>Optional</small></span><input id="create-name" type="text" name="name" placeholder="e.g. my-little-server" pattern="[a-z][a-z0-9\-]{0,62}" maxlength="63" autocomplete="off" /></label><fieldset class="preset-fieldset"><legend>Start with a size</legend><div class="size-presets"><button class="size-preset active" type="button" data-preset="small" aria-pressed="true"><svg class="icon"><use href="#i-server"/></svg><strong>Small</strong><span>1 vCPU · 512 MiB</span></button><button class="size-preset" type="button" data-preset="balanced" aria-pressed="false"><svg class="icon"><use href="#i-server"/></svg><strong>Balanced</strong><span>2 vCPU · 1 GiB</span></button><button class="size-preset" type="button" data-preset="roomy" aria-pressed="false"><svg class="icon"><use href="#i-server"/></svg><strong>Roomy</strong><span>4 vCPU · 2 GiB</span></button></div></fieldset><div class="form-grid"><label class="field" for="create-cpu"><span>CPU capacity</span><input id="create-cpu" name="cpu" type="number" value="1" min="0.01" step="any" required /><small>Fractional requests round up to whole vCPUs.</small></label><label class="field" for="create-ram"><span>Memory</span><input id="create-ram" name="ram" type="text" value="512M" required /><small>At least 128 MiB. Try 512M, 1G, or 2G.</small></label></div></section>
            <section class="soft-panel form-section"><header class="section-heading"><div><h2><span class="step-number">02</span>A way to connect</h2><span>Private networking and guest access.</span></div></header><label class="field" for="create-guest-ip"><span>Guest IPv4 address <small>Optional</small></span><input id="create-guest-ip" name="guest_ip" type="text" placeholder="Automatically assigned" autocomplete="off" /></label><div class="form-grid"><label class="field" for="create-username"><span>Guest user</span><input id="create-username" name="username" type="text" value="root" autocomplete="username" required /></label><label class="field" for="create-password"><span>Guest password</span><span class="password-field"><input id="create-password" name="password" type="password" value="root" autocomplete="new-password" maxlength="128" required /><button class="icon-button" type="button" data-action="toggle-password" aria-label="Show password" aria-pressed="false"><svg class="icon"><use href="#i-eye"/></svg></button></span></label></div><p class="panel-footnote">Use an account that exists in your guest image. Credentials are applied to the machine’s private disk.</p></section>
            <section class="soft-panel form-section"><header class="section-heading"><div><h2><span class="step-number">03</span>Open the right doors</h2><span>Choose which private TCP services are allowed.</span></div></header><label class="toggle-field"><span><strong>Include the default SSH rule</strong><small>Allow TCP port 22 for terminal access.</small></span><input id="create-default-ssh" name="default_ssh" type="checkbox" checked /><span class="toggle-track" aria-hidden="true"></span></label><label class="field" for="create-ports"><span>Additional port rules <small>Optional</small></span><input id="create-ports" name="ports" type="text" placeholder="80:HTTP, 443:HTTPS" spellcheck="false" /><small>Separate rules with commas. HTTP and HTTPS both use TCP.</small></label></section></div>
            <aside class="create-summary soft-panel"><div class="summary-art" aria-hidden="true"><div></div><div></div><span><svg class="icon"><use href="#i-server"/></svg></span></div><span class="subtle-label">Your next little machine</span><h2 id="create-summary-name">Room for an idea.</h2><p>A private disk, a network identity,<br />and a fresh start.</p><dl id="create-summary-details" class="detail-list"></dl><p id="create-error" class="form-error" role="alert"></p><button id="create-submit" class="button button-primary button-wide" type="submit"><span>Create machine</span><svg class="icon"><use href="#i-arrow"/></svg></button><a href="#vms" class="quiet-link summary-cancel">Maybe later</a><span class="summary-note"><svg class="icon"><use href="#i-spark"/></svg>Built on Firecracker</span></aside>
          </form>
        </section>
        <section id="page-system" class="page" aria-labelledby="system-heading" hidden>
          <div class="page-heading"><div><span class="subtle-label">Behind every little machine</span><h1 id="system-heading" tabindex="-1">A look at your host<span class="heading-period">.</span></h1></div><button id="diagnostics-refresh-btn" class="button" type="button" data-action="diagnostics"><svg class="icon"><use href="#i-refresh"/></svg>Run checks</button></div>
          <div id="health-summary" class="compact-metrics"></div>
          <div class="health-layout"><article class="soft-panel diagnostics-panel"><header class="section-heading"><div><h2>The essentials, checked</h2><span>Readiness checks from your local host.</span></div><span id="diagnostics-count" class="tag">Checking</span></header><div id="diagnostics-list" class="diagnostics-list"><div class="loading-state">Checking in with your host…</div></div></article><div class="health-side"><article class="soft-panel install-panel"><span class="round-icon"><svg class="icon"><use href="#i-download"/></svg></span><h2>A foundation for your fleet</h2><p>Install the Firecracker binary, guest kernel, and root filesystem, ready for your next machine.</p><div class="install-assets"><span><svg class="icon"><use href="#i-cpu"/></svg>Firecracker</span><span><svg class="icon"><use href="#i-terminal"/></svg>Guest kernel</span><span><svg class="icon"><use href="#i-server"/></svg>Root filesystem</span></div><label class="toggle-field"><span><strong>Refresh existing assets</strong><small>Reinstall with force enabled.</small></span><input id="install-force" type="checkbox" /><span class="toggle-track" aria-hidden="true"></span></label><button id="install-btn" class="button button-primary button-wide" type="button" data-action="install"><span>Install assets</span><svg class="icon"><use href="#i-arrow"/></svg></button><pre id="install-result" class="install-result" role="status" hidden></pre></article><article class="soft-panel server-info"><header class="section-heading"><h2>Close to home</h2><svg class="icon caption-icon"><use href="#i-network"/></svg></header><dl class="detail-list"><div><dt>API origin</dt><dd id="info-api-url"></dd></div><div><dt>Last host check</dt><dd id="info-observed">Not checked yet</dd></div><div><dt>Connection</dt><dd>Session token</dd></div></dl><a href="/docs" target="_blank" rel="noopener" class="quiet-link">Open API reference <svg class="icon"><use href="#i-arrow"/></svg></a></article></div></div>
        </section>
      </main>
    </div>
  </section>
  <div id="action-menu" class="action-menu" role="menu" aria-label="Machine actions" hidden></div>
  <div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="false"></div>
  <dialog id="confirm-dialog" class="confirm-dialog" aria-labelledby="confirm-title" aria-describedby="confirm-body"><form method="dialog"><span class="round-icon" id="confirm-icon"><svg class="icon"><use href="#i-info"/></svg></span><span class="subtle-label">A moment before we continue</span><h2 id="confirm-title"></h2><p id="confirm-body"></p><div class="dialog-actions"><button class="button button-quiet" value="cancel" autofocus>Cancel</button><button id="confirm-ok" class="button button-primary" value="confirm">Confirm</button></div></form></dialog>
  <noscript><p class="noscript-message">Enable JavaScript to connect to your UVM workspace.</p></noscript>
 </body>
 </html>
@@ -2,6 +2,7 @@
 from __future__ import annotations
 import os
 import re
 import shutil
 import time
@@ -39,6 +40,15 @@ class OperationResult:
    error: str | None = None
@dataclass(frozen=True, slots=True)
 class LogTail:
    content: str
    truncated: bool
 _MAX_LOG_TAIL_BYTES = 262_144
 class LifecycleService:
    """All mutating entry points use operation lock -> short state transaction."""
@@ -415,6 +425,41 @@ class LifecycleService:
        self._validate_paths(vm)
        return Path(vm.log)
    def read_log_tail(self, identifier: str, *, tail: int) -> LogTail:
        """Read a bounded tail from a validated VM log without following it."""
        if type(tail) is not int or tail < 0:
            raise ValidationError("log tail must be a non-negative integer")
        path = self.log_path(identifier)
        try:
            with path.open("rb") as stream:
                end = stream.seek(0, os.SEEK_END)
                if tail == 0:
                    return LogTail(content="", truncated=False)
                start = max(0, end - _MAX_LOG_TAIL_BYTES)
                previous = b""
                if start:
                    stream.seek(start - 1)
                    previous = stream.read(1)
                stream.seek(start)
                content = stream.read(end - start)
        except OSError as error:
            raise UvmError("could not read VM log") from error
        truncated = False
        if start and previous != b"\n":
            newline = content.find(b"\n")
            if newline == -1:
                truncated = True
            else:
                content = content[newline + 1:]
        lines = content.splitlines(keepends=True)
        if start and len(lines) < tail:
            truncated = True
        return LogTail(
            content=b"".join(lines[-tail:]).decode("utf-8", errors="replace"),
            truncated=truncated,
        )
    def diagnostics(self) -> list[dict]:
        checks = [("root", require_root), ("kvm", check_kvm),
                  ("Firecracker", self._verify_firecracker),
@@ -0,0 +1,17 @@
 """Dashboard frontend routes."""
 from __future__ import annotations
 from pathlib import Path
 from fastapi import APIRouter
 from fastapi.responses import HTMLResponse
 router = APIRouter()
 _DASHBOARD_HTML = Path(__file__).parent.parent / "dashboard" / "static" / "index.html"
@router.get("", response_class=HTMLResponse)
 def get_dashboard() -> str:
    return _DASHBOARD_HTML.read_text(encoding="utf-8")
@@ -0,0 +1,18 @@
 """Token-protected host diagnostics endpoint."""
 from __future__ import annotations
 from fastapi import APIRouter, Depends
 from ..api_models import DiagnosticResponse
 from ..app import Application
 from .dependencies import get_authorized_application
 router = APIRouter(tags=["diagnostics"])
@router.get("/diagnostics", response_model=list[DiagnosticResponse])
 def diagnostics(
    application: Application = Depends(get_authorized_application),
 ) -> list[DiagnosticResponse]:
    return [DiagnosticResponse(**check) for check in application.lifecycle.diagnostics()]
@@ -2,18 +2,49 @@
 from __future__ import annotations
-from fastapi import APIRouter, Depends, status
+from fastapi import APIRouter, Depends, Query, status
-from ..api_models import DestroyResponse, VmCreateRequest, VmResponse, vm_response
+from ..api_models import (
    DestroyResponse,
    PortSyncResponse,
    PortUpdateRequest,
    VmActionResultResponse,
    VmBulkActionRequest,
    VmCreateRequest,
    VmLogResponse,
    VmResponse,
    vm_response,
 )
 from ..app import Application
-from ..domain import PortRule, VmSpec
+from ..domain import PortRule, VmRecord, VmSpec
-from ..validation import parse_cpu, parse_name, parse_password, parse_ports, parse_ram, parse_username
+from ..validation import (
    parse_cpu,
    parse_name,
    parse_password,
    parse_ports,
    parse_ram,
    parse_timeout,
    parse_username,
 )
 from .dependencies import get_authorized_application
 router = APIRouter(prefix="/vms", tags=["vms"])
 def _mutation_policy_status(vm: VmRecord) -> str:
    """Return the policy state that follows a successful lifecycle mutation."""
    if vm.ports is None:
        return "unmanaged"
    if vm.operation is not None:
        return "unknown"
    if vm.status == "running":
        return "enforced"
    if vm.status == "stopped":
        return "inactive"
    return "unknown"
@router.get("", response_model=list[VmResponse])
 def list_vms(
    application: Application = Depends(get_authorized_application),
@@ -47,29 +78,117 @@ def create_vm(
            ports=ports,
        )
    )
-    policy_status = "unmanaged" if vm.ports is None else "unknown"
+    return vm_response(vm, policy_status=_mutation_policy_status(vm))
-    if vm.ports is not None and vm.status == "running" and vm.operation is None:
+
-        policy_status = "enforced"
+
-    return vm_response(vm, policy_status=policy_status)
+@router.post("/actions", response_model=list[VmActionResultResponse])
 def run_bulk_action(
    request: VmBulkActionRequest,
    application: Application = Depends(get_authorized_application),
 ) -> list[VmActionResultResponse]:
    timeout = parse_timeout(str(request.timeout)) if request.timeout is not None else None
    targets = application.lifecycle.resolve_targets(request.identifiers, all_vms=request.all_vms)
    results = application.lifecycle.run_many(
        request.action,
        [vm.id for vm in targets],
        timeout=timeout,
    )
    return [
        VmActionResultResponse(
            id=result.id,
            action=result.action,
            outcome=result.outcome,
            error=result.error,
        )
        for result in results
    ]
@router.post("/{vm_id}/start", response_model=VmResponse)
 def start_vm(
    vm_id: str,
    application: Application = Depends(get_authorized_application),
 ) -> VmResponse:
    vm = application.lifecycle.start(vm_id)
    return vm_response(vm, policy_status=_mutation_policy_status(vm))
@router.post("/{vm_id}/restart", response_model=VmResponse)
 def restart_vm(
    vm_id: str,
    timeout: float | None = None,
    application: Application = Depends(get_authorized_application),
 ) -> VmResponse:
    vm = (
        application.lifecycle.restart(vm_id)
        if timeout is None
        else application.lifecycle.restart(vm_id, timeout=timeout)
    )
    return vm_response(vm, policy_status=_mutation_policy_status(vm))
@router.post("/{vm_id}/stop", response_model=VmResponse)
 def stop_vm(
    vm_id: str,
    timeout: float | None = None,
    application: Application = Depends(get_authorized_application),
 ) -> VmResponse:
-    return vm_response(application.lifecycle.stop(vm_id), policy_status="inactive")
+    vm = (
        application.lifecycle.stop(vm_id)
        if timeout is None
        else application.lifecycle.stop(vm_id, timeout=timeout)
    )
    return vm_response(vm, policy_status=_mutation_policy_status(vm))
@router.delete("/{vm_id}", response_model=DestroyResponse)
 def destroy_vm(
    vm_id: str,
    timeout: float | None = None,
    application: Application = Depends(get_authorized_application),
 ) -> DestroyResponse:
-    vm = application.lifecycle.destroy(vm_id)
+    vm = (
        application.lifecycle.destroy(vm_id)
        if timeout is None
        else application.lifecycle.destroy(vm_id, timeout=timeout)
    )
    return DestroyResponse(id=vm.id)
@router.post("/{vm_id}/ports", response_model=VmResponse)
 def update_ports(
    vm_id: str,
    request: PortUpdateRequest,
    application: Application = Depends(get_authorized_application),
 ) -> VmResponse:
    ports = parse_ports([f"{rule.port}:{rule.protocol}" for rule in request.ports])
    vm = application.lifecycle.set_ports(vm_id, ports, mode=request.mode)
    return vm_response(vm, policy_status=_mutation_policy_status(vm))
@router.post("/{vm_id}/ports/sync", response_model=PortSyncResponse)
 def sync_ports(
    vm_id: str,
    application: Application = Depends(get_authorized_application),
 ) -> PortSyncResponse:
    vm = application.lifecycle.sync_ports(vm_id)
    return PortSyncResponse(
        id=vm.id,
        policy_status=_mutation_policy_status(vm),
        status=vm.status,
    )
@router.get("/{identifier}/logs", response_model=VmLogResponse)
 def get_vm_logs(
    identifier: str,
    tail: int = Query(default=100, ge=0, le=1000),
    application: Application = Depends(get_authorized_application),
 ) -> VmLogResponse:
    log = application.lifecycle.read_log_tail(identifier, tail=tail)
    return VmLogResponse(content=log.content, truncated=log.truncated)
@router.get("/{identifier}", response_model=VmResponse)
 def get_vm(
    identifier: str,
@@ -27,7 +27,8 @@ def create_api(application: Application | None = None, *, host: str | None = Non
    try:
        from fastapi import FastAPI
-        from fastapi.responses import JSONResponse
+        from fastapi.responses import JSONResponse, RedirectResponse
        from fastapi.staticfiles import StaticFiles
    except ModuleNotFoundError as error:
        raise UvmError(
            "FastAPI server support is not installed. Install this project with its dependencies."
@@ -36,6 +37,8 @@ def create_api(application: Application | None = None, *, host: str | None = Non
    from .routers.health import router as health_router
    from .routers.installation import router as installation_router
    from .routers.vms import router as vms_router
    from .routers.diagnostics import router as diagnostics_router
    from .routers.dashboard import router as dashboard_router
    api = FastAPI(
        title="uvm",
@@ -54,6 +57,16 @@ def create_api(application: Application | None = None, *, host: str | None = Non
    api.include_router(health_router)
    api.include_router(installation_router)
    api.include_router(vms_router)
    api.include_router(diagnostics_router)
    static_dir = Path(__file__).parent / "dashboard" / "static"
    api.mount("/dashboard/static", StaticFiles(directory=static_dir), name="dashboard_static")
    api.include_router(dashboard_router, prefix="/dashboard")
    @api.get("/")
    async def root() -> Any:
        return RedirectResponse(url="/dashboard")
    return api