Add tags to servers, with a tag filter on the Servers page

Servers can be tagged (prod, media, rack-1, ...) for grouping. Operators
and admins edit tags inline on a server's detail page; the input suggests
tags already used on other servers so the same word ends up spelled the
same way everywhere. Tags show as chips that keep one colour per tag, on
the server cards, in the Manage table (and its CSV export), and on the
detail page, where each chip links to the Servers list filtered by that
tag. The Servers page has a tag bar with counts; picking several tags
narrows to servers that have all of them. The filter lives in the URL, so
it survives a refresh and can be linked to. Tags are also matched by the
global search.

Tags are normalized on the server (trimmed, lowercased, spaces become "-",
duplicates merged, sorted); letters in any language are allowed, plus
digits and - _ . : /, at most 30 characters and 12 per server. Invalid
input is rejected with a message naming the offending tag, and nothing is
saved. Changes are audit-logged with the before and after lists.

Stored as a JSON column on servers (migration 0010). Every server response
now returns tags as an array, and the shared response shaping strips the
token hash in one place instead of five.

Verified with 27 backend checks (normalization edge cases including
Swedish letters, roles, validation, search, audit, PATCH/detail/list
shapes) and by driving the real Servers and detail pages against the real
router in a browser (filtering, editing, invalid tag, viewer view). Real
dev database mtime untouched.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

README.md

@@ -142,6 +142,12 @@ raise one notification when the problem starts and one when it clears (both
 thresholds are set under Settings → Notifications). Active problems are
 remembered across restarts, so a rebuild doesn't re-alert them.
 
+**Tags** — servers can be tagged (prod, media, rack-1, …) from their detail
+page by operators and admins. Tags show as coloured chips on the Servers page,
+which can be filtered by one or several tags (the filter is in the URL, so a
+tag on a server's page links to everything sharing it), and they're searchable
+from the global search box.
+
 **Maintenance mode** silences alerts about one server, integration, or DNS
 provider while you work on it (server offline / disk, storage and Synology
 health, Proxmox backup alerts, and "integration down" for that service type).

server/drizzle/0010_magenta_alice.sql

@@ -0,0 +1 @@
+ALTER TABLE `servers` ADD `tags` text;

server/drizzle/meta/_journal.json

@@ -71,6 +71,13 @@
       "when": 1790382571470,
       "tag": "0009_sharp_magus",
       "breakpoints": true
+    },
+    {
+      "idx": 10,
+      "version": "6",
+      "when": 1790384497980,
+      "tag": "0010_magenta_alice",
+      "breakpoints": true
     }
   ]
 }

server/src/db/schema.ts

@@ -222,6 +222,7 @@ export const servers = sqliteTable("servers", {
   disks: text("disks"), // JSON string: {mount, sizeBytes, usedBytes}[]
   listeningPorts: text("listening_ports"), // JSON string: {protocol, port, address, process}[] — what the agent sees bound on the host
   lastPortScan: text("last_port_scan"), // JSON string: summary of the most recent network scan from this app
+  tags: text("tags"), // JSON string: string[] — free-form labels for grouping and filtering, normalized by services/serverTags
 
   // Optional link to a Proxmox VM/LXC — set by an admin, not the agent.
   proxmoxIntegrationId: integer("proxmox_integration_id").references(() => integrations.id, {

server/src/routes/search.ts

@@ -36,7 +36,7 @@ searchRouter.get("/", asyncHandler(async (req, res) => {
     db
       .select({ id: servers.id, name: servers.name, hostname: servers.hostname })
       .from(servers)
-      .where(or(like(servers.name, term), like(servers.hostname, term), like(servers.description, term)))
+      .where(or(like(servers.name, term), like(servers.hostname, term), like(servers.description, term), like(servers.tags, term)))
       .limit(RESULT_LIMIT),
     db
       .select({ id: secrets.id, name: secrets.name, type: secrets.type })

server/src/routes/servers.ts

@@ -10,8 +10,16 @@ import { asyncHandler } from "../utils/asyncHandler.js";
 import { loadIntegrationConfig } from "../integrations/loadIntegration.js";
 import { createProxmoxAdapter, type ProxmoxGuestType } from "../integrations/proxmox/adapter.js";
 import { serverPortsRouter } from "./serverPorts.js";
+import { InvalidTagError, normalizeTags, parseTags } from "../services/serverTags.js";
 
 export const serversRouter = Router();
+
+/** A server row as the API returns it: no token hash, and tags as an array rather than the stored JSON. */
+function publicServer<T extends { apiTokenHash: string; tags: string | null }>(row: T) {
+  const { apiTokenHash: _hash, tags, ...rest } = row;
+  return { ...rest, tags: parseTags(tags) };
+}
+
 serversRouter.use(requireAuth);
 serversRouter.use("/:id/ports", serverPortsRouter);
 
@@ -25,7 +33,7 @@ const createServerSchema = z.object({
 serversRouter.get("/", asyncHandler(async (_req, res) => {
   const rows = await db.query.servers.findMany({ orderBy: (s, { asc }) => [asc(s.name)] });
   res.json({
-    servers: rows.map(({ apiTokenHash, ...rest }) => rest),
+    servers: rows.map(publicServer),
   });
 }));
 
@@ -58,7 +66,7 @@ serversRouter.post("/", requireRole("admin"), asyncHandler(async (req, res) => {
     detail: { name: created.name },
   });
 
-  const { apiTokenHash, ...serverOut } = created;
+  const serverOut = publicServer(created);
   // The full token is only ever shown once, at creation time.
   res.status(201).json({ server: serverOut, token });
 }));
@@ -85,7 +93,7 @@ serversRouter.post("/:id/rotate-token", requireRole("admin"), asyncHandler(async
     detail: { name: updated.name },
   });
 
-  const { apiTokenHash, ...serverOut } = updated;
+  const serverOut = publicServer(updated);
   res.json({ server: serverOut, token });
 }));
 
@@ -145,7 +153,7 @@ serversRouter.patch("/:id", requireRole("admin"), asyncHandler(async (req, res)
     detail: { name: updated.name },
   });
 
-  const { apiTokenHash, ...serverOut } = updated;
+  const serverOut = publicServer(updated);
   res.json({ server: serverOut });
 }));
 
@@ -232,7 +240,8 @@ serversRouter.get("/:id/detail", asyncHandler(async (req, res) => {
     .orderBy(serverLinks.label);
 
   const {
-    apiTokenHash,
+    apiTokenHash: _apiTokenHash,
+    tags: rawTags,
     ipAddresses: _rawIpAddresses,
     disks: _rawDisks,
     cpuModel: _cpuModel,
@@ -245,7 +254,43 @@ serversRouter.get("/:id/detail", asyncHandler(async (req, res) => {
     ...serverOut
   } = server;
 
-  res.json({ server: serverOut, ipAddresses, hardware, dnsMatches, links });
+  res.json({ server: { ...serverOut, tags: parseTags(rawTags) }, ipAddresses, hardware, dnsMatches, links });
+}));
+
+const tagsSchema = z.object({ tags: z.array(z.string().max(100)).max(50) });
+
+// Tags are lightweight labels, edited by operators like port notes and admin links — not admin-only like renaming a server.
+serversRouter.put("/:id/tags", requireRole("operator"), asyncHandler(async (req, res) => {
+  const id = Number(req.params.id);
+  if (!Number.isInteger(id)) return res.status(400).json({ error: "invalid_id" });
+
+  const parsed = tagsSchema.safeParse(req.body);
+  if (!parsed.success) {
+    return res.status(400).json({ error: "invalid_body", message: "Tags must be a list of text.", details: parsed.error.flatten() });
+  }
+  let tags: string[];
+  try {
+    tags = normalizeTags(parsed.data.tags);
+  } catch (err) {
+    if (err instanceof InvalidTagError) return res.status(400).json({ error: "invalid_tag", message: err.message });
+    throw err;
+  }
+
+  const [existing] = await db.select().from(servers).where(eq(servers.id, id)).limit(1);
+  if (!existing) return res.status(404).json({ error: "not_found" });
+
+  await db.update(servers).set({ tags: tags.length > 0 ? JSON.stringify(tags) : null }).where(eq(servers.id, id));
+
+  await recordAudit({
+    actor: req.currentUser!,
+    category: "server",
+    action: "set_tags",
+    targetType: "server",
+    targetId: id,
+    detail: { name: existing.name, before: parseTags(existing.tags), after: tags },
+  });
+
+  res.json({ tags });
 }));
 
 const linkSchema = z.object({

server/src/services/serverTags.ts

@@ -0,0 +1,38 @@
+export const MAX_TAGS_PER_SERVER = 12;
+export const MAX_TAG_LENGTH = 30;
+
+// Letters and digits (any language — Swedish åäö included) first, then a few separators people actually use in tags.
+const TAG_PATTERN = /^[\p{L}\p{N}][\p{L}\p{N}._:/-]*$/u;
+
+export class InvalidTagError extends Error {}
+
+/**
+ * Turns what someone typed into the stored form: trimmed, lowercased, inner whitespace turned into "-", duplicates
+ * merged (so "Prod" and "prod " are one tag), sorted so the display is stable. Throws InvalidTagError with a
+ * message fit to show the user.
+ */
+export function normalizeTags(input: string[]): string[] {
+  const seen = new Set<string>();
+  for (const raw of input) {
+    const tag = raw.trim().toLowerCase().replace(/\s+/g, "-");
+    if (!tag) continue; // an empty box isn't an error, it's just nothing
+    if (tag.length > MAX_TAG_LENGTH) throw new InvalidTagError(`"${raw.trim()}" is too long — tags are at most ${MAX_TAG_LENGTH} characters.`);
+    if (!TAG_PATTERN.test(tag)) {
+      throw new InvalidTagError(`"${raw.trim()}" isn't a valid tag — use letters, numbers, and - _ . : /`);
+    }
+    seen.add(tag);
+  }
+  if (seen.size > MAX_TAGS_PER_SERVER) throw new InvalidTagError(`A server can have at most ${MAX_TAGS_PER_SERVER} tags.`);
+  return [...seen].sort((a, b) => a.localeCompare(b, "sv"));
+}
+
+/** Reads the stored JSON column, tolerating null and anything unexpected. */
+export function parseTags(stored: string | null | undefined): string[] {
+  if (!stored) return [];
+  try {
+    const value = JSON.parse(stored);
+    return Array.isArray(value) ? value.filter((t): t is string => typeof t === "string") : [];
+  } catch {
+    return [];
+  }
+}

web/src/api/client.ts

@@ -303,6 +303,7 @@ export interface ServerRecord {
   proxmoxGuestType: "qemu" | "lxc" | null;
   proxmoxVmid: number | null;
   hideProxmoxLink: boolean;
+  tags: string[];
 }
 
 export interface ServerHardware {
@@ -835,6 +836,8 @@ export const api = {
       request<{ server: ServerRecord }>(`/api/servers/${id}`, { method: "PATCH", body: JSON.stringify(data) }),
     detail: (id: number) => request<ServerDetail>(`/api/servers/${id}/detail`),
     remove: (id: number) => request<void>(`/api/servers/${id}`, { method: "DELETE" }),
+    setTags: (id: number, tags: string[]) =>
+      request<{ tags: string[] }>(`/api/servers/${id}/tags`, { method: "PUT", body: JSON.stringify({ tags }) }),
     addLink: (id: number, data: { label: string; url: string }) =>
       request<{ link: ServerLink }>(`/api/servers/${id}/links`, { method: "POST", body: JSON.stringify(data) }),
     updateLink: (id: number, linkId: number, data: { label?: string; url?: string }) =>

web/src/components/ServerTags.tsx

@@ -0,0 +1,152 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { api } from "../api/client";
+import { normalizeTagInput, tagColorClass } from "../utils/tags";
+import { readableError } from "../utils/errors";
+
+export function TagBadges({ tags, linked = false }: { tags: string[]; linked?: boolean }) {
+  return (
+    <>
+      {tags.map((tag) =>
+        linked ? (
+          <Link key={tag} to={`/servers?tag=${encodeURIComponent(tag)}`} className={`badge text-decoration-none ${tagColorClass(tag)}`} title={`All servers tagged ${tag}`}>
+            {tag}
+          </Link>
+        ) : (
+          <span key={tag} className={`badge ${tagColorClass(tag)}`}>
+            {tag}
+          </span>
+        ),
+      )}
+    </>
+  );
+}
+
+/** Tags on a server's detail page: the chips (each links to the filtered Servers list) and, for operators, an inline editor. */
+export default function ServerTags({
+  serverId,
+  tags,
+  canEdit,
+  onSaved,
+}: {
+  serverId: number;
+  tags: string[];
+  canEdit: boolean;
+  onSaved: (tags: string[]) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draftTags, setDraftTags] = useState<string[]>([]);
+  const [input, setInput] = useState("");
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function startEditing() {
+    setDraftTags(tags);
+    setInput("");
+    setError(null);
+    setEditing(true);
+    // Offer the tags already used elsewhere, so the same word ends up spelled the same way everywhere.
+    api.servers
+      .list()
+      .then((res) => setSuggestions([...new Set(res.servers.flatMap((s) => s.tags))].sort()))
+      .catch(() => {});
+  }
+
+  function addFromInput(): string[] {
+    const additions = input
+      .split(",")
+      .map(normalizeTagInput)
+      .filter(Boolean);
+    const next = [...new Set([...draftTags, ...additions])];
+    setDraftTags(next);
+    setInput("");
+    return next;
+  }
+
+  async function save() {
+    const finalTags = input.trim() ? addFromInput() : draftTags;
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await api.servers.setTags(serverId, finalTags);
+      onSaved(res.tags);
+      setEditing(false);
+    } catch (err) {
+      setError(readableError(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (!editing) {
+    if (tags.length === 0 && !canEdit) return null;
+    return (
+      <div className="d-flex flex-wrap align-items-center gap-1 mb-3">
+        <TagBadges tags={tags} linked />
+        {canEdit && (
+          <button className="btn btn-link btn-sm p-0 ms-1" onClick={startEditing}>
+            {tags.length === 0 ? "+ Add tags" : "Edit tags"}
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        {error && <div className="alert alert-danger">{error}</div>}
+        <label className="form-label">Tags</label>
+        <div className="d-flex flex-wrap align-items-center gap-1 mb-2">
+          {draftTags.map((tag) => (
+            <span key={tag} className={`badge ${tagColorClass(tag)}`}>
+              {tag}
+              <button
+                type="button"
+                className="btn-close btn-close-sm ms-1"
+                style={{ fontSize: "0.5rem" }}
+                aria-label={`Remove ${tag}`}
+                onClick={() => setDraftTags(draftTags.filter((t) => t !== tag))}
+              />
+            </span>
+          ))}
+          {draftTags.length === 0 && <span className="text-secondary small">No tags yet.</span>}
+        </div>
+        <div className="d-flex gap-2">
+          <input
+            className="form-control"
+            list={`tag-suggestions-${serverId}`}
+            placeholder="Type a tag and press Enter — e.g. prod, media, rack-1"
+            maxLength={40}
+            value={input}
+            autoFocus
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === ",") {
+                e.preventDefault();
+                if (input.trim()) addFromInput();
+              } else if (e.key === "Backspace" && !input && draftTags.length > 0) {
+                setDraftTags(draftTags.slice(0, -1));
+              }
+            }}
+          />
+          <datalist id={`tag-suggestions-${serverId}`}>
+            {suggestions
+              .filter((s) => !draftTags.includes(s))
+              .map((s) => (
+                <option key={s} value={s} />
+              ))}
+          </datalist>
+          <button className="btn btn-primary" onClick={save} disabled={saving}>
+            Save
+          </button>
+          <button className="btn" onClick={() => setEditing(false)} disabled={saving}>
+            Cancel
+          </button>
+        </div>
+        <div className="text-secondary small mt-2">Lowercase letters, numbers and - _ . : / — up to 12 tags per server.</div>
+      </div>
+    </div>
+  );
+}

web/src/pages/ServerDetail.tsx

@@ -12,6 +12,7 @@ import {
   type TaskRecord,
 } from "../api/client";
 import ServerPorts from "../components/ServerPorts";
+import ServerTags from "../components/ServerTags";
 import ServerTaskTable, { SCHEDULE_TYPE_LABELS } from "../components/ServerTaskTable";
 import { formatDateTime } from "../utils/date";
 
@@ -355,6 +356,13 @@ export default function ServerDetail({ user }: { user: CurrentUser }) {
       </div>
       {error && <div className="alert alert-danger">{error}</div>}
 
+      <ServerTags
+        serverId={serverId}
+        tags={server.tags}
+        canEdit={canEditTasks}
+        onSaved={(tags) => setDetail((d) => (d ? { ...d, server: { ...d.server, tags } } : d))}
+      />
+
       <div className="card mb-3">
         <div className="card-header">
           <h3 className="card-title">Admin Links</h3>

web/src/pages/Servers.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState, type CSSProperties } from "react";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { api, type CurrentUser, type ServerRecord } from "../api/client";
 import CopyButton from "../components/CopyButton";
 import { formatDateTime } from "../utils/date";
@@ -8,6 +8,8 @@ import SortableTh from "../components/SortableTh";
 import { usePagination } from "../hooks/usePagination";
 import Pagination from "../components/Pagination";
 import { downloadCsv } from "../utils/csv";
+import { TagBadges } from "../components/ServerTags";
+import { tagColorClass } from "../utils/tags";
 
 function typeBadgeStyle(colors: Record<string, string>, type: string): CSSProperties {
   const color = colors[type];
@@ -35,6 +37,9 @@ export default function Servers({ user }: { user: CurrentUser }) {
   const [error, setError] = useState<string | null>(null);
   const [managingServers, setManagingServers] = useState(false);
   const [integrationColors, setIntegrationColors] = useState<Record<string, string>>({});
+  // The active tag filter lives in the URL, so a tag chip on a server's page can link straight to "everything with this tag".
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedTags = searchParams.getAll("tag");
 
   useEffect(() => {
     api.settings.integrationColors().then((res) => setIntegrationColors(res.integrationColors)).catch(() => {});
@@ -101,12 +106,30 @@ export default function Servers({ user }: { user: CurrentUser }) {
   const { pageItems: serverPageItems, page: serverPage, setPage: setServerPage, pageCount: serverPageCount, totalCount: serverTotalCount } =
     usePagination(sortedServers);
 
+  const tagCounts = new Map<string, number>();
+  for (const s of servers) for (const t of s.tags) tagCounts.set(t, (tagCounts.get(t) ?? 0) + 1);
+  // A tag from the URL that no server has (any more) stays listed, so it can still be switched off.
+  for (const t of selectedTags) if (!tagCounts.has(t)) tagCounts.set(t, 0);
+  const allTags = [...tagCounts.keys()].sort((a, b) => a.localeCompare(b, "sv"));
+  const visibleServers = servers.filter((s) => selectedTags.every((t) => s.tags.includes(t)));
+
+  function toggleTag(tag: string) {
+    const next = selectedTags.includes(tag) ? selectedTags.filter((t) => t !== tag) : [...selectedTags, tag];
+    setSearchParams(next.length > 0 ? { tag: next } : {}, { replace: true });
+  }
+
   function exportCsv() {
     if (!sortedServers) return;
     downloadCsv(
       "servers.csv",
-      ["Name", "Hostname", "Token prefix", "Last seen"],
-      sortedServers.map((s) => [s.name, s.hostname ?? "", s.apiTokenPrefix, s.lastSeenAt ? formatDateTime(new Date(s.lastSeenAt)) : "never"]),
+      ["Name", "Hostname", "Tags", "Token prefix", "Last seen"],
+      sortedServers.map((s) => [
+        s.name,
+        s.hostname ?? "",
+        s.tags.join(" "),
+        s.apiTokenPrefix,
+        s.lastSeenAt ? formatDateTime(new Date(s.lastSeenAt)) : "never",
+      ]),
     );
   }
 
@@ -243,6 +266,7 @@ export default function Servers({ user }: { user: CurrentUser }) {
                       direction={sortDir}
                       onSort={requestSort}
                     />
+                    <th>Tags</th>
                     <th>Token</th>
                     <SortableTh<ServerRecord>
                       label="Last seen"
@@ -261,6 +285,11 @@ export default function Servers({ user }: { user: CurrentUser }) {
                         <Link to={`/servers/${s.id}`}>{s.name}</Link>
                       </td>
                       <td>{s.hostname ?? "—"}</td>
+                      <td>
+                        <div className="d-flex flex-wrap gap-1">
+                          <TagBadges tags={s.tags} />
+                        </div>
+                      </td>
                       <td className="text-secondary">{s.apiTokenPrefix}…</td>
                       <td>{s.lastSeenAt ? formatDateTime(new Date(s.lastSeenAt)) : "never"}</td>
                       <td>
@@ -280,7 +309,7 @@ export default function Servers({ user }: { user: CurrentUser }) {
                   ))}
                   {sortedServers?.length === 0 && (
                     <tr>
-                      <td colSpan={5} className="text-secondary text-center">
+                      <td colSpan={6} className="text-secondary text-center">
                         No servers registered yet.
                       </td>
                     </tr>
@@ -307,8 +336,38 @@ export default function Servers({ user }: { user: CurrentUser }) {
           </div>
         </div>
       ) : (
+        <>
+          {allTags.length > 0 && (
+            <div className="d-flex flex-wrap align-items-center gap-1 mb-3">
+              <span className="text-secondary small me-1">Tags</span>
+              {allTags.map((tag) => {
+                const active = selectedTags.includes(tag);
+                return (
+                  <button
+                    key={tag}
+                    type="button"
+                    className={`badge border-0 ${active ? "bg-primary text-white" : tagColorClass(tag)}`}
+                    aria-pressed={active}
+                    onClick={() => toggleTag(tag)}
+                  >
+                    {tag} <span className="opacity-75">· {tagCounts.get(tag)}</span>
+                  </button>
+                );
+              })}
+              {selectedTags.length > 0 && (
+                <button type="button" className="btn btn-link btn-sm p-0 ms-1" onClick={() => setSearchParams({}, { replace: true })}>
+                  Clear
+                </button>
+              )}
+            </div>
+          )}
+          {visibleServers.length === 0 && (
+            <div className="card">
+              <div className="card-body text-secondary">No server has {selectedTags.length > 1 ? "all of those tags" : "that tag"}.</div>
+            </div>
+          )}
         <div className="row row-cards">
-          {servers.map((s) => (
+          {visibleServers.map((s) => (
             <div className="col-sm-6 col-lg-3" key={s.id}>
               <Link to={`/servers/${s.id}`} className="card card-sm text-reset text-decoration-none">
                 <div className="card-body">
@@ -327,6 +386,11 @@ export default function Servers({ user }: { user: CurrentUser }) {
                       <span className="badge bg-secondary-lt text-secondary">No data</span>
                     )}
                   </div>
+                  {s.tags.length > 0 && (
+                    <div className="d-flex flex-wrap gap-1 mt-2">
+                      <TagBadges tags={s.tags} />
+                    </div>
+                  )}
                   <div className="text-secondary small mt-2">
                     {s.lastSeenAt ? `Last seen ${formatDateTime(new Date(s.lastSeenAt))}` : "Never reported"}
                   </div>
@@ -335,6 +399,7 @@ export default function Servers({ user }: { user: CurrentUser }) {
             </div>
           ))}
         </div>
+        </>
       )}
     </>
   );

web/src/utils/tags.ts

@@ -0,0 +1,14 @@
+const PALETTE = ["blue", "azure", "indigo", "purple", "pink", "orange", "yellow", "lime", "green", "teal", "cyan", "red"];
+
+/** The same tag always gets the same colour, so "prod" is recognisable at a glance across every server. */
+export function tagColorClass(tag: string): string {
+  let hash = 0;
+  for (const ch of tag) hash = (hash * 31 + ch.codePointAt(0)!) >>> 0;
+  const color = PALETTE[hash % PALETTE.length];
+  return `bg-${color}-lt text-${color}`;
+}
+
+/** Mirrors the server's normalisation for what's shown while typing; the server stays the authority on what's valid. */
+export function normalizeTagInput(raw: string): string {
+  return raw.trim().toLowerCase().replace(/\s+/g, "-");
+}