F1: add tabIndex/role/onKeyDown/aria-expanded to C2TasksPanel expander rows and
C2CallbackPicker callback rows; focus-visible ring via Tailwind utilities
F2: add source:'mimic'|'import' to C2TaskListItem; C2TasksPanel reads task.source
instead of mapping_applied for the Source badge label
F3: align C2TaskStatusBadge and C2CallbackPicker Active/Inactive pill metrics to
py-[6px] text-[14px] font-medium (matches SimulationStatusBadge / StatusBadge)
F4: replace hand-rolled Source pill class string with badge-pill-outline recipe
Tests: 212/212 passing (+3 new: Enter/Space key on expander, Enter key on callback row)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
28 lines
1013 B
TypeScript
28 lines
1013 B
TypeScript
// Dedicated badge for Mythic task statuses — separate from simulation status badges.
|
|
// submitted / processed → primary-soft (in-flight)
|
|
// completed → success-soft
|
|
// error* / fail* → warn-soft (task-level issue, not system error)
|
|
// anything else → cloud / graphite (unknown/neutral)
|
|
|
|
interface C2TaskStatusBadgeProps {
|
|
status: string;
|
|
}
|
|
|
|
function badgeClass(status: string): string {
|
|
const s = status.toLowerCase();
|
|
if (s === 'completed') return 'bg-success-soft text-success';
|
|
if (s.startsWith('error') || s.startsWith('fail')) return 'bg-warn-soft text-warn';
|
|
if (s === 'submitted' || s === 'processed') return 'bg-primary-soft text-primary-deep';
|
|
return 'bg-cloud text-graphite border border-hairline';
|
|
}
|
|
|
|
export function C2TaskStatusBadge({ status }: C2TaskStatusBadgeProps): JSX.Element {
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${badgeClass(status)}`}
|
|
>
|
|
{status}
|
|
</span>
|
|
);
|
|
}
|