fix(frontend): a11y on clickable rows + correct c2 source field + pill metric alignment (sprint 8 design-review)

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>

frontend/src/components/C2TasksPanel.tsx

@@ -72,7 +72,16 @@ export function C2TasksPanel({ simulationId }: C2TasksPanelProps): JSX.Element {
                     <tr
                       data-testid="c2-task-row"
                       onClick={() => toggleExpand(task.id, task.completed)}
-                      className={`border-b border-hairline ${canExpand ? 'cursor-pointer hover:bg-cloud' : ''}`}
+                      onKeyDown={(e) => {
+                        if (canExpand && (e.key === 'Enter' || e.key === ' ')) {
+                          e.preventDefault();
+                          toggleExpand(task.id, task.completed);
+                        }
+                      }}
+                      tabIndex={canExpand ? 0 : undefined}
+                      role={canExpand ? 'button' : undefined}
+                      aria-expanded={canExpand ? isExpanded : undefined}
+                      className={`border-b border-hairline ${canExpand ? 'cursor-pointer hover:bg-cloud focus:outline-none focus-visible:ring-2 focus-visible:ring-primary' : ''}`}
                     >
                       <td className="px-md py-sm text-graphite">
                         {canExpand ? (
@@ -91,8 +100,8 @@ export function C2TasksPanel({ simulationId }: C2TasksPanelProps): JSX.Element {
                         {task.command}
                       </td>
                       <td className="px-md py-sm">
-                        <span className="inline-flex items-center rounded-pill px-3 py-[4px] text-[12px] leading-[1.3] font-bold bg-cloud text-graphite border border-hairline">
-                          {task.mapping_applied ? 'MIMIC' : 'IMPORT'}
+                        <span className="badge-pill-outline">
+                          {task.source === 'mimic' ? 'MIMIC' : 'IMPORT'}
                         </span>
                       </td>
                       <td className="px-md py-sm">