chore(orbit): show host-offline badge when host state goes stale

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

src/components/OrbitQueueHead.tsx

@@ -1,20 +1,54 @@
-import { Users } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Users, WifiOff } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useOrbitStore } from '../store/orbitStore';
 import type { OrbitState } from '../api/orbit';
 
 interface Props {
   state: OrbitState;
 }
 
+/** Host's state hasn't updated for this long → guest treats them as offline. */
+const HOST_AWAY_THRESHOLD_MS = 15_000;
+
 /**
  * Shared Orbit head strip rendered at the top of the queue for both host
  * and guest. Shows the session name and a comma-separated list of every
  * participant (host first, then guests in join order).
+ *
+ * Guest view additionally surfaces host-presence: when the host's tick
+ * hasn't been seen for 15 s we render a subtle "host offline" badge so
+ * the guest knows the stalled playback isn't a local problem.
  */
 export default function OrbitQueueHead({ state }: Props) {
+  const { t } = useTranslation();
+  const role = useOrbitStore(s => s.role);
+  const [nowMs, setNowMs] = useState(() => Date.now());
+
+  // Guest-only clock tick — React wouldn't re-render a stale state blob
+  // on its own, and the presence threshold is time-based.
+  useEffect(() => {
+    if (role !== 'guest') return;
+    const id = window.setInterval(() => setNowMs(Date.now()), 2000);
+    return () => window.clearInterval(id);
+  }, [role]);
+
   const names = [state.host, ...state.participants.map(p => p.user)];
+  const hostAway = role === 'guest'
+    && state.positionAt > 0
+    && (nowMs - state.positionAt) > HOST_AWAY_THRESHOLD_MS;
+
   return (
     <div className="orbit-queue-head">
-      <h2 className="orbit-queue-head__title">{state.name}</h2>
+      <div className="orbit-queue-head__title-row">
+        <h2 className="orbit-queue-head__title">{state.name}</h2>
+        {hostAway && (
+          <span className="orbit-queue-head__presence" role="status">
+            <WifiOff size={11} />
+            <span>{t('orbit.hostAway')}</span>
+          </span>
+        )}
+      </div>
       <div className="orbit-queue-head__meta">
         <Users size={11} />
         <span className="orbit-queue-head__names">{names.join(', ')}</span>