Add animated relative last-seen device timestamps

src/web/components/DevicesPanel.jsx

@@ -12,6 +12,15 @@ function Tooltip({ children }) {
   return <span className="client-tooltip" role="tooltip">{children}</span>;
 }
 
+function TextMorph({ from, to }) {
+  const anchor = from.length >= to.length ? from : to;
+  return <span className="client-text-morph" aria-hidden="true">
+    <span className="client-text-morph-anchor">{anchor}</span>
+    <span className="client-text-morph-value is-date">{from}</span>
+    <span className="client-text-morph-value is-relative">{to}</span>
+  </span>;
+}
+
 export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   const [snapshot, setSnapshot] = useState(null);
   const [status, setStatus] = useState('idle');
@@ -73,6 +82,17 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
       inert={!open ? true : undefined}
     >
       <div className="client-instructions-sheet client-devices-sheet">
+        <svg className="client-text-morph-filter" aria-hidden="true">
+          <defs>
+            <filter id="client-text-morph-goo">
+              <feColorMatrix
+                in="SourceGraphic"
+                type="matrix"
+                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8"
+              />
+            </filter>
+          </defs>
+        </svg>
         <button
           ref={closeRef}
           className="client-drawer-close"
@@ -178,9 +198,10 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                   </span>}
                   {device.interface && <span>{device.interface}</span>}
                 </div>
-                <span className="client-device-last-seen client-tooltip-anchor" tabIndex="0" aria-label={seen.tooltip}>
-                  <time dateTime={device.lastSeenAt}>{seen.label}</time>
-                  <Tooltip>{seen.tooltip}</Tooltip>
+                <span className="client-device-last-seen" tabIndex="0">
+                  <time dateTime={device.lastSeenAt} aria-label={seen.tooltip}>
+                    <TextMorph from={seen.label} to={seen.relative} />
+                  </time>
                 </span>
               </div>
               {device.manufacturer && <p className="client-device-manufacturer">{device.manufacturer}</p>}