fix ws config as yaml

It's used in other custom pages too

cmd/dkl-local-server/boot-iso.go

@@ -51,7 +51,7 @@ func buildBootISO(out io.Writer, ctx *renderContext) (err error) {
 		}
 
 		// create a tag file
-		bootstrapBytes, _, err := ctx.BootstrapConfig()
+		bootstrapBytes, err := ctx.BootstrapConfig()
 		if err != nil {
 			return
 		}

cmd/dkl-local-server/bootv2.go

@@ -4,7 +4,6 @@ import (
 	"archive/tar"
 	"bytes"
 	"crypto"
-	"encoding/json"
 	"fmt"
 	"io"
 	"log"
@@ -12,26 +11,20 @@ import (
 	"os"
 
 	"github.com/klauspost/compress/zstd"
-	yaml "gopkg.in/yaml.v2"
 
 	"novit.tech/direktil/pkg/cpiocat"
 )
 
-func renderBootstrapConfig(w http.ResponseWriter, r *http.Request, ctx *renderContext, asJson bool) (err error) {
+func renderBootstrapConfig(w http.ResponseWriter, ctx *renderContext) (err error) {
 	log.Printf("sending bootstrap config for %q", ctx.Host.Name)
 
-	_, cfg, err := ctx.BootstrapConfig()
+	ba, err := ctx.BootstrapConfig()
 	if err != nil {
 		return err
 	}
 
-	if asJson {
-		err = json.NewEncoder(w).Encode(cfg)
-	} else {
-		err = yaml.NewEncoder(w).Encode(cfg)
-	}
-
-	return nil
+	_, err = w.Write(ba)
+	return
 }
 
 func buildInitrd(out io.Writer, ctx *renderContext) (err error) {
@@ -58,8 +51,10 @@ func buildInitrd(out io.Writer, ctx *renderContext) (err error) {
 	for _, layer := range cfg.Layers {
 		switch layer {
 		case "modules":
-
 			layerVersion := ctx.Host.Versions[layer]
+			if layerVersion == "" {
+				layerVersion = ctx.Host.Kernel
+			}
 			modulesPath, err := distFetch("layers", layer, layerVersion)
 			if err != nil {
 				return err
@@ -70,7 +65,7 @@ func buildInitrd(out io.Writer, ctx *renderContext) (err error) {
 	}
 
 	// config
-	cfgBytes, _, err := ctx.BootstrapConfig()
+	cfgBytes, err := ctx.BootstrapConfig()
 	if err != nil {
 		return
 	}

cmd/dkl-local-server/cluster-render-context.go

@@ -117,7 +117,12 @@ func templateFuncs(sslCfg *cfsslconfig.Config) map[string]any {
 				return
 			}
 
-			s = string(ca.Cert)
+			extra, err := caExtraCerts(cluster, name)
+			if err != nil {
+				return
+			}
+
+			s = string(ca.Cert) + extra
 			return
 		},
 
@@ -127,13 +132,18 @@ func templateFuncs(sslCfg *cfsslconfig.Config) map[string]any {
 				return
 			}
 
+			extra, err := caExtraCerts(cluster, name)
+			if err != nil {
+				return
+			}
+
 			dir := "/etc/tls-ca/" + name
 
 			return asYaml([]config.FileDef{
 				{
 					Path:    path.Join(dir, "ca.crt"),
 					Mode:    0644,
-					Content: string(ca.Cert),
+					Content: string(ca.Cert) + extra,
 				},
 				{
 					Path:    path.Join(dir, "ca.key"),

cmd/dkl-local-server/initrd.go

@@ -4,14 +4,12 @@ import (
 	"encoding/json"
 	"log"
 	"net/http"
-
-	yaml "gopkg.in/yaml.v2"
 )
 
-func renderConfig(w http.ResponseWriter, r *http.Request, ctx *renderContext, asJson bool) (err error) {
+func renderConfig(w http.ResponseWriter, _ *http.Request, ctx *renderContext, asJson bool) (err error) {
 	log.Printf("sending config for %q", ctx.Host.Name)
 
-	_, cfg, err := ctx.Config()
+	cfgBytes, cfg, err := ctx.Config()
 	if err != nil {
 		return err
 	}
@@ -19,7 +17,7 @@ func renderConfig(w http.ResponseWriter, r *http.Request, ctx *renderContext, as
 	if asJson {
 		err = json.NewEncoder(w).Encode(cfg)
 	} else {
-		err = yaml.NewEncoder(w).Encode(cfg)
+		_, err = w.Write(cfgBytes)
 	}
 
 	return nil

cmd/dkl-local-server/render-context.go

@@ -4,6 +4,7 @@ import (
 	"bytes"
 	"crypto/sha1"
 	"crypto/sha256"
+	"encoding/base64"
 	"encoding/hex"
 	"encoding/json"
 	"fmt"
@@ -25,8 +26,6 @@ import (
 
 	"novit.tech/direktil/pkg/config"
 	"novit.tech/direktil/pkg/localconfig"
-
-	bsconfig "novit.tech/direktil/pkg/bootstrapconfig"
 )
 
 var cmdlineParam = restful.QueryParameter("cmdline", "Linux kernel cmdline addition")
@@ -101,6 +100,8 @@ func (ctx *renderContext) Config() (ba []byte, cfg *config.Config, err error) {
 		return
 	}
 
+	// log.Print("rendered config:\n", string(ba))
+
 	cfg = &config.Config{}
 	if err = yaml.Unmarshal(ba, cfg); err != nil {
 		return
@@ -109,19 +110,8 @@ func (ctx *renderContext) Config() (ba []byte, cfg *config.Config, err error) {
 	return
 }
 
-func (ctx *renderContext) BootstrapConfig() (ba []byte, cfg *bsconfig.Config, err error) {
-	ba, err = ctx.render(ctx.Host.BootstrapConfig)
-	if err != nil {
-		return
-	}
-
-	cfg = &bsconfig.Config{}
-	if err = yaml.Unmarshal(ba, cfg); err != nil {
-		log.Print("invalid bootstrap config yaml:\n", string(ba))
-		return
-	}
-
-	return
+func (ctx *renderContext) BootstrapConfig() (ba []byte, err error) {
+	return ctx.render(ctx.Host.BootstrapConfig)
 }
 
 func (ctx *renderContext) render(templateText string) (ba []byte, err error) {
@@ -184,6 +174,10 @@ func (ctx *renderContext) TemplateFuncs() map[string]any {
 	}
 
 	for name, method := range map[string]any{
+		"base64": func(input string) string {
+			return base64.StdEncoding.EncodeToString([]byte(input))
+		},
+
 		"host_ip": func() (s string) {
 			return ctx.Host.IPs[0]
 		},
@@ -236,6 +230,10 @@ func (ctx *renderContext) TemplateFuncs() map[string]any {
 				Content: string(userCA),
 			}})
 		},
+		"ssh_user_ca_pub": func(cluster string) (s string, err error) {
+			userCA, err := sshCAPubKey(cluster)
+			return string(userCA), err
+		},
 		"ssh_host_keys": func(dir, cluster, host string) (s string, err error) {
 			if host == "" {
 				host = ctx.Host.Name
@@ -270,6 +268,20 @@ func (ctx *renderContext) TemplateFuncs() map[string]any {
 
 			return asYaml(files)
 		},
+		"ssh_host_key": func(type_ string) (s string, err error) {
+			pair, err := ctx.sshHostKeyPair(type_)
+			if err != nil {
+				return
+			}
+			return pair.Private, nil
+		},
+		"ssh_host_pubkey": func(type_ string) (s string, err error) {
+			pair, err := ctx.sshHostKeyPair(type_)
+			if err != nil {
+				return
+			}
+			return pair.Public, nil
+		},
 		"host_download_token": func() (token string, err error) {
 			key := ctx.Host.Name
 			token, found, err := hostDownloadTokens.Get(key)
@@ -337,3 +349,19 @@ func (ctx *renderContext) TemplateFuncs() map[string]any {
 
 	return funcs
 }
+
+func (ctx *renderContext) sshHostKeyPair(type_ string) (kp SSHKeyPair, err error) {
+	pairs, err := getSSHKeyPairs(ctx.Host.Name)
+	if err != nil {
+		return
+	}
+
+	for _, pair := range pairs {
+		if pair.Type == type_ {
+			return pair, nil
+		}
+	}
+
+	err = fmt.Errorf("no key pair with type %q", type_)
+	return
+}

cmd/dkl-local-server/ws-cluster-cas.go

@@ -79,6 +79,17 @@ func getUsableClusterCA(cluster, name string) (ca CA, err error) {
 	return
 }
 
+func caExtraCerts(cluster, name string) (extra string, err error) {
+	cfg, err := readConfig()
+	if err != nil {
+		return
+	}
+	if cfg.ExtraCaCerts != nil {
+		extra = cfg.ExtraCaCerts[cluster+"/"+name]
+	}
+	return
+}
+
 var clusterCASignedKeys = newClusterSecretKV[KeyCert]("CA-signed-keys")
 
 func wsClusterCASignedKeys(req *restful.Request, resp *restful.Response) {

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

@@ -211,9 +211,7 @@ func renderHost(w http.ResponseWriter, r *http.Request, what string, host *local
 
 	// boot v2
 	case "bootstrap-config":
-		err = renderBootstrapConfig(w, r, ctx, false)
-	case "bootstrap-config.json":
-		err = renderBootstrapConfig(w, r, ctx, true)
+		err = renderBootstrapConfig(w, ctx)
 
 	default:
 		http.NotFound(w, r)

go.mod

@@ -25,7 +25,7 @@ require (
 	gopkg.in/yaml.v2 v2.4.0
 	k8s.io/apimachinery v0.33.2
 	m.cluseau.fr/go v0.0.0-20230809064045-12c5a121c766
-	novit.tech/direktil/pkg v0.0.0-20250706092353-d857af8032a1
+	novit.tech/direktil/pkg v0.0.0-20260221072850-b72bed72bb51
 )
 
 replace github.com/zmap/zlint/v3 => github.com/zmap/zlint/v3 v3.3.1

go.sum

@@ -346,5 +346,7 @@ k8s.io/utils v0.0.0-20250604170112-4c0f3b243397 h1:hwvWFiBzdWw1FhfY1FooPn3kzWuJ8
 k8s.io/utils v0.0.0-20250604170112-4c0f3b243397/go.mod h1:OLgZIPagt7ERELqWJFomSt595RzquPNLL48iOWgYOg0=
 m.cluseau.fr/go v0.0.0-20230809064045-12c5a121c766 h1:JRzMBDbUwrTTGDJaJSH0ap4vRL0Q9CN1bG8a6n49eaQ=
 m.cluseau.fr/go v0.0.0-20230809064045-12c5a121c766/go.mod h1:BMv3aOSYpupuiiG3Ch3ND88aB5CfAks3YZuRLE8j1ls=
-novit.tech/direktil/pkg v0.0.0-20250706092353-d857af8032a1 h1:hKj9qhbTAoTxYIj6KaMLJp9I+bvZfkSM/QwK8Bd496o=
-novit.tech/direktil/pkg v0.0.0-20250706092353-d857af8032a1/go.mod h1:zjezU6tELE880oYHs/WAauGBupKIEQQ7KqWTB69RW10=
+novit.tech/direktil/pkg v0.0.0-20260210141740-4d5661fa8ecd h1:proGf8Cid9tzJzoRbqQHGGpZZKTpUDFwOREbjYrCbkM=
+novit.tech/direktil/pkg v0.0.0-20260210141740-4d5661fa8ecd/go.mod h1:zjezU6tELE880oYHs/WAauGBupKIEQQ7KqWTB69RW10=
+novit.tech/direktil/pkg v0.0.0-20260221072850-b72bed72bb51 h1:NBcpvWcTBMzFos0pkuLsbVCQ+mHf8KqNOdVywMX6FFk=
+novit.tech/direktil/pkg v0.0.0-20260221072850-b72bed72bb51/go.mod h1:zjezU6tELE880oYHs/WAauGBupKIEQQ7KqWTB69RW10=

html/ui/app-7f4645e84eaae7ce.js

@@ -133,7 +133,12 @@ createApp({
             })
         },
         uploadConfig() {
-            this.apiPost('/configs', this.$refs.configUpload.files[0], (v) => {}, "text/vnd.yaml")
+            const file = this.$refs.configUpload.files[0];
+            let contentType = "text/vnd.yaml";
+            if (file.name.endsWith(".json")) {
+                contentType = "application/json";
+            }
+            this.apiPost('/configs', file, (v) => {}, contentType, true)
         },
         hostFromTemplateAdd() {
             let v = this.forms.hostFromTemplate;
@@ -148,7 +153,7 @@ createApp({
             }
             this.apiDelete('/hosts-from-template/'+v, (v) => { this.forms.hostFromTemplateDel = "" });
         },
-        apiPost(action, data, onload, contentType = 'application/json') {
+        apiPost(action, data, onload, contentType = 'application/json', raw = false) {
             event.preventDefault()
 
             if (data === undefined) {
@@ -190,7 +195,7 @@ createApp({
                 xhr.setRequestHeader('Authorization', 'Bearer '+this.session.token)
             }
 
-            if (contentType == "application/json") {
+            if (!raw && contentType == "application/json") {
                 xhr.send(JSON.stringify(data))
             } else {
                 xhr.send(data)

html/ui/app.css

@@ -0,0 +1,42 @@
+
+.view-links > span {
+    display: inline-block;
+    white-space: nowrap;
+    margin-right: 1ex;
+    margin-bottom: 1ex;
+    padding: 0.5ex;
+    border: 1pt solid;
+    border-radius: 1ex;
+    cursor: pointer;
+}
+
+.downloads, .download-links {
+  & > * {
+    display: inline-block;
+    margin-right: 1ex;
+    margin-bottom: 1ex;
+    padding: 0.5ex;
+    border: 1px solid;
+    border-radius: 1ex;
+    cursor: pointer;
+  }
+}
+
+.downloads, .view-links {
+  & > .selected {
+    color: var(--link);
+  }
+}
+
+.text-and-file {
+  position:relative;
+
+  textarea {
+    width: 64em;
+  }
+
+  input[type="file"] {
+    position:absolute;
+    bottom:0;right:0;
+  }
+}

html/ui/index.html

@@ -6,247 +6,11 @@
 
 <link rel="icon" href="favicon.ico" />
 
-<style>: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;
-    --link: #31b0fa;
-    --input-bg: #111;
-    --input-text: #ddd;
-    --btn-bg: #222;
-  }
-}
 
-body {
-    background: var(--bg);
-    color: var(--color);
-}
-
-button[disabled] {
-    opacity: 0.5;
-}
-
-a[href], a[href]:visited, button.link {
-    border: none;
-    color: var(--link);
-    background: none;
-    cursor: pointer;
-    text-decoration: none;
-}
-
-table {
-    border-collapse: collapse;
-}
-th, td {
-    border-left:   dotted 1pt;
-    border-right:  dotted 1pt;
-    border-bottom: dotted 1pt;
-    padding: 2pt 4pt;
-}
-tr:first-child > th {
-    border-top: dotted 1pt;
-}
-th, tr:last-child > td {
-    border-bottom: solid 1pt;
-}
-
-.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;
-    justify-content: space-between;
-    align-items: center;
-}
-.error .btn-close,
-.error .code {
-    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;
-}
-
-.notif {
-    display: inline-block;
-    position: relative;
-}
-.notif > div:first-child {
-    position: absolute;
-    min-width: 100%; height: 100%;
-    background: white;
-    opacity: 75%;
-    text-align: center;
-}
-
-.links > * { margin-left: 1ex; }
-.links > *:first-child { margin-left: 0; }
-
-@media (prefers-color-scheme: dark) {
-  .notif > div:first-child {
-    background: black;
-  }
-}
-
-.copy { font-size: small; }
-</style>
-<style>
-.view-links > span {
-    display: inline-block;
-    white-space: nowrap;
-    margin-right: 1ex;
-    margin-bottom: 1ex;
-    padding: 0.5ex;
-    border: 1pt solid;
-    border-radius: 1ex;
-    cursor: pointer;
-}
-
-.downloads, .download-links {
-  & > * {
-    display: inline-block;
-    margin-right: 1ex;
-    margin-bottom: 1ex;
-    padding: 0.5ex;
-    border: 1px solid;
-    border-radius: 1ex;
-    cursor: pointer;
-  }
-}
-
-.downloads, .view-links {
-  & > .selected {
-    color: var(--link);
-  }
-}
-
-.text-and-file {
-  position:relative;
-
-  textarea {
-    width: 64em;
-  }
-
-  input[type="file"] {
-    position:absolute;
-    bottom:0;right:0;
-  }
-}
-</style>
+<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-492d80052b1d2654.js" defer integrity="sha384-uSjgCS+NzQPUHO1r5S81fX5l/4Q/MVAvhLXeDfu/fFdDRUzHu/EBrKEw8v5OQeMv" type="module"></script>
+<script src="/ui/app-7f4645e84eaae7ce.js" defer integrity="sha384-31uiQnXVSPLDq61o+chfyKRkSdkmzv023M7KafOo+0xRw5AM70BUFyYO6yo0kPiZ" type="module"></script>
 <script src="/ui/Downloads-c9374f19f52c46d.js" integrity="sha384-WQIkCSxlUkvu4jFIWwS3bESMaazGwwnBn9dyvB7nItz3L8BmusRMsJACzfJa7sC4"></script>
 <script src="/ui/GetCopy-7e3c9678f9647d40.js" integrity="sha384-LzxUXylxE/t25HyTch8y2qvKcehvP2nqCo37swIBGEKZZUzHVJVQrS5UJDWNskTA"></script>
 <script src="/ui/Cluster-703dcdca97841304.js" integrity="sha384-ifGpq/GB1nDfqczm5clTRtcfnc9UMkT+SptMyS3UG9Di3xoKORtOGGjmK5RnJx+v"></script>

html/ui/style.css

@@ -0,0 +1,195 @@
+: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;
+    --link: #31b0fa;
+    --input-bg: #111;
+    --input-text: #ddd;
+    --btn-bg: #222;
+  }
+}
+
+body {
+    background: var(--bg);
+    color: var(--color);
+}
+
+button[disabled] {
+    opacity: 0.5;
+}
+
+a[href], a[href]:visited, button.link {
+    border: none;
+    color: var(--link);
+    background: none;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+table {
+    border-collapse: collapse;
+}
+th, td {
+    border-left:   dotted 1pt;
+    border-right:  dotted 1pt;
+    border-bottom: dotted 1pt;
+    padding: 2pt 4pt;
+}
+tr:first-child > th {
+    border-top: dotted 1pt;
+}
+th, tr:last-child > td {
+    border-bottom: solid 1pt;
+}
+
+.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;
+    justify-content: space-between;
+    align-items: center;
+}
+.error .btn-close,
+.error .code {
+    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;
+}
+
+.notif {
+    display: inline-block;
+    position: relative;
+}
+.notif > div:first-child {
+    position: absolute;
+    min-width: 100%; height: 100%;
+    background: white;
+    opacity: 75%;
+    text-align: center;
+}
+
+.links > * { margin-left: 1ex; }
+.links > *:first-child { margin-left: 0; }
+
+@media (prefers-color-scheme: dark) {
+  .notif > div:first-child {
+    background: black;
+  }
+}
+
+.copy { font-size: small; }

ui/build

@@ -0,0 +1 @@
+trunk build --release

ui/index.html

@@ -6,8 +6,9 @@
 <link data-trunk rel="copy-file" href="favicon.ico" />
 <link rel="icon" href="favicon.ico" />
 <link data-trunk rel="copy-file" href="js/vue.esm-browser.js" />
-<link data-trunk rel="inline" href="style.css" />
-<link data-trunk rel="inline" href="app.css" />
+<link data-trunk rel="copy-file" href="style.css" />
+<link data-trunk rel="copy-file" href="app.css" />
+<style>@import url('/ui/style.css');@import url('/ui/app.css');</style>
 <script data-trunk src="js/jsonpatch.min.js"></script>
 <script data-trunk src="js/app.js" type="module" defer></script>
 <script data-trunk src="js/Downloads.js"></script>

ui/js/app.js

@@ -133,7 +133,12 @@ createApp({
             })
         },
         uploadConfig() {
-            this.apiPost('/configs', this.$refs.configUpload.files[0], (v) => {}, "text/vnd.yaml")
+            const file = this.$refs.configUpload.files[0];
+            let contentType = "text/vnd.yaml";
+            if (file.name.endsWith(".json")) {
+                contentType = "application/json";
+            }
+            this.apiPost('/configs', file, (v) => {}, contentType, true)
         },
         hostFromTemplateAdd() {
             let v = this.forms.hostFromTemplate;
@@ -148,7 +153,7 @@ createApp({
             }
             this.apiDelete('/hosts-from-template/'+v, (v) => { this.forms.hostFromTemplateDel = "" });
         },
-        apiPost(action, data, onload, contentType = 'application/json') {
+        apiPost(action, data, onload, contentType = 'application/json', raw = false) {
             event.preventDefault()
 
             if (data === undefined) {
@@ -190,7 +195,7 @@ createApp({
                 xhr.setRequestHeader('Authorization', 'Bearer '+this.session.token)
             }
 
-            if (contentType == "application/json") {
+            if (!raw && contentType == "application/json") {
                 xhr.send(JSON.stringify(data))
             } else {
                 xhr.send(data)