maestro/docs/design/ui_kits_reference/admin/TaskList.jsx

// TaskList — FilterBar + LocalTaskListItem recreation
const SORT_OPTIONS = [
  { value: 'updated', label: '新しい順' },
  { value: 'status',  label: 'ステータス順' },
  { value: 'title',   label: 'タイトル順' },
];

function SortMenu({ sort, onSort }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h);
  }, []);
  const current = SORT_OPTIONS.find(o => o.value === sort) || SORT_OPTIONS[0];
  return (
    <div ref={ref} style={{ position: 'relative', flexShrink: 0 }}>
      <button
        onClick={() => setOpen(v => !v)}
        title={`並び順: ${current.label}`}
        style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 28, height: 28, border: 'none', background: open ? '#eff6ff' : 'transparent',
          color: open ? '#1d4ed8' : '#64748b', borderRadius: 8, cursor: 'pointer',
        }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h13M3 12h9M3 18h5M17 8V4m0 0l-3 3m3-3l3 3"/></svg>
      </button>
      {open && (
        <div style={{
          position: 'absolute', right: 0, top: 'calc(100% + 6px)', zIndex: 10,
          background: '#fff', border: '1px solid #e2e8f0', borderRadius: 12,
          boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
          minWidth: 160, padding: 4,
        }}>
          {SORT_OPTIONS.map(o => (
            <button key={o.value} onClick={() => { onSort(o.value); setOpen(false); }} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              width: '100%', padding: '6px 10px', borderRadius: 8, border: 'none',
              background: sort === o.value ? '#eff6ff' : 'transparent',
              color: sort === o.value ? '#1d4ed8' : '#334155',
              fontSize: 12, fontWeight: sort === o.value ? 700 : 500, cursor: 'pointer',
              fontFamily: 'inherit', textAlign: 'left',
            }}>
              {o.label}
              {sort === o.value && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function FilterBar({ status, onStatus, search, onSearch, sort, onSort, counts, total }) {
  const columns = ['queued', 'running', 'waiting_human', 'waiting_subtasks', 'retry', 'succeeded', 'failed', 'cancelled'];
  const chipStyle = (active) => ({
    flexShrink: 0, padding: '6px 10px', borderRadius: 9999,
    fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap', cursor: 'pointer',
    border: '1px solid ' + (active ? '#2563eb' : '#e2e8f0'),
    background: active ? '#eff6ff' : '#fff',
    color: active ? '#1d4ed8' : '#64748b',
    fontFamily: 'inherit',
  });
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingBottom: 12, borderBottom: '1px solid #e2e8f0' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6, background: '#fff', border: '1px solid #e2e8f0',
        borderRadius: 12, padding: '4px 6px 4px 12px', boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
      }}>
        <IconSearch width={14} height={14} style={{ color: '#94a3b8', flexShrink: 0 }} />
        <input value={search} onChange={(e) => onSearch(e.target.value)} placeholder="検索..."
          style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 13, fontFamily: 'inherit', color: '#0f172a', minWidth: 0, padding: '4px 0' }} />
        <div style={{ width: 1, height: 18, background: '#e2e8f0', flexShrink: 0 }} />
        <SortMenu sort={sort} onSort={onSort} />
      </div>
      <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 4 }}>
        <button style={chipStyle(status === 'all')} onClick={() => onStatus('all')}>
          All <span style={{ color: '#94a3b8', marginLeft: 2 }}>{total}</span>
        </button>
        {columns.map(s => (
          <button key={s} style={chipStyle(status === s)} onClick={() => onStatus(s)}>
            {STATUS_LABELS[s]} <span style={{ color: '#94a3b8', marginLeft: 2 }}>{counts[s] || 0}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function TaskItem({ task, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left', padding: '10px 12px', borderRadius: 12,
      border: '1px solid ' + (active ? '#3b82f6' : '#e2e8f0'),
      background: active ? '#eff6ff' : '#fff',
      cursor: 'pointer', transition: 'background .15s', fontFamily: 'inherit',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: '#0f172a', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          #{task.id} {task.title}
        </div>
        <StatusBadge status={task.status} small />
      </div>
      <div style={{ marginTop: 2, fontSize: 11, color: '#64748b', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {task.body.length > 60 ? task.body.slice(0, 60) + '…' : task.body}
      </div>
      <div style={{ marginTop: 2, fontSize: 10, color: '#94a3b8' }}>{relativeTime(task.updatedAt)}</div>
    </button>
  );
}

function TaskList({ tasks, activeId, onSelect, filters, setFilters, onOpenCreate, loading, error, onRetry }) {
  const counts = {};
  for (const s of ['queued', 'running', 'waiting_human', 'waiting_subtasks', 'retry', 'succeeded', 'failed', 'cancelled']) {
    counts[s] = tasks.filter(t => t.status === s).length;
  }
  const running = counts.running || 0;
  const waiting = (counts.waiting_human || 0) + (counts.waiting_subtasks || 0);
  const failed = counts.failed || 0;
  const filtered = tasks
    .filter(t => filters.status === 'all' || t.status === filters.status)
    .filter(t => !filters.search || (t.title + t.body).toLowerCase().includes(filters.search.toLowerCase()))
    .sort((a, b) => filters.sort === 'title' ? a.title.localeCompare(b.title) : b.updatedAt - a.updatedAt);

  const hasSearch = !!filters.search || filters.status !== 'all';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <button onClick={onOpenCreate} style={{
        width: '100%', padding: '10px 14px', marginBottom: 10,
        background: '#2563eb', color: '#fff', borderRadius: 12,
        fontSize: 13, fontWeight: 700, border: 'none', cursor: 'pointer',
        fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center',
        justifyContent: 'center', gap: 6, boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
        transition: 'background .15s',
      }}
        onMouseEnter={(e) => e.currentTarget.style.background = '#1d4ed8'}
        onMouseLeave={(e) => e.currentTarget.style.background = '#2563eb'}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
        新しい依頼
      </button>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        fontSize: 11, color: '#64748b', padding: '0 2px 10px',
      }}>
        <span><b style={{ color: '#334155', fontWeight: 700 }}>{tasks.length}</b> 件</span>
        <span style={{ color: '#cbd5e1' }}>·</span>
        <span><b style={{ color: '#16a34a', fontWeight: 700 }}>{running}</b> 実行中</span>
        <span><b style={{ color: '#d97706', fontWeight: 700 }}>{waiting}</b> 待機</span>
        {failed > 0 && <span><b style={{ color: '#dc2626', fontWeight: 700 }}>{failed}</b> 失敗</span>}
      </div>
      <FilterBar
        status={filters.status} onStatus={(s) => setFilters(f => ({ ...f, status: s }))}
        search={filters.search} onSearch={(q) => setFilters(f => ({ ...f, search: q }))}
        sort={filters.sort} onSort={(s) => setFilters(f => ({ ...f, sort: s }))}
        counts={counts} total={tasks.length}
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8, overflowY: 'auto', flex: 1, minHeight: 0 }}>
        {loading && <SkeletonList count={6} />}
        {!loading && error && (
          <ErrorState
            title="タスクの読み込みに失敗"
            hint={error}
            onRetry={onRetry}
            compact
          />
        )}
        {!loading && !error && filtered.map(t => <TaskItem key={t.id} task={t} active={activeId === t.id} onClick={() => onSelect(t.id)} />)}
        {!loading && !error && filtered.length === 0 && (
          hasSearch ? (
            <EmptyState
              compact
              icon={<IconSearch width={18} height={18} />}
              title="該当するタスクはありません"
              hint="検索ワードやステータスフィルタを変えてみてください。"
              action={
                <button onClick={() => setFilters(f => ({ ...f, search: '', status: 'all' }))} style={{
                  padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 700,
                  background: '#fff', border: '1px solid #e2e8f0', color: '#334155',
                  cursor: 'pointer', fontFamily: 'inherit',
                }}>フィルタをクリア</button>
              }
            />
          ) : (
            <EmptyState
              compact
              icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 12h6M9 16h6M9 8h6M5 21h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>}
              title="まだ依頼がありません"
              hint="左上の「新しい依頼」から最初のタスクを作成できます。"
            />
          )
        )}
      </div>
    </div>
  );
}

window.TaskList = TaskList;