Two-digit code per color tag, shown as badges on matching log lines

Each tag gets a stable code (01-99) assigned by the server and stored in
tags.json; existing tags get one when the file is loaded. A fixed-width
Filters column shows the codes of the active tags found in each message
(room for 3, then 2 + "+N", all listed in the tooltip).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

web/app.js

@@ -59,6 +59,7 @@ const I18N = {
     err_invalid_color: 'Invalid color (expected #rrggbb)',
     err_invalid_regex: 'Invalid regular expression',
     err_tag_not_found: 'Tag not found',
+    err_too_many_tags: 'Too many tags (99 at most)',
     err_live_logsql: 'Live view is not available in LogsQL mode',
     dateTime: 'Date & time',
     tzLabel: 'Time zone',
@@ -148,7 +149,9 @@ const I18N = {
     hCappedTitle: 'The chosen division would exceed 300 intervals over this range: it has been enlarged.',
     hUnzoom: '× Reset zoom', unitDay: 'd',
     toTop: 'Back to top',
-    colRcv: 'Received', colMt: 'Message time', colSev: 'Severity', colHost: 'Host', colApp: 'App', colMsg: 'Message',
+    colRcv: 'Received', colMt: 'Message time', colSev: 'Severity', colHost: 'Host', colApp: 'App', colCodes: 'Filters', colMsg: 'Message',
+    codesTitle: 'Codes of the color tags found in the message',
+    tagCodeTitle: 'Code shown on the log lines this tag matches',
     colGrip: 'Drag to resize, double-click for the automatic width',
     resetCols: 'Reset column widths', colsReset: 'Column widths reset',
     colsHelp: 'Drag the edge of a column header in the log list to resize it (remembered by this browser).',
@@ -209,6 +212,7 @@ const I18N = {
     err_invalid_color: 'Couleur invalide (format #rrggbb attendu)',
     err_invalid_regex: 'Expression régulière invalide',
     err_tag_not_found: 'Tag introuvable',
+    err_too_many_tags: 'Trop de tags (99 au maximum)',
     err_live_logsql: 'Le direct n\'est pas disponible en mode LogsQL',
     dateTime: 'Date et heure',
     tzLabel: 'Fuseau horaire',
@@ -298,7 +302,9 @@ const I18N = {
     hCappedTitle: 'La division choisie dépasserait 300 intervalles sur cette plage : elle a été élargie.',
     hUnzoom: '× Annuler le zoom', unitDay: 'j',
     toTop: 'Revenir en haut',
-    colRcv: 'Réception', colMt: 'Heure message', colSev: 'Sévérité', colHost: 'Hôte', colApp: 'App', colMsg: 'Message',
+    colRcv: 'Réception', colMt: 'Heure message', colSev: 'Sévérité', colHost: 'Hôte', colApp: 'App', colCodes: 'Filtres', colMsg: 'Message',
+    codesTitle: 'Codes des tags de couleur trouvés dans le message',
+    tagCodeTitle: 'Code affiché sur les lignes de log où ce tag est trouvé',
     colGrip: 'Glisser pour redimensionner, double-clic pour la largeur automatique',
     resetCols: 'Réinitialiser les colonnes', colsReset: 'Largeurs de colonnes réinitialisées',
     colsHelp: 'Glissez le bord d\'un en-tête de colonne de la liste pour la redimensionner (mémorisé par ce navigateur).',
@@ -696,7 +702,8 @@ function compileMatchers() {
       // A regex may name a group "hl" to color only that part of the match.
       const hl = tag.regex && /\(\?P?<hl>/.test(tag.pattern);
       if (hl) src = src.replace(/\(\?P<hl>/g, '(?<hl>');
-      out.push({ re: new RegExp(src, 'gu' + (hl ? 'd' : '') + (tag.caseSensitive ? '' : 'i')), html: `<mark class="tag" style="${tagStyle(tag.color)}">` });
+      out.push({ re: new RegExp(src, 'gu' + (hl ? 'd' : '') + (tag.caseSensitive ? '' : 'i')), html: `<mark class="tag" style="${tagStyle(tag.color)}">`,
+        code: tag.code, name: tag.label || tag.pattern });
     } catch (e) {
       console.warn('Tag skipped (invalid pattern):', tag.pattern, e.message);
     }
@@ -738,6 +745,30 @@ function highlight(text) {
   return out + esc(text.slice(pos));
 }
 
+// Badges with the codes of the tags found in a message, in list order. The
+// column has room for 3: beyond that, 2 badges and "+N" (all in the tooltip).
+function codesHTML(text) {
+  text = String(text ?? '');
+  const found = [];
+  for (const m of state.matchers) {
+    if (!m.code || !text) continue;
+    m.re.lastIndex = 0;
+    let x;
+    while ((x = m.re.exec(text)) !== null) {
+      if (x[0] === '') { m.re.lastIndex++; continue; }
+      const g = x.indices?.groups?.hl;
+      if (!x.indices?.groups || g) { found.push(m); break; }
+    }
+  }
+  if (!found.length) return '';
+  const shown = found.length > 3 ? found.slice(0, 2) : found;
+  const title = found.map((m) => `${m.code} ${m.name}`).join('\n');
+  return `<span title="${esc(title)}">`
+    + shown.map((m) => `<b>${esc(m.code)}</b>`).join('')
+    + (found.length > 3 ? `<b class="more">+${found.length - 2}</b>` : '')
+    + '</span>';
+}
+
 /* ================= List rendering ================= */
 
 const SEV_CLASS = { emerg: 'crit', alert: 'crit', crit: 'crit', err: 'err', warning: 'warning', notice: 'notice', info: 'info', debug: 'debug' };
@@ -763,6 +794,7 @@ function rowHTML(r, isNew) {
     + (r.app
       ? `<span class="app${r.source_type === 'docker' ? ' proj' : ''}" data-act="app"${r.source_type === 'docker' ? ` style="--h:${hueOf(r.compose_project || r.container || r.app)}"` : ''} title="${esc((r.compose_project ? r.compose_project + '/' : '') + (r.container ? r.container + ' · ' : '') + r.app + ' · ' + t('clickApp'))}">${r.source_type === 'docker' ? DOCKER_ICON : ''}${esc(r.app)}</span>`
       : '<span class="app"></span>')
+    + `<span class="codes">${codesHTML(r._msg)}</span>`
     + `<div class="msg">${highlight(r._msg)}</div>`
     + '</article>';
 }
@@ -829,7 +861,9 @@ function renderList() {
 function rehighlight() {
   for (const row of list.children) {
     const r = recOf.get(row);
-    if (r) row.querySelector('.msg').innerHTML = highlight(r._msg);
+    if (!r) continue;
+    row.querySelector('.msg').innerHTML = highlight(r._msg);
+    row.querySelector('.codes').innerHTML = codesHTML(r._msg);
   }
 }
 
@@ -2026,6 +2060,7 @@ function tagRowHTML(tag) {
   const opt = (field, label, title) =>
     `<label class="opt" title="${esc(title)}"><input type="checkbox" data-f="${field}"${tag[field] ? ' checked' : ''}>${esc(label)}</label>`;
   return `<div class="tag-row${tag.enabled ? '' : ' off'}" data-id="${esc(tag.id)}">
+    <span class="tag-code" title="${esc(t('tagCodeTitle'))}">${esc(tag.code || '··')}</span>
     <input type="color" value="${esc(tag.color)}" data-f="color" aria-label="${esc(t('colorAria'))}">
     <input type="text" value="${esc(tag.pattern)}" data-f="pattern" placeholder="${esc(t('keyword'))}" spellcheck="false" aria-label="${esc(t('keyword'))}">
     <span class="preview" title="${esc(tag.pattern)}"><mark class="tag" style="${tagStyle(tag.color)}">${esc(tag.label || tag.pattern || t('preview'))}</mark></span>

web/index.html

@@ -107,6 +107,7 @@
       <span data-col="sev"><span class="lbl" data-i18n="colSev">Severity</span><i class="grip" data-i18n-title="colGrip"></i></span>
       <span data-col="host"><span class="lbl" data-i18n="colHost">Host</span><i class="grip" data-i18n-title="colGrip"></i></span>
       <span data-col="app"><span class="lbl" data-i18n="colApp">App</span><i class="grip" data-i18n-title="colGrip"></i></span>
+      <span data-col="codes"><span class="lbl" data-i18n="colCodes" data-i18n-title="codesTitle">Filters</span></span>
       <span data-col="msg"><span class="lbl" data-i18n="colMsg">Message</span></span>
     </div>
     <main id="list" class="list"></main>

web/style.css

@@ -37,7 +37,8 @@
   --tag-warning: #fdba74;
   --tag-warning-text: #111827;
 
-  --log-size: 12.5px;   /* Settings > Interface > Font size */
+  --log-size: 12.5px;
+  --codes-w: 4.9rem;    /* tag codes column: room for 3 badges */   /* Settings > Interface > Font size */
   /* --log-font is set by Settings > Interface > Font (defaults to --mono) */
   --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
   --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -296,13 +297,13 @@ body.busy .progress::after {
 .list { margin: 6px 20px 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
 .list:empty { display: none; }
 
-/* Columns: received, message time, severity, host, app, message. Widths come from
+/* Columns: received, message time, severity, host, app, tag codes, message. Widths come from
    --col-* (set on #table when a column has been resized, see app.js), shared by
    the header and every row through subgrid so that the columns line up. */
 .table {
   display: grid;
   grid-template-columns: var(--col-rcv, max-content) var(--col-mt, max-content) var(--col-sev, 4.6rem)
-    var(--col-host, minmax(5rem, 9rem)) var(--col-app, minmax(4rem, 8rem)) minmax(0, 1fr);
+    var(--col-host, minmax(5rem, 9rem)) var(--col-app, minmax(4rem, 8rem)) var(--codes-w) minmax(0, 1fr);
   column-gap: 12px;
   margin: 6px 20px 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
   overflow: clip; /* rounded corners without breaking the sticky header (hidden would) */
@@ -331,7 +332,7 @@ body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-sel
 
 .row {
   display: grid;
-  grid-template-columns: max-content max-content 4.6rem minmax(5rem, 9rem) minmax(4rem, 8rem) 1fr;
+  grid-template-columns: max-content max-content 4.6rem minmax(5rem, 9rem) minmax(4rem, 8rem) var(--codes-w) 1fr;
   gap: 0 12px; align-items: baseline;
   padding: 5px 14px 5px 11px;
   border-left: 3px solid transparent;
@@ -372,6 +373,15 @@ body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-sel
 .row.sev-crit, .row.sev-err, .row.sev-warning { border-left-color: var(--sev); }
 .row.sev-crit, .row.sev-err { background: color-mix(in srgb, var(--sev) 7%, transparent); }
 .row .host[data-act], .row .app[data-act] { cursor: pointer; }
+/* Codes of the tags found in the message: grey badges, fixed size */
+.row .codes { white-space: nowrap; overflow: hidden; }
+.row .codes > span { display: inline-flex; gap: 3px; vertical-align: 1px; }
+.row .codes b, .tag-code {
+  min-width: 2.2ch; padding: 1px 4px; border-radius: 4px; text-align: center;
+  font-family: var(--mono); font-size: 10.5px; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums;
+  background: #b4bac3; color: #111827;
+}
+.row .codes b.more { background: none; box-shadow: inset 0 0 0 1px #b4bac3; color: var(--muted); }
 .row .host[data-act]:hover, .row .app[data-act]:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
 
 mark.tag {
@@ -475,6 +485,7 @@ dialog.settings .dlg > header { padding: 14px 16px 14px 22px; border-bottom: 1px
 .preview-list .row .host { grid-area: host; }
 .preview-list .row .app { grid-area: app; display: block; }
 .preview-list .row .msg { grid-area: msg; }
+.preview-list .row .codes { display: none; }
 
 dialog {
   width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
@@ -592,11 +603,12 @@ input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2
 .tag-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
 .tag-row {
   display: grid; align-items: center; gap: 8px 10px;
-  grid-template-columns: 38px minmax(8rem, 1fr) 7.5rem auto 36px;
+  grid-template-columns: auto 38px minmax(8rem, 1fr) 7.5rem auto 36px;
   padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
   background: var(--panel-2);
 }
 .tag-row.off { opacity: .55; }
+.tag-row .tag-code { font-size: 12px; padding: 3px 6px; cursor: default; }
 .tag-row input[type="color"] {
   width: 38px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px;
   background: none; cursor: pointer;
@@ -639,8 +651,8 @@ input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2
   .table .list { display: block; margin: 0; }
   .list-head { display: none; }
   .row, .table .row {
-    grid-template-columns: auto auto 1fr;
-    grid-template-areas: "rcv sev host" "msg msg msg";
+    grid-template-columns: auto auto 1fr auto;
+    grid-template-areas: "rcv sev host codes" "msg msg msg msg";
     gap: 3px 8px; padding: 8px 12px 8px 10px;
   }
   .row time.rcv { grid-area: rcv; }
@@ -648,6 +660,7 @@ input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2
   .row .sev { grid-area: sev; }
   .row .host { grid-area: host; justify-self: end; max-width: 100%; }
   .row .app { display: none; }
+  .row .codes { grid-area: codes; }
   .row .msg { grid-area: msg; }
   .details { grid-column: 1 / -1; }
   .details dl { grid-template-columns: 1fr; }
@@ -669,10 +682,10 @@ input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2
   #sizeSwitch button { flex: 1; padding: 0 4px; white-space: nowrap; font-size: 12px; }
   .field-grid select { margin-bottom: 6px; }
   .status { padding: 6px 16px; }
-  .tag-row { grid-template-columns: 38px 1fr 36px; }
+  .tag-row { grid-template-columns: auto 38px 1fr 36px; }
   .tag-row .preview { display: none; }
   .tag-row .opts { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
-  .tag-row [data-del] { grid-column: 3; grid-row: 1; }
+  .tag-row [data-del] { grid-column: 4; grid-row: 1; }
 }
 
 /* ---------- Login page (AUTH_MODE=local) ---------- */