coderbuzz · Oct 15, 2026 · Oct 15, 2026
diff --git a/AGENTS.md b/AGENTS.md
@@ -35,6 +35,10 @@ DOCKIFY_HOST=127.0.0.1 DOCKIFY_DATA_DIR=./data go run ./cmd/dockify serve
 # Verify templates parse
 go test ./internal/http/... -run TestTemplates
 
+# UI check (screenshots, overflow, nodes, nav timing, contrast, a11y); needs Playwright in ~/.local/share/pw-tools
+DOCKIFY_DEV_MOCK=true DOCKIFY_PORT=18090 go run ./cmd/dockify serve &   # optional: DOCKIFY_ADMIN_PASSWORD=uji123 for the login screen
+node tests/e2e/ui.mjs [BASE_URL] [OUT]   # env UI_USER/UI_PASS when auth is on; exit 1 on overflow/contrast/a11y failure
+
 # Build and run with Docker
 docker build -t dockify .
 docker run -p 127.0.0.1:8080:8080 -e DOCKIFY_ALLOW_NO_AUTH=true -v $(pwd)/data:/var/lib/dockify dockify

diff --git a/docs/ui-revamp/perf-sebelum.md b/docs/ui-revamp/perf-sebelum.md
@@ -0,0 +1,65 @@
+# Perf sebelum S7 (main setelah S6, build mock, `node tests/e2e/ui.mjs`)
+
+# Dockify UI report
+
+Base: http://127.0.0.1:18091 · 2026-10-15T12:46:28.151Z · runs=5
+
+## Navigation (CPU 4x, +80 ms per request, median)
+
+| page | DOMContentLoaded ms | load ms |
+| --- | --- | --- |
+| dashboard | 327 | 400 |
+| servers | 324 | 389 |
+| apps | 326 | 380 |
+| app-detail | 338 | 397 |
+
+
+## Transfer (cold, on the wire) and DOM nodes @390
+
+| page | KB | requests | DOM nodes | nodes/row |
+| --- | --- | --- | --- | --- |
+| dashboard | 467 | 11 | 253 | 14 |
+| servers | 461 | 11 | 146 | 14 |
+| apps | 463 | 11 | 174 | 12 |
+| app-detail | 473 | 12 | 268 | 7 |
+| app-draft | - | - | 185 | 0 |
+| server-detail | - | - | 339 | 11 |
+| apps-add | - | - | 299 | 0 |
+| settings | - | - | 121 | 0 |
+
+
+## Overflow @360/390
+
+none (0)
+
+
+## Contrast (WCAG, 19 pairs)
+
+| palette | theme | pass |
+| --- | --- | --- |
+| indigo | light | 19/19 |
+| indigo | dark | 19/19 |
+| navy | light | 19/19 |
+| navy | dark | 19/19 |
+| teal | light | 19/19 |
+| teal | dark | 19/19 |
+
+
+## A11y quick
+
+| page | unnamed controls | dialogs w/o label | first Tab focus |
+| --- | --- | --- | --- |
+| dashboard | 0 | 0 | ok |
+| servers | 0 | 0 | ok |
+| apps | 0 | 0 | ok |
+| app-detail | 0 | 0 | ok |
+| app-draft | 0 | 0 | ok |
+| server-detail | 0 | 0 | ok |
+| apps-add | 0 | 0 | ok |
+| settings | 0 | 0 | ok |
+
+
+## Result
+
+PASS
+
diff --git a/docs/ui-revamp/perf-sesudah.md b/docs/ui-revamp/perf-sesudah.md
@@ -0,0 +1,65 @@
+# Perf sesudah S7 (cabang feat/ui-s7-measure, build mock, `node tests/e2e/ui.mjs`)
+
+# Dockify UI report
+
+Base: http://127.0.0.1:18090 · 2026-10-15T12:48:49.209Z · runs=5
+
+## Navigation (CPU 4x, +80 ms per request, median)
+
+| page | DOMContentLoaded ms | load ms |
+| --- | --- | --- |
+| dashboard | 300 | 315 |
+| servers | 301 | 311 |
+| apps | 301 | 309 |
+| app-detail | 328 | 336 |
+
+
+## Transfer (cold, on the wire) and DOM nodes @390
+
+| page | KB | requests | DOM nodes | nodes/row |
+| --- | --- | --- | --- | --- |
+| dashboard | 126 | 7 | 248 | 14 |
+| servers | 120 | 7 | 141 | 14 |
+| apps | 122 | 7 | 169 | 12 |
+| app-detail | 192 | 10 | 266 | 7 |
+| app-draft | - | - | 183 | 0 |
+| server-detail | - | - | 337 | 11 |
+| apps-add | - | - | 294 | 0 |
+| settings | - | - | 116 | 0 |
+
+
+## Overflow @360/390
+
+none (0)
+
+
+## Contrast (WCAG, 19 pairs)
+
+| palette | theme | pass |
+| --- | --- | --- |
+| indigo | light | 19/19 |
+| indigo | dark | 19/19 |
+| navy | light | 19/19 |
+| navy | dark | 19/19 |
+| teal | light | 19/19 |
+| teal | dark | 19/19 |
+
+
+## A11y quick
+
+| page | unnamed controls | dialogs w/o label | first Tab focus |
+| --- | --- | --- | --- |
+| dashboard | 0 | 0 | ok |
+| servers | 0 | 0 | ok |
+| apps | 0 | 0 | ok |
+| app-detail | 0 | 0 | ok |
+| app-draft | 0 | 0 | ok |
+| server-detail | 0 | 0 | ok |
+| apps-add | 0 | 0 | ok |
+| settings | 0 | 0 | ok |
+
+
+## Result
+
+PASS
+
diff --git a/internal/http/static/app.css b/internal/http/static/app.css
@@ -639,7 +639,6 @@ summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accen
 .stat small { font-size: 12.8px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
 
 /* Breadcrumbs */
-.breadcrumb { display: flex; align-items: center; gap: 0.4em; font-size: 0.88em; color: var(--ink2); margin-bottom: 1em; }
 .breadcrumb a { color: var(--ink2); font-weight: 500; }
 .breadcrumb a:hover { color: var(--accent); }
 
@@ -793,7 +792,7 @@ pre {
 .login-page .theme-btn { position: fixed; top: 12px; right: 12px; }
 
 /* Detail pages (DESIGN-SYSTEM §6) */
-.breadcrumb { font-size: 12.8px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 6px; }
+.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.8px; color: var(--muted); margin-bottom: 8px; }
 .page-head { margin-bottom: 12px; }
 .page-head h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
 .page-head .meta { margin: 0; font-size: 12.8px; color: var(--muted); }

diff --git a/internal/http/static/app.js b/internal/http/static/app.js
@@ -58,3 +58,26 @@ document.addEventListener('click', function (e) {
   if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(text).then(function () { done(true); }, fallback);
   else fallback();
 });
+
+// xterm is only needed for the SSH console: load it on first use.
+var xtermLoading = null;
+function loadXterm(cb) {
+  if (window.Terminal && window.FitAddon) return cb();
+  if (!xtermLoading) {
+    xtermLoading = new Promise(function (resolve, reject) {
+      var l = document.createElement('link');
+      l.rel = 'stylesheet';
+      l.href = 'static/xterm.min.css';
+      document.head.appendChild(l);
+      function add(src, next) {
+        var s = document.createElement('script');
+        s.src = src;
+        s.onload = next;
+        s.onerror = reject;
+        document.head.appendChild(s);
+      }
+      add('static/xterm.min.js', function () { add('static/xterm-addon-fit.min.js', resolve); });
+    });
+  }
+  xtermLoading.then(cb, function () { xtermLoading = null; });
+}
diff --git a/internal/http/templates/live_charts.html → internal/http/static/charts.js b/internal/http/templates/live_charts.html → internal/http/static/charts.js
@@ -1,5 +1,4 @@
-{{define "live_charts"}}
-<script>
+// Live charts and gauges for the app/server detail pages (loaded only there).
 function formatBytes(b) {
   if (b === undefined || b === null || isNaN(b)) return '-';
   b = Number(b);
@@ -276,6 +275,3 @@
   connect();
   return { disconnect: disconnect };
 }
-
-</script>
-{{end}}
diff --git a/internal/http/templates/apps_detail.html b/internal/http/templates/apps_detail.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <html lang="en" data-palette="indigo" data-theme="light">
-<head>{{template "head" .}}{{if eq .App.Status "deploying"}}<meta http-equiv="refresh" content="2">{{end}}</head>
+<head>{{template "head" .}}<script src="static/htmx.min.js"></script><script src="static/charts.js?v={{.AssetVersion}}"></script>{{if eq .App.Status "deploying"}}<meta http-equiv="refresh" content="2">{{end}}</head>
 <body>
 {{template "nav" .}}
 <div class="container">
@@ -203,7 +203,7 @@ <h3>Danger zone</h3>
 	var container = document.getElementById('app-console-container');
 	if (container.hidden) {
 		container.hidden = false;
-		connectAppConsole();
+		loadXterm(connectAppConsole);
 	} else {
 		container.hidden = true;
 		disconnectAppConsole();

diff --git a/internal/http/templates/layout.html b/internal/http/templates/layout.html
@@ -39,7 +39,8 @@
 </script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
+<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet"></noscript>
 <link rel="stylesheet" href="static/app.css?v={{.AssetVersion}}">
 {{end}}
 
@@ -49,13 +50,8 @@
 <base href="{{.BasePath}}">
 <title>{{.Title}} - Dockify</title>
 {{template "theme_head" .}}
-<script src="static/htmx.min.js"></script>
 <script src="static/app.js?v={{.AssetVersion}}"></script>
 <script src="static/list.js?v={{.AssetVersion}}" defer></script>
-<link rel="stylesheet" href="static/xterm.min.css">
-<script src="static/xterm.min.js"></script>
-<script src="static/xterm-addon-fit.min.js"></script>
-{{template "live_charts"}}
 {{end}}
 
 {{define "nav"}}
@@ -97,7 +93,7 @@
 	if (container.hidden) {
 		container.hidden = false;
 		document.getElementById('console-toggle').textContent = 'Close Console';
-		connectConsole();
+		loadXterm(connectConsole);
 	} else {
 		container.hidden = true;
 		document.getElementById('console-toggle').textContent = 'Console';

diff --git a/internal/http/templates/servers_detail.html b/internal/http/templates/servers_detail.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <html lang="en" data-palette="indigo" data-theme="light">
-<head>{{template "head" .}}{{if eq .Server.Status "initializing"}}<meta http-equiv="refresh" content="2">{{end}}</head>
+<head>{{template "head" .}}<script src="static/htmx.min.js"></script><script src="static/charts.js?v={{.AssetVersion}}"></script>{{if eq .Server.Status "initializing"}}<meta http-equiv="refresh" content="2">{{end}}</head>
 <body>
 {{template "nav" .}}
 <div class="container">