feat(hosts): per-host tags edit + dashboard chip-row filter (P4-07)

web/styles/input.css

@@ -306,6 +306,16 @@
   .dot-critical { background: var(--bad);  box-shadow: 0 0 0 3px color-mix(in oklch, var(--bad),  transparent 80%); }
   .dot-resolved { background: var(--ok);   box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok),   transparent 80%); }
 
+  /* Tag in active/selected state — used by the dashboard chip-row
+     filter and any other UI that wants a "this tag is currently
+     applied" highlight. Subtle: slight accent tint, accent border,
+     ink colour shift; doesn't shout. */
+  .tag.tag-active {
+    color: var(--accent);
+    border-color: color-mix(in oklch, var(--accent), transparent 50%);
+    background: color-mix(in oklch, var(--accent), transparent 92%);
+  }
+
   /* tag colour variants for alerts */
   .tag-warn     { color: var(--warn); border-color: color-mix(in oklch, var(--warn), transparent 60%); background: color-mix(in oklch, var(--warn), transparent 92%); }
   .tag-critical { color: var(--bad);  border-color: color-mix(in oklch, var(--bad),  transparent 60%); background: color-mix(in oklch, var(--bad),  transparent 92%); }

web/templates/pages/dashboard.html

@@ -125,10 +125,25 @@
       <div class="flex items-center justify-between mb-3">
         <div class="flex items-center gap-3">
           <h2 class="text-[13px] font-semibold tracking-[0.01em]">Hosts</h2>
-          <div class="text-xs text-ink-fade">{{$page.HostCount}} of {{$page.HostCount}}</div>
+          <div class="text-xs text-ink-fade">{{$page.ShownCount}} of {{$page.HostCount}}</div>
         </div>
       </div>
 
+      {{/* Tag chip-row — only renders when at least one tag exists in
+           the fleet. Active tag is highlighted; clicking the active
+           tag clears the filter. The "All" pill is shown in the active
+           state when no tag filter is set. */}}
+      {{if $page.KnownTags}}
+        <div class="flex items-center gap-1.5 flex-wrap mb-3 text-[11.5px]">
+          <span class="text-ink-fade mr-1">filter</span>
+          <a href="/" class="tag {{if eq $page.ActiveTag ""}}tag-active{{end}}">All</a>
+          {{range $page.KnownTags}}
+            {{$t := .}}
+            <a href="/?tag={{$t}}" class="tag {{if eq $page.ActiveTag $t}}tag-active{{end}}">{{$t}}</a>
+          {{end}}
+        </div>
+      {{end}}
+
       <div class="panel rounded-[7px] overflow-hidden">
 
         <div class="host-row head hairline">

web/templates/partials/host_chrome.html

@@ -39,7 +39,13 @@
           <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">{{range $host.Tags}}<span class="tag">{{.}}</span>{{end}}</div>
+        <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"
+                  style="padding: 2px 6px; border: 1px dashed var(--line); border-radius: 3px; cursor: pointer;"
+                  onclick="document.getElementById('tags-edit-{{$host.ID}}').classList.toggle('hidden')"
+                  title="Edit tags">+ tag</button>
+        </div>
         {{if gt $page.ScheduleVersion 0}}
           <span class="mono text-[11px] text-ink-mute ml-2">
             version {{$page.ScheduleVersion}}
@@ -51,6 +57,22 @@
           </span>
         {{end}}
       </div>
+      {{/* Inline tags editor — hidden by default; toggled by the "+ tag"
+           button above. Comma-separated input with autocomplete sourced
+           from the fleet's distinct tags via a <datalist>. */}}
+      <form id="tags-edit-{{$host.ID}}" method="post"
+            action="/hosts/{{$host.ID}}/tags"
+            class="hidden mt-3 flex items-center gap-2">
+        <input type="text" name="tags" class="field mono text-[12px]"
+               style="max-width: 480px;"
+               value="{{joinComma $host.Tags}}"
+               list="known-tags"
+               placeholder="comma-separated · e.g. prod, london, db" />
+        <datalist id="known-tags">
+          {{range $page.KnownTags}}<option value="{{.}}">{{end}}
+        </datalist>
+        <button type="submit" class="btn btn-primary">Save tags</button>
+      </form>
       <div class="flex items-center gap-3 mt-3 text-[13px] text-ink-mute">
         <span class="mono text-ink-mid">{{$host.OS}}/{{$host.Arch}}</span>
         <span class="text-ink-fade">·</span>