add GET /config

Dockerfile

@@ -30,7 +30,7 @@ env _uncache=1
 run --mount=type=cache,id=debian-trixie-apt,target=/var/cache/apt \
  apt update \
  && yes |apt install -y genisoimage gdisk dosfstools util-linux udev binutils systemd \
- grub2 grub-pc-bin grub-efi-amd64-bin ca-certificates curl openssh-client qemu-utils wireguard-tools \
+ ca-certificates curl openssh-client qemu-utils wireguard-tools \
  erofs-utils erofsfuse cryptsetup systemd-boot-efi mtools
 
 copy --from=dkl   /bin/dkl /bin/dls /bin/

cmd/dkl-local-server/ws-configs.go

@@ -13,6 +13,20 @@ import (
 	"novit.tech/direktil/pkg/localconfig"
 )
 
+func wsFetchConfig(req *restful.Request, resp *restful.Response) {
+	cfg, err := readConfig()
+	if err != nil {
+		if os.IsNotExist(err) {
+			wsNotFound(resp)
+		} else {
+			wsError(resp, httperr.Internal(err))
+		}
+		return
+	}
+
+	resp.WriteEntity(cfg)
+}
+
 func wsUploadConfig(req *restful.Request, resp *restful.Response) {
 	cfg := &localconfig.Config{}
 	if err := req.ReadEntity(cfg); err != nil {

cmd/dkl-local-server/ws-download-set.go

@@ -15,6 +15,8 @@ import (
 	restful "github.com/emicklei/go-restful"
 	"github.com/pierrec/lz4"
 	"m.cluseau.fr/go/httperr"
+
+	"novit.tech/direktil/pkg/localconfig"
 )
 
 func globMatch(pattern, value string) bool {
@@ -27,10 +29,22 @@ type DownloadSet struct {
 	Items  []DownloadSetItem
 }
 
-func (s DownloadSet) Contains(kind, name, asset string) bool {
+func (s DownloadSet) Contains(cfg *localconfig.Config, kind, name, asset string) bool {
 	for _, item := range s.Items {
-		if item.Kind == kind && globMatch(item.Name, name) &&
+		if item.Kind != kind || !slices.Contains(item.Assets, asset) {
-			slices.Contains(item.Assets, asset) {
+			continue
+		}
+
+		// c=<cluster> matches any host of the given cluster
+		if kind == "host" && strings.HasPrefix(item.Name, "c=") {
+			host := hostOrTemplate(cfg, name)
+			if host != nil && host.ClusterName == item.Name[2:] {
+				return true
+			}
+			continue
+		}
+
+		if globMatch(item.Name, name) {
 			return true
 		}
 	}
@@ -233,7 +247,13 @@ func wsDownloadSetAsset(req *restful.Request, resp *restful.Response) {
 	name := req.PathParameter("name")
 	asset := req.PathParameter("asset")
 
-	if !set.Contains(kind, name, asset) {
+	cfg, err2 := readConfig()
+	if err2 != nil {
+		wsError(resp, err2)
+		return
+	}
+
+	if !set.Contains(cfg, kind, name, asset) {
 		wsNotFound(resp)
 		return
 	}
@@ -273,12 +293,21 @@ func wsDownloadSet(req *restful.Request, resp *restful.Response) {
 			}
 		case "host":
 			section = "Host"
+			if strings.HasPrefix(item.Name, "c=") {
+				clusterName := item.Name[2:]
+				for _, h := range cfg.Hosts {
+					if h.ClusterName == clusterName {
+						names = append(names, h.Name)
+					}
+				}
+			} else {
 				for _, h := range cfg.Hosts {
 					if globMatch(item.Name, h.Name) {
 						names = append(names, h.Name)
 					}
 				}
 			}
+		}
 
 		for _, name := range names {
 			buf.WriteString("<p>")

cmd/dkl-local-server/ws.go

@@ -73,6 +73,9 @@ func registerWS(rest *restful.Container) {
 		Doc("Sign a download set"))
 
 	// - configs API
+	ws.Route(ws.GET("/config").To(wsFetchConfig).
+		Produces(mime.JSON, mime.YAML).
+		Doc("Fetch the current configuration"))
 	ws.Route(ws.POST("/configs").To(wsUploadConfig).
 		Consumes(mime.YAML, mime.JSON).Param(ws.BodyParameter("config", "The new full configuration")).
 		Produces(mime.JSON).Writes(true).

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>
+`
+}

html/ui/Cluster-703dcdca97841304.js

@@ -1,131 +0,0 @@
-const Cluster = {
-    components: { Downloads, GetCopy },
-    props: [ 'cluster', 'token', 'state' ],
-    data() {
-        return {
-            signReqValidity: "1d",
-            sshSignReq: {
-                PubKey: "",
-                Principal: "root",
-            },
-            sshUserCert: null,
-            kubeSignReq: {
-                CSR: "",
-                User:   "",
-                Group:  "system:masters",
-            },
-            kubeUserCert: null,
-        };
-    },
-    methods: {
-        sshCASign() {
-            event.preventDefault();
-            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) })
-                } else {
-                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
-                }
-              })
-              .catch((e) => { alert('failed to sign: '+e); })
-        },
-        kubeCASign() {
-            event.preventDefault();
-            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) })
-                } else {
-                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
-                }
-              })
-              .catch((e) => { alert('failed to sign: '+e); })
-        },
-        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.readAsText(file);
-        },
-        loadPubKey(e) {
-            this.readFile(e, (v) => {
-                this.sshSignReq.PubKey = v;
-            });
-        },
-        loadCSR(e) {
-            this.readFile(e, (v) => {
-                this.kubeSignReq.CSR = v;
-            });
-        },
-    },
-    template: `
-  <h3>Access</h3>
-
-  <p>Allow cluster access from a public key</p>
-
-  <h4>Grant SSH access</h4>
-
-  <p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
-  <p>User: <input type="text" v-model="sshSignReq.Principal"/></p>
-  <p>Public key (OpenSSH format):<br/>
-     <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>
-    <template v-if="sshUserCert">
-    =&gt; <a :href="sshUserCert" download="ssh-cert.pub">Get certificate</a>
-    </template>
-  </p>
-
-  <h4>Grant Kubernetes API access</h4>
-
-  <p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
-  <p>User: <input type="text" v-model="kubeSignReq.User"/> (by default, from the CSR)</p>
-  <p>Group: <input type="text" v-model="kubeSignReq.Group"/></p>
-  <p>Certificate signing request (PEM format):<br/>
-     <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>
-    <template v-if="kubeUserCert">
-      =&gt; <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
-    </template>
-  </p>
-
-  <h3>Tokens</h3>
-  <section class="links">
-    <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
-  </section>
-
-  <h3>Passwords</h3>
-  <section class="links">
-    <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
-  </section>
-
-  <h3>Downloads</h3>
-  <Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />
-
-  <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>
-    <td><GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" /></td>
-    <td><template v-for="signed in ca.Signed">
-      {{" "}}
-      <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
-    </template></td>
-  </tr></table>
-
-`
-}

html/ui/ClusterAccess-8b4165435ba4fcac.js

@@ -0,0 +1,190 @@
+const ClusterAccess = {
+    props: [ 'cluster', 'token', 'state' ],
+    data() {
+        return {
+            accessType: "ssh",
+            signReqValidity: "1d",
+            sshSignReq: {
+                PubKey: "",
+                Principal: "root",
+            },
+            sshUserCert: null,
+            kubeSignReq: {
+                CSR: "",
+                User:   "",
+                Group:  "system:masters",
+            },
+            kubeUserCert: null,
+            downloadSet: null,
+            selectedAssets: {},
+            loading: false,
+            msg: null,
+        };
+    },
+    computed: {
+        availableAssets() {
+            return [
+                "kernel",
+                "initrd",
+                "uki",
+                "bootstrap.tar",
+                "boot.img.gz",
+                "boot.img",
+                "boot.qcow2",
+                "boot.vmdk",
+                "boot.iso",
+                "boot.tar",
+                "bootstrap-config",
+                "config",
+                "config.json",
+                "ipxe",
+            ]
+        },
+        selectedAssetList() {
+            return this.availableAssets.filter(a => this.selectedAssets[a])
+        },
+        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); this.loading = false })
+                } else {
+                    resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
+                }
+              })
+              .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); this.loading = false })
+                } else {
+                    resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
+                }
+              })
+              .catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
+        },
+        generateDownloadSet() {
+            event.preventDefault()
+            this.loading = true; this.msg = null;
+
+            const items = [{
+                Kind: "host",
+                Name: "c=" + this.cluster.Name,
+                Assets: this.selectedAssetList,
+            }]
+
+            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; this.loading = false })
+                } else {
+                    resp.json().then((resp) => { this.msg = 'failed to generate: '+resp.message; this.loading = false })
+                }
+            }).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 = () => { this.msg = "error reading file" };
+            reader.readAsText(file);
+        },
+        loadPubKey(e) {
+            this.readFile(e, (v) => {
+                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;
+            });
+        },
+    },
+    template: `
+  <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>
+     <label class="radio"><input type="radio" v-model="accessType" value="download-set" /> Download set</label>
+  </p>
+
+  <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>
+    <p>Public key (OpenSSH format):<br/>
+       <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 :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>
+    </p>
+  </div>
+
+  <div v-if="accessType == 'kube'">
+    <h4>Grant Kubernetes API access</h4>
+    <p>User: <input type="text" v-model="kubeSignReq.User"/> (by default, from the CSR)</p>
+    <p>Group: <input type="text" v-model="kubeSignReq.Group"/></p>
+    <p>Certificate signing request (PEM format):<br/>
+       <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 :disabled="loading" @click="kubeCASign">{{ loading ? 'signing...' : 'Sign Kubernetes API access' }}</button>
+      <template v-if="kubeUserCert">
+        =&gt; <a :href="kubeUserCert" download="tls.crt">Get certificate</a>
+      </template>
+    </p>
+  </div>
+
+  <div v-if="accessType == 'download-set'">
+    <h4>Grant download access</h4>
+    <p>Generates a signed download set granting access to the selected assets for all {{ hostCount }} hosts in this cluster.</p>
+    <h4>Available assets</h4>
+    <p class="downloads">
+      <template v-for="asset in availableAssets">
+        <label :class="{selected: selectedAssets[asset]}"><input type="checkbox" v-model="selectedAssets[asset]" />&nbsp;{{ asset }}</label>
+        {{" "}}
+      </template>
+    </p>
+    <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="copyDownloadSetUrl">Copy URL</button>
+    </div>
+  </div>
+`
+}

html/ui/ClusterCAs-4f0a381bfb0c1b88.js

@@ -0,0 +1,15 @@
+const ClusterCAs = {
+    components: { GetCopy },
+    props: [ 'cluster', 'token' ],
+    template: `
+  <table><tr><th>Name</th><th>Certificate</th><th>Signed certificates</th></tr>
+  <tr v-for="ca in cluster.CAs">
+    <td>{{ ca.Name }}</td>
+    <td><GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" /></td>
+    <td><template v-for="signed in ca.Signed">
+      {{" "}}
+      <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
+    </template></td>
+  </tr></table>
+`
+}

html/ui/Downloads-3c8cba0572aebfae.js

@@ -1,12 +1,11 @@
 const Downloads = {
     props: [ 'kind', 'name', 'token', 'state' ],
     data() {
-        return { createDisabled: false, selectedAssets: {} }
+        return { createDisabled: false, selectedAssets: {}, msg: null }
     },
     computed: {
         availableAssets() {
-            return {
+            return ({
-                cluster: ['addons'],
                 host: [
                     "kernel",
                     "initrd",
@@ -23,7 +22,7 @@ const Downloads = {
                     "config.json",
                     "ipxe",
                 ],
-            }[this.kind]
+            }[this.kind] || [])
         },
         downloads() {
             return Object.entries(this.state.Downloads)
@@ -51,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>

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) => {
+                try {
                     window.navigator.clipboard.writeText(value)
-                this.showCopied = true
+                    this.$root.toast('copied!', 'info')
-                setTimeout(() => { this.showCopied = false }, 1000)
+                } catch (e) {
+                    this.$root.toast('copy failed', 'error')
+                }
             }).catch(this.handleFetchError)
         },
     },

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() {
+        adminViews() {
-            var views = [{type: "actions", name: "admin", title: "Admin actions"}];
+            return [{type: "actions", name: "admin", title: "Admin actions"}];
-
+        },
-            (this.state.Clusters||[]).forEach((c) => views.push({type: "cluster", name: c.Name, title: `Cluster ${c.Name}`}));
+        clusterViews() {
-            (this.state.Hosts   ||[]).forEach((c) => views.push({type: "host",    name: c.Name, title: `Host ${c.Name}`}));
+            return (this.state.Clusters||[]).map((c) => ({type: "cluster", name: c.Name, title: c.Name}));
-
+        },
-            return views.filter((v) => v.type != "host" || v.name.includes(this.viewFilter));
+        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()
+            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 = () => {}
-            xhr.onerror = () => {
-                // this.actionResults.splice(idx, 1, {...item, done: true, failed: true })
-            }
             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')
         },

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"] {

html/ui/index.html

@@ -10,30 +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/app-4f0c6935250753e9.js" defer integrity="sha384-SrAfGs5pnGcgL5E78t2MszNYmdkGME9yPgtPsDg61Rljw+dfiP+rabjPnrMkWDUH" type="module"></script>
-<script src="/ui/Downloads-29497c61f1fe9bf0.js" integrity="sha384-xwn49JflUBaZlQCHCn55Q9qSGqsw01Job+TXk53HLhvNhKAALN18+gNCdF0bUJW0"></script>
+<script src="/ui/Downloads-3c8cba0572aebfae.js" integrity="sha384-Pof/sPwhdqKGp7NUmYkDc0pSSyACabwLjkRRylZKHxRmiHBV3SGomPUMAWG9y7Ix"></script>
-<script src="/ui/GetCopy-7e3c9678f9647d40.js" integrity="sha384-LzxUXylxE/t25HyTch8y2qvKcehvP2nqCo37swIBGEKZZUzHVJVQrS5UJDWNskTA"></script>
+<script src="/ui/GetCopy-2e04b7b63750e25a.js" integrity="sha384-sNvTYXhjog3BkYL20RzrUWIG9VGyHNO8oEiP5oxL5f2WKmLj/03fdR79FgHfzlj+"></script>
-<script src="/ui/Cluster-703dcdca97841304.js" integrity="sha384-ifGpq/GB1nDfqczm5clTRtcfnc9UMkT+SptMyS3UG9Di3xoKORtOGGjmK5RnJx+v"></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">
+    <span id="logo"><img src="favicon.ico" /> Direktil Local Server</span>
-        <img src="favicon.ico" />
+    <span class="utils">
-        <span>Direktil Local Server</span>
-    </div>
-    <div 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">
@@ -42,11 +39,13 @@
     <div class="message">{{ error.message }}</div>
 </div>
 
-<template v-if="!publicState">
+<div class="toasts"><div v-for="t in toasts" :class="'toast '+t.kind" @click="dismissToast(t.id)">{{ t.message }}</div></div>
-    <p>Not connected.</p>
-</template>
 
-<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">
@@ -60,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>
 
@@ -78,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>
+  <nav class="sidebar">
-  <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>
+    <input type="search" placeholder="Filter" v-model="viewFilter"/>
-
+    <p class="nav-section">Admin</p>
-  <h2 v-if="view">{{view.title}}</h2>
+    <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" />
@@ -145,6 +151,7 @@
   </form>
 </template>
   </div>
+  </main>
 </template>
 </div>
 </body>

html/ui/style.css

@@ -1,35 +1,231 @@
 :root {
-    --bg: #eee;
+    --bg: #000;
-    --color: black;
+    --color: #ddd;
-    --bevel-dark:  darkgray;
+    --accent: #d4a017;
-    --bevel-light: lightgray;
+    --dim: #555;
-    --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;
     --link: #31b0fa;
-    --input-bg: #111;
+    --input-bg: #1a1a1a;
-    --input-text: #ddd;
+    --border: #333;
-    --btn-bg: #222;
+    --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] {
+/* Layout */
-    opacity: 0.5;
+
+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 {
+/* Radio pills */
-    border-collapse: collapse;
+
+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 {
+label.radio:has(input:checked) {
-    border-left:   dotted 1pt;
+    color: var(--accent);
-    border-right:  dotted 1pt;
+    border-color: var(--accent);
-    border-bottom: dotted 1pt;
-    padding: 2pt 4pt;
 }
-tr:first-child {
+label.radio input {
-    th, td {
+    position: absolute;
-        border-top: dotted 1pt;
+    opacity: 0;
+    width: 0;
+    height: 0;
 }
+label.radio:focus-within {
+    color: var(--accent);
+    border-color: var(--accent);
 }
-th, tr:last-child > td {
+
-    border-bottom: solid 1pt;
+/* 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(200,0,0,0.15);
-    background: rgba(255,0,0,0.2);
+    border: 1px solid #c00;
-    border: 1pt solid red;
+    padding: 0.5em;
+    margin: 0.5em 0;
     justify-content: space-between;
     align-items: center;
 }
-.error .btn-close,
+.error .btn-close {
-.error .code {
     background: #600;
     color: white;
-    font-weight: bold;
     border: none;
-    align-self: stretch;
+    padding: 0.3em 0.7em;
-    padding: 1ex 1em;
+    cursor: pointer;
-}
-.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;
 }
 
 .notif {
@@ -180,18 +389,21 @@ header .utils > * {
 .notif > div:first-child {
     position: absolute;
     min-width: 100%; height: 100%;
-    background: white;
+    background: var(--bg);
-    opacity: 75%;
+    opacity: 85%;
     text-align: center;
 }
 
-.links > * { margin-left: 1ex; }
+.text-and-file {
-.links > *:first-child { margin-left: 0; }
+    position: relative;
-
+    display: block;
-@media (prefers-color-scheme: dark) {
-  .notif > div:first-child {
-    background: black;
 }
+.text-and-file textarea {
+    width: 100%;
+    box-sizing: border-box;
+}
+.text-and-file input[type="file"] {
+    position: absolute;
+    bottom: 0;
+    right: 0;
 }
-
-.copy { font-size: small; }

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"] {

ui/index.html

@@ -13,27 +13,24 @@
 <script data-trunk src="js/app.js" type="module" defer></script>
 <script data-trunk src="js/Downloads.js"></script>
 <script data-trunk src="js/GetCopy.js"></script>
+<script data-trunk src="js/ClusterAccess.js"></script>
+<script data-trunk src="js/ClusterCAs.js"></script>
 <script data-trunk src="js/Cluster.js"></script>
 <script data-trunk src="js/Host.js"></script>
 <body>
 
 <div id="app">
 <header>
-    <div id="logo">
+    <span id="logo"><img src="favicon.ico" /> Direktil Local Server</span>
-        <img src="favicon.ico" />
+    <span class="utils">
-        <span>Direktil Local Server</span>
-    </div>
-    <div 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">
@@ -42,11 +39,13 @@
     <div class="message">{{ error.message }}</div>
 </div>
 
-<template v-if="!publicState">
+<div class="toasts"><div v-for="t in toasts" :class="'toast '+t.kind" @click="dismissToast(t.id)">{{ t.message }}</div></div>
-    <p>Not connected.</p>
-</template>
 
-<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">
@@ -60,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>
 
@@ -78,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>
+  <nav class="sidebar">
-  <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>
+    <input type="search" placeholder="Filter" v-model="viewFilter"/>
-
+    <p class="nav-section">Admin</p>
-  <h2 v-if="view">{{view.title}}</h2>
+    <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" />
@@ -145,6 +151,7 @@
   </form>
 </template>
   </div>
+  </main>
 </template>
 </div>
 </body>

ui/js/Cluster.js

@@ -1,131 +1,27 @@
 const Cluster = {
-    components: { Downloads, GetCopy },
+    components: { ClusterAccess, ClusterCAs, GetCopy },
     props: [ 'cluster', 'token', 'state' ],
-    data() {
-        return {
-            signReqValidity: "1d",
-            sshSignReq: {
-                PubKey: "",
-                Principal: "root",
-            },
-            sshUserCert: null,
-            kubeSignReq: {
-                CSR: "",
-                User:   "",
-                Group:  "system:masters",
-            },
-            kubeUserCert: null,
-        };
-    },
-    methods: {
-        sshCASign() {
-            event.preventDefault();
-            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) })
-                } else {
-                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
-                }
-              })
-              .catch((e) => { alert('failed to sign: '+e); })
-        },
-        kubeCASign() {
-            event.preventDefault();
-            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) })
-                } else {
-                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
-                }
-              })
-              .catch((e) => { alert('failed to sign: '+e); })
-        },
-        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.readAsText(file);
-        },
-        loadPubKey(e) {
-            this.readFile(e, (v) => {
-                this.sshSignReq.PubKey = v;
-            });
-        },
-        loadCSR(e) {
-            this.readFile(e, (v) => {
-                this.kubeSignReq.CSR = v;
-            });
-        },
-    },
     template: `
-  <h3>Access</h3>
+  <details open>
+    <summary>Access</summary>
+    <ClusterAccess :cluster="cluster" :token="token" :state="state" />
+  </details>
 
-  <p>Allow cluster access from a public key</p>
+  <details open>
+    <summary>CAs</summary>
+    <ClusterCAs :cluster="cluster" :token="token" />
+  </details>
 
-  <h4>Grant SSH access</h4>
+  <details open>
-
+    <summary>Secrets</summary>
-  <p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
+    <h4>Tokens</h4>
-  <p>User: <input type="text" v-model="sshSignReq.Principal"/></p>
-  <p>Public key (OpenSSH format):<br/>
-     <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>
-    <template v-if="sshUserCert">
-    =&gt; <a :href="sshUserCert" download="ssh-cert.pub">Get certificate</a>
-    </template>
-  </p>
-
-  <h4>Grant Kubernetes API access</h4>
-
-  <p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
-  <p>User: <input type="text" v-model="kubeSignReq.User"/> (by default, from the CSR)</p>
-  <p>Group: <input type="text" v-model="kubeSignReq.Group"/></p>
-  <p>Certificate signing request (PEM format):<br/>
-     <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>
-    <template v-if="kubeUserCert">
-      =&gt; <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
-    </template>
-  </p>
-
-  <h3>Tokens</h3>
     <section class="links">
       <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
     </section>
-
+    <h4>Passwords</h4>
-  <h3>Passwords</h3>
     <section class="links">
       <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
     </section>
-
+  </details>
-  <h3>Downloads</h3>
-  <Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />
-
-  <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>
-    <td><GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" /></td>
-    <td><template v-for="signed in ca.Signed">
-      {{" "}}
-      <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
-    </template></td>
-  </tr></table>
-
 `
 }

ui/js/ClusterAccess.js

@@ -0,0 +1,190 @@
+const ClusterAccess = {
+    props: [ 'cluster', 'token', 'state' ],
+    data() {
+        return {
+            accessType: "ssh",
+            signReqValidity: "1d",
+            sshSignReq: {
+                PubKey: "",
+                Principal: "root",
+            },
+            sshUserCert: null,
+            kubeSignReq: {
+                CSR: "",
+                User:   "",
+                Group:  "system:masters",
+            },
+            kubeUserCert: null,
+            downloadSet: null,
+            selectedAssets: {},
+            loading: false,
+            msg: null,
+        };
+    },
+    computed: {
+        availableAssets() {
+            return [
+                "kernel",
+                "initrd",
+                "uki",
+                "bootstrap.tar",
+                "boot.img.gz",
+                "boot.img",
+                "boot.qcow2",
+                "boot.vmdk",
+                "boot.iso",
+                "boot.tar",
+                "bootstrap-config",
+                "config",
+                "config.json",
+                "ipxe",
+            ]
+        },
+        selectedAssetList() {
+            return this.availableAssets.filter(a => this.selectedAssets[a])
+        },
+        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); this.loading = false })
+                } else {
+                    resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
+                }
+              })
+              .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); this.loading = false })
+                } else {
+                    resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
+                }
+              })
+              .catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
+        },
+        generateDownloadSet() {
+            event.preventDefault()
+            this.loading = true; this.msg = null;
+
+            const items = [{
+                Kind: "host",
+                Name: "c=" + this.cluster.Name,
+                Assets: this.selectedAssetList,
+            }]
+
+            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; this.loading = false })
+                } else {
+                    resp.json().then((resp) => { this.msg = 'failed to generate: '+resp.message; this.loading = false })
+                }
+            }).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 = () => { this.msg = "error reading file" };
+            reader.readAsText(file);
+        },
+        loadPubKey(e) {
+            this.readFile(e, (v) => {
+                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;
+            });
+        },
+    },
+    template: `
+  <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>
+     <label class="radio"><input type="radio" v-model="accessType" value="download-set" /> Download set</label>
+  </p>
+
+  <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>
+    <p>Public key (OpenSSH format):<br/>
+       <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 :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>
+    </p>
+  </div>
+
+  <div v-if="accessType == 'kube'">
+    <h4>Grant Kubernetes API access</h4>
+    <p>User: <input type="text" v-model="kubeSignReq.User"/> (by default, from the CSR)</p>
+    <p>Group: <input type="text" v-model="kubeSignReq.Group"/></p>
+    <p>Certificate signing request (PEM format):<br/>
+       <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 :disabled="loading" @click="kubeCASign">{{ loading ? 'signing...' : 'Sign Kubernetes API access' }}</button>
+      <template v-if="kubeUserCert">
+        =&gt; <a :href="kubeUserCert" download="tls.crt">Get certificate</a>
+      </template>
+    </p>
+  </div>
+
+  <div v-if="accessType == 'download-set'">
+    <h4>Grant download access</h4>
+    <p>Generates a signed download set granting access to the selected assets for all {{ hostCount }} hosts in this cluster.</p>
+    <h4>Available assets</h4>
+    <p class="downloads">
+      <template v-for="asset in availableAssets">
+        <label :class="{selected: selectedAssets[asset]}"><input type="checkbox" v-model="selectedAssets[asset]" />&nbsp;{{ asset }}</label>
+        {{" "}}
+      </template>
+    </p>
+    <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="copyDownloadSetUrl">Copy URL</button>
+    </div>
+  </div>
+`
+}

ui/js/ClusterCAs.js

@@ -0,0 +1,15 @@
+const ClusterCAs = {
+    components: { GetCopy },
+    props: [ 'cluster', 'token' ],
+    template: `
+  <table><tr><th>Name</th><th>Certificate</th><th>Signed certificates</th></tr>
+  <tr v-for="ca in cluster.CAs">
+    <td>{{ ca.Name }}</td>
+    <td><GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" /></td>
+    <td><template v-for="signed in ca.Signed">
+      {{" "}}
+      <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
+    </template></td>
+  </tr></table>
+`
+}

ui/js/Downloads.js

@@ -1,12 +1,11 @@
 const Downloads = {
     props: [ 'kind', 'name', 'token', 'state' ],
     data() {
-        return { createDisabled: false, selectedAssets: {} }
+        return { createDisabled: false, selectedAssets: {}, msg: null }
     },
     computed: {
         availableAssets() {
-            return {
+            return ({
-                cluster: ['addons'],
                 host: [
                     "kernel",
                     "initrd",
@@ -23,7 +22,7 @@ const Downloads = {
                     "config.json",
                     "ipxe",
                 ],
-            }[this.kind]
+            }[this.kind] || [])
         },
         downloads() {
             return Object.entries(this.state.Downloads)
@@ -51,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>

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) => {
+                try {
                     window.navigator.clipboard.writeText(value)
-                this.showCopied = true
+                    this.$root.toast('copied!', 'info')
-                setTimeout(() => { this.showCopied = false }, 1000)
+                } catch (e) {
+                    this.$root.toast('copy failed', 'error')
+                }
             }).catch(this.handleFetchError)
         },
     },

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() {
+        adminViews() {
-            var views = [{type: "actions", name: "admin", title: "Admin actions"}];
+            return [{type: "actions", name: "admin", title: "Admin actions"}];
-
+        },
-            (this.state.Clusters||[]).forEach((c) => views.push({type: "cluster", name: c.Name, title: `Cluster ${c.Name}`}));
+        clusterViews() {
-            (this.state.Hosts   ||[]).forEach((c) => views.push({type: "host",    name: c.Name, title: `Host ${c.Name}`}));
+            return (this.state.Clusters||[]).map((c) => ({type: "cluster", name: c.Name, title: c.Name}));
-
+        },
-            return views.filter((v) => v.type != "host" || v.name.includes(this.viewFilter));
+        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()
+            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 = () => {}
-            xhr.onerror = () => {
-                // this.actionResults.splice(idx, 1, {...item, done: true, failed: true })
-            }
             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')
         },

ui/style.css

@@ -1,35 +1,231 @@
 :root {
-    --bg: #eee;
+    --bg: #000;
-    --color: black;
+    --color: #ddd;
-    --bevel-dark:  darkgray;
+    --accent: #d4a017;
-    --bevel-light: lightgray;
+    --dim: #555;
-    --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;
     --link: #31b0fa;
-    --input-bg: #111;
+    --input-bg: #1a1a1a;
-    --input-text: #ddd;
+    --border: #333;
-    --btn-bg: #222;
+    --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] {
+/* Layout */
-    opacity: 0.5;
+
+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 {
+/* Radio pills */
-    border-collapse: collapse;
+
+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 {
+label.radio:has(input:checked) {
-    border-left:   dotted 1pt;
+    color: var(--accent);
-    border-right:  dotted 1pt;
+    border-color: var(--accent);
-    border-bottom: dotted 1pt;
-    padding: 2pt 4pt;
 }
-tr:first-child {
+label.radio input {
-    th, td {
+    position: absolute;
-        border-top: dotted 1pt;
+    opacity: 0;
+    width: 0;
+    height: 0;
 }
+label.radio:focus-within {
+    color: var(--accent);
+    border-color: var(--accent);
 }
-th, tr:last-child > td {
+
-    border-bottom: solid 1pt;
+/* 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(200,0,0,0.15);
-    background: rgba(255,0,0,0.2);
+    border: 1px solid #c00;
-    border: 1pt solid red;
+    padding: 0.5em;
+    margin: 0.5em 0;
     justify-content: space-between;
     align-items: center;
 }
-.error .btn-close,
+.error .btn-close {
-.error .code {
     background: #600;
     color: white;
-    font-weight: bold;
     border: none;
-    align-self: stretch;
+    padding: 0.3em 0.7em;
-    padding: 1ex 1em;
+    cursor: pointer;
-}
-.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;
 }
 
 .notif {
@@ -180,18 +389,21 @@ header .utils > * {
 .notif > div:first-child {
     position: absolute;
     min-width: 100%; height: 100%;
-    background: white;
+    background: var(--bg);
-    opacity: 75%;
+    opacity: 85%;
     text-align: center;
 }
 
-.links > * { margin-left: 1ex; }
+.text-and-file {
-.links > *:first-child { margin-left: 0; }
+    position: relative;
-
+    display: block;
-@media (prefers-color-scheme: dark) {
-  .notif > div:first-child {
-    background: black;
 }
+.text-and-file textarea {
+    width: 100%;
+    box-sizing: border-box;
+}
+.text-and-file input[type="file"] {
+    position: absolute;
+    bottom: 0;
+    right: 0;
 }
-
-.copy { font-size: small; }