ui(host header): boxed tags/presence pills, click-to-edit, simplified out-of-date chip

web/templates/partials/host_chrome.html

@@ -43,17 +43,23 @@
           <span class="dot dot-failed"></span>
         {{end}}
         <h1 class="mono text-[26px] font-medium tracking-[0.005em] text-ink">{{$host.Name}}</h1>
-        <div class="flex gap-1.5 items-center">
-          {{range $host.Tags}}<a href="/?tag={{.}}" class="tag" title="filter dashboard by this tag">{{.}}</a>{{end}}
-          <button type="button" class="text-ink-fade text-[11px] hover:text-ink-mid whitespace-nowrap"
-                  style="padding: 2px 8px; border: 1px dashed var(--line); border-radius: 3px; cursor: pointer;"
+        <div class="flex items-center gap-2.5">
+          {{/* tags group pill — click the "tags" label to edit; the tag
+               values still filter the dashboard by that tag. */}}
+          <span class="meta-group">
+            <span class="meta-label cursor-pointer hover:text-ink"
                   onclick="document.getElementById('tags-edit-{{$host.ID}}').classList.toggle('hidden')"
-                  title="Edit tags">{{if $host.Tags}}edit tags{{else}}add tags{{end}}</button>
-          {{if $host.AlwaysOn}}<span class="tag" title="Expected online 24×7 — offline raises an alert">24×7</span>{{end}}
-          <button type="button" class="text-ink-fade text-[11px] hover:text-ink-mid whitespace-nowrap"
-                  style="padding: 2px 8px; border: 1px dashed var(--line); border-radius: 3px; cursor: pointer;"
-                  onclick="document.getElementById('mode-edit-{{$host.ID}}').classList.toggle('hidden')"
-                  title="Change presence mode">presence</button>
+                  title="Edit tags">tags</span>
+            {{range $host.Tags}}<a href="/?tag={{.}}" class="meta-val" title="filter dashboard by this tag">{{.}}</a>{{end}}
+            {{if not $host.Tags}}<span class="meta-val">—</span>{{end}}
+          </span>
+          {{/* presence group pill — click anywhere to edit. */}}
+          <span class="meta-group cursor-pointer"
+                onclick="document.getElementById('mode-edit-{{$host.ID}}').classList.toggle('hidden')"
+                title="Change presence mode">
+            <span class="meta-label">presence</span>
+            <span class="meta-val">{{if $host.AlwaysOn}}24x7{{else}}Free{{end}}</span>
+          </span>
         </div>
         {{if gt $page.ScheduleVersion 0}}
           <span class="mono text-[11px] text-ink-mute ml-2">

web/templates/partials/host_update_chip.html

@@ -7,5 +7,5 @@
   Hidden entirely when UpdateAvailable is false.
 */}}
 {{define "host_update_chip"}}
-{{if .UpdateAvailable}}<span class="update-chip" title="Agent at {{.Host.AgentVersion}}; server at {{.TargetVersion}}">out of date · {{.Host.AgentVersion}} → {{.TargetVersion}}</span>{{end}}
+{{if .UpdateAvailable}}<span class="update-chip" title="Agent at {{.Host.AgentVersion}}; server at {{.TargetVersion}}">out of date</span>{{end}}
 {{end}}