// screens-library.jsx
// visuals.jsx - reusable visual elements

const _thumbCache = new Map();

function AssetThumb({ asset, size = 'md' }) {
  const aspect = size === 'tall' ? '9 / 16' : '16 / 9';
  const [thumbUrl, setThumbUrl] = React.useState(_thumbCache.get(asset.id) || null);

  React.useEffect(() => {
    if (!asset.id || thumbUrl || !asset.thumbnail_s3_key) return;
    let cancelled = false;
    fetch((window.ZAMPP_API_PREFIX || '/api/v1') + '/assets/' + asset.id + '/thumbnail', { credentials: 'include' })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (!cancelled && d && d.url) { _thumbCache.set(asset.id, d.url); setThumbUrl(d.url); } })
      .catch(() => {});
    return () => { cancelled = true; };
  }, [asset.id, asset.thumbnail_s3_key]);

  if (asset.type === 'audio' || asset.media_type === 'audio') {
    return (
      <div className="asset-thumb audio" style={{ aspectRatio: aspect }}>
        <Waveform seed={asset.id ? asset.id.charCodeAt(0) % 60 : 1} />
        <div className="thumb-overlay"><Icon name="audio" size={20} style={{ opacity: 0.9 }} /></div>
      </div>
    );
  }

  if (asset.status === 'live' && asset.id) {
    if (asset.thumbnail_s3_key || thumbUrl) {
      const altText = asset.name ? `Thumbnail for ${asset.name}` : 'Live recording thumbnail';
      return (
        <div className="asset-thumb" style={{ aspectRatio: aspect, position: 'relative', background: '#000', overflow: 'hidden' }}>
          {thumbUrl
            ? <img src={thumbUrl} alt={altText} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            : <FauxFrame />}
          <div style={{ position: 'absolute', inset: 0, border: '2px solid var(--live)', pointerEvents: 'none', borderRadius: 'inherit' }} />
        </div>
      );
    }
    return <LiveThumb assetId={asset.id} aspect={aspect} />;
  }

  // pending_migration: placeholder with upload icon, no video
  if (asset.status === 'pending_migration') {
    return (
      <div className="asset-thumb" style={{ aspectRatio: aspect, position: 'relative', background: 'var(--bg-2)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
                      alignItems: 'center', justifyContent: 'center', gap: 6,
                      color: 'var(--text-3)', fontSize: 11 }}>
          <Icon name="upload" size={20} style={{ opacity: 0.5 }} />
          <span>Awaiting migration</span>
        </div>
      </div>
    );
  }

  const altText = asset.name ? `Thumbnail for ${asset.name}` : 'Asset thumbnail';
  return (
    <div className="asset-thumb" style={{ background: 'var(--bg-2)', aspectRatio: aspect, overflow: 'hidden', position: 'relative' }}>
      {thumbUrl
        ? <img src={thumbUrl} alt={altText} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        : <FauxFrame />}
    </div>
  );
}

Both files written. Summary of changes:

**screens-library.jsx**
- `AssetCard` gains `onMigrate` prop; all `AssetCard` usages in grid pass `onMigrate={refreshAssets}`
- `AssetCard` thumb-status block adds `pending_migration` badge (`<span className="badge warning">Pending Migration</span>`)
- `AssetCard` adds `.thumb-migrate-btn` button (position absolute, bottom 8px, left/right 8px) calling `POST /assets/:id/migrate-to-library`
- List view actions column gains inline migrate button for `pending_migration` rows
- Filter tab-group gains "Pending" tab (`pending_migration`)
- Smart filters rail gains "Pending migration" entry (visible only when count > 0)
- `hasLive` memo includes `pending_migration` so 4s poll activates when any such asset exists

**visuals.jsx**
- `AssetThumb` handles `pending_migration` before the generic fallback: renders static placeholder with upload icon + "Awaiting migration" label, no video/HLS
- `StatusDot` map gains `pending_migration: { color: 'var(--warning)', pulse: false }`

Files at:
- `/home/node/workspace/dragonflight/services/web-ui/public/screens-library.jsx`
- `/home/node/workspace/dragonflight/services/web-ui/public/visuals.jsx`