inkling/src/renderer/inbox/components/FailedBanner.tsx

import React from 'react';
import { useInbox } from '../store.js';
import { Banner } from './Banner.js';

export function FailedBanner(): React.ReactElement | null {
  const count = useInbox((s) => s.failedCount);
  const retryAllFailed = useInbox((s) => s.retryAllFailed);
  if (count === 0) return null;
  return (
    <Banner severity="error">
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ flex: 1 }}>❌ AI 처리 실패 <b>{count}</b>건</span>
        <button
          onClick={() => {
            retryAllFailed().catch((e) => {
              // eslint-disable-next-line no-console
              console.warn('retryAllFailed failed', e);
            });
          }}
          style={{
            background: '#a33', color: '#fff',
            border: 'none', borderRadius: 4,
            padding: '4px 12px', fontSize: 12, cursor: 'pointer'
          }}
        >
          재시도
        </button>
      </div>
    </Banner>
  );
}