fix: distinguish partial vessel snapshots from stale data

src/ui/layerPanel.js

@@ -7,6 +7,7 @@ const FEED_STATE_LABELS = Object.freeze({
   loading: 'LOADING',
   degraded: 'DEGRADED',
   stale: 'STALE',
+  partial: 'PARTIAL',
   fallback: 'FALLBACK',
   unavailable: 'UNAVAILABLE',
 });
@@ -505,6 +506,17 @@ export class LayerPanel {
           : stats.coverage || ago;
       return `${stateLabel} · ${source} · ${detail}`;
     }
+    if (feedState === 'partial') {
+      const { acceptedRowCount, rawRowCount } = stats;
+      const detail =
+        Number.isInteger(acceptedRowCount) &&
+        Number.isInteger(rawRowCount) &&
+        acceptedRowCount >= 0 &&
+        rawRowCount > acceptedRowCount
+          ? `${acceptedRowCount} of ${rawRowCount} records accepted`
+          : 'incomplete snapshot';
+      return `${stateLabel} · ${source} · ${detail} · ${ago}`;
+    }
     if (feedState === 'stale') {
       const retry =
         typeof stats.retryInSec === 'number' && stats.retryInSec > 0

src/ui/layerPanel.test.mjs

@@ -29,3 +29,63 @@ test('panel presentation places Transit between Street Traffic and Bike Share in
   );
   assert.equal(order.filter(({ id }) => id === 'transit').length, 1);
 });
+
+test('partial feed controls distinguish incomplete records from stale data and outages', async () => {
+  const { LayerPanel, layerFeedState } = await import('./layerPanel.js');
+  const classes = new Map();
+  const attrs = new Map();
+  const button = {
+    classList: { toggle: (key, value) => classes.set(key, value) },
+    dataset: {},
+    setAttribute: (key, value) => attrs.set(key, value),
+  };
+  const layer = {
+    id: 'ais-live-vessels',
+    name: 'Live Vessels',
+    source: 'AISStream',
+    enabled: true,
+    stats: {
+      partial: true,
+      stale: false,
+      count: 2,
+      acceptedRowCount: 2,
+      rawRowCount: 3,
+      lastUpdate: Date.now(),
+    },
+  };
+  const panel = LayerPanel.prototype;
+  panel._syncToggleButton(button, layer);
+  assert.equal(button.textContent, 'PARTIAL');
+  assert.equal(button.dataset.feedState, 'partial');
+  assert.equal(classes.get('feed-partial'), true);
+  assert.equal(classes.get('feed-stale'), false);
+  assert.match(attrs.get('aria-label'), /PARTIAL/);
+  assert.match(
+    panel._buildMetaText(layer),
+    /^PARTIAL · AISStream · 2 of 3 records accepted · /,
+  );
+  assert.match(
+    panel._buildMetaText({
+      ...layer,
+      stats: { ...layer.stats, rawRowCount: 2 },
+    }),
+    /incomplete snapshot/,
+  );
+  assert.equal(layerFeedState({ ...layer.stats, stale: true }), 'stale');
+  assert.equal(
+    layerFeedState({ ...layer.stats, error: 'Connection lost' }),
+    'degraded',
+  );
+  assert.equal(
+    layerFeedState({ ...layer.stats, status: 'unavailable' }),
+    'unavailable',
+  );
+  assert.equal(layerFeedState({ ...layer.stats, loading: true }), 'loading');
+  layer.stats = { ...layer.stats, partial: false };
+  panel._syncToggleButton(button, layer);
+  assert.equal(button.textContent, 'ON');
+  assert.equal(classes.get('feed-partial'), false);
+  layer.enabled = false;
+  panel._syncToggleButton(button, layer);
+  assert.equal(button.textContent, 'OFF');
+});

src/ui/styles/layers.css

@@ -1298,6 +1298,7 @@
       .feed-loading,
       .feed-degraded,
       .feed-stale,
+      .feed-partial,
       .feed-fallback,
       .feed-unavailable
     )

src/ui/styles/radio.css

@@ -666,6 +666,7 @@
 .data-toggle-btn.feed-loading,
 .data-toggle-btn.feed-degraded,
 .data-toggle-btn.feed-stale,
+.data-toggle-btn.feed-partial,
 .data-toggle-btn.feed-fallback,
 .data-toggle-btn.feed-unavailable {
   min-width: 82px;
@@ -685,6 +686,7 @@
 }
 
 .data-toggle-btn.active.feed-stale,
+.data-toggle-btn.active.feed-partial,
 .data-toggle-btn.active.feed-fallback {
   color: #ffd27a;
   border-color: rgba(255, 190, 82, 0.75);