From 63134725d1e2c0b61ba71cb6a3098616475e0a17 Mon Sep 17 00:00:00 2001
From: tv <tv@krebsco.de>
Date: Fri, 6 Nov 2026 23:56:05 +0100
Subject: dashboard: document root in title

---
 docs/dashboard.md                |  6 ++++--
 src/api/dashboard/dashboard.html | 23 ++++++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/docs/dashboard.md b/docs/dashboard.md
index eeeca9b..afcd755 100644
--- a/docs/dashboard.md
+++ b/docs/dashboard.md
@@ -250,7 +250,8 @@ second likewise (`…BytesPerSec`, `bytesPerSec`).
 
 ## Document
 
-The swarm's document, as this node holds it, its first level open. A branch is read
+The swarm's document, as this node holds it: its keys listed at the top level, how
+many beside the title, with the `+` that adds one. A branch is read
 when opened, and read again when the document changes there; what changed or came
 breathes once, as the map's labels do: its row glows and fades.
 
@@ -261,7 +262,8 @@ to the whole swarm like any other:
   or list whole. Saved, it is shown open. The red `Delete` beside `Save` deletes the
   entry instead, on a second click (`Delete: sure?`) from half a second to 3 s later: a
   double-click doesn't delete.
-* **`+` on a map's row** adds a key and its value.
+* **`+` on a map's row** adds a key and its value (beside the title: a key at the top
+  level).
 * **`+` on a list's row** inserts an item at an index (`-1`: at the end); the items
   from there on move up.
 
diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index baffcf2..8bec226 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -76,6 +76,7 @@
   section.collapsed { align-self: start; }
   section.collapsed h2 { margin: 0; }
   section.collapsed h2 .toggle { display: none; }
+  section.collapsed h2 button.add { display: none; }
   /* A choice beside a box's title (the console's filter). */
   section h2 label.choice { font-size: 12px; text-transform: none; letter-spacing: 0;
     margin-left: 1em; cursor: pointer; }
@@ -240,11 +241,17 @@
     max-height: 20em; overflow: auto; }
   .note { color: var(--muted); font-style: italic; }
   .error { color: var(--bad); }
-  .tree button.add { font: inherit; line-height: 1; padding: 0 4px; margin-left: 4px;
+  .tree button.add, #document-head button.add { font: inherit; line-height: 1; padding: 0 4px; margin-left: 4px;
     color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 3px;
     cursor: pointer; }
-  .tree button.add:hover { color: var(--fg); border-color: var(--muted); }
+  .tree button.add:hover, #document-head button.add:hover { color: var(--fg); border-color: var(--muted); }
   .tree .nested { padding-left: 1.1em; }
+  /* The store's root is the box: its keys listed at the top level, its size and its "+"
+     in the title (`#document-head`). */
+  #document > details.root { padding-left: 0; }
+  #document > details.root > summary { display: none; }
+  section h2 .count { text-transform: none; letter-spacing: 0; font-weight: normal;
+    margin-left: .5em; }
   .editor input.extra[type=text] { width: 12em; margin-bottom: 2px; display: block; }
   .editor { margin: 2px 0 4px; }
   .tree details > .editor { margin-left: 1.1em; }
@@ -332,7 +339,7 @@
     <div class="scroll"><div id="stats" class="tree"></div></div>
   </section>
   <section id="document-box">
-    <h2>Document<button id="remake-toggle" class="toggle" aria-expanded="false"
+    <h2>Document<span id="document-head" class="count"></span><button id="remake-toggle" class="toggle" aria-expanded="false"
       title="Propose a remake of the document: compacted, replaced by JSON, or imported from an Automerge document (docs/remakes.md)">remake…</button></h2>
     <form id="remake" class="popdown" hidden>
       <label>kind <select id="remake-kind">
@@ -1779,8 +1786,14 @@ function documentChanged(change) {
     if (change.all || change.paths.some(path => related(path, branch.path))) branch.refresh();
   }
 }
-document.getElementById("document").replaceChildren(
-  documentEntry("store", { type: "map", size: "…" }, []));
+// The store's root, always open: its keys are the box's top level, and its size and its
+// "+" (everything its row has but its key) go into the title.
+const documentRoot = documentEntry("store", { type: "map", size: "…" }, []);
+documentRoot.classList.add("root");
+documentRoot.open = true;
+document.getElementById("document-head").append(
+  ...[...documentRoot.querySelector(":scope > summary").childNodes].slice(1));
+document.getElementById("document").replaceChildren(documentRoot);
 
 // A box is busy while text in it is selected: drawing it anew would lose the selection,
 // so it waits (`held`) until it's gone.
-- 
cgit v1.3.1