Say what a service state actually is, and make the badges readable

Three colour faults on the PC page, each hiding the next.

ACTIVITY BADGES WERE ALL GREY. The list renderer reads a badge colour from a
ROW FIELD, and the activity panel declared none, so every severity rendered
identically. The feed's whole job is to make a critical event visible and it
was painting it the same as a logon. The route now emits severitycolor - info
grey, warning yellow, critical red - and the panel declares it.

PAUSED AND THE TRANSITIONAL STATES WERE RED. statecolor was green-or-red-or-
grey, so a paused service looked like a stopped one. They are different: a
paused service was paused deliberately, and one stuck in Start Pending is
failing to start on a retry cycle - which is exactly what raises event 7011,
the thing behind the critical counts on the Fleet page. Both are amber now.

NAMED COLOURS ALWAYS GOT WHITE TEXT. readableText only parsed hex and returned
white for anything else, but panels emit NAMES. Green, red and grey are dark
enough that white worked by luck; amber is not, so the fix above shipped as
white-on-yellow and could not be read. Names resolve to hex before the contrast
test, so this holds for any named colour anywhere in the app rather than these
two panels.

colorStyle had no test file at all. It has one now.

Every one of these was found by looking at the rendered page. None of them
would fail a test that checked markup.

Full suite 2131 passed, vitest 273 passed.

frontend/src/components/pluginAssetPanels.spec.js

@@ -292,4 +292,38 @@ describe('facet chips on a card that shows a health dot', () => {
   it('offers no chips for a panel with no status rollup', () => {
     expect(facets({ id: 'x', render: 'list', _data: [{ a: 1 }] })).toEqual([])
   })
+
+  it('prefers an explicit facets declaration over the status rollup', () => {
+    // Services carry BOTH: a statecolor status dot and a statelabel facet.
+    // Chips must follow the declaration, because a service is Running or
+    // Stopped - "OK" and "Critical" is not how anybody describes one.
+    const services = {
+      id: 'endpoints-services',
+      render: 'list',
+      status: { key: 'statecolor', levels: { green: 'ok', red: 'critical' } },
+      facets: { key: 'statelabel', order: ['Running', 'Stopped', 'Paused'] },
+      _data: [
+        { statelabel: 'Running', statecolor: 'green' },
+        { statelabel: 'Stopped', statecolor: 'red' },
+        { statelabel: 'Paused', statecolor: 'red' },
+      ],
+    }
+    const chips = facets(services)
+    expect(chips.map((c) => c.label)).toEqual(['Running', 'Stopped', 'Paused'])
+    expect(chips.map((c) => c.label)).not.toContain('Critical')
+  })
+
+  it('gives an unlisted state its own chip rather than dropping the row', () => {
+    // Windows has transitional states, and an agent can report something the
+    // order list never anticipated. Those rows must stay reachable.
+    const services = {
+      id: 'svc2',
+      render: 'list',
+      facets: { key: 'statelabel', order: ['Running', 'Stopped'] },
+      _data: [{ statelabel: 'Running' }, { statelabel: 'Start Pending' }],
+    }
+    const chips = facets(services)
+    expect(chips.map((c) => c.value)).toEqual(['Running', 'Start Pending'])
+    expect(facetedRows(services, ['Start Pending']).length).toBe(1)
+  })
 })