fix(devices): signal glyph polish, fix invisible copy button, even firmware row

Follow-up on 529e866 after review:

- SignalIndicator: offline now renders a diagonal slash (standard
  "no signal" convention) instead of an X. Added a distinct amber "?"
  state for devices that are online but whose firmware never reports rssi
  at all (legacy v1 heartbeats predate the rssi/state/ok fields — see API
  Reference's v2 migration notes) — previously this looked identical to
  "not loaded yet". DeviceListCardView's online block now opts into this
  by passing isOnline explicitly.

- Copy-to-clipboard for the serial number was invisible: the icon button
  had opacity:0 as an inline style, which beats a CSS hover rule at equal
  specificity, so the reveal-on-hover code paths never fired. Replaced
  with a shared CopyableSerial component (components/shared/) where the
  whole serial text is clickable, not just a trailing icon, and the icon
  sits at partial opacity at rest instead of fully hidden. Wired into both
  DeviceDetail's header and OverviewTab's hero Serial Number field.

- GeneralTab firmware hero: all stat columns are now equal-width via a
  grid instead of ad-hoc flex gaps, and backup_version's "Unknown" sentinel
  (the device's own placeholder when no second OTA slot has ever been
  flashed) is no longer rendered as the literal string "vUnknown".

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

frontend/src/components/shared/CopyableSerial.jsx

@@ -0,0 +1,71 @@
+// frontend/src/components/shared/CopyableSerial.jsx
+// Serial number display with click-to-copy — the whole text is clickable,
+// not just the trailing icon, and the icon stays dimly visible at rest so
+// its affordance isn't hover-only-discoverable (it was previously opacity:0
+// at rest via an inline style, which beat the hover CSS rule and made the
+// button invisible at all times).
+
+import { useState } from 'react'
+import Icon from '@/components/ui/Icon'
+
+function copyText(text, onDone) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text).then(onDone).catch(() => {
+      const ta = document.createElement('textarea')
+      ta.value = text; ta.style.cssText = 'position:fixed;opacity:0'
+      document.body.appendChild(ta); ta.select()
+      try { document.execCommand('copy'); onDone() } catch { /* clipboard unavailable */ }
+      document.body.removeChild(ta)
+    })
+  }
+}
+
+export default function CopyableSerial({ serial, className = '', style = {}, textStyle = {}, iconSize = 12 }) {
+  const [copied, setCopied] = useState(false)
+
+  if (!serial) return <span className={className} style={{ ...textStyle, ...style }}>—</span>
+
+  const handleCopy = () => {
+    copyText(serial, () => { setCopied(true); setTimeout(() => setCopied(false), 1500) })
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      title={copied ? 'Copied!' : 'Click to copy serial number'}
+      aria-label={copied ? 'Serial number copied' : 'Copy serial number'}
+      className={['copyable-serial', className].filter(Boolean).join(' ')}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--space-1)',
+        padding: 0,
+        border: 'none',
+        background: 'none',
+        cursor: 'pointer',
+        font: 'inherit',
+        color: 'inherit',
+        ...style,
+      }}
+    >
+      <span style={textStyle}>{serial}</span>
+      <Icon
+        name={copied ? 'check' : 'copy'}
+        size={iconSize}
+        color={copied ? 'var(--color-success)' : 'currentColor'}
+        className="copyable-serial__icon"
+      />
+      <style>{`
+        .copyable-serial .copyable-serial__icon {
+          opacity: 0.45;
+          transition: opacity 0.15s, color 0.15s;
+        }
+        .copyable-serial:hover .copyable-serial__icon,
+        .copyable-serial:focus-visible .copyable-serial__icon {
+          opacity: 1;
+        }
+      `}</style>
+    </button>
+  )
+}

frontend/src/components/ui/SignalIndicator.jsx

@@ -5,8 +5,13 @@
 // Props:
 //   rssi      — number | null | undefined — signal strength in dBm (e.g. -62). null/undefined = unknown.
 //   isOnline  — boolean | undefined — when explicitly false, renders a dimmed amber
-//               glyph with an "X" overlay regardless of rssi, so a stale last-known
+//               glyph with a diagonal slash overlay regardless of rssi, so a stale
-//               reading from an offline device never reads as a live "full signal".
+//               last-known reading from an offline device never reads as a live
+//               "full signal". When true (or undefined) but rssi is null/undefined,
+//               renders an amber "?" instead — legacy v1-firmware devices report a
+//               heartbeat with no rssi field at all (see API Reference: legacy
+//               heartbeats predate rssi/state/ok), so "online with unknown signal"
+//               is a distinct, expected state from "we haven't loaded it yet".
 //   size      — 'sm' | 'md'                                                    (default: 'md')
 //   className — extra classes
 //
@@ -42,14 +47,19 @@ const DIM_COLOR = 'var(--color-bg-island)'
 export default function SignalIndicator({ rssi, isOnline, size = 'md', className = '' }) {
   const offline = isOnline === false
   const known = !offline && rssi != null && Number.isFinite(rssi)
+  // Online, but the device firmware never reports rssi at all (legacy v1 API).
+  const unsupported = !offline && !known && isOnline === true
+  const muted = offline || unsupported
   const level = known ? rssiToLevel(rssi) : 0
-  const color = offline ? 'var(--color-warning)' : rssiToColor(known ? rssi : null)
+  const color = muted ? 'var(--color-warning)' : rssiToColor(known ? rssi : null)
   const { box, strokeWidth } = SIZES[size] || SIZES.md
   const label = offline
     ? 'Signal strength unavailable — device offline'
-    : known
+    : unsupported
-      ? `Signal strength: ${['weak', 'fair', 'good', 'excellent'][level - 1]} (${rssi} dBm)`
+      ? 'Signal strength not reported by this device\'s firmware'
-      : 'Signal strength unknown'
+      : known
+        ? `Signal strength: ${['weak', 'fair', 'good', 'excellent'][level - 1]} (${rssi} dBm)`
+        : 'Signal strength unknown'
 
   return (
     <svg
@@ -63,12 +73,12 @@ export default function SignalIndicator({ rssi, isOnline, size = 'md', className
     >
       <title>{label}</title>
       {/* Center dot — level 1 */}
-      <circle cx="12" cy="18.5" r="1.6" fill={offline ? DIM_COLOR : (level >= 1 ? color : DIM_COLOR)} style={{ transition: 'fill 0.2s' }} />
+      <circle cx="12" cy="18.5" r="1.6" fill={muted ? DIM_COLOR : (level >= 1 ? color : DIM_COLOR)} style={{ transition: 'fill 0.2s' }} />
       {/* Inner arc — level 2 */}
       <path
         d="M8.2 14.8a5.4 5.4 0 0 1 7.6 0"
         fill="none"
-        stroke={offline ? DIM_COLOR : (level >= 2 ? color : DIM_COLOR)}
+        stroke={muted ? DIM_COLOR : (level >= 2 ? color : DIM_COLOR)}
         strokeWidth={strokeWidth}
         strokeLinecap="round"
         style={{ transition: 'stroke 0.2s' }}
@@ -77,7 +87,7 @@ export default function SignalIndicator({ rssi, isOnline, size = 'md', className
       <path
         d="M5 11.6a9.8 9.8 0 0 1 14 0"
         fill="none"
-        stroke={offline ? DIM_COLOR : (level >= 3 ? color : DIM_COLOR)}
+        stroke={muted ? DIM_COLOR : (level >= 3 ? color : DIM_COLOR)}
         strokeWidth={strokeWidth}
         strokeLinecap="round"
         style={{ transition: 'stroke 0.2s' }}
@@ -86,17 +96,34 @@ export default function SignalIndicator({ rssi, isOnline, size = 'md', className
       <path
         d="M1.8 8.4a14.2 14.2 0 0 1 20.4 0"
         fill="none"
-        stroke={offline ? DIM_COLOR : (level >= 4 ? color : DIM_COLOR)}
+        stroke={muted ? DIM_COLOR : (level >= 4 ? color : DIM_COLOR)}
         strokeWidth={strokeWidth}
         strokeLinecap="round"
         style={{ transition: 'stroke 0.2s' }}
       />
-      {/* Offline overlay — amber X, replaces the arc/dot reading entirely */}
+      {/* Offline overlay — amber diagonal slash, standard "no signal" convention */}
       {offline && (
-        <g stroke={color} strokeWidth={strokeWidth} strokeLinecap="round">
+        <path
-          <path d="M8.5 5.5l7 7" />
+          d="M3 21L21 3"
-          <path d="M15.5 5.5l-7 7" />
+          stroke={color}
-        </g>
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+        />
+      )}
+      {/* Unsupported overlay — amber "?", device is online but its firmware never reports rssi (v1 API) */}
+      {unsupported && (
+        <text
+          x="12"
+          y="16.5"
+          textAnchor="middle"
+          fontSize="11"
+          fontWeight="700"
+          fontFamily="var(--font-family-base, sans-serif)"
+          fill={color}
+          stroke="none"
+        >
+          ?
+        </text>
       )}
     </svg>
   )

frontend/src/pages/bellcloud/devices/DeviceDetail.jsx

@@ -12,6 +12,7 @@ import Button from '@/components/ui/Button'
 import SignalIndicator from '@/components/ui/SignalIndicator'
 import EditableText from '@/components/ui/EditableText'
 import Icon from '@/components/ui/Icon'
+import CopyableSerial from '@/components/shared/CopyableSerial'
 import Tabs from '@/components/ui/Tabs'
 import Spinner from '@/components/ui/Spinner'
 import ConfirmDialog from '@/components/ui/ConfirmDialog'
@@ -36,64 +37,6 @@ import ManageTab    from '@/pages/bellcloud/devices/tabs/ManageTab'
 import ControlTab   from '@/pages/bellcloud/devices/tabs/ControlTab'
 import HealthTab    from '@/pages/bellcloud/devices/tabs/HealthTab'
 
-// ─── Serial subtitle with hover-to-reveal copy button ────────────────────────
-
-function SerialWithCopy({ serial }) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = () => {
-    if (!serial) return
-    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1500) }
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(serial).then(done).catch(() => {
-        const ta = document.createElement('textarea')
-        ta.value = serial; ta.style.cssText = 'position:fixed;opacity:0'
-        document.body.appendChild(ta); ta.select()
-        try { document.execCommand('copy'); done() } catch { /* clipboard unavailable */ }
-        document.body.removeChild(ta)
-      })
-    }
-  }
-
-  return (
-    <span className="device-serial-copy" style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--space-1)' }}>
-      <span className="page-header-subtitle" style={{ margin: 0 }}>{serial}</span>
-      {serial && (
-        <button
-          type="button"
-          onClick={handleCopy}
-          title={copied ? 'Copied!' : 'Copy serial number'}
-          aria-label="Copy serial number"
-          className="device-serial-copy__btn"
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 18,
-            height: 18,
-            padding: 0,
-            border: 'none',
-            background: 'none',
-            borderRadius: 'var(--radius-sm)',
-            color: copied ? 'var(--color-success)' : 'var(--color-text-muted)',
-            cursor: 'pointer',
-            opacity: 0,
-            transition: 'opacity 0.15s, color 0.15s',
-          }}
-        >
-          <Icon name={copied ? 'check' : 'copy'} size={12} />
-        </button>
-      )}
-      <style>{`
-        .device-serial-copy:hover .device-serial-copy__btn,
-        .device-serial-copy__btn:focus-visible {
-          opacity: 1;
-        }
-      `}</style>
-    </span>
-  )
-}
-
 // ─── Tab config ───────────────────────────────────────────────────────────────
 
 const TABS = [
@@ -458,7 +401,11 @@ export default function DeviceDetail() {
                 editable={canEdit}
                 inputAriaLabel="Edit console name"
               />
-              <SerialWithCopy serial={sn} />
+              <CopyableSerial
+                serial={sn}
+                className="page-header-subtitle"
+                style={{ margin: 0, color: 'var(--color-text-muted)', fontSize: 'var(--font-size-base)', lineHeight: 'var(--line-height-base)' }}
+              />
             </span>
           </span>
         }

frontend/src/pages/bellcloud/devices/DeviceListCardView.jsx

@@ -202,7 +202,7 @@ function OnlineBlock({ online, rssi }) {
       aria-label={online ? 'Online' : 'Offline'}
     >
       {online ? (
-        <SignalIndicator rssi={rssi} size="sm" />
+        <SignalIndicator rssi={rssi} isOnline size="sm" />
       ) : (
         <span className="dcard__online-block-dot" aria-hidden="true" />
       )}

frontend/src/pages/bellcloud/devices/tabs/GeneralTab.jsx

@@ -1026,85 +1026,110 @@ export default function GeneralTab({
           ROW 0 — Firmware (full width, short)
           ════════════════════════════════════════════════════════════════════ */}
       <GlassCard>
-        <div style={{
+        {(() => {
-          display: 'flex',
+          // The firmware reports the literal string "Unknown" (not null/absent) for
-          alignItems: 'center',
+          // backup_version when no second OTA slot has ever been flashed — guard
-          justifyContent: 'space-between',
+          // against that sentinel so it doesn't render as "vUnknown".
-          gap: 'var(--space-6)',
+          const backupKnown = firmwareStatus?.backup_version && firmwareStatus.backup_version !== 'Unknown'
-          flexWrap: 'wrap',
+          const items = [
-        }}>
+            {
-          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', minWidth: 0 }}>
+              label: 'Version',
-            <div style={{
+              content: (
-              width: 36, height: 36, flexShrink: 0,
+                <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-2)' }}>
-              borderRadius: 'var(--radius-md)',
+                  <span style={{ fontSize: 'var(--font-size-lg)', fontWeight: 'var(--font-weight-semibold)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
-              background: 'var(--color-primary-subtle)',
+                    {firmwareStatus?.current_version ? `v${firmwareStatus.current_version}` : '—'}
-              border: '1px solid rgba(192,193,255,0.20)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}>
-              <Icon name="firmware" size={17} color="var(--color-primary)" />
-            </div>
-            <div style={{ minWidth: 0 }}>
-              <SectionLabel>Firmware</SectionLabel>
-              <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-2)', marginTop: 2 }}>
-                <span style={{
-                  fontSize: 'var(--font-size-lg)',
-                  fontWeight: 'var(--font-weight-semibold)',
-                  fontFamily: 'var(--font-family-mono)',
-                  color: 'var(--color-text-primary)',
-                }}>
-                  {firmwareStatus?.current_version ? `v${firmwareStatus.current_version}` : '—'}
-                </span>
-                {firmwareStatus?.build_date && (
-                  <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }}>
-                    built {firmwareStatus.build_date}
                   </span>
-                )}
+                  {firmwareStatus?.build_date && (
+                    <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }}>
+                      built {firmwareStatus.build_date}
+                    </span>
+                  )}
+                </div>
+              ),
+            },
+            {
+              label: 'Channel',
+              content: (
+                <StatusBadge variant={firmwareStatus?.ota_channel === 'stable' ? 'success' : firmwareStatus?.ota_channel === 'beta' ? 'warning' : 'neutral'}>
+                  {firmwareStatus?.ota_channel || '—'}
+                </StatusBadge>
+              ),
+            },
+            {
+              label: 'Validation',
+              content: (
+                <StatusBadge variant={
+                  firmwareStatus?.validation_state === 'VALIDATED' ? 'success' :
+                  firmwareStatus?.is_testing ? 'warning' : 'neutral'
+                }>
+                  {firmwareStatus?.validation_state || '—'}
+                </StatusBadge>
+              ),
+            },
+            {
+              label: 'Boot Count',
+              content: (
+                <span style={{ fontSize: 'var(--font-size-base)', fontWeight: 'var(--font-weight-medium)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
+                  {Number.isFinite(firmwareStatus?.boot_count) ? firmwareStatus.boot_count : '—'}
+                </span>
+              ),
+            },
+            {
+              label: 'Backup Slot',
+              content: (
+                <span style={{ fontSize: 'var(--font-size-base)', fontWeight: 'var(--font-weight-medium)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
+                  {backupKnown ? `v${firmwareStatus.backup_version}` : '—'}
+                  {backupKnown && (
+                    <span style={{ marginLeft: 6, fontSize: 'var(--font-size-xs)', fontFamily: 'var(--font-family-base)', color: firmwareStatus?.backup_is_valid ? 'var(--color-success)' : 'var(--color-danger)' }}>
+                      {firmwareStatus?.backup_is_valid ? 'valid' : 'invalid'}
+                    </span>
+                  )}
+                </span>
+              ),
+            },
+            {
+              label: 'Testing Window',
+              content: (
+                <StatusBadge variant={firmwareStatus?.is_testing ? 'warning' : 'neutral'}>
+                  {firmwareStatus?.is_testing ? 'Open' : 'Closed'}
+                </StatusBadge>
+              ),
+            },
+          ]
+
+          return (
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 'var(--space-4)',
+            }}>
+              <div style={{
+                width: 36, height: 36, flexShrink: 0,
+                borderRadius: 'var(--radius-md)',
+                background: 'var(--color-primary-subtle)',
+                border: '1px solid rgba(192,193,255,0.20)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+              }}>
+                <Icon name="firmware" size={17} color="var(--color-primary)" />
+              </div>
+
+              <div style={{
+                flex: 1,
+                display: 'grid',
+                gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))`,
+                gap: 'var(--space-4)',
+                minWidth: 0,
+              }}>
+                {items.map(({ label, content }) => (
+                  <div key={label} style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
+                    <SectionLabel>{label}</SectionLabel>
+                    {content}
+                  </div>
+                ))}
               </div>
             </div>
-          </div>
+          )
-
+        })()}
-          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)', flexWrap: 'wrap' }}>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <SectionLabel>Channel</SectionLabel>
-              <StatusBadge variant={firmwareStatus?.ota_channel === 'stable' ? 'success' : firmwareStatus?.ota_channel === 'beta' ? 'warning' : 'neutral'}>
-                {firmwareStatus?.ota_channel || '—'}
-              </StatusBadge>
-            </div>
-
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <SectionLabel>Validation</SectionLabel>
-              <StatusBadge variant={
-                firmwareStatus?.validation_state === 'VALIDATED' ? 'success' :
-                firmwareStatus?.is_testing ? 'warning' : 'neutral'
-              }>
-                {firmwareStatus?.validation_state || '—'}
-              </StatusBadge>
-            </div>
-
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <SectionLabel>Boot Count</SectionLabel>
-              <span style={{ fontSize: 'var(--font-size-base)', fontWeight: 'var(--font-weight-medium)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
-                {Number.isFinite(firmwareStatus?.boot_count) ? firmwareStatus.boot_count : '—'}
-              </span>
-            </div>
-
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <SectionLabel>Backup Slot</SectionLabel>
-              <span style={{ fontSize: 'var(--font-size-base)', fontWeight: 'var(--font-weight-medium)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
-                {firmwareStatus?.backup_version ? `v${firmwareStatus.backup_version}` : '—'}
-                {firmwareStatus?.backup_version && (
-                  <span style={{ marginLeft: 6, fontSize: 'var(--font-size-xs)', fontFamily: 'var(--font-family-base)', color: firmwareStatus?.backup_is_valid ? 'var(--color-success)' : 'var(--color-danger)' }}>
-                    {firmwareStatus?.backup_is_valid ? 'valid' : 'invalid'}
-                  </span>
-                )}
-              </span>
-            </div>
-
-            {firmwareStatus?.is_testing && (
-              <StatusBadge variant="warning">Testing — awaiting commit</StatusBadge>
-            )}
-          </div>
-        </div>
       </GlassCard>
 
       {/* ════════════════════════════════════════════════════════════════════

frontend/src/pages/bellcloud/devices/tabs/OverviewTab.jsx

@@ -20,6 +20,7 @@ import {
 } from './shared'
 import DeviceNoteModal from '@/modals/bellcloud/devices/DeviceNoteModal'
 import EntryFormModal  from '@/modals/crm/helpdesk/EntryFormModal'
+import CopyableSerial  from '@/components/shared/CopyableSerial'
 
 // ─── Glass surface tokens ─────────────────────────────────────────────────────
 
@@ -505,7 +506,12 @@ export default function OverviewTab({
             rowGap: 'var(--space-5)',
             width: '100%',
           }}>
-            <InfoField label="Serial Number" mono>{sn || '—'}</InfoField>
+            <InfoField label="Serial Number">
+              <CopyableSerial
+                serial={sn}
+                textStyle={{ fontFamily: 'var(--font-family-mono)' }}
+              />
+            </InfoField>
             <InfoField label="Hardware Family">{hwVariant}</InfoField>
             <InfoField label="Device Uptime">
               {mqttStatus?.last_heartbeat?.uptime_ms != null