From 38ad6207595499d1ee17e53b6425070b5483e694 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mika=C3=ABl=20Cluseau?= <mikael.cluseau@gmail.com>
Date: Wed, 17 Jun 2026 22:40:44 +0200
Subject: [PATCH] ui rework

---
 html/ui/Cluster-34a012ee0910827c.js           |  27 +
 html/ui/Cluster-361bc6b76a062d88.js           |  19 -
 ...c.js => ClusterAccess-8b4165435ba4fcac.js} |  55 +-
 ...6306.js => ClusterCAs-4f0a381bfb0c1b88.js} |   1 -
 ...aff61.js => Downloads-3c8cba0572aebfae.js} |   5 +-
 ...9647d40.js => GetCopy-2e04b7b63750e25a.js} |  13 +-
 ...6679b9aa0f2.js => app-4f0c6935250753e9.js} |  64 ++-
 html/ui/app.css                               |  12 +-
 html/ui/index.html                            |  59 +-
 html/ui/style.css                             | 522 ++++++++++++------
 ui/app.css                                    |  12 +-
 ui/index.html                                 |  47 +-
 ui/js/Cluster.js                              |  30 +-
 ui/js/ClusterAccess.js                        |  55 +-
 ui/js/ClusterCAs.js                           |   1 -
 ui/js/ClusterDownloadSet.js                   |  43 --
 ui/js/Downloads.js                            |   5 +-
 ui/js/GetCopy.js                              |  13 +-
 ui/js/app.js                                  |  64 ++-
 ui/style.css                                  | 522 ++++++++++++------
 20 files changed, 1016 insertions(+), 553 deletions(-)
 create mode 100644 html/ui/Cluster-34a012ee0910827c.js
 delete mode 100644 html/ui/Cluster-361bc6b76a062d88.js
 rename html/ui/{ClusterAccess-e67af72c976d642c.js => ClusterAccess-8b4165435ba4fcac.js} (73%)
 rename html/ui/{ClusterCAs-d6eba07c367b6306.js => ClusterCAs-4f0a381bfb0c1b88.js} (97%)
 rename html/ui/{Downloads-25b2e1f4aeaaff61.js => Downloads-3c8cba0572aebfae.js} (89%)
 rename html/ui/{GetCopy-7e3c9678f9647d40.js => GetCopy-2e04b7b63750e25a.js} (65%)
 rename html/ui/{app-e7fb26679b9aa0f2.js => app-4f0c6935250753e9.js} (81%)
 delete mode 100644 ui/js/ClusterDownloadSet.js

diff --git a/html/ui/Cluster-34a012ee0910827c.js b/html/ui/Cluster-34a012ee0910827c.js
new file mode 100644
index 0000000..e68982a
--- /dev/null
+++ b/html/ui/Cluster-34a012ee0910827c.js
@@ -0,0 +1,27 @@
+const Cluster = {
+    components: { ClusterAccess, ClusterCAs, GetCopy },
+    props: [ 'cluster', 'token', 'state' ],
+    template: `
+  <details open>
+    <summary>Access</summary>
+    <ClusterAccess :cluster="cluster" :token="token" :state="state" />
+  </details>
+
+  <details open>
+    <summary>CAs</summary>
+    <ClusterCAs :cluster="cluster" :token="token" />
+  </details>
+
+  <details open>
+    <summary>Secrets</summary>
+    <h4>Tokens</h4>
+    <section class="links">
+      <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
+    </section>
+    <h4>Passwords</h4>
+    <section class="links">
+      <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
+    </section>
+  </details>
+`
+}
diff --git a/html/ui/Cluster-361bc6b76a062d88.js b/html/ui/Cluster-361bc6b76a062d88.js
deleted file mode 100644
index 6d7cdf2..0000000
--- a/html/ui/Cluster-361bc6b76a062d88.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const Cluster = {
-    components: { ClusterAccess, ClusterCAs, GetCopy },
-    props: [ 'cluster', 'token', 'state' ],
-    template: `
-  <ClusterAccess :cluster="cluster" :token="token" :state="state" />
-
-  <ClusterCAs :cluster="cluster" :token="token" />
-
-  <h3>Secrets</h3>
-  <h4>Tokens</h4>
-  <section class="links">
-    <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
-  </section>
-  <h4>Passwords</h4>
-  <section class="links">
-    <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
-  </section>
-`
-}
diff --git a/html/ui/ClusterAccess-e67af72c976d642c.js b/html/ui/ClusterAccess-8b4165435ba4fcac.js
similarity index 73%
rename from html/ui/ClusterAccess-e67af72c976d642c.js
rename to html/ui/ClusterAccess-8b4165435ba4fcac.js
index 926c3fe..f9c8421 100644
--- a/html/ui/ClusterAccess-e67af72c976d642c.js
+++ b/html/ui/ClusterAccess-8b4165435ba4fcac.js
@@ -17,6 +17,8 @@ const ClusterAccess = {
             kubeUserCert: null,
             downloadSet: null,
             selectedAssets: {},
+            loading: false,
+            msg: null,
         };
     },
     computed: {
@@ -44,40 +46,43 @@ const ClusterAccess = {
         hostCount() {
             return (this.state.Hosts||[]).filter(h => h.Cluster == this.cluster.Name).length
         },
-        },
+    },
     methods: {
         sshCASign() {
             event.preventDefault();
+            this.loading = true; this.msg = null;
             fetch(`/clusters/${this.cluster.Name}/ssh/user-ca/sign`, {
                 method: 'POST',
                 body: JSON.stringify({ ...this.sshSignReq, Validity: this.signReqValidity }),
                 headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
             }).then((resp) => {
                 if (resp.ok) {
-                    resp.blob().then((cert) => { this.sshUserCert = URL.createObjectURL(cert) })
+                    resp.blob().then((cert) => { this.sshUserCert = URL.createObjectURL(cert); this.loading = false })
                 } else {
-                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
+                    resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
                 }
               })
-              .catch((e) => { alert('failed to sign: '+e); })
+              .catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
         },
         kubeCASign() {
             event.preventDefault();
+            this.loading = true; this.msg = null;
             fetch(`/clusters/${this.cluster.Name}/kube/sign`, {
                 method: 'POST',
                 body: JSON.stringify({ ...this.kubeSignReq, Validity: this.signReqValidity }),
                 headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
             }).then((resp) => {
                 if (resp.ok) {
-                    resp.blob().then((cert) => { this.kubeUserCert = URL.createObjectURL(cert) })
+                    resp.blob().then((cert) => { this.kubeUserCert = URL.createObjectURL(cert); this.loading = false })
                 } else {
-                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
+                    resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
                 }
               })
-              .catch((e) => { alert('failed to sign: '+e); })
+              .catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
         },
         generateDownloadSet() {
             event.preventDefault()
+            this.loading = true; this.msg = null;
 
             const items = [{
                 Kind: "host",
@@ -91,18 +96,18 @@ const ClusterAccess = {
                 headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
             }).then((resp) => {
                 if (resp.ok) {
-                    resp.json().then((set) => { this.downloadSet = set })
+                    resp.json().then((set) => { this.downloadSet = set; this.loading = false })
                 } else {
-                    resp.json().then((resp) => alert('failed to generate: '+resp.message))
+                    resp.json().then((resp) => { this.msg = 'failed to generate: '+resp.message; this.loading = false })
                 }
-            }).catch((e) => { alert('failed to generate: '+e) })
+            }).catch((e) => { this.msg = 'failed to generate: '+e; this.loading = false })
         },
         readFile(e, onload) {
             const file = e.target.files[0];
             if (!file) { return; }
             const reader = new FileReader();
             reader.onload = () => { onload(reader.result) };
-            reader.onerror = () => { alert("error reading file"); };
+            reader.onerror = () => { this.msg = "error reading file" };
             reader.readAsText(file);
         },
         loadPubKey(e) {
@@ -110,6 +115,14 @@ const ClusterAccess = {
                 this.sshSignReq.PubKey = v;
             });
         },
+        copyDownloadSetUrl() {
+            try {
+                navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+this.downloadSet)
+                this.$root.toast('copied!', 'info')
+            } catch (e) {
+                this.$root.toast('copy failed', 'error')
+            }
+        },
         loadCSR(e) {
             this.readFile(e, (v) => {
                 this.kubeSignReq.CSR = v;
@@ -117,8 +130,6 @@ const ClusterAccess = {
         },
     },
     template: `
-  <h3>Access</h3>
-
   <p>Grant access to:
      <label class="radio"><input type="radio" v-model="accessType" value="ssh" /> SSH</label>
      <label class="radio"><input type="radio" v-model="accessType" value="kube" /> Kubernetes</label>
@@ -127,6 +138,8 @@ const ClusterAccess = {
 
   <p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
 
+  <p class="error" v-if="msg">{{ msg }} <button class="btn-close" @click="msg=null">&times;</button></p>
+
   <div v-if="accessType == 'ssh'">
     <h4>Grant SSH access</h4>
     <p>User: <input type="text" v-model="sshSignReq.Principal"/></p>
@@ -134,7 +147,7 @@ const ClusterAccess = {
        <span class="text-and-file"><textarea v-model="sshSignReq.PubKey" style="height:3lh"></textarea>
        <input type="file" accept=".pub" @change="loadPubKey" /></span>
     </p>
-    <p><button @click="sshCASign">Sign SSH access</button>
+    <p><button :disabled="loading" @click="sshCASign">{{ loading ? 'signing...' : 'Sign SSH access' }}</button>
       <template v-if="sshUserCert">
       =&gt; <a :href="sshUserCert" download="ssh-cert.pub">Get certificate</a>
       </template>
@@ -149,9 +162,9 @@ const ClusterAccess = {
        <span class="text-and-file"><textarea v-model="kubeSignReq.CSR" style="height:7lh;"></textarea>
        <input type="file" accept=".csr" @change="loadCSR" /></span>
     </p>
-    <p><button @click="kubeCASign">Sign Kubernetes API access</button>
+    <p><button :disabled="loading" @click="kubeCASign">{{ loading ? 'signing...' : 'Sign Kubernetes API access' }}</button>
       <template v-if="kubeUserCert">
-        =&gt; <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
+        =&gt; <a :href="kubeUserCert" download="tls.crt">Get certificate</a>
       </template>
     </p>
   </div>
@@ -166,12 +179,12 @@ const ClusterAccess = {
         {{" "}}
       </template>
     </p>
-    <p><button :disabled="selectedAssetList.length==0" @click="generateDownloadSet">Generate download set</button></p>
-    <p v-if="downloadSet" style="word-break:break-all">
-      <a :href="'/public/download-set?set='+downloadSet" target="_blank">Open download set page</a>
+    <p><button :disabled="loading || selectedAssetList.length==0" @click="generateDownloadSet">{{ loading ? 'generating...' : 'Generate download set' }}</button></p>
+    <div v-if="downloadSet" class="term">
+      <a :href="'/public/download-set?set='+downloadSet" target="_blank">/public/download-set?set={{ downloadSet }}</a>
       <br/>
-      <button @click="navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+downloadSet)">Copy URL</button>
-    </p>
+      <button @click="copyDownloadSetUrl">Copy URL</button>
+    </div>
   </div>
 `
 }
diff --git a/html/ui/ClusterCAs-d6eba07c367b6306.js b/html/ui/ClusterCAs-4f0a381bfb0c1b88.js
similarity index 97%
rename from html/ui/ClusterCAs-d6eba07c367b6306.js
rename to html/ui/ClusterCAs-4f0a381bfb0c1b88.js
index 75e520f..eb05771 100644
--- a/html/ui/ClusterCAs-d6eba07c367b6306.js
+++ b/html/ui/ClusterCAs-4f0a381bfb0c1b88.js
@@ -2,7 +2,6 @@ const ClusterCAs = {
     components: { GetCopy },
     props: [ 'cluster', 'token' ],
     template: `
-  <h3>CAs</h3>
   <table><tr><th>Name</th><th>Certificate</th><th>Signed certificates</th></tr>
   <tr v-for="ca in cluster.CAs">
     <td>{{ ca.Name }}</td>
diff --git a/html/ui/Downloads-25b2e1f4aeaaff61.js b/html/ui/Downloads-3c8cba0572aebfae.js
similarity index 89%
rename from html/ui/Downloads-25b2e1f4aeaaff61.js
rename to html/ui/Downloads-3c8cba0572aebfae.js
index 09b94ce..558d58c 100644
--- a/html/ui/Downloads-25b2e1f4aeaaff61.js
+++ b/html/ui/Downloads-3c8cba0572aebfae.js
@@ -1,7 +1,7 @@
 const Downloads = {
     props: [ 'kind', 'name', 'token', 'state' ],
     data() {
-        return { createDisabled: false, selectedAssets: {} }
+        return { createDisabled: false, selectedAssets: {}, msg: null }
     },
     computed: {
         availableAssets() {
@@ -50,11 +50,12 @@ const Downloads = {
                 headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
             }).then((resp) => resp.json())
               .then((token) => { this.selectedAssets = {}; this.createDisabled = false })
-              .catch((e) => { alert('failed to create link'); this.createDisabled = false })
+              .catch((e) => { this.msg = 'failed to create link'; this.createDisabled = false })
         },
     },
     template: `
   <h4>Available assets</h4>
+  <p class="error" v-if="msg">{{ msg }} <button class="btn-close" @click="msg=null">&times;</button></p>
   <p class="downloads">
     <template v-for="asset in availableAssets">
       <label :class="{selected: selectedAssets[asset]}"><input type="checkbox" v-model="selectedAssets[asset]" />&nbsp;{{ asset }}</label>
diff --git a/html/ui/GetCopy-7e3c9678f9647d40.js b/html/ui/GetCopy-2e04b7b63750e25a.js
similarity index 65%
rename from html/ui/GetCopy-7e3c9678f9647d40.js
rename to html/ui/GetCopy-2e04b7b63750e25a.js
index aed4707..18260a2 100644
--- a/html/ui/GetCopy-7e3c9678f9647d40.js
+++ b/html/ui/GetCopy-2e04b7b63750e25a.js
@@ -1,7 +1,7 @@
 const GetCopy = {
     props: [ 'name', 'href', 'token' ],
     data() { return {showCopied: false} },
-    template: `<span class="notif"><div v-if="showCopied">copied!</div><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
+    template: `<span><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
     methods: {
         fetch() {
             event.preventDefault()
@@ -12,7 +12,7 @@ const GetCopy = {
         },
         handleFetchError(e) {
             console.log("failed to get value:", e)
-            alert('failed to get value')
+            this.$root.toast('failed to get value', 'error')
         },
         fetchAndSave() {
             this.fetch().then(resp => resp.blob()).then((value) => {
@@ -23,9 +23,12 @@ const GetCopy = {
             this.fetch()
             .then((resp) => resp.headers.get("content-type") == "application/json" ? resp.json() : resp.text())
             .then((value) => {
-                window.navigator.clipboard.writeText(value)
-                this.showCopied = true
-                setTimeout(() => { this.showCopied = false }, 1000)
+                try {
+                    window.navigator.clipboard.writeText(value)
+                    this.$root.toast('copied!', 'info')
+                } catch (e) {
+                    this.$root.toast('copy failed', 'error')
+                }
             }).catch(this.handleFetchError)
         },
     },
diff --git a/html/ui/app-e7fb26679b9aa0f2.js b/html/ui/app-4f0c6935250753e9.js
similarity index 81%
rename from html/ui/app-e7fb26679b9aa0f2.js
rename to html/ui/app-4f0c6935250753e9.js
index eb946c2..946c9c1 100644
--- a/html/ui/app-e7fb26679b9aa0f2.js
+++ b/html/ui/app-4f0c6935250753e9.js
@@ -21,11 +21,17 @@ createApp({
             uiHash: null,
             watchingState: false,
             state: null,
+            toasts: [],
+            toastId: 0,
         }
     },
     mounted() {
         this.session = JSON.parse(sessionStorage.state || "{}")
         this.watchPublicState()
+        document.addEventListener('keydown', (e) => this.onKeydown(e))
+    },
+    unmounted() {
+        document.removeEventListener('keydown', (e) => this.onKeydown(e))
     },
     watch: {
         session: {
@@ -56,13 +62,16 @@ createApp({
     },
 
     computed: {
-        views() {
-            var views = [{type: "actions", name: "admin", title: "Admin actions"}];
-
-            (this.state.Clusters||[]).forEach((c) => views.push({type: "cluster", name: c.Name, title: `Cluster ${c.Name}`}));
-            (this.state.Hosts   ||[]).forEach((c) => views.push({type: "host",    name: c.Name, title: `Host ${c.Name}`}));
-
-            return views.filter((v) => v.type != "host" || v.name.includes(this.viewFilter));
+        adminViews() {
+            return [{type: "actions", name: "admin", title: "Admin actions"}];
+        },
+        clusterViews() {
+            return (this.state.Clusters||[]).map((c) => ({type: "cluster", name: c.Name, title: c.Name}));
+        },
+        hostViews() {
+            return (this.state.Hosts||[])
+              .filter((h) => h.Name.includes(this.viewFilter))
+              .map((h) => ({type: "host", name: h.Name, title: h.Name}));
         },
         viewObj() {
             if (this.view) {
@@ -84,9 +93,32 @@ createApp({
         any(array) {
             return array && array.length != 0;
         },
+        isActive(v) {
+            return this.view && this.view.type == v.type && this.view.name == v.name
+        },
+        onKeydown(e) {
+            if ((e.ctrlKey || e.metaKey) && e.key == 'k') {
+                e.preventDefault()
+                this.$nextTick(() => {
+                    const el = document.querySelector('.sidebar input[type="search"]')
+                    if (el) el.focus()
+                })
+                return
+            }
+
+            if (e.key == 'Escape') {
+                this.viewFilter = ''
+                return
+            }
+        },
         copyText(text) {
             event.preventDefault()
-            window.navigator.clipboard.writeText(text)
+            try {
+                window.navigator.clipboard.writeText(text)
+                this.toast('copied!', 'info')
+            } catch (e) {
+                this.toast('copy failed: ' + e, 'error')
+            }
         },
         setToken() {
             event.preventDefault()
@@ -177,16 +209,12 @@ createApp({
             var xhr = new XMLHttpRequest()
 
             xhr.responseType = 'json'
-            // TODO spinner, pending action notification, or something
-            xhr.onerror = () => {
-                // this.actionResults.splice(idx, 1, {...item, done: true, failed: true })
-            }
+            xhr.onerror = () => {}
             xhr.onload = (r) => {
                 if (xhr.status != 200) {
-                    this.error = xhr.response
+                    this.toast((xhr.response && xhr.response.message) || 'request failed', 'error')
                     return
                 }
-                // this.actionResults.splice(idx, 1, {...item, done: true, resp: xhr.responseText})
                 this.error = null
                 if (onload) {
                     onload(xhr.response)
@@ -235,6 +263,14 @@ createApp({
             // TODO once-shot download link
             return url + '?token=' + this.session.token
         },
+        toast(message, kind) {
+            const id = ++this.toastId
+            this.toasts.push({id, message, kind: kind || 'info'})
+            setTimeout(() => this.dismissToast(id), 4000)
+        },
+        dismissToast(id) {
+            this.toasts = this.toasts.filter(t => t.id != id)
+        },
         watchPublicState() {
             this.watchStream('publicState', '/public-state')
         },
diff --git a/html/ui/app.css b/html/ui/app.css
index bee1bd9..9b90cae 100644
--- a/html/ui/app.css
+++ b/html/ui/app.css
@@ -1,12 +1,7 @@
 
 .view-links > span {
-    display: inline-block;
+    display: block;
     white-space: nowrap;
-    margin-right: 1ex;
-    margin-bottom: 1ex;
-    padding: 0.5ex;
-    border: 1pt solid;
-    border-radius: 1ex;
     cursor: pointer;
 }
 
@@ -15,9 +10,6 @@
     display: inline-block;
     margin-right: 1ex;
     margin-bottom: 1ex;
-    padding: 0.5ex;
-    border: 1px solid !important;
-    border-radius: 1ex;
     cursor: pointer;
   }
 }
@@ -37,7 +29,7 @@
   position:relative;
 
   textarea {
-    width: 64em;
+    width: 100%;
   }
 
   input[type="file"] {
diff --git a/html/ui/index.html b/html/ui/index.html
index 493e515..73e4d87 100644
--- a/html/ui/index.html
+++ b/html/ui/index.html
@@ -10,32 +10,27 @@
 
 <style>@import url('/ui/style.css');@import url('/ui/app.css');</style>
 <script src="/ui/jsonpatch.min-942279a1c4209cc2.js" integrity="sha384-GcPrkRS12jtrElEkbJcrZ8asvvb9s3mc+CUq9UW/8bL4L0bpkmh9M+oFnWN6qLq2"></script>
-<script src="/ui/app-e7fb26679b9aa0f2.js" defer integrity="sha384-4oRQalb7IIBcqQzfDkeCj53qYOP6dLsTwqcjnm3EiBa92oNDD3chUw38W2gEC+3p" type="module"></script>
-<script src="/ui/Downloads-25b2e1f4aeaaff61.js" integrity="sha384-MP2lefUuPRss5MQ11H5SzGp8Gmy+hPAdeEC79h4c/SDAp4qFGUjhxBtQL8rnP38U"></script>
-<script src="/ui/GetCopy-7e3c9678f9647d40.js" integrity="sha384-LzxUXylxE/t25HyTch8y2qvKcehvP2nqCo37swIBGEKZZUzHVJVQrS5UJDWNskTA"></script>
-<script src="/ui/ClusterAccess-e67af72c976d642c.js" integrity="sha384-QU0xM0hvd7tVSJ42IVfmL0u0uJbzyZBrxn1vVbOh/15Xa80JK9j9VieoACGYFjx2"></script>
-<script src="/ui/ClusterCAs-d6eba07c367b6306.js" integrity="sha384-2zV1VzNHw7hUS6SNIqDzIczma3Ixp3G9u6BJI4MtGHK4rNYWeCOOu9kttsZzkPYC"></script>
-<script src="/ui/Cluster-361bc6b76a062d88.js" integrity="sha384-msh65M8IktAuqPyO5c7GFLkRYTtN2wh5KN23SDNuC5m1gwPpuiEeY4qkr9g1bCi1"></script>
+<script src="/ui/app-4f0c6935250753e9.js" defer integrity="sha384-SrAfGs5pnGcgL5E78t2MszNYmdkGME9yPgtPsDg61Rljw+dfiP+rabjPnrMkWDUH" type="module"></script>
+<script src="/ui/Downloads-3c8cba0572aebfae.js" integrity="sha384-Pof/sPwhdqKGp7NUmYkDc0pSSyACabwLjkRRylZKHxRmiHBV3SGomPUMAWG9y7Ix"></script>
+<script src="/ui/GetCopy-2e04b7b63750e25a.js" integrity="sha384-sNvTYXhjog3BkYL20RzrUWIG9VGyHNO8oEiP5oxL5f2WKmLj/03fdR79FgHfzlj+"></script>
+<script src="/ui/ClusterAccess-8b4165435ba4fcac.js" integrity="sha384-C1mVnhsaxmn3Dpp1vtcBuctxxXI1Rlh+qmxicCIpNv7ukyTbB524pg0ZwhvAnfH7"></script>
+<script src="/ui/ClusterCAs-4f0a381bfb0c1b88.js" integrity="sha384-QcSHKzEHNSCqyjFELXfYFAdfmIZZwJHDzPqI2prH47jHrkeomJD60rcEMLkVAO3o"></script>
+<script src="/ui/Cluster-34a012ee0910827c.js" integrity="sha384-Q0sXP0WFJu4gHOI/8NMOGwpJvvFDNBR3T/vDCYxCWL2szAu4+sQuwHm81Jcad/ve"></script>
 <script src="/ui/Host-61916516a854adff.js" integrity="sha384-/wh3KrC0sb4MT7ekO2U84rswxI42WSH/0jB4dbDaaGaGhX60xTEZHFsdQAf7UgTG"></script>
 <body>
 
 <div id="app">
 <header>
-    <div id="logo">
-        <img src="favicon.ico" />
-        <span>Direktil Local Server</span>
-    </div>
-    <div class="utils">
+    <span id="logo"><img src="favicon.ico" /> Direktil Local Server</span>
+    <span class="utils">
         <span id="login-hdr" v-if="session.token">
             Logged in
             <button class="link" @click="copyText(session.token)">&#x1F5D0;</button>
         </span>
-
         <span>server <code>{{ serverVersion || '-----' }}</code></span>
         <span>ui     <code>{{ uiHash || '-----' }}</code></span>
-
         <span :class="publicState ? 'green' : 'red'">&#x1F5F2;</span>
-    </div>
+    </span>
 </header>
 
 <div class="error" v-if="error">
@@ -44,11 +39,13 @@
     <div class="message">{{ error.message }}</div>
 </div>
 
-<template v-if="!publicState">
-    <p>Not connected.</p>
-</template>
+<div class="toasts"><div v-for="t in toasts" :class="'toast '+t.kind" @click="dismissToast(t.id)">{{ t.message }}</div></div>
 
-<template v-else-if="publicState.Store.New">
+<main class="content" v-if="!publicState">
+    <p>Not connected.</p>
+</main>
+
+<main class="content" v-else-if="publicState.Store.New">
     <p>Store is new.</p>
     <p>Option 1: initialize a new store</p>
     <form @submit="unlockStore">
@@ -62,17 +59,17 @@
         <input type="file" ref="storeUpload" />
         <input type="submit" value="upload" />
     </form>
-</template>
+</main>
 
-<template v-else-if="!publicState.Store.Open">
+<main class="content" v-else-if="!publicState.Store.Open">
     <p>Store is not open.</p>
     <form @submit="unlockStore">
         <input type="password" name="passphrase" v-model="forms.store.pass1" required placeholder="Passphrase" />
         <input type="submit" value="unlock" :disabled="!forms.store.pass1" />
     </form>
-</template>
+</main>
 
-<template v-else-if="!state">
+<main class="content" v-else-if="!state">
     <p v-if="!session.token">Not logged in.</p>
     <p v-else>Invalid token</p>
 
@@ -80,13 +77,20 @@
         <input type="password" v-model="forms.store.pass1" required placeholder="Passphrase" />
         <input type="submit" value="log in"/>
     </form>
-</template>
+</main>
 
 <template v-else>
-  <div style="float:right;"><input type="search" placeholder="Filter" v-model="viewFilter"/></div>
-  <p class="view-links"><span v-for="v in views" @click="view = v" :class="{selected: view.type==v.type && view.name==v.name}">{{v.title}}</span></p>
-
-  <h2 v-if="view">{{view.title}}</h2>
+  <nav class="sidebar">
+    <input type="search" placeholder="Filter" v-model="viewFilter"/>
+    <p class="nav-section">Admin</p>
+    <p class="view-links"><button type="button" v-for="v in adminViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+    <p class="nav-section" v-if="clusterViews.length">Clusters</p>
+    <p class="view-links" v-if="clusterViews.length"><button type="button" v-for="v in clusterViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+    <p class="nav-section" v-if="hostViews.length">Hosts</p>
+    <p class="view-links" v-if="hostViews.length"><button type="button" v-for="v in hostViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+  </nav>
+  <main class="content">
+  <h2 v-if="view">{{ view.type == 'cluster' ? 'Cluster ' : view.type == 'host' ? 'Host ' : '' }}{{view.title}}</h2>
 
   <div v-if="view.type == 'cluster'" id="clusters">
     <Cluster :cluster="viewObj" :token="session.token" :state="state" />
@@ -147,6 +151,7 @@
   </form>
 </template>
   </div>
+  </main>
 </template>
 </div>
 </body>
diff --git a/html/ui/style.css b/html/ui/style.css
index 664d9a1..1ebf588 100644
--- a/html/ui/style.css
+++ b/html/ui/style.css
@@ -1,35 +1,231 @@
 :root {
-    --bg: #eee;
-    --color: black;
-    --bevel-dark:  darkgray;
-    --bevel-light: lightgray;
-    --link: blue;
-    --input-bg: #ddd;
-    --input-text: white;
-    --btn-bg: #eee;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: black;
-    --color: orange;
-    --bevel-dark:  #402900;
-    --bevel-light: #805300;
+    --bg: #000;
+    --color: #ddd;
+    --accent: #d4a017;
+    --dim: #555;
     --link: #31b0fa;
-    --input-bg: #111;
-    --input-text: #ddd;
-    --btn-bg: #222;
-  }
+    --input-bg: #1a1a1a;
+    --border: #333;
+    --hover: #222;
 }
 
 body {
     background: var(--bg);
     color: var(--color);
+    font-family: "Courier New", Courier, monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
 }
 
-button[disabled] {
-    opacity: 0.5;
+/* Layout */
+
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
 }
+#app {
+    display: grid;
+    height: 100vh;
+    grid-template: auto 1fr / 18em 1fr;
+    grid-template-areas: "h h" "s m";
+}
+header {
+    grid-area: h;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5em 1em;
+    border-bottom: 1px solid var(--border);
+}
+#logo > img {
+    vertical-align: middle;
+    margin-right: 0.5em;
+}
+header .utils > * {
+    margin-left: 1em;
+}
+
+.sidebar {
+    grid-area: s;
+    border-right: 1px solid var(--border);
+    padding: 0.5em;
+    overflow-y: auto;
+}
+.sidebar input[type="search"] {
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 0.5em;
+    background: var(--input-bg);
+    color: var(--color);
+    border: 1px solid var(--border);
+    padding: 0.3em 0.5em;
+    font-family: inherit;
+}
+
+.content {
+    grid-area: m;
+    padding: 1em;
+    overflow-y: auto;
+}
+
+/* Sidebar nav sections */
+
+.nav-section {
+    margin: 0.5em 0 0.2em;
+    padding: 0.2em 0.5em;
+    color: var(--dim);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-size: 0.85em;
+    border-bottom: 1px solid var(--border);
+}
+
+/* Sidebar nav items */
+
+.view-links {
+    margin: 0;
+    padding: 0;
+}
+.sidebar:focus-within .view-links > button {
+    color: var(--color);
+}
+.view-links > button {
+    display: block;
+    width: 100%;
+    padding: 0.2em 0.5em;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--dim);
+    border: none;
+    border-bottom: 1px solid var(--border);
+    background: none;
+    font: inherit;
+    text-align: left;
+    border-radius: 0;
+}
+.view-links > button:last-child {
+    border-bottom: none;
+}
+.view-links > button:hover {
+    background: var(--hover);
+    color: var(--color);
+}
+.view-links > button.selected {
+    color: var(--accent) !important;
+    border-bottom-color: var(--accent);
+}
+
+/* Headings */
+
+h2 {
+    color: var(--accent);
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.3em;
+    margin-top: 0;
+}
+h3 {
+    color: var(--accent);
+    margin: 1em 0 0.5em;
+}
+h3::before {
+    content: "── ";
+}
+h3::after {
+    content: " ──";
+}
+h4 {
+    color: var(--color);
+    margin: 0.5em 0 0.3em;
+    font-weight: bold;
+}
+
+/* Details / summary (collapsible sections) */
+
+details {
+    margin: 0.5em 0;
+    border: 1px solid var(--border);
+}
+details[open] {
+    border-color: var(--accent);
+}
+summary {
+    cursor: pointer;
+    padding: 0.3em 0.5em;
+    background: var(--hover);
+    color: var(--accent);
+    user-select: none;
+}
+summary:hover {
+    background: #2a2a2a;
+}
+details[open] summary {
+    border-bottom: 1px solid var(--border);
+}
+
+/* Tables */
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+th, td {
+    border: 1px solid var(--border);
+    padding: 0.3em 0.5em;
+    text-align: left;
+}
+th {
+    color: var(--accent);
+    font-weight: bold;
+}
+
+/* Form elements */
+
+textarea, select, input {
+    background: var(--input-bg);
+    color: var(--color);
+    border: 1px solid var(--border);
+    padding: 0.3em 0.5em;
+    font-family: inherit;
+    font-size: inherit;
+    box-sizing: border-box;
+}
+textarea:focus, select:focus, input:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+button, input[type=button], input[type=submit], ::file-selector-button {
+    background: var(--input-bg);
+    color: var(--color);
+    border: 1px solid var(--border);
+    padding: 0.3em 0.7em;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+}
+button:hover, input[type=button]:hover, input[type=submit]:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+button:active, input[type=button]:active, input[type=submit]:active {
+    background: var(--accent);
+    color: var(--bg);
+}
+button[disabled] {
+    opacity: 0.4;
+    cursor: default;
+}
+button[disabled]:hover {
+    border-color: var(--border);
+    color: var(--color);
+}
+
+/* Links */
 
 a[href], a[href]:visited, button.link {
     border: none;
@@ -37,140 +233,153 @@ a[href], a[href]:visited, button.link {
     background: none;
     cursor: pointer;
     text-decoration: none;
+    font-family: inherit;
+    font-size: inherit;
+}
+a[href]:hover {
+    text-decoration: underline;
 }
 
-table {
-    border-collapse: collapse;
+/* Radio pills */
+
+label.radio {
+    display: inline-block;
+    margin-right: 0.5em;
+    margin-bottom: 0.5em;
+    padding: 0.3em 0.7em;
+    border: 1px solid var(--border);
+    cursor: pointer;
+    user-select: none;
 }
-th, td {
-    border-left:   dotted 1pt;
-    border-right:  dotted 1pt;
-    border-bottom: dotted 1pt;
-    padding: 2pt 4pt;
+label.radio:has(input:checked) {
+    color: var(--accent);
+    border-color: var(--accent);
 }
-tr:first-child {
-    th, td {
-        border-top: dotted 1pt;
-    }
+label.radio input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
 }
-th, tr:last-child > td {
-    border-bottom: solid 1pt;
+label.radio:focus-within {
+    color: var(--accent);
+    border-color: var(--accent);
 }
 
+/* Asset checkboxes → [x] / [ ] style */
+
+.downloads label {
+    display: inline-block;
+    margin-right: 0.5em;
+    margin-bottom: 0.5em;
+    padding: 0.2em 0;
+    cursor: pointer;
+    user-select: none;
+    font-family: inherit;
+    border-bottom: 1px solid transparent;
+}
+.downloads label.selected {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+.downloads label input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.downloads label:focus-within {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+.downloads label::before {
+    content: "[ ] ";
+    color: var(--dim);
+}
+.downloads label.selected::before {
+    content: "[x] ";
+    color: var(--accent);
+}
+
+/* Toast notifications */
+
+.toasts {
+    position: fixed;
+    bottom: 1em;
+    right: 1em;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em;
+}
+.toast {
+    background: #1a1a1a;
+    border: 1px solid var(--border);
+    padding: 0.5em 1em;
+    max-width: 30em;
+    animation: fadein 0.2s;
+    font-family: inherit;
+    opacity: 1;
+}
+.toast.info {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+.toast.error {
+    background: #100;
+    border-color: #c00;
+    color: #c00;
+}
+@keyframes fadein {
+    from { opacity: 0; transform: translateY(0.5em); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Terminal output block */
+
+.term {
+    background: #000;
+    border: 1px solid var(--border);
+    padding: 0.5em;
+    word-break: break-all;
+    font-family: inherit;
+    white-space: pre-wrap;
+}
+.term a {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--link);
+}
+
+/* Misc */
+
+.green { color: #0a0; }
+.red   { color: #c00; }
+.copy { font-size: small; }
+
+.links > * { margin-left: 1ex; }
+.links > *:first-child { margin-left: 0; }
+
 .flat > * { margin-left: 1ex; }
 .flat > *:first-child { margin-left: 0; }
 
-.green { color: green; }
-.red   { color: red; }
-
-@media (prefers-color-scheme: dark) {
-  .red { color: #c00; }
-}
-
-textarea, select, input {
-    background: var(--input-bg);
-    color: var(--input-text);
-    border: solid 1pt;
-    border-color:  var(--bevel-light);
-    border-top-color:  var(--bevel-dark);
-    border-left-color: var(--bevel-dark);
-    margin: 1pt;
-
-    &:focus {
-      outline: solid 1pt var(--color);
-    }
-  }
-
-button, input[type=button], input[type=submit], ::file-selector-button {
-    background: var(--btn-bg);
-    color: var(--color);
-    border: solid 2pt;
-    border-color:  var(--bevel-dark);
-    border-top-color:  var(--bevel-light);
-    border-left-color: var(--bevel-light);
-
-    &:hover {
-      background: var(--bevel-dark);
-    }
-    &:active {
-      background: var(--bevel-dark);
-      border-color: var(--bevel-light);
-    }
-}
-
-header {
-    display: flex;
-    align-items: center;
-    border-bottom: 2pt solid;
-    margin: 0 0 1em 0;
-    padding: 1ex;
-    justify-content: space-between;
-}
-#logo > img {
-    vertical-align: middle;
-}
-header .utils > * {
-    margin-left: 1ex;
-}
-
 .error {
     display: flex;
-    position: relative;
-    background: rgba(255,0,0,0.2);
-    border: 1pt solid red;
+    background: rgba(200,0,0,0.15);
+    border: 1px solid #c00;
+    padding: 0.5em;
+    margin: 0.5em 0;
     justify-content: space-between;
     align-items: center;
 }
-.error .btn-close,
-.error .code {
+.error .btn-close {
     background: #600;
     color: white;
-    font-weight: bold;
     border: none;
-    align-self: stretch;
-    padding: 1ex 1em;
-}
-.error .code {
-    order: 1;
-
-    display: flex;
-    align-items: center;
-    text-align: center;
-}
-.error .message {
-    order: 2;
-    padding: 1ex 2em;
-}
-.error .btn-close {
-    order: 3;
-}
-
-.sheets {
-    display: flex;
-    align-items: stretch;
-}
-.sheets > div {
-    margin: 0 1ex;
-    border: 1pt solid;
-    border-radius: 6pt;
-}
-.sheets .title {
-    text-align: center;
-    font-weight: bold;
-    font-size: large;
-    padding: 2pt 6pt;
-    background: rgba(127,127,127,0.5);
-}
-.sheets .section {
-    padding: 2pt 6pt 2pt 6pt;
-    font-weight: bold;
-    border-top: 1px dotted;
-}
-.sheets section {
-    margin: 2pt 6pt 6pt 6pt;
-}
-.sheets > *:last-child > table:last-child > tr:last-child > td {
-    border-bottom: none;
+    padding: 0.3em 0.7em;
+    cursor: pointer;
 }
 
 .notif {
@@ -180,34 +389,21 @@ header .utils > * {
 .notif > div:first-child {
     position: absolute;
     min-width: 100%; height: 100%;
-    background: white;
-    opacity: 75%;
+    background: var(--bg);
+    opacity: 85%;
     text-align: center;
 }
 
-.links > * { margin-left: 1ex; }
-.links > *:first-child { margin-left: 0; }
-
-@media (prefers-color-scheme: dark) {
-  .notif > div:first-child {
-    background: black;
-  }
+.text-and-file {
+    position: relative;
+    display: block;
 }
-
-.copy { font-size: small; }
-
-label.radio {
-    display: inline-block;
-    margin-right: 1ex;
-    margin-bottom: 1ex;
-    padding: 0.5ex;
-    border: 1pt solid;
-    border-radius: 1ex;
-    cursor: pointer;
+.text-and-file textarea {
+    width: 100%;
+    box-sizing: border-box;
 }
-label.radio:has(input:checked) {
-    color: var(--link);
-}
-label.radio input {
-    display: none;
+.text-and-file input[type="file"] {
+    position: absolute;
+    bottom: 0;
+    right: 0;
 }
diff --git a/ui/app.css b/ui/app.css
index bee1bd9..9b90cae 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -1,12 +1,7 @@
 
 .view-links > span {
-    display: inline-block;
+    display: block;
     white-space: nowrap;
-    margin-right: 1ex;
-    margin-bottom: 1ex;
-    padding: 0.5ex;
-    border: 1pt solid;
-    border-radius: 1ex;
     cursor: pointer;
 }
 
@@ -15,9 +10,6 @@
     display: inline-block;
     margin-right: 1ex;
     margin-bottom: 1ex;
-    padding: 0.5ex;
-    border: 1px solid !important;
-    border-radius: 1ex;
     cursor: pointer;
   }
 }
@@ -37,7 +29,7 @@
   position:relative;
 
   textarea {
-    width: 64em;
+    width: 100%;
   }
 
   input[type="file"] {
diff --git a/ui/index.html b/ui/index.html
index dad1bf0..cd446c7 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -21,21 +21,16 @@
 
 <div id="app">
 <header>
-    <div id="logo">
-        <img src="favicon.ico" />
-        <span>Direktil Local Server</span>
-    </div>
-    <div class="utils">
+    <span id="logo"><img src="favicon.ico" /> Direktil Local Server</span>
+    <span class="utils">
         <span id="login-hdr" v-if="session.token">
             Logged in
             <button class="link" @click="copyText(session.token)">&#x1F5D0;</button>
         </span>
-
         <span>server <code>{{ serverVersion || '-----' }}</code></span>
         <span>ui     <code>{{ uiHash || '-----' }}</code></span>
-
         <span :class="publicState ? 'green' : 'red'">&#x1F5F2;</span>
-    </div>
+    </span>
 </header>
 
 <div class="error" v-if="error">
@@ -44,11 +39,13 @@
     <div class="message">{{ error.message }}</div>
 </div>
 
-<template v-if="!publicState">
-    <p>Not connected.</p>
-</template>
+<div class="toasts"><div v-for="t in toasts" :class="'toast '+t.kind" @click="dismissToast(t.id)">{{ t.message }}</div></div>
 
-<template v-else-if="publicState.Store.New">
+<main class="content" v-if="!publicState">
+    <p>Not connected.</p>
+</main>
+
+<main class="content" v-else-if="publicState.Store.New">
     <p>Store is new.</p>
     <p>Option 1: initialize a new store</p>
     <form @submit="unlockStore">
@@ -62,17 +59,17 @@
         <input type="file" ref="storeUpload" />
         <input type="submit" value="upload" />
     </form>
-</template>
+</main>
 
-<template v-else-if="!publicState.Store.Open">
+<main class="content" v-else-if="!publicState.Store.Open">
     <p>Store is not open.</p>
     <form @submit="unlockStore">
         <input type="password" name="passphrase" v-model="forms.store.pass1" required placeholder="Passphrase" />
         <input type="submit" value="unlock" :disabled="!forms.store.pass1" />
     </form>
-</template>
+</main>
 
-<template v-else-if="!state">
+<main class="content" v-else-if="!state">
     <p v-if="!session.token">Not logged in.</p>
     <p v-else>Invalid token</p>
 
@@ -80,13 +77,20 @@
         <input type="password" v-model="forms.store.pass1" required placeholder="Passphrase" />
         <input type="submit" value="log in"/>
     </form>
-</template>
+</main>
 
 <template v-else>
-  <div style="float:right;"><input type="search" placeholder="Filter" v-model="viewFilter"/></div>
-  <p class="view-links"><span v-for="v in views" @click="view = v" :class="{selected: view.type==v.type && view.name==v.name}">{{v.title}}</span></p>
-
-  <h2 v-if="view">{{view.title}}</h2>
+  <nav class="sidebar">
+    <input type="search" placeholder="Filter" v-model="viewFilter"/>
+    <p class="nav-section">Admin</p>
+    <p class="view-links"><button type="button" v-for="v in adminViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+    <p class="nav-section" v-if="clusterViews.length">Clusters</p>
+    <p class="view-links" v-if="clusterViews.length"><button type="button" v-for="v in clusterViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+    <p class="nav-section" v-if="hostViews.length">Hosts</p>
+    <p class="view-links" v-if="hostViews.length"><button type="button" v-for="v in hostViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+  </nav>
+  <main class="content">
+  <h2 v-if="view">{{ view.type == 'cluster' ? 'Cluster ' : view.type == 'host' ? 'Host ' : '' }}{{view.title}}</h2>
 
   <div v-if="view.type == 'cluster'" id="clusters">
     <Cluster :cluster="viewObj" :token="session.token" :state="state" />
@@ -147,6 +151,7 @@
   </form>
 </template>
   </div>
+  </main>
 </template>
 </div>
 </body>
diff --git a/ui/js/Cluster.js b/ui/js/Cluster.js
index 6d7cdf2..e68982a 100644
--- a/ui/js/Cluster.js
+++ b/ui/js/Cluster.js
@@ -2,18 +2,26 @@ const Cluster = {
     components: { ClusterAccess, ClusterCAs, GetCopy },
     props: [ 'cluster', 'token', 'state' ],
     template: `
-  <ClusterAccess :cluster="cluster" :token="token" :state="state" />
+  <details open>
+    <summary>Access</summary>
+    <ClusterAccess :cluster="cluster" :token="token" :state="state" />
+  </details>
 
-  <ClusterCAs :cluster="cluster" :token="token" />
+  <details open>
+    <summary>CAs</summary>
+    <ClusterCAs :cluster="cluster" :token="token" />
+  </details>
 
-  <h3>Secrets</h3>
-  <h4>Tokens</h4>
-  <section class="links">
-    <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
-  </section>
-  <h4>Passwords</h4>
-  <section class="links">
-    <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
-  </section>
+  <details open>
+    <summary>Secrets</summary>
+    <h4>Tokens</h4>
+    <section class="links">
+      <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
+    </section>
+    <h4>Passwords</h4>
+    <section class="links">
+      <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
+    </section>
+  </details>
 `
 }
diff --git a/ui/js/ClusterAccess.js b/ui/js/ClusterAccess.js
index 926c3fe..f9c8421 100644
--- a/ui/js/ClusterAccess.js
+++ b/ui/js/ClusterAccess.js
@@ -17,6 +17,8 @@ const ClusterAccess = {
             kubeUserCert: null,
             downloadSet: null,
             selectedAssets: {},
+            loading: false,
+            msg: null,
         };
     },
     computed: {
@@ -44,40 +46,43 @@ const ClusterAccess = {
         hostCount() {
             return (this.state.Hosts||[]).filter(h => h.Cluster == this.cluster.Name).length
         },
-        },
+    },
     methods: {
         sshCASign() {
             event.preventDefault();
+            this.loading = true; this.msg = null;
             fetch(`/clusters/${this.cluster.Name}/ssh/user-ca/sign`, {
                 method: 'POST',
                 body: JSON.stringify({ ...this.sshSignReq, Validity: this.signReqValidity }),
                 headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
             }).then((resp) => {
                 if (resp.ok) {
-                    resp.blob().then((cert) => { this.sshUserCert = URL.createObjectURL(cert) })
+                    resp.blob().then((cert) => { this.sshUserCert = URL.createObjectURL(cert); this.loading = false })
                 } else {
-                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
+                    resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
                 }
               })
-              .catch((e) => { alert('failed to sign: '+e); })
+              .catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
         },
         kubeCASign() {
             event.preventDefault();
+            this.loading = true; this.msg = null;
             fetch(`/clusters/${this.cluster.Name}/kube/sign`, {
                 method: 'POST',
                 body: JSON.stringify({ ...this.kubeSignReq, Validity: this.signReqValidity }),
                 headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
             }).then((resp) => {
                 if (resp.ok) {
-                    resp.blob().then((cert) => { this.kubeUserCert = URL.createObjectURL(cert) })
+                    resp.blob().then((cert) => { this.kubeUserCert = URL.createObjectURL(cert); this.loading = false })
                 } else {
-                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
+                    resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
                 }
               })
-              .catch((e) => { alert('failed to sign: '+e); })
+              .catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
         },
         generateDownloadSet() {
             event.preventDefault()
+            this.loading = true; this.msg = null;
 
             const items = [{
                 Kind: "host",
@@ -91,18 +96,18 @@ const ClusterAccess = {
                 headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
             }).then((resp) => {
                 if (resp.ok) {
-                    resp.json().then((set) => { this.downloadSet = set })
+                    resp.json().then((set) => { this.downloadSet = set; this.loading = false })
                 } else {
-                    resp.json().then((resp) => alert('failed to generate: '+resp.message))
+                    resp.json().then((resp) => { this.msg = 'failed to generate: '+resp.message; this.loading = false })
                 }
-            }).catch((e) => { alert('failed to generate: '+e) })
+            }).catch((e) => { this.msg = 'failed to generate: '+e; this.loading = false })
         },
         readFile(e, onload) {
             const file = e.target.files[0];
             if (!file) { return; }
             const reader = new FileReader();
             reader.onload = () => { onload(reader.result) };
-            reader.onerror = () => { alert("error reading file"); };
+            reader.onerror = () => { this.msg = "error reading file" };
             reader.readAsText(file);
         },
         loadPubKey(e) {
@@ -110,6 +115,14 @@ const ClusterAccess = {
                 this.sshSignReq.PubKey = v;
             });
         },
+        copyDownloadSetUrl() {
+            try {
+                navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+this.downloadSet)
+                this.$root.toast('copied!', 'info')
+            } catch (e) {
+                this.$root.toast('copy failed', 'error')
+            }
+        },
         loadCSR(e) {
             this.readFile(e, (v) => {
                 this.kubeSignReq.CSR = v;
@@ -117,8 +130,6 @@ const ClusterAccess = {
         },
     },
     template: `
-  <h3>Access</h3>
-
   <p>Grant access to:
      <label class="radio"><input type="radio" v-model="accessType" value="ssh" /> SSH</label>
      <label class="radio"><input type="radio" v-model="accessType" value="kube" /> Kubernetes</label>
@@ -127,6 +138,8 @@ const ClusterAccess = {
 
   <p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
 
+  <p class="error" v-if="msg">{{ msg }} <button class="btn-close" @click="msg=null">&times;</button></p>
+
   <div v-if="accessType == 'ssh'">
     <h4>Grant SSH access</h4>
     <p>User: <input type="text" v-model="sshSignReq.Principal"/></p>
@@ -134,7 +147,7 @@ const ClusterAccess = {
        <span class="text-and-file"><textarea v-model="sshSignReq.PubKey" style="height:3lh"></textarea>
        <input type="file" accept=".pub" @change="loadPubKey" /></span>
     </p>
-    <p><button @click="sshCASign">Sign SSH access</button>
+    <p><button :disabled="loading" @click="sshCASign">{{ loading ? 'signing...' : 'Sign SSH access' }}</button>
       <template v-if="sshUserCert">
       =&gt; <a :href="sshUserCert" download="ssh-cert.pub">Get certificate</a>
       </template>
@@ -149,9 +162,9 @@ const ClusterAccess = {
        <span class="text-and-file"><textarea v-model="kubeSignReq.CSR" style="height:7lh;"></textarea>
        <input type="file" accept=".csr" @change="loadCSR" /></span>
     </p>
-    <p><button @click="kubeCASign">Sign Kubernetes API access</button>
+    <p><button :disabled="loading" @click="kubeCASign">{{ loading ? 'signing...' : 'Sign Kubernetes API access' }}</button>
       <template v-if="kubeUserCert">
-        =&gt; <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
+        =&gt; <a :href="kubeUserCert" download="tls.crt">Get certificate</a>
       </template>
     </p>
   </div>
@@ -166,12 +179,12 @@ const ClusterAccess = {
         {{" "}}
       </template>
     </p>
-    <p><button :disabled="selectedAssetList.length==0" @click="generateDownloadSet">Generate download set</button></p>
-    <p v-if="downloadSet" style="word-break:break-all">
-      <a :href="'/public/download-set?set='+downloadSet" target="_blank">Open download set page</a>
+    <p><button :disabled="loading || selectedAssetList.length==0" @click="generateDownloadSet">{{ loading ? 'generating...' : 'Generate download set' }}</button></p>
+    <div v-if="downloadSet" class="term">
+      <a :href="'/public/download-set?set='+downloadSet" target="_blank">/public/download-set?set={{ downloadSet }}</a>
       <br/>
-      <button @click="navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+downloadSet)">Copy URL</button>
-    </p>
+      <button @click="copyDownloadSetUrl">Copy URL</button>
+    </div>
   </div>
 `
 }
diff --git a/ui/js/ClusterCAs.js b/ui/js/ClusterCAs.js
index 75e520f..eb05771 100644
--- a/ui/js/ClusterCAs.js
+++ b/ui/js/ClusterCAs.js
@@ -2,7 +2,6 @@ const ClusterCAs = {
     components: { GetCopy },
     props: [ 'cluster', 'token' ],
     template: `
-  <h3>CAs</h3>
   <table><tr><th>Name</th><th>Certificate</th><th>Signed certificates</th></tr>
   <tr v-for="ca in cluster.CAs">
     <td>{{ ca.Name }}</td>
diff --git a/ui/js/ClusterDownloadSet.js b/ui/js/ClusterDownloadSet.js
deleted file mode 100644
index 64af00d..0000000
--- a/ui/js/ClusterDownloadSet.js
+++ /dev/null
@@ -1,43 +0,0 @@
-const ClusterDownloadSet = {
-    props: [ 'cluster', 'token', 'state' ],
-    data() {
-        return {
-            signReqValidity: "1d",
-            downloadSet: null,
-        };
-    },
-    methods: {
-        generateDownloadSet() {
-            event.preventDefault()
-
-            const hosts = (this.state.Hosts||[]).filter(h => h.Cluster == this.cluster.Name)
-            const items = hosts.map(h => ({
-                Kind: "host",
-                Name: h.Name,
-                Assets: ["kernel", "initrd", "uki", "bootstrap.tar", "boot.img.gz", "boot.img", "boot.qcow2", "boot.iso", "boot.tar", "bootstrap-config", "config", "config.json", "ipxe"],
-            }))
-
-            fetch('/sign-download-set', {
-                method: 'POST',
-                body: JSON.stringify({Expiry: this.signReqValidity, Items: items}),
-                headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
-            }).then((resp) => {
-                if (resp.ok) {
-                    resp.json().then((set) => { this.downloadSet = set })
-                } else {
-                    resp.json().then((resp) => alert('failed to generate: '+resp.message))
-                }
-            }).catch((e) => { alert('failed to generate: '+e) })
-        },
-    },
-    template: `
-  <h3>Download set</h3>
-  <p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
-  <p><button @click="generateDownloadSet">Generate download set ({{ (state.Hosts||[]).filter(h => h.Cluster == cluster.Name).length }} hosts)</button></p>
-  <p v-if="downloadSet" style="word-break:break-all">
-    <a :href="'/public/download-set?set='+downloadSet" target="_blank">Open download set page</a>
-    <br/>
-    <button @click="navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+downloadSet)">Copy URL</button>
-  </p>
-`
-}
diff --git a/ui/js/Downloads.js b/ui/js/Downloads.js
index 09b94ce..558d58c 100644
--- a/ui/js/Downloads.js
+++ b/ui/js/Downloads.js
@@ -1,7 +1,7 @@
 const Downloads = {
     props: [ 'kind', 'name', 'token', 'state' ],
     data() {
-        return { createDisabled: false, selectedAssets: {} }
+        return { createDisabled: false, selectedAssets: {}, msg: null }
     },
     computed: {
         availableAssets() {
@@ -50,11 +50,12 @@ const Downloads = {
                 headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
             }).then((resp) => resp.json())
               .then((token) => { this.selectedAssets = {}; this.createDisabled = false })
-              .catch((e) => { alert('failed to create link'); this.createDisabled = false })
+              .catch((e) => { this.msg = 'failed to create link'; this.createDisabled = false })
         },
     },
     template: `
   <h4>Available assets</h4>
+  <p class="error" v-if="msg">{{ msg }} <button class="btn-close" @click="msg=null">&times;</button></p>
   <p class="downloads">
     <template v-for="asset in availableAssets">
       <label :class="{selected: selectedAssets[asset]}"><input type="checkbox" v-model="selectedAssets[asset]" />&nbsp;{{ asset }}</label>
diff --git a/ui/js/GetCopy.js b/ui/js/GetCopy.js
index aed4707..18260a2 100644
--- a/ui/js/GetCopy.js
+++ b/ui/js/GetCopy.js
@@ -1,7 +1,7 @@
 const GetCopy = {
     props: [ 'name', 'href', 'token' ],
     data() { return {showCopied: false} },
-    template: `<span class="notif"><div v-if="showCopied">copied!</div><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
+    template: `<span><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
     methods: {
         fetch() {
             event.preventDefault()
@@ -12,7 +12,7 @@ const GetCopy = {
         },
         handleFetchError(e) {
             console.log("failed to get value:", e)
-            alert('failed to get value')
+            this.$root.toast('failed to get value', 'error')
         },
         fetchAndSave() {
             this.fetch().then(resp => resp.blob()).then((value) => {
@@ -23,9 +23,12 @@ const GetCopy = {
             this.fetch()
             .then((resp) => resp.headers.get("content-type") == "application/json" ? resp.json() : resp.text())
             .then((value) => {
-                window.navigator.clipboard.writeText(value)
-                this.showCopied = true
-                setTimeout(() => { this.showCopied = false }, 1000)
+                try {
+                    window.navigator.clipboard.writeText(value)
+                    this.$root.toast('copied!', 'info')
+                } catch (e) {
+                    this.$root.toast('copy failed', 'error')
+                }
             }).catch(this.handleFetchError)
         },
     },
diff --git a/ui/js/app.js b/ui/js/app.js
index eb946c2..946c9c1 100644
--- a/ui/js/app.js
+++ b/ui/js/app.js
@@ -21,11 +21,17 @@ createApp({
             uiHash: null,
             watchingState: false,
             state: null,
+            toasts: [],
+            toastId: 0,
         }
     },
     mounted() {
         this.session = JSON.parse(sessionStorage.state || "{}")
         this.watchPublicState()
+        document.addEventListener('keydown', (e) => this.onKeydown(e))
+    },
+    unmounted() {
+        document.removeEventListener('keydown', (e) => this.onKeydown(e))
     },
     watch: {
         session: {
@@ -56,13 +62,16 @@ createApp({
     },
 
     computed: {
-        views() {
-            var views = [{type: "actions", name: "admin", title: "Admin actions"}];
-
-            (this.state.Clusters||[]).forEach((c) => views.push({type: "cluster", name: c.Name, title: `Cluster ${c.Name}`}));
-            (this.state.Hosts   ||[]).forEach((c) => views.push({type: "host",    name: c.Name, title: `Host ${c.Name}`}));
-
-            return views.filter((v) => v.type != "host" || v.name.includes(this.viewFilter));
+        adminViews() {
+            return [{type: "actions", name: "admin", title: "Admin actions"}];
+        },
+        clusterViews() {
+            return (this.state.Clusters||[]).map((c) => ({type: "cluster", name: c.Name, title: c.Name}));
+        },
+        hostViews() {
+            return (this.state.Hosts||[])
+              .filter((h) => h.Name.includes(this.viewFilter))
+              .map((h) => ({type: "host", name: h.Name, title: h.Name}));
         },
         viewObj() {
             if (this.view) {
@@ -84,9 +93,32 @@ createApp({
         any(array) {
             return array && array.length != 0;
         },
+        isActive(v) {
+            return this.view && this.view.type == v.type && this.view.name == v.name
+        },
+        onKeydown(e) {
+            if ((e.ctrlKey || e.metaKey) && e.key == 'k') {
+                e.preventDefault()
+                this.$nextTick(() => {
+                    const el = document.querySelector('.sidebar input[type="search"]')
+                    if (el) el.focus()
+                })
+                return
+            }
+
+            if (e.key == 'Escape') {
+                this.viewFilter = ''
+                return
+            }
+        },
         copyText(text) {
             event.preventDefault()
-            window.navigator.clipboard.writeText(text)
+            try {
+                window.navigator.clipboard.writeText(text)
+                this.toast('copied!', 'info')
+            } catch (e) {
+                this.toast('copy failed: ' + e, 'error')
+            }
         },
         setToken() {
             event.preventDefault()
@@ -177,16 +209,12 @@ createApp({
             var xhr = new XMLHttpRequest()
 
             xhr.responseType = 'json'
-            // TODO spinner, pending action notification, or something
-            xhr.onerror = () => {
-                // this.actionResults.splice(idx, 1, {...item, done: true, failed: true })
-            }
+            xhr.onerror = () => {}
             xhr.onload = (r) => {
                 if (xhr.status != 200) {
-                    this.error = xhr.response
+                    this.toast((xhr.response && xhr.response.message) || 'request failed', 'error')
                     return
                 }
-                // this.actionResults.splice(idx, 1, {...item, done: true, resp: xhr.responseText})
                 this.error = null
                 if (onload) {
                     onload(xhr.response)
@@ -235,6 +263,14 @@ createApp({
             // TODO once-shot download link
             return url + '?token=' + this.session.token
         },
+        toast(message, kind) {
+            const id = ++this.toastId
+            this.toasts.push({id, message, kind: kind || 'info'})
+            setTimeout(() => this.dismissToast(id), 4000)
+        },
+        dismissToast(id) {
+            this.toasts = this.toasts.filter(t => t.id != id)
+        },
         watchPublicState() {
             this.watchStream('publicState', '/public-state')
         },
diff --git a/ui/style.css b/ui/style.css
index 664d9a1..1ebf588 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -1,35 +1,231 @@
 :root {
-    --bg: #eee;
-    --color: black;
-    --bevel-dark:  darkgray;
-    --bevel-light: lightgray;
-    --link: blue;
-    --input-bg: #ddd;
-    --input-text: white;
-    --btn-bg: #eee;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: black;
-    --color: orange;
-    --bevel-dark:  #402900;
-    --bevel-light: #805300;
+    --bg: #000;
+    --color: #ddd;
+    --accent: #d4a017;
+    --dim: #555;
     --link: #31b0fa;
-    --input-bg: #111;
-    --input-text: #ddd;
-    --btn-bg: #222;
-  }
+    --input-bg: #1a1a1a;
+    --border: #333;
+    --hover: #222;
 }
 
 body {
     background: var(--bg);
     color: var(--color);
+    font-family: "Courier New", Courier, monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
 }
 
-button[disabled] {
-    opacity: 0.5;
+/* Layout */
+
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
 }
+#app {
+    display: grid;
+    height: 100vh;
+    grid-template: auto 1fr / 18em 1fr;
+    grid-template-areas: "h h" "s m";
+}
+header {
+    grid-area: h;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5em 1em;
+    border-bottom: 1px solid var(--border);
+}
+#logo > img {
+    vertical-align: middle;
+    margin-right: 0.5em;
+}
+header .utils > * {
+    margin-left: 1em;
+}
+
+.sidebar {
+    grid-area: s;
+    border-right: 1px solid var(--border);
+    padding: 0.5em;
+    overflow-y: auto;
+}
+.sidebar input[type="search"] {
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 0.5em;
+    background: var(--input-bg);
+    color: var(--color);
+    border: 1px solid var(--border);
+    padding: 0.3em 0.5em;
+    font-family: inherit;
+}
+
+.content {
+    grid-area: m;
+    padding: 1em;
+    overflow-y: auto;
+}
+
+/* Sidebar nav sections */
+
+.nav-section {
+    margin: 0.5em 0 0.2em;
+    padding: 0.2em 0.5em;
+    color: var(--dim);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-size: 0.85em;
+    border-bottom: 1px solid var(--border);
+}
+
+/* Sidebar nav items */
+
+.view-links {
+    margin: 0;
+    padding: 0;
+}
+.sidebar:focus-within .view-links > button {
+    color: var(--color);
+}
+.view-links > button {
+    display: block;
+    width: 100%;
+    padding: 0.2em 0.5em;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--dim);
+    border: none;
+    border-bottom: 1px solid var(--border);
+    background: none;
+    font: inherit;
+    text-align: left;
+    border-radius: 0;
+}
+.view-links > button:last-child {
+    border-bottom: none;
+}
+.view-links > button:hover {
+    background: var(--hover);
+    color: var(--color);
+}
+.view-links > button.selected {
+    color: var(--accent) !important;
+    border-bottom-color: var(--accent);
+}
+
+/* Headings */
+
+h2 {
+    color: var(--accent);
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.3em;
+    margin-top: 0;
+}
+h3 {
+    color: var(--accent);
+    margin: 1em 0 0.5em;
+}
+h3::before {
+    content: "── ";
+}
+h3::after {
+    content: " ──";
+}
+h4 {
+    color: var(--color);
+    margin: 0.5em 0 0.3em;
+    font-weight: bold;
+}
+
+/* Details / summary (collapsible sections) */
+
+details {
+    margin: 0.5em 0;
+    border: 1px solid var(--border);
+}
+details[open] {
+    border-color: var(--accent);
+}
+summary {
+    cursor: pointer;
+    padding: 0.3em 0.5em;
+    background: var(--hover);
+    color: var(--accent);
+    user-select: none;
+}
+summary:hover {
+    background: #2a2a2a;
+}
+details[open] summary {
+    border-bottom: 1px solid var(--border);
+}
+
+/* Tables */
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+th, td {
+    border: 1px solid var(--border);
+    padding: 0.3em 0.5em;
+    text-align: left;
+}
+th {
+    color: var(--accent);
+    font-weight: bold;
+}
+
+/* Form elements */
+
+textarea, select, input {
+    background: var(--input-bg);
+    color: var(--color);
+    border: 1px solid var(--border);
+    padding: 0.3em 0.5em;
+    font-family: inherit;
+    font-size: inherit;
+    box-sizing: border-box;
+}
+textarea:focus, select:focus, input:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+button, input[type=button], input[type=submit], ::file-selector-button {
+    background: var(--input-bg);
+    color: var(--color);
+    border: 1px solid var(--border);
+    padding: 0.3em 0.7em;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+}
+button:hover, input[type=button]:hover, input[type=submit]:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+button:active, input[type=button]:active, input[type=submit]:active {
+    background: var(--accent);
+    color: var(--bg);
+}
+button[disabled] {
+    opacity: 0.4;
+    cursor: default;
+}
+button[disabled]:hover {
+    border-color: var(--border);
+    color: var(--color);
+}
+
+/* Links */
 
 a[href], a[href]:visited, button.link {
     border: none;
@@ -37,140 +233,153 @@ a[href], a[href]:visited, button.link {
     background: none;
     cursor: pointer;
     text-decoration: none;
+    font-family: inherit;
+    font-size: inherit;
+}
+a[href]:hover {
+    text-decoration: underline;
 }
 
-table {
-    border-collapse: collapse;
+/* Radio pills */
+
+label.radio {
+    display: inline-block;
+    margin-right: 0.5em;
+    margin-bottom: 0.5em;
+    padding: 0.3em 0.7em;
+    border: 1px solid var(--border);
+    cursor: pointer;
+    user-select: none;
 }
-th, td {
-    border-left:   dotted 1pt;
-    border-right:  dotted 1pt;
-    border-bottom: dotted 1pt;
-    padding: 2pt 4pt;
+label.radio:has(input:checked) {
+    color: var(--accent);
+    border-color: var(--accent);
 }
-tr:first-child {
-    th, td {
-        border-top: dotted 1pt;
-    }
+label.radio input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
 }
-th, tr:last-child > td {
-    border-bottom: solid 1pt;
+label.radio:focus-within {
+    color: var(--accent);
+    border-color: var(--accent);
 }
 
+/* Asset checkboxes → [x] / [ ] style */
+
+.downloads label {
+    display: inline-block;
+    margin-right: 0.5em;
+    margin-bottom: 0.5em;
+    padding: 0.2em 0;
+    cursor: pointer;
+    user-select: none;
+    font-family: inherit;
+    border-bottom: 1px solid transparent;
+}
+.downloads label.selected {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+.downloads label input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.downloads label:focus-within {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+.downloads label::before {
+    content: "[ ] ";
+    color: var(--dim);
+}
+.downloads label.selected::before {
+    content: "[x] ";
+    color: var(--accent);
+}
+
+/* Toast notifications */
+
+.toasts {
+    position: fixed;
+    bottom: 1em;
+    right: 1em;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em;
+}
+.toast {
+    background: #1a1a1a;
+    border: 1px solid var(--border);
+    padding: 0.5em 1em;
+    max-width: 30em;
+    animation: fadein 0.2s;
+    font-family: inherit;
+    opacity: 1;
+}
+.toast.info {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+.toast.error {
+    background: #100;
+    border-color: #c00;
+    color: #c00;
+}
+@keyframes fadein {
+    from { opacity: 0; transform: translateY(0.5em); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Terminal output block */
+
+.term {
+    background: #000;
+    border: 1px solid var(--border);
+    padding: 0.5em;
+    word-break: break-all;
+    font-family: inherit;
+    white-space: pre-wrap;
+}
+.term a {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--link);
+}
+
+/* Misc */
+
+.green { color: #0a0; }
+.red   { color: #c00; }
+.copy { font-size: small; }
+
+.links > * { margin-left: 1ex; }
+.links > *:first-child { margin-left: 0; }
+
 .flat > * { margin-left: 1ex; }
 .flat > *:first-child { margin-left: 0; }
 
-.green { color: green; }
-.red   { color: red; }
-
-@media (prefers-color-scheme: dark) {
-  .red { color: #c00; }
-}
-
-textarea, select, input {
-    background: var(--input-bg);
-    color: var(--input-text);
-    border: solid 1pt;
-    border-color:  var(--bevel-light);
-    border-top-color:  var(--bevel-dark);
-    border-left-color: var(--bevel-dark);
-    margin: 1pt;
-
-    &:focus {
-      outline: solid 1pt var(--color);
-    }
-  }
-
-button, input[type=button], input[type=submit], ::file-selector-button {
-    background: var(--btn-bg);
-    color: var(--color);
-    border: solid 2pt;
-    border-color:  var(--bevel-dark);
-    border-top-color:  var(--bevel-light);
-    border-left-color: var(--bevel-light);
-
-    &:hover {
-      background: var(--bevel-dark);
-    }
-    &:active {
-      background: var(--bevel-dark);
-      border-color: var(--bevel-light);
-    }
-}
-
-header {
-    display: flex;
-    align-items: center;
-    border-bottom: 2pt solid;
-    margin: 0 0 1em 0;
-    padding: 1ex;
-    justify-content: space-between;
-}
-#logo > img {
-    vertical-align: middle;
-}
-header .utils > * {
-    margin-left: 1ex;
-}
-
 .error {
     display: flex;
-    position: relative;
-    background: rgba(255,0,0,0.2);
-    border: 1pt solid red;
+    background: rgba(200,0,0,0.15);
+    border: 1px solid #c00;
+    padding: 0.5em;
+    margin: 0.5em 0;
     justify-content: space-between;
     align-items: center;
 }
-.error .btn-close,
-.error .code {
+.error .btn-close {
     background: #600;
     color: white;
-    font-weight: bold;
     border: none;
-    align-self: stretch;
-    padding: 1ex 1em;
-}
-.error .code {
-    order: 1;
-
-    display: flex;
-    align-items: center;
-    text-align: center;
-}
-.error .message {
-    order: 2;
-    padding: 1ex 2em;
-}
-.error .btn-close {
-    order: 3;
-}
-
-.sheets {
-    display: flex;
-    align-items: stretch;
-}
-.sheets > div {
-    margin: 0 1ex;
-    border: 1pt solid;
-    border-radius: 6pt;
-}
-.sheets .title {
-    text-align: center;
-    font-weight: bold;
-    font-size: large;
-    padding: 2pt 6pt;
-    background: rgba(127,127,127,0.5);
-}
-.sheets .section {
-    padding: 2pt 6pt 2pt 6pt;
-    font-weight: bold;
-    border-top: 1px dotted;
-}
-.sheets section {
-    margin: 2pt 6pt 6pt 6pt;
-}
-.sheets > *:last-child > table:last-child > tr:last-child > td {
-    border-bottom: none;
+    padding: 0.3em 0.7em;
+    cursor: pointer;
 }
 
 .notif {
@@ -180,34 +389,21 @@ header .utils > * {
 .notif > div:first-child {
     position: absolute;
     min-width: 100%; height: 100%;
-    background: white;
-    opacity: 75%;
+    background: var(--bg);
+    opacity: 85%;
     text-align: center;
 }
 
-.links > * { margin-left: 1ex; }
-.links > *:first-child { margin-left: 0; }
-
-@media (prefers-color-scheme: dark) {
-  .notif > div:first-child {
-    background: black;
-  }
+.text-and-file {
+    position: relative;
+    display: block;
 }
-
-.copy { font-size: small; }
-
-label.radio {
-    display: inline-block;
-    margin-right: 1ex;
-    margin-bottom: 1ex;
-    padding: 0.5ex;
-    border: 1pt solid;
-    border-radius: 1ex;
-    cursor: pointer;
+.text-and-file textarea {
+    width: 100%;
+    box-sizing: border-box;
 }
-label.radio:has(input:checked) {
-    color: var(--link);
-}
-label.radio input {
-    display: none;
+.text-and-file input[type="file"] {
+    position: absolute;
+    bottom: 0;
+    right: 0;
 }