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

web/styles/input.css

@@ -196,6 +196,17 @@
   }
   .tag-removable .x { color: var(--ink-fade); cursor: pointer; padding-left: 2px; }
 
+  /* ---------- header meta groups (boxed tags / presence pills) ---------- */
+  .meta-group {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 11px; line-height: 1; padding: 3px 9px;
+    border: 1px solid var(--line); border-radius: 5px;
+    background: color-mix(in oklch, var(--ink), transparent 95%);
+  }
+  .meta-group .meta-label { color: var(--ink-mute); }
+  .meta-group .meta-val { color: var(--ink-mid); text-decoration: none; }
+  .meta-group a.meta-val:hover { color: var(--ink); text-decoration: underline; }
+
   /* ---------- form fields ---------- */
   .field-label { font-size: 12px; color: var(--ink-mid); margin-bottom: 6px; display: block; }
   .field-help  { font-size: 12px; color: var(--ink-mute); margin-top: 6px; line-height: 1.55; }

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