Intuitive per-field color scheme for statement tag pills

Every annotated field now maps to one semantic color — 'line' in red,
'threat' in blood red, escalation in orange, rhetoric in purple, geography
in blue, time in teal, values/theme in green, weapons in metallic. Tag
pills render with a 3px left border + translucent background + colored
text in the field's color, so the 15+ tag row on each card is scannable
by field at a glance (all 'Line' pills are red, all 'Theme' pills are
teal-green, etc.) rather than requiring users to read each label.

New src/filterColors.ts exports FIELD_COLOR map + fieldColor(key) lookup.
Removed the old value-level palette lookups (getDimValueColor + RRLS_COLORS
/ NTS_COLORS) from the tag rendering path — value-level coloring still
used elsewhere (charts, drilldown slope chart, etc.) but made less sense
here with 15+ fields per card.

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

Author: sdspieg

src/components/StatementDrilldown.tsx

@@ -1,6 +1,6 @@
-import { RRLS_COLORS, NTS_COLORS, getDimValueColor } from '../colors';
 import { confidencePillStyle } from '../confidence';
-import { RRLS_FILTERS, NTS_FILTERS, COLOR_KEY_FOR } from '../filterDefs';
+import { RRLS_FILTERS, NTS_FILTERS } from '../filterDefs';
+import { fieldColor } from '../filterColors';
 import type { RRLSStatement, NTSStatement } from '../types';
 
 interface DrilldownProps {
@@ -12,7 +12,6 @@ interface DrilldownProps {
 
 export default function StatementDrilldown({ mode, title, statements, onClose }: DrilldownProps) {
   const shown = statements.slice(0, 50);
-  const COLORS = mode === 'rrls' ? RRLS_COLORS : NTS_COLORS;
   const filterDefs = mode === 'rrls' ? RRLS_FILTERS : NTS_FILTERS;
 
   return (
@@ -47,9 +46,9 @@ export default function StatementDrilldown({ mode, title, statements, onClose }:
                     {filterDefs.map(f => {
                       const val = s[f.key] as string | undefined;
                       if (!val) return null;
-                      const c = getDimValueColor(COLORS, COLOR_KEY_FOR(f.key), val, 0);
+                      const c = fieldColor(f.key);
                       return (
-                        <span key={f.key} className="tag" style={{ background: `${c}33`, color: c }}>
+                        <span key={f.key} className="tag" style={{ background: `${c}2a`, color: c, borderLeft: `3px solid ${c}` }}>
                           {f.label}: {val}
                         </span>
                       );

src/components/Statements.tsx

@@ -1,15 +1,14 @@
 import { useEffect, useState, useMemo, useCallback, Fragment } from 'react';
 import { load } from '../data';
-import { RRLS_COLORS, NTS_COLORS, getDimValueColor } from '../colors';
 import { extractCountries } from '../countries';
 import { confidencePillStyle } from '../confidence';
+import { RRLS_FILTERS, NTS_FILTERS } from '../filterDefs';
+import { fieldColor } from '../filterColors';
 import ChartInfo from './ChartInfo';
 import type { RRLSStatement, NTSStatement } from '../types';
 
 type Mode = 'rrls' | 'nts';
 
-import { RRLS_FILTERS, NTS_FILTERS, COLOR_KEY_FOR } from '../filterDefs';
-
 function highlightText(text: string, query: string): React.ReactNode {
   if (!query) return text;
   const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -359,15 +358,14 @@ export default function Statements() {
             <div className="stmt-text">{stmt.context_text_span ? highlightText(stmt.context_text_span, search) : '(no text)'}</div>
             {(() => {
               const s = stmt as unknown as Record<string, unknown>;
-              const COLORS = mode === 'rrls' ? RRLS_COLORS : NTS_COLORS;
               return (
                 <div className="stmt-tags">
                   {filterDefs.map(f => {
                     const val = s[f.key] as string | undefined;
                     if (!val) return null;
-                    const c = getDimValueColor(COLORS, COLOR_KEY_FOR(f.key), val, 0);
+                    const c = fieldColor(f.key);
                     return (
-                      <span key={f.key} className="tag" style={{ background: `${c}33`, color: c }}>
+                      <span key={f.key} className="tag" style={{ background: `${c}2a`, color: c, borderLeft: `3px solid ${c}` }}>
                         {f.label}: {val}
                       </span>
                     );

src/filterColors.ts

@@ -0,0 +1,72 @@
+// Per-field color scheme for Statement Browser tag pills.
+//
+// Each annotated field maps to a single hex color, grouped into intuitive
+// semantic families so the 15+ tag row on every card is scan-able by
+// field at a glance.
+//
+// Families (rough mental model):
+//   RED       — "line" (red in red lines) and "threat" (scary, violent)
+//   ORANGE    — escalation, severity, warning
+//   PURPLE    — rhetoric, speech, statement type
+//   ROSE      — audience / who's being addressed
+//   BLUE      — geography, spatial context
+//   TEAL/CYAN — time, duration, immediacy
+//   GREEN     — values, purpose, theme (what's being defended / discussed)
+//   METALLIC  — weapons capability, delivery systems, arms control
+//   NEUTRAL   — structure / meta (specificity, reciprocity, etc.)
+
+export const FIELD_COLOR: Record<string, string> = {
+  // Red — line + threat (the "red" in red lines + scary threats)
+  line_type:           '#e53935',   // pure red
+  line_intensity:      '#c62828',   // darker red
+  threat_type:         '#8e0000',   // blood red
+  threat_intensity:    '#b71c1c',   // crimson
+  nts_threat_type:     '#8e0000',   // match threat_type
+
+  // Orange/amber — nature of threat, escalation, tone, consequences
+  nature_of_threat:    '#e65100',   // deep orange
+  level_of_escalation: '#ff8f00',   // amber
+  tone:                '#d84315',   // burnt orange (alarming speech)
+  consequences:        '#bf360c',   // dark red-orange (outcomes)
+
+  // Purple — rhetoric, statement type
+  rhetorical_device:   '#8e24aa',   // purple
+  nts_statement_type:  '#6a1b9a',   // deep purple
+
+  // Rose — audience / target framing
+  audience:            '#d81b60',   // rose
+
+  // Blue — geography / spatial context
+  geopolitical_area_of_concern: '#1976d2',  // blue
+  geographical_reach:  '#0d47a1',   // navy
+  context:             '#455a64',   // steel blue-gray
+
+  // Teal / cyan — time
+  temporal_context:    '#00897b',   // teal
+  timeline:            '#00acc1',   // cyan
+  immediacy:           '#0097a7',   // darker cyan
+  durability:          '#5d4037',   // brown (permanence)
+
+  // Green — theme / values / purpose
+  theme:               '#00796b',   // teal-green
+  underlying_values_or_interests: '#2e7d32',  // forest green
+  purpose:             '#558b2f',   // olive green
+
+  // Neutral/structural — specificity, reciprocity, conditionality, uni/multi
+  specificity:         '#546e7a',   // slate
+  conditionality:      '#6d4c41',   // warm brown
+  reciprocity:         '#5e35b1',   // indigo-purple
+  unilateral_vs_multilateral: '#303f9f',  // deep indigo
+
+  // Metallic — weapons, capability, arms control
+  capability:          '#37474f',   // steel
+  delivery_system:     '#263238',   // gunmetal
+  arms_control_and_testing: '#827717',  // olive (arms control)
+};
+
+// Fallback for any future filter field that hasn't been assigned yet.
+export const DEFAULT_FIELD_COLOR = '#607d8b';
+
+export function fieldColor(key: string): string {
+  return FIELD_COLOR[key] || DEFAULT_FIELD_COLOR;
+}