diff --git a/docs/superpowers/plans/2026-06-15-fightrate-ui-ux-refinamento-instrumento-forte.md b/docs/superpowers/plans/2026-06-15-fightrate-ui-ux-refinamento-instrumento-forte.md
new file mode 100644
index 0000000..32e610d
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-15-fightrate-ui-ux-refinamento-instrumento-forte.md
@@ -0,0 +1,4451 @@
+# FightRate RN — Refinamento UI/UX Instrumento Forte (Direção B) — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+>
+> **Goal:** Implementar a Direção B (Instrumento Forte) do refinamento UI/UX do FightRate RN conforme spec `2026-06-15-fightrate-ui-ux-refinamento-instrumento-forte.md`. Adicionar JetBrains Mono, LED pulsante, números tabulares, furos no TrainingChart, anel de aviso no Stop, dial tiles no Sensor, stagger reveal, e microanimações orquestradas.
+>
+> **Architecture:** React Native bare, sem novas deps externas. Adiciona ~6 componentes, 2 hooks, 1 módulo de motion. Tokens adicionados ao `src/theme/`. Componentes existentes modificados sem breaking change.
+>
+> **Tech Stack:** React Native 0.86, TypeScript 5.8, Reanimated 4.4 + Worklets 0.9, Gesture Handler 3.0, react-native-svg 15.15, lucide-react-native, Jest 29.
+>
+> **Reference spec:** `docs/superpowers/specs/2026-06-15-fightrate-ui-ux-refinamento-instrumento-forte.md`
+>
+> **Conventions:** Every commit messages follow Conventional Commits. PT-BR visible UI; English code identifiers. Run `npm run typecheck && npm run lint && npm test -- --runInBand` before each commit.
+
+---
+
+## File Structure
+
+### New files
+- `assets/fonts/JetBrainsMono-{Regular,Medium,Bold,ExtraBold}.ttf` (already downloaded)
+- `src/theme/motion.ts`
+- `src/hooks/usePulseAnimation.ts`
+- `src/hooks/useMotionPreference.ts`
+- `src/components/LiveDot.tsx`
+- `src/components/PressableSurface.tsx`
+- `src/components/EmptyState.tsx`
+- `src/components/DialTile.tsx`
+- `src/components/TrackRow.tsx`
+- `src/components/InsightRow.tsx`
+- `src/__tests__/motion.test.ts`
+- `src/__tests__/useMotionPreference.test.ts`
+- `src/__tests__/usePulseAnimation.test.tsx`
+- `src/__tests__/LiveDot.test.tsx`
+- `src/__tests__/PressableSurface.test.tsx`
+- `src/__tests__/EmptyState.test.tsx`
+- `src/__tests__/DialTile.test.tsx`
+- `src/__tests__/TrackRow.test.tsx`
+- `src/__tests__/InsightRow.test.tsx`
+
+### Modified files
+- `react-native.config.js`
+- `src/theme/index.ts`
+- `src/theme/typography.ts`
+- `src/theme/colors.ts`
+- `src/components/ActionButton.tsx`
+- `src/components/StatusTag.tsx`
+- `src/components/SectionPanel.tsx`
+- `src/components/MetricTile.tsx`
+- `src/components/TrainingChart.tsx`
+- `src/screens/CaptureScreen.tsx`
+- `src/screens/HistoryScreen.tsx`
+- `src/screens/SensorScreen.tsx`
+- `src/screens/InsightsScreen.tsx`
+- `src/app/FightRateApp.tsx`
+- `FIGHTRATE_DESIGN_SYSTEM.md`
+
+---
+
+## F1 — Foundations
+
+### Task F1.1: Wire JetBrains Mono via react-native.config.js
+
+**Files:**
+- Modify: `react-native.config.js` (root)
+- Verify: `android/app/src/main/assets/fonts/JetBrainsMono-Bold.ttf` (after link)
+
+- [ ] **Step 1: Inspect current config**
+
+Run: `ls /d/h/react-native.config.js 2>/dev/null || echo "NOT FOUND"`
+
+Expected: `NOT FOUND` (file doesn't exist yet — was deleted during RN rebuild)
+
+- [ ] **Step 2: Create the config file**
+
+Create `react-native.config.js` at repo root with this exact content:
+
+```js
+module.exports = {
+  project: {
+    android: {
+      packageName: 'com.healthtracking.fightrate',
+      sourceDir: './android',
+    },
+  },
+  assets: ['./assets/fonts'],
+};
+```
+
+- [ ] **Step 3: Link fonts into Android assets**
+
+Run: `cd /d/h && npx --no-install react-native-asset 2>&1 | tail -10`
+
+Expected: creates `android/app/src/main/assets/fonts/JetBrainsMono-*.ttf` (4 files). If `react-native-asset` is not installed, install it first: `npm install --save-dev react-native-asset`.
+
+If `react-native-asset` is unavailable as CLI, copy the files directly:
+```bash
+mkdir -p /d/h/android/app/src/main/assets/fonts
+cp /d/h/assets/fonts/JetBrainsMono-*.ttf /d/h/android/app/src/main/assets/fonts/
+```
+
+- [ ] **Step 4: Verify assets are linked**
+
+Run: `ls /d/h/android/app/src/main/assets/fonts/`
+
+Expected: 4 ttf files.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /d/h && git add react-native.config.js android/app/src/main/assets/fonts/ 2>/dev/null
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(assets): link JetBrains Mono via react-native.config.js"
+```
+
+---
+
+### Task F1.2: theme/motion.ts (presets de timing e easing)
+
+**Files:**
+- Create: `src/theme/motion.ts`
+- Modify: `src/theme/index.ts`
+- Test: `src/__tests__/motion.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `src/__tests__/motion.test.ts`:
+
+```ts
+import { motion } from '../theme/motion';
+
+describe('motion', () => {
+  it('exports bezier strings for easing presets', () => {
+    expect(motion.easeOutQuart).toBe('cubic-bezier(0.25, 1, 0.5, 1)');
+    expect(motion.easeOutExpo).toBe('cubic-bezier(0.16, 1, 0.3, 1)');
+    expect(motion.easeOutBack).toBe('cubic-bezier(0.34, 1.56, 0.64, 1)');
+    expect(motion.easeInOutQuart).toBe('cubic-bezier(0.76, 0, 0.24, 1)');
+  });
+
+  it('exports duration presets in ms', () => {
+    expect(motion.duration.instant).toBe(80);
+    expect(motion.duration.fast).toBe(160);
+    expect(motion.duration.normal).toBe(240);
+    expect(motion.duration.slow).toBe(380);
+    expect(motion.duration.pulse).toBe(800);
+    expect(motion.duration.pulseSlow).toBe(1600);
+  });
+
+  it('exports stagger offsets', () => {
+    expect(motion.stagger.row).toBe(50);
+    expect(motion.stagger.item).toBe(80);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /d/h && npx jest src/__tests__/motion.test.ts 2>&1 | tail -10`
+
+Expected: FAIL — cannot find `../theme/motion`.
+
+- [ ] **Step 3: Write minimal implementation**
+
+Create `src/theme/motion.ts`:
+
+```ts
+export const motion = {
+  easeOutQuart: 'cubic-bezier(0.25, 1, 0.5, 1)',
+  easeOutExpo: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  easeOutBack: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  easeInOutQuart: 'cubic-bezier(0.76, 0, 0.24, 1)',
+
+  duration: {
+    instant: 80,
+    fast: 160,
+    normal: 240,
+    slow: 380,
+    pulse: 800,
+    pulseSlow: 1600,
+  },
+
+  stagger: {
+    row: 50,
+    item: 80,
+  },
+} as const;
+
+export type MotionDuration = keyof typeof motion.duration;
+export type MotionEasing = keyof Pick<
+  typeof motion,
+  'easeOutQuart' | 'easeOutExpo' | 'easeOutBack' | 'easeInOutQuart'
+>;
+```
+
+- [ ] **Step 4: Re-export from theme index**
+
+Edit `src/theme/index.ts`:
+
+```ts
+export { colors } from './colors';
+export { radius } from './radius';
+export { spacing } from './spacing';
+export { typography } from './typography';
+export { motion } from './motion';
+```
+
+- [ ] **Step 5: Run test to verify it passes**
+
+Run: `cd /d/h && npx jest src/__tests__/motion.test.ts 2>&1 | tail -5`
+
+Expected: PASS — 3 tests passed.
+
+- [ ] **Step 6: Commit**
+
+```bash
+cd /d/h && git add src/theme/motion.ts src/theme/index.ts src/__tests__/motion.test.ts
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(theme): motion presets (timing, easing, stagger)"
+```
+
+---
+
+### Task F1.3: theme/typography.ts (add numeric tokens for JetBrains Mono)
+
+**Files:**
+- Modify: `src/theme/typography.ts`
+- Verify: existing tests still pass
+
+- [ ] **Step 1: Add numeric tokens**
+
+Edit `src/theme/typography.ts` to add these keys (preserving existing `display`, `displaySmall`, `label`, `body`, `button`):
+
+```ts
+export const typography = {
+  display: {
+    fontSize: 82,
+    lineHeight: 74,
+    fontWeight: '900' as const,
+    letterSpacing: -7,
+  },
+  displaySmall: {
+    fontSize: 48,
+    lineHeight: 46,
+    fontWeight: '900' as const,
+    letterSpacing: -3,
+  },
+  displayNumeric: {
+    fontFamily: 'JetBrainsMono-ExtraBold',
+    fontVariant: ['tabular-nums'] as const,
+    fontSize: 110,
+    lineHeight: 100,
+    fontWeight: '900' as const,
+    letterSpacing: -7,
+  },
+  displaySmallNumeric: {
+    fontFamily: 'JetBrainsMono-ExtraBold',
+    fontVariant: ['tabular-nums'] as const,
+    fontSize: 56,
+    lineHeight: 54,
+    fontWeight: '900' as const,
+    letterSpacing: -3,
+  },
+  metricNumeric: {
+    fontFamily: 'JetBrainsMono-Bold',
+    fontVariant: ['tabular-nums'] as const,
+    fontSize: 28,
+    lineHeight: 30,
+    fontWeight: '800' as const,
+    letterSpacing: -1.2,
+  },
+  detailNumeric: {
+    fontFamily: 'JetBrainsMono-Bold',
+    fontVariant: ['tabular-nums'] as const,
+    fontSize: 18,
+    lineHeight: 22,
+    fontWeight: '800' as const,
+    letterSpacing: -0.8,
+  },
+  label: {
+    fontSize: 10,
+    lineHeight: 13,
+    fontWeight: '900' as const,
+    letterSpacing: 1.4,
+    textTransform: 'uppercase' as const,
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+    fontWeight: '500' as const,
+  },
+  button: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '900' as const,
+    letterSpacing: 0.8,
+    textTransform: 'uppercase' as const,
+  },
+} as const;
+```
+
+- [ ] **Step 2: Run typecheck**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -5`
+
+Expected: 0 errors.
+
+- [ ] **Step 3: Run existing tests to verify no regression**
+
+Run: `cd /d/h && npm test -- --runInBand 2>&1 | tail -10`
+
+Expected: all 55 tests still pass.
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd /d/h && git add src/theme/typography.ts
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(theme): numeric typography tokens (JetBrains Mono tabular)"
+```
+
+---
+
+### Task F1.4: theme/colors.ts (add ringWarn for stop alert ring)
+
+**Files:**
+- Modify: `src/theme/colors.ts`
+
+- [ ] **Step 1: Add the new key**
+
+Edit `src/theme/colors.ts` — add `ringWarn` after the `stopText` line:
+
+```ts
+export const colors = {
+  canvas: '#070605',
+  canvasSoft: '#0D0906',
+  surface: '#12100C',
+  surfaceRaised: '#1D170F',
+  surfaceHot: '#251A10',
+  text: '#F8EAD8',
+  textMuted: '#B9A98E',
+  textDim: '#746754',
+  line: '#392D1E',
+  action: '#E23B2E',
+  warning: '#FFB43D',
+  success: '#34C77B',
+  stopSurface: '#FFF0DC',
+  stopText: '#120B07',
+  ringWarn: 'rgba(226, 59, 46, 0.55)',
+  black: '#030302',
+} as const;
+```
+
+- [ ] **Step 2: Run typecheck and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 type errors, all 55 tests pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add src/theme/colors.ts
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(theme): add ringWarn color for stop alert ring"
+```
+
+---
+
+### Task F1.5: useMotionPreference hook
+
+**Files:**
+- Create: `src/hooks/useMotionPreference.ts`
+- Test: `src/__tests__/useMotionPreference.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `src/__tests__/useMotionPreference.test.ts`:
+
+```ts
+import { act, renderHook } from '@testing-library/react-native';
+import {
+  useMotionPreference,
+  type MotionPreferenceListener,
+} from '../hooks/useMotionPreference';
+
+type AccessibilityInfoMock = {
+  isReduceMotionEnabled: jest.Mock<Promise<boolean>, []>;
+  addEventListener: jest.Mock<void, [string, MotionPreferenceListener]>;
+  removeEventListener: jest.Mock<void, [string, MotionPreferenceListener]>;
+};
+
+const mockAccessibilityInfo: AccessibilityInfoMock = {
+  isReduceMotionEnabled: jest.fn(),
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+};
+
+jest.mock('react-native', () => ({
+  AccessibilityInfo: mockAccessibilityInfo,
+}));
+
+describe('useMotionPreference', () => {
+  beforeEach(() => {
+    mockAccessibilityInfo.isReduceMotionEnabled.mockReset();
+    mockAccessibilityInfo.addEventListener.mockReset();
+    mockAccessibilityInfo.removeEventListener.mockReset();
+    mockAccessibilityInfo.isReduceMotionEnabled.mockResolvedValue(false);
+  });
+
+  it('starts as false by default and resolves to the system value', async () => {
+    mockAccessibilityInfo.isReduceMotionEnabled.mockResolvedValueOnce(true);
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useMotionPreference(),
+    );
+
+    expect(result.current).toBe(false);
+    await waitForNextUpdate();
+    expect(result.current).toBe(true);
+  });
+
+  it('subscribes to reduceMotionChanged and updates state', () => {
+    let listener: MotionPreferenceListener | undefined;
+    mockAccessibilityInfo.addEventListener.mockImplementation((event, fn) => {
+      if (event === 'reduceMotionChanged') {
+        listener = fn;
+      }
+    });
+
+    const { result } = renderHook(() => useMotionPreference());
+    expect(result.current).toBe(false);
+
+    act(() => {
+      listener?.(true);
+    });
+    expect(result.current).toBe(true);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /d/h && npx jest src/__tests__/useMotionPreference.test.ts 2>&1 | tail -10`
+
+Expected: FAIL — cannot find `../hooks/useMotionPreference`.
+
+- [ ] **Step 3: Write minimal implementation**
+
+Create `src/hooks/useMotionPreference.ts`:
+
+```ts
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+export type MotionPreferenceListener = (reduceMotion: boolean) => void;
+
+export function useMotionPreference(): boolean {
+  const [reduceMotion, setReduceMotion] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((value) => {
+        if (mounted) setReduceMotion(value);
+      })
+      .catch(() => undefined);
+
+    const listener: MotionPreferenceListener = (value) => {
+      if (mounted) setReduceMotion(value);
+    };
+    AccessibilityInfo.addEventListener('reduceMotionChanged', listener);
+
+    return () => {
+      mounted = false;
+      AccessibilityInfo.removeEventListener('reduceMotionChanged', listener);
+    };
+  }, []);
+
+  return reduceMotion;
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd /d/h && npx jest src/__tests__/useMotionPreference.test.ts 2>&1 | tail -5`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /d/h && git add src/hooks/useMotionPreference.ts src/__tests__/useMotionPreference.test.ts
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(hooks): useMotionPreference for reduce motion respect"
+```
+
+---
+
+## F2 — Atomic components (TDD)
+
+### Task F2.1: usePulseAnimation hook
+
+**Files:**
+- Create: `src/hooks/usePulseAnimation.ts`
+- Test: `src/__tests__/usePulseAnimation.test.tsx`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `src/__tests__/usePulseAnimation.test.tsx`:
+
+```tsx
+import { act, renderHook } from '@testing-library/react-native';
+import { usePulseAnimation } from '../hooks/usePulseAnimation';
+
+jest.mock('react-native-reanimated', () => {
+  const values: Record<number, { value: number }> = {};
+  let counter = 0;
+  return {
+    Easing: { out: () => (() => 0), inOut: () => (() => 0), quad: () => 0 },
+    useSharedValue: (initial: number) => {
+      const ref = { value: initial };
+      values[counter] = ref;
+      counter += 1;
+      return ref;
+    },
+    useAnimatedStyle: (fn: () => unknown) => fn(),
+    withTiming: (to: number) => to,
+    withRepeat: (to: number) => to,
+    cancelAnimation: () => undefined,
+  };
+});
+
+describe('usePulseAnimation', () => {
+  it('returns initial opacity 0.5 and scale 1 when inactive', () => {
+    const { result } = renderHook(() => usePulseAnimation(false));
+    const style = result.current as { transform: Array<{ scale: number }>; opacity: number };
+    expect(style.transform[0].scale).toBe(1);
+    expect(style.opacity).toBe(0.5);
+  });
+
+  it('returns opacity 1 when active', () => {
+    const { result } = renderHook(() => usePulseAnimation(true));
+    const style = result.current as { opacity: number };
+    expect(style.opacity).toBe(1);
+  });
+
+  it('updates opacity when active flag changes', () => {
+    const { result, rerender } = renderHook(
+      ({ active }: { active: boolean }) => usePulseAnimation(active),
+      { initialProps: { active: false } },
+    );
+    let style = result.current as { opacity: number };
+    expect(style.opacity).toBe(0.5);
+
+    act(() => {
+      rerender({ active: true });
+    });
+    style = result.current as { opacity: number };
+    expect(style.opacity).toBe(1);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /d/h && npx jest src/__tests__/usePulseAnimation.test.tsx 2>&1 | tail -10`
+
+Expected: FAIL.
+
+- [ ] **Step 3: Write minimal implementation**
+
+Create `src/hooks/usePulseAnimation.ts`:
+
+```ts
+import { useEffect } from 'react';
+import {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+type AnimatedStyle = {
+  transform: Array<{ scale: number }>;
+  opacity: number;
+};
+
+export function usePulseAnimation(active: boolean, durationMs = 1600): AnimatedStyle {
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(active ? 1 : 0.5);
+
+  useEffect(() => {
+    if (active) {
+      scale.value = withRepeat(
+        withTiming(1.4, { duration: durationMs / 2, easing: Easing.out(Easing.quad) }),
+        -1,
+        true,
+      );
+      opacity.value = withRepeat(
+        withTiming(0.55, { duration: durationMs / 2, easing: Easing.inOut(Easing.quad) }),
+        -1,
+        true,
+      );
+    } else {
+      cancelAnimation(scale);
+      cancelAnimation(opacity);
+      scale.value = withTiming(1, { duration: 160 });
+      opacity.value = withTiming(0.5, { duration: 160 });
+    }
+  }, [active, durationMs, scale, opacity]);
+
+  return useAnimatedStyle<AnimatedStyle>(() => ({
+    transform: [{ scale: scale.value }],
+    opacity: opacity.value,
+  }));
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd /d/h && npx jest src/__tests__/usePulseAnimation.test.tsx 2>&1 | tail -5`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /d/h && git add src/hooks/usePulseAnimation.ts src/__tests__/usePulseAnimation.test.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(hooks): usePulseAnimation for live indicators"
+```
+
+---
+
+### Task F2.2: LiveDot component
+
+**Files:**
+- Create: `src/components/LiveDot.tsx`
+- Test: `src/__tests__/LiveDot.test.tsx`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `src/__tests__/LiveDot.test.tsx`:
+
+```tsx
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { LiveDot } from '../components/LiveDot';
+
+jest.mock('react-native-reanimated', () => {
+  const ReactMod = require('react');
+  return {
+    __esModule: true,
+    default: { View: ({ children }: { children: React.ReactNode }) => ReactMod.createElement('View', null, children) },
+    Easing: { out: () => (() => 0), inOut: () => (() => 0), quad: () => 0 },
+    useSharedValue: (initial: number) => ({ value: initial }),
+    useAnimatedStyle: (fn: () => unknown) => fn(),
+    withTiming: (to: number) => to,
+    withRepeat: (to: number) => to,
+    cancelAnimation: () => undefined,
+  };
+});
+
+describe('LiveDot', () => {
+  it('renders with success color when live=true', () => {
+    render(<LiveDot live testID="dot" />);
+    const node = screen.getByTestId('dot');
+    expect(node.props.accessibilityLabel).toBe('AO VIVO');
+  });
+
+  it('renders with INATIVO label when live=false', () => {
+    render(<LiveDot live={false} testID="dot" />);
+    const node = screen.getByTestId('dot');
+    expect(node.props.accessibilityLabel).toBe('INATIVO');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /d/h && npx jest src/__tests__/LiveDot.test.tsx 2>&1 | tail -10`
+
+Expected: FAIL.
+
+- [ ] **Step 3: Write minimal implementation**
+
+Create `src/components/LiveDot.tsx`:
+
+```tsx
+import React from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { colors } from '../theme';
+import { usePulseAnimation } from '../hooks/usePulseAnimation';
+
+type Props = {
+  readonly live: boolean;
+  readonly size?: number;
+  readonly testID?: string;
+};
+
+export function LiveDot({ live, size = 8, testID }: Props) {
+  const animatedStyle = usePulseAnimation(live);
+  const dotStyle: ViewStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    backgroundColor: live ? colors.success : colors.textDim,
+  };
+
+  return (
+    <Animated.View
+      accessibilityLabel={live ? 'AO VIVO' : 'INATIVO'}
+      accessibilityRole="image"
+      style={[styles.base, dotStyle, animatedStyle]}
+      testID={testID}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    alignSelf: 'center',
+  },
+});
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd /d/h && npx jest src/__tests__/LiveDot.test.tsx 2>&1 | tail -5`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /d/h && git add src/components/LiveDot.tsx src/__tests__/LiveDot.test.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(components): LiveDot pulsing indicator"
+```
+
+---
+
+### Task F2.3: PressableSurface component
+
+**Files:**
+- Create: `src/components/PressableSurface.tsx`
+- Test: `src/__tests__/PressableSurface.test.tsx`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `src/__tests__/PressableSurface.test.tsx`:
+
+```tsx
+import React from 'react';
+import { Text } from 'react-native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { PressableSurface } from '../components/PressableSurface';
+
+jest.mock('react-native-reanimated', () => {
+  const ReactMod = require('react');
+  const RN = require('react-native');
+  return {
+    __esModule: true,
+    default: {
+      View: RN.View,
+      createAnimatedComponent: (Component: unknown) => Component,
+    },
+    Easing: { out: () => (() => 0), inOut: () => (() => 0), quad: () => 0 },
+    useSharedValue: (initial: number) => ({ value: initial }),
+    useAnimatedStyle: (fn: () => unknown) => fn(),
+    withTiming: (to: number) => to,
+    withRepeat: (to: number) => to,
+    cancelAnimation: () => undefined,
+  };
+});
+
+describe('PressableSurface', () => {
+  it('renders children inside pressable', () => {
+    render(
+      <PressableSurface onPress={() => undefined} testID="surface">
+        <Text>Hi</Text>
+      </PressableSurface>,
+    );
+    expect(screen.getByText('Hi')).toBeTruthy();
+  });
+
+  it('triggers onPress when pressed', () => {
+    const onPress = jest.fn();
+    render(
+      <PressableSurface onPress={onPress} testID="surface">
+        <Text>Hi</Text>
+      </PressableSurface>,
+    );
+    fireEvent.press(screen.getByTestId('surface'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('has accessibilityRole=button when accessibilityLabel is set', () => {
+    render(
+      <PressableSurface onPress={() => undefined} accessibilityLabel="Tap me" testID="surface">
+        <Text>Hi</Text>
+      </PressableSurface>,
+    );
+    expect(screen.getByTestId('surface').props.accessibilityRole).toBe('button');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /d/h && npx jest src/__tests__/PressableSurface.test.tsx 2>&1 | tail -10`
+
+Expected: FAIL.
+
+- [ ] **Step 3: Write minimal implementation**
+
+Create `src/components/PressableSurface.tsx`:
+
+```tsx
+import React, { useCallback, type ReactNode } from 'react';
+import { Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+type Props = {
+  readonly children: ReactNode;
+  readonly onPress?: () => void;
+  readonly disabled?: boolean;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly accessibilityLabel?: string;
+  readonly testID?: string;
+};
+
+export function PressableSurface({
+  children,
+  onPress,
+  disabled,
+  style,
+  accessibilityLabel,
+  testID,
+}: Props) {
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(1);
+
+  const onPressIn = useCallback(() => {
+    scale.value = withTiming(0.96, { duration: 80, easing: Easing.out(Easing.quad) });
+    opacity.value = withTiming(0.82, { duration: 80, easing: Easing.out(Easing.quad) });
+  }, [scale, opacity]);
+
+  const onPressOut = useCallback(() => {
+    scale.value = withTiming(1, { duration: 160, easing: Easing.out(Easing.quad) });
+    opacity.value = withTiming(1, { duration: 160, easing: Easing.out(Easing.quad) });
+  }, [scale, opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <Pressable
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole={accessibilityLabel ? 'button' : undefined}
+        disabled={disabled}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        style={[styles.base, style]}
+        testID={testID}
+      >
+        {children}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    alignSelf: 'stretch',
+  },
+});
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd /d/h && npx jest src/__tests__/PressableSurface.test.tsx 2>&1 | tail -5`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /d/h && git add src/components/PressableSurface.tsx src/__tests__/PressableSurface.test.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(components): PressableSurface with refined press feedback"
+```
+
+---
+
+### Task F2.4: EmptyState component
+
+**Files:**
+- Create: `src/components/EmptyState.tsx`
+- Test: `src/__tests__/EmptyState.test.tsx`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `src/__tests__/EmptyState.test.tsx`:
+
+```tsx
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { EmptyState } from '../components/EmptyState';
+
+describe('EmptyState', () => {
+  it('renders eyebrow, title, and copy', () => {
+    render(
+      <EmptyState
+        eyebrow="SEM USO"
+        title="Nenhum treino salvo"
+        copy="Comece uma janela para ver seus dados."
+      />,
+    );
+    expect(screen.getByText('SEM USO')).toBeTruthy();
+    expect(screen.getByText('Nenhum treino salvo')).toBeTruthy();
+    expect(screen.getByText('Comece uma janela para ver seus dados.')).toBeTruthy();
+  });
+
+  it('uses amber tone by default', () => {
+    const { toJSON } = render(
+      <EmptyState eyebrow="X" title="Y" copy="Z" testID="es" />,
+    );
+    const tree = JSON.stringify(toJSON());
+    expect(tree).toContain('rgba(255, 180, 61');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /d/h && npx jest src/__tests__/EmptyState.test.tsx 2>&1 | tail -10`
+
+Expected: FAIL.
+
+- [ ] **Step 3: Write minimal implementation**
+
+Create `src/components/EmptyState.tsx`:
+
+```tsx
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Svg, { Circle, Line, Rect } from 'react-native-svg';
+import { colors, radius, spacing, typography } from '../theme';
+
+type Tone = 'amber' | 'red' | 'green';
+
+type Props = {
+  readonly eyebrow: string;
+  readonly title: string;
+  readonly copy: string;
+  readonly tone?: Tone;
+  readonly testID?: string;
+};
+
+function toneColor(tone: Tone): string {
+  if (tone === 'red') return colors.action;
+  if (tone === 'green') return colors.success;
+  return colors.warning;
+}
+
+function toneBackground(tone: Tone): string {
+  if (tone === 'red') return 'rgba(226, 59, 46, 0.12)';
+  if (tone === 'green') return 'rgba(52, 199, 123, 0.12)';
+  return 'rgba(255, 180, 61, 0.10)';
+}
+
+export function EmptyState({
+  eyebrow,
+  title,
+  copy,
+  tone = 'amber',
+  testID,
+}: Props) {
+  return (
+    <View
+      accessibilityLabel={`${eyebrow}. ${title}. ${copy}`}
+      style={[styles.wrap, { backgroundColor: toneBackground(tone) }]}
+      testID={testID}
+    >
+      <View style={styles.geom}>
+        <Svg height={64} viewBox="0 0 64 64" width={64}>
+          <Rect
+            x={6}
+            y={6}
+            width={52}
+            height={52}
+            stroke={toneColor(tone)}
+            strokeWidth={1}
+            fill="none"
+          />
+          <Circle
+            cx={32}
+            cy={32}
+            r={20}
+            stroke={toneColor(tone)}
+            strokeWidth={1}
+            fill="none"
+          />
+          <Line
+            x1={6}
+            y1={58}
+            x2={58}
+            y2={6}
+            stroke={toneColor(tone)}
+            strokeWidth={1}
+          />
+        </Svg>
+      </View>
+      <Text style={[styles.eyebrow, { color: toneColor(tone) }]}>{eyebrow}</Text>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.copy}>{copy}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+    borderRadius: radius.md,
+    paddingVertical: spacing.xl,
+    paddingHorizontal: spacing.md,
+    minHeight: 220,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+  },
+  geom: {
+    marginBottom: spacing.sm,
+  },
+  eyebrow: {
+    ...typography.label,
+  },
+  title: {
+    ...typography.display,
+    fontSize: 36,
+    lineHeight: 38,
+    textAlign: 'center',
+  },
+  copy: {
+    ...typography.body,
+    color: colors.textMuted,
+    textAlign: 'center',
+    maxWidth: 280,
+  },
+});
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd /d/h && npx jest src/__tests__/EmptyState.test.tsx 2>&1 | tail -5`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /d/h && git add src/components/EmptyState.tsx src/__tests__/EmptyState.test.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(components): EmptyState with instrument geometry"
+```
+
+---
+
+### Task F2.5: DialTile component
+
+**Files:**
+- Create: `src/components/DialTile.tsx`
+- Test: `src/__tests__/DialTile.test.tsx`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `src/__tests__/DialTile.test.tsx`:
+
+```tsx
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { DialTile } from '../components/DialTile';
+
+describe('DialTile', () => {
+  it('renders label and value', () => {
+    render(<DialTile label="RSSI" value="-61 dBm" testID="dial" />);
+    expect(screen.getByText('RSSI')).toBeTruthy();
+    expect(screen.getByText('-61 dBm')).toBeTruthy();
+  });
+
+  it('combines label and value into accessibilityLabel', () => {
+    render(<DialTile label="RSSI" value="-61 dBm" testID="dial" />);
+    expect(screen.getByTestId('dial').props.accessibilityLabel).toBe('RSSI: -61 dBm');
+  });
+
+  it('uses action color when tone=red', () => {
+    const { toJSON } = render(
+      <DialTile label="X" value="Y" tone="red" testID="dial" />,
+    );
+    const tree = JSON.stringify(toJSON());
+    expect(tree).toContain('#E23B2E');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /d/h && npx jest src/__tests__/DialTile.test.tsx 2>&1 | tail -10`
+
+Expected: FAIL.
+
+- [ ] **Step 3: Write minimal implementation**
+
+Create `src/components/DialTile.tsx`:
+
+```tsx
+import React from 'react';
+import { StyleSheet, Text, View, type ViewStyle } from 'react-native';
+import { colors, spacing, typography } from '../theme';
+
+type Tone = 'amber' | 'green' | 'red';
+
+type Props = {
+  readonly label: string;
+  readonly value: string;
+  readonly tone?: Tone;
+  readonly testID?: string;
+};
+
+function toneColor(tone: Tone | undefined): string {
+  if (tone === 'red') return colors.action;
+  if (tone === 'green') return colors.success;
+  return colors.warning;
+}
+
+export function DialTile({ label, value, tone = 'amber', testID }: Props) {
+  const markerStyle: ViewStyle = { backgroundColor: toneColor(tone) };
+  return (
+    <View
+      accessibilityLabel={`${label}: ${value}`}
+      style={styles.row}
+      testID={testID}
+    >
+      <View style={styles.markerWrap}>
+        <View style={[styles.marker, markerStyle]} />
+      </View>
+      <Text style={styles.value}>{value}</Text>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    minHeight: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: 1,
+    borderColor: colors.line,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    gap: spacing.md,
+  },
+  markerWrap: {
+    width: 4,
+    height: 32,
+    justifyContent: 'center',
+  },
+  marker: {
+    width: 2,
+    height: 32,
+  },
+  value: {
+    ...typography.detailNumeric,
+    flex: 1,
+  },
+  label: {
+    ...typography.label,
+    color: colors.textDim,
+  },
+});
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd /d/h && npx jest src/__tests__/DialTile.test.tsx 2>&1 | tail -5`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /d/h && git add src/components/DialTile.tsx src/__tests__/DialTile.test.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(components): DialTile for sensor signal rows"
+```
+
+---
+
+### Task F2.6: TrackRow component
+
+**Files:**
+- Create: `src/components/TrackRow.tsx`
+- Test: `src/__tests__/TrackRow.test.tsx`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `src/__tests__/TrackRow.test.tsx`:
+
+```tsx
+import React from 'react';
+import { Text } from 'react-native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { TrackRow } from '../components/TrackRow';
+
+describe('TrackRow', () => {
+  const baseProps = {
+    trackNumber: 3,
+    day: '15/06',
+    hour: '19:30',
+    title: 'Sparring',
+    meta: '30 min · 600 amostras',
+    metrics: [
+      { label: 'MÉD 152' },
+      { label: 'PICO 184', tone: 'hot' as const },
+    ],
+    isOpen: false,
+    onPress: jest.fn(),
+    accessibilityLabel: 'Janela 3',
+  };
+
+  beforeEach(() => {
+    baseProps.onPress.mockClear();
+  });
+
+  it('renders track number zero-padded', () => {
+    render(
+      <TrackRow {...baseProps} testID="row">
+        <Text />
+      </TrackRow>,
+    );
+    expect(screen.getByText('T03')).toBeTruthy();
+  });
+
+  it('renders day, hour, title, and meta', () => {
+    render(
+      <TrackRow {...baseProps} testID="row">
+        <Text />
+      </TrackRow>,
+    );
+    expect(screen.getByText('15/06')).toBeTruthy();
+    expect(screen.getByText('19:30')).toBeTruthy();
+    expect(screen.getByText('Sparring')).toBeTruthy();
+    expect(screen.getByText('30 min · 600 amostras')).toBeTruthy();
+  });
+
+  it('renders metrics labels', () => {
+    render(
+      <TrackRow {...baseProps} testID="row">
+        <Text />
+      </TrackRow>,
+    );
+    expect(screen.getByText('MÉD 152')).toBeTruthy();
+    expect(screen.getByText('PICO 184')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    render(
+      <TrackRow {...baseProps} testID="row">
+        <Text />
+      </TrackRow>,
+    );
+    fireEvent.press(screen.getByTestId('row'));
+    expect(baseProps.onPress).toHaveBeenCalledTimes(1);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /d/h && npx jest src/__tests__/TrackRow.test.tsx 2>&1 | tail -10`
+
+Expected: FAIL.
+
+- [ ] **Step 3: Write minimal implementation**
+
+Create `src/components/TrackRow.tsx`:
+
+```tsx
+import React, { type ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View, type ViewStyle } from 'react-native';
+import { ChevronDown, ChevronUp } from 'lucide-react-native';
+import { colors, spacing, typography } from '../theme';
+
+type MetricTone = 'normal' | 'hot';
+
+type Metric = {
+  readonly label: string;
+  readonly tone?: MetricTone;
+};
+
+type Props = {
+  readonly trackNumber: number;
+  readonly day: string;
+  readonly hour: string;
+  readonly title: string;
+  readonly meta: string;
+  readonly metrics: ReadonlyArray<Metric>;
+  readonly isOpen: boolean;
+  readonly onPress: () => void;
+  readonly accessibilityLabel: string;
+  readonly children?: ReactNode;
+  readonly testID?: string;
+};
+
+export function TrackRow({
+  trackNumber,
+  day,
+  hour,
+  title,
+  meta,
+  metrics,
+  isOpen,
+  onPress,
+  accessibilityLabel,
+  children,
+  testID,
+}: Props) {
+  const trackNumberLabel = `T${String(trackNumber).padStart(2, '0')}`;
+  const sideRailStyle: ViewStyle = {
+    backgroundColor: isOpen ? colors.action : colors.line,
+  };
+  return (
+    <View>
+      <Pressable
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        onPress={onPress}
+        style={({ pressed }) => [styles.row, pressed ? styles.pressed : null]}
+        testID={testID}
+      >
+        <View style={[styles.sideRail, sideRailStyle]} />
+        <View style={styles.trackNumberWrap}>
+          <Text style={styles.trackNumber}>{trackNumberLabel}</Text>
+        </View>
+        <View style={styles.dateBlock}>
+          <Text style={styles.day}>{day}</Text>
+          <Text style={styles.hour}>{hour}</Text>
+        </View>
+        <View style={styles.body}>
+          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.meta}>{meta}</Text>
+          <View style={styles.metricLine}>
+            {metrics.map((metric, index) => (
+              <Text
+                key={index}
+                style={[
+                  styles.metricText,
+                  metric.tone === 'hot' ? styles.metricTextHot : null,
+                ]}
+              >
+                {metric.label}
+              </Text>
+            ))}
+          </View>
+        </View>
+        <View style={styles.chevron}>
+          {isOpen ? (
+            <ChevronUp color={colors.warning} size={18} strokeWidth={2.6} />
+          ) : (
+            <ChevronDown color={colors.textMuted} size={18} strokeWidth={2.6} />
+          )}
+        </View>
+      </Pressable>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    gap: spacing.sm,
+    borderTopWidth: 1,
+    borderTopColor: colors.line,
+  },
+  pressed: {
+    opacity: 0.72,
+  },
+  sideRail: {
+    width: 2,
+    height: 40,
+  },
+  trackNumberWrap: {
+    width: 28,
+    alignItems: 'flex-start',
+  },
+  trackNumber: {
+    ...typography.label,
+    color: colors.textMuted,
+  },
+  dateBlock: {
+    width: 56,
+  },
+  day: {
+    color: colors.warning,
+    fontSize: 18,
+    lineHeight: 21,
+    fontWeight: '900',
+    letterSpacing: -0.6,
+  },
+  hour: {
+    ...typography.label,
+    color: colors.textDim,
+    marginTop: 2,
+  },
+  body: {
+    flex: 1,
+  },
+  title: {
+    color: colors.text,
+    fontSize: 18,
+    lineHeight: 22,
+    fontWeight: '900',
+    letterSpacing: -0.6,
+  },
+  meta: {
+    ...typography.body,
+    color: colors.textMuted,
+    fontSize: 13,
+    lineHeight: 17,
+    marginTop: 2,
+  },
+  metricLine: {
+    flexDirection: 'row',
+    gap: spacing.sm,
+    marginTop: spacing.xs,
+  },
+  metricText: {
+    ...typography.label,
+    color: colors.textMuted,
+  },
+  metricTextHot: {
+    color: colors.action,
+  },
+  chevron: {
+    width: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd /d/h && npx jest src/__tests__/TrackRow.test.tsx 2>&1 | tail -5`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /d/h && git add src/components/TrackRow.tsx src/__tests__/TrackRow.test.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(components): TrackRow for history sessions"
+```
+
+---
+
+### Task F2.7: InsightRow component
+
+**Files:**
+- Create: `src/components/InsightRow.tsx`
+- Test: `src/__tests__/InsightRow.test.tsx`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `src/__tests__/InsightRow.test.tsx`:
+
+```tsx
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { InsightRow } from '../components/InsightRow';
+
+describe('InsightRow', () => {
+  it('renders index zero-padded', () => {
+    render(
+      <InsightRow
+        index={3}
+        label="Carga"
+        statusLabel="ok"
+        summary="Carga alta mas dentro do padrão"
+        detail="TRIMP 145"
+        value="145"
+        unit="TRIMP"
+        tone="good"
+        testID="row"
+      />,
+    );
+    expect(screen.getByText('03')).toBeTruthy();
+  });
+
+  it('renders label, status, summary, detail, and value', () => {
+    render(
+      <InsightRow
+        index={1}
+        label="Carga"
+        statusLabel="ok"
+        summary="Carga alta"
+        detail="TRIMP 145"
+        value="145"
+        unit="TRIMP"
+        tone="good"
+        testID="row"
+      />,
+    );
+    expect(screen.getByText('Carga')).toBeTruthy();
+    expect(screen.getByText('ok')).toBeTruthy();
+    expect(screen.getByText('Carga alta')).toBeTruthy();
+    expect(screen.getByText('TRIMP 145')).toBeTruthy();
+    expect(screen.getByText('145')).toBeTruthy();
+    expect(screen.getByText('TRIMP')).toBeTruthy();
+  });
+
+  it('combines label, status, and value into accessibilityLabel', () => {
+    render(
+      <InsightRow
+        index={1}
+        label="Carga"
+        statusLabel="ok"
+        summary="Carga alta"
+        detail="TRIMP 145"
+        value="145"
+        tone="good"
+        testID="row"
+      />,
+    );
+    const label = screen.getByTestId('row').props.accessibilityLabel;
+    expect(label).toContain('Carga');
+    expect(label).toContain('ok');
+    expect(label).toContain('145');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /d/h && npx jest src/__tests__/InsightRow.test.tsx 2>&1 | tail -10`
+
+Expected: FAIL.
+
+- [ ] **Step 3: Write minimal implementation**
+
+Create `src/components/InsightRow.tsx`:
+
+```tsx
+import React, { useEffect } from 'react';
+import { StyleSheet, Text, View, type ViewStyle } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import { colors, motion, spacing, typography } from '../theme';
+
+type Tone = 'good' | 'warning' | 'danger' | 'neutral';
+
+type Props = {
+  readonly index: number;
+  readonly label: string;
+  readonly statusLabel: string;
+  readonly summary: string;
+  readonly detail: string;
+  readonly value: string;
+  readonly unit?: string;
+  readonly tone: Tone;
+  readonly testID?: string;
+};
+
+function toneColor(tone: Tone): string {
+  if (tone === 'good') return colors.success;
+  if (tone === 'danger') return colors.action;
+  if (tone === 'warning') return colors.warning;
+  return colors.text;
+}
+
+export function InsightRow({
+  index,
+  label,
+  statusLabel,
+  summary,
+  detail,
+  value,
+  unit,
+  tone,
+  testID,
+}: Props) {
+  const indexLabel = String(index).padStart(2, '0');
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(8);
+  const color = toneColor(tone);
+
+  useEffect(() => {
+    const delay = index < 8 ? index * motion.stagger.row : 0;
+    opacity.value = withDelay(
+      delay,
+      withTiming(1, { duration: motion.duration.normal, easing: Easing.out(Easing.quad) }),
+    );
+    translateY.value = withDelay(
+      delay,
+      withTiming(0, { duration: motion.duration.normal, easing: Easing.out(Easing.quad) }),
+    );
+  }, [index, opacity, translateY]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  const indexStyle: ViewStyle = { color };
+  return (
+    <Animated.View
+      accessibilityLabel={`${label}, status ${statusLabel}, valor ${value}${unit ? ' ' + unit : ''}`}
+      style={[styles.row, animatedStyle]}
+      testID={testID}
+    >
+      <Text style={styles.index}>{indexLabel}</Text>
+      <View style={styles.body}>
+        <View style={styles.topLine}>
+          <Text style={styles.label}>{label}</Text>
+          <Text style={[styles.status, indexStyle]}>{statusLabel}</Text>
+        </View>
+        <Text style={styles.summary}>{summary}</Text>
+        <Text style={styles.detail}>{detail}</Text>
+      </View>
+      <View style={styles.valueBox}>
+        <Text style={[styles.value, indexStyle]}>{value}</Text>
+        {unit ? <Text style={styles.unit}>{unit}</Text> : null}
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    minHeight: 92,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.line,
+    flexDirection: 'row',
+    gap: spacing.sm,
+    paddingVertical: spacing.sm,
+  },
+  index: {
+    ...typography.label,
+    color: colors.textDim,
+    width: 28,
+  },
+  body: {
+    flex: 1,
+    gap: spacing.xxs,
+  },
+  topLine: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: spacing.sm,
+  },
+  label: {
+    ...typography.label,
+    color: colors.text,
+    flexShrink: 1,
+  },
+  status: {
+    ...typography.label,
+    textAlign: 'right',
+  },
+  summary: {
+    color: colors.text,
+    fontSize: 16,
+    lineHeight: 20,
+    fontWeight: '800',
+    letterSpacing: -0.45,
+  },
+  detail: {
+    color: colors.textMuted,
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '600',
+  },
+  valueBox: {
+    width: 84,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  value: {
+    ...typography.metricNumeric,
+    textAlign: 'right',
+  },
+  unit: {
+    ...typography.label,
+    color: colors.textDim,
+    textAlign: 'right',
+  },
+});
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd /d/h && npx jest src/__tests__/InsightRow.test.tsx 2>&1 | tail -5`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /d/h && git add src/components/InsightRow.tsx src/__tests__/InsightRow.test.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(components): InsightRow with stagger reveal animation"
+```
+
+---
+
+## F3 — Existing component updates
+
+### Task F3.1: ActionButton — add stopAlert variant
+
+**Files:**
+- Modify: `src/components/ActionButton.tsx`
+
+- [ ] **Step 1: Add stopAlert variant + AlertRing component**
+
+Replace the entire `src/components/ActionButton.tsx` with:
+
+```tsx
+import React, { useEffect } from 'react';
+import { Pressable, StyleSheet, Text, View, type ViewStyle } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { colors, motion, radius, spacing, typography } from '../theme';
+
+type ActionButtonVariant = 'primary' | 'secondary' | 'stop' | 'stopAlert';
+
+type Props = {
+  readonly label: string;
+  readonly onPress?: () => void;
+  readonly variant?: ActionButtonVariant;
+  readonly fullWidth?: boolean;
+  readonly showIcon?: boolean;
+};
+
+export function ActionButton({
+  label,
+  onPress,
+  variant = 'primary',
+  fullWidth = false,
+  showIcon = true,
+}: Props) {
+  return (
+    <View style={[styles.shell, fullWidth ? styles.fullWidth : null]}>
+      {variant === 'stopAlert' ? <AlertRing /> : null}
+      <Pressable
+        accessibilityRole="button"
+        onPress={onPress}
+        style={({ pressed }) => [
+          styles.base,
+          styles[variant],
+          fullWidth ? styles.fullWidth : null,
+          pressed ? styles.pressed : null,
+        ]}
+      >
+        <Text style={[styles.label, styles[`${variant}Label`]]}>{label}</Text>
+        {variant === 'primary' && showIcon ? (
+          <View style={styles.iconBubble}>
+            <Text style={styles.iconText}>›</Text>
+          </View>
+        ) : null}
+      </Pressable>
+    </View>
+  );
+}
+
+function AlertRing() {
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(0.55);
+
+  useEffect(() => {
+    scale.value = withRepeat(
+      withTiming(1.06, { duration: motion.duration.pulseSlow / 2, easing: Easing.inOut(Easing.quad) }),
+      -1,
+      true,
+    );
+    opacity.value = withRepeat(
+      withTiming(0.2, { duration: motion.duration.pulseSlow / 2, easing: Easing.inOut(Easing.quad) }),
+      -1,
+      true,
+    );
+  }, [scale, opacity]);
+
+  const ringStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+    opacity: opacity.value,
+  }));
+
+  return <Animated.View style={[styles.alertRing, ringStyle]} pointerEvents="none" />;
+}
+
+const styles = StyleSheet.create({
+  shell: {
+    position: 'relative',
+    alignSelf: 'flex-start',
+  },
+  fullWidth: {
+    alignSelf: 'stretch',
+  },
+  base: {
+    minHeight: 48,
+    borderRadius: radius.xl,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: spacing.sm,
+  },
+  primary: {
+    backgroundColor: colors.action,
+  },
+  secondary: {
+    backgroundColor: 'transparent',
+    borderColor: colors.line,
+    borderWidth: 1,
+  },
+  stop: {
+    backgroundColor: colors.stopSurface,
+  },
+  stopAlert: {
+    backgroundColor: colors.action,
+  },
+  pressed: {
+    transform: [{ scale: 0.96 }],
+    opacity: 0.82,
+  },
+  label: {
+    ...typography.button,
+  },
+  primaryLabel: {
+    color: colors.text,
+  },
+  secondaryLabel: {
+    color: colors.text,
+  },
+  stopLabel: {
+    color: colors.stopText,
+  },
+  stopAlertLabel: {
+    color: colors.text,
+  },
+  iconBubble: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.16)',
+  },
+  iconText: {
+    color: colors.text,
+    fontWeight: '900',
+    fontSize: 20,
+    lineHeight: 22,
+  },
+  alertRing: {
+    position: 'absolute',
+    top: -4,
+    left: -4,
+    right: -4,
+    bottom: -4,
+    borderRadius: radius.xl + 4,
+    borderWidth: 2,
+    borderColor: colors.ringWarn,
+  } as ViewStyle,
+});
+```
+
+- [ ] **Step 2: Run typecheck and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 type errors, all tests pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add src/components/ActionButton.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(components): ActionButton stopAlert variant with pulsing ring"
+```
+
+---
+
+### Task F3.2: StatusTag — size prop + red tone refinement
+
+**Files:**
+- Modify: `src/components/StatusTag.tsx`
+
+- [ ] **Step 1: Add size and refine red tone**
+
+Replace the entire `src/components/StatusTag.tsx` with:
+
+```tsx
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { colors, radius, spacing, typography } from '../theme';
+
+type StatusTone = 'amber' | 'green' | 'red';
+type StatusSize = 'sm' | 'md';
+
+type Props = {
+  readonly label: string;
+  readonly tone?: StatusTone;
+  readonly size?: StatusSize;
+};
+
+export function StatusTag({ label, tone = 'amber', size = 'md' }: Props) {
+  return (
+    <View
+      accessibilityLabel={label}
+      style={[styles.base, styles[tone], size === 'sm' ? styles.sm : styles.md]}
+    >
+      <Text style={[styles.text, styles[`${tone}Text`], size === 'sm' ? styles.smText : null]}>
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    alignSelf: 'flex-start',
+    borderRadius: radius.xl,
+    borderWidth: 1,
+  },
+  sm: {
+    paddingHorizontal: spacing.xs,
+    paddingVertical: 2,
+  },
+  md: {
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+  },
+  amber: {
+    backgroundColor: colors.surfaceHot,
+    borderColor: colors.line,
+  },
+  green: {
+    backgroundColor: 'rgba(52,199,123,0.12)',
+    borderColor: 'rgba(52,199,123,0.34)',
+  },
+  red: {
+    backgroundColor: 'rgba(226,59,46,0.12)',
+    borderColor: 'rgba(226,59,46,0.42)',
+  },
+  text: {
+    ...typography.label,
+  },
+  smText: {
+    fontSize: 9,
+    lineHeight: 12,
+  },
+  amberText: {
+    color: colors.warning,
+  },
+  greenText: {
+    color: colors.success,
+  },
+  redText: {
+    color: colors.action,
+  },
+});
+```
+
+- [ ] **Step 2: Run typecheck and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 errors, all tests pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add src/components/StatusTag.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(components): StatusTag size prop + red tone aligned with palette"
+```
+
+---
+
+### Task F3.3: SectionPanel — divider and subtle variants
+
+**Files:**
+- Modify: `src/components/SectionPanel.tsx`
+
+- [ ] **Step 1: Add divider and subtle props**
+
+Replace the entire `src/components/SectionPanel.tsx` with:
+
+```tsx
+import React, { type ReactNode } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { colors, radius, spacing, typography } from '../theme';
+
+type Props = {
+  readonly title: string;
+  readonly eyebrow?: string;
+  readonly children: ReactNode;
+  readonly divider?: boolean;
+  readonly subtle?: boolean;
+};
+
+export function SectionPanel({ title, eyebrow, children, divider, subtle }: Props) {
+  if (divider) {
+    return (
+      <View style={styles.dividerWrap}>
+        {eyebrow ? <Text style={styles.eyebrow}>{eyebrow}</Text> : null}
+        <Text style={styles.title}>{title}</Text>
+        <View style={styles.dividerContent}>{children}</View>
+      </View>
+    );
+  }
+  return (
+    <View
+      style={[
+        styles.panel,
+        subtle ? styles.subtlePanel : styles.raisedPanel,
+      ]}
+    >
+      {eyebrow ? <Text style={styles.eyebrow}>{eyebrow}</Text> : null}
+      <Text style={styles.title}>{title}</Text>
+      <View style={styles.content}>{children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  panel: {
+    borderWidth: 1,
+    borderColor: colors.line,
+    borderRadius: radius.lg,
+    padding: spacing.md,
+  },
+  raisedPanel: {
+    backgroundColor: colors.surfaceRaised,
+  },
+  subtlePanel: {
+    backgroundColor: 'transparent',
+  },
+  dividerWrap: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  dividerContent: {
+    marginTop: spacing.sm,
+    gap: spacing.sm,
+  },
+  eyebrow: {
+    ...typography.label,
+    color: colors.warning,
+    marginBottom: spacing.xs,
+  },
+  title: {
+    color: colors.text,
+    fontSize: 24,
+    lineHeight: 27,
+    fontWeight: '900',
+    letterSpacing: -1.2,
+  },
+  content: {
+    marginTop: spacing.md,
+    gap: spacing.sm,
+  },
+});
+```
+
+- [ ] **Step 2: Run typecheck and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add src/components/SectionPanel.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(components): SectionPanel divider and subtle variants"
+```
+
+---
+
+### Task F3.4: MetricTile — numeric prop
+
+**Files:**
+- Modify: `src/components/MetricTile.tsx`
+
+- [ ] **Step 1: Add numeric prop**
+
+Replace the entire `src/components/MetricTile.tsx` with:
+
+```tsx
+import React from 'react';
+import { StyleSheet, Text, View, type TextStyle } from 'react-native';
+import { colors, radius, spacing, typography } from '../theme';
+
+type Props = {
+  readonly value: string;
+  readonly label: string;
+  readonly numeric?: boolean;
+};
+
+export function MetricTile({ value, label, numeric }: Props) {
+  return (
+    <View style={styles.tile}>
+      <Text style={[styles.value, numeric ? styles.numeric : null]}>{value}</Text>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  tile: {
+    flex: 1,
+    minHeight: 74,
+    borderWidth: 1,
+    borderColor: colors.line,
+    borderRadius: radius.md,
+    backgroundColor: colors.surface,
+    padding: spacing.sm,
+    justifyContent: 'center',
+  },
+  value: {
+    color: colors.text,
+    fontSize: 24,
+    lineHeight: 28,
+    fontWeight: '900',
+    letterSpacing: -1,
+  },
+  numeric: {
+    ...(typography.metricNumeric as TextStyle),
+  },
+  label: {
+    ...typography.label,
+    color: colors.textMuted,
+    marginTop: spacing.xxs,
+  },
+});
+```
+
+- [ ] **Step 2: Run typecheck and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add src/components/MetricTile.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(components): MetricTile numeric prop for JetBrains Mono"
+```
+
+---
+
+## F4 — Tela Captura (T4.1 + T4.2)
+
+### Task F4.1: TrainingChart — furos laterais + LiveDot readout + pin pulse
+
+**Files:**
+- Modify: `src/components/TrainingChart.tsx`
+
+- [ ] **Step 1: Read current TrainingChart and add furos laterais + LiveDot + pin pulse**
+
+In `src/components/TrainingChart.tsx`, find the `<Svg>` block and add **after** the `</SvgText>` for the minBpm (or before closing the SVG), this new group of "furos" (holes), right before the closing `</Svg>`:
+
+```tsx
+{ticks.map((tick, index) => (
+  <React.Fragment key={`${tick.timestampMs}-${index}`}>
+    <Line
+      stroke="rgba(255,255,255,0.06)"
+      strokeWidth="1"
+      x1={tick.x}
+      x2={tick.x}
+      y1={PAD_Y}
+      y2={CHART_HEIGHT - PAD_Y}
+    />
+    <SvgText ...>{tick.label}</SvgText>
+  </React.Fragment>
+))}
+{/* Furos laterais — inspiração ECG paper */}
+{[0, 1, 2, 3, 4, 5].map(index => {
+  const x = PAD_X + 12 + index * 48;
+  return (
+    <Rect
+      key={`hole-${index}`}
+      x={x}
+      y={CHART_HEIGHT - 4}
+      width={1.5}
+      height={4}
+      fill={colors.line}
+    />
+  );
+})}
+```
+
+Also, add `Rect` to the existing import from `react-native-svg` at the top of the file:
+
+```tsx
+import Svg, { Circle, Line, Path, Rect, Text as SvgText } from 'react-native-svg';
+```
+
+Also, in the **readout** (the `<View style={styles.readout}>` near the end of the component), update it to add a LiveDot before the label. Replace the existing readout:
+
+```tsx
+<View style={styles.readout}>
+  <Text style={styles.readoutLabel}>
+    {pinPoint ? 'AMOSTRA PINADA' : viewport.liveTail ? 'AO VIVO' : 'JANELA'}
+  </Text>
+  ...
+</View>
+```
+
+with:
+
+```tsx
+<View style={styles.readout}>
+  {viewport.liveTail ? <LiveDot live={true} size={6} /> : <LiveDot live={false} size={6} />}
+  <Text style={styles.readoutLabel}>
+    {pinPoint ? 'AMOSTRA PINADA' : viewport.liveTail ? 'AO VIVO' : 'JANELA'}
+  </Text>
+  <Text style={styles.readoutValue}>
+    {pinPoint
+      ? `${formatSampleTime(pinPoint.sample.timestamp)} · ${pinPoint.sample.bpm} BPM`
+      : `${formatSampleTime(renderable.lastPoint.sample.timestamp)} · ${
+          renderable.lastPoint.sample.bpm
+        } BPM`}
+  </Text>
+</View>
+```
+
+And add the import at the top:
+
+```tsx
+import { LiveDot } from './LiveDot';
+```
+
+- [ ] **Step 2: Run typecheck and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 type errors, all tests pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add src/components/TrainingChart.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(chart): TrainingChart ECG furos laterais + LiveDot readout"
+```
+
+---
+
+### Task F4.2: CaptureScreen refactor
+
+**Files:**
+- Modify: `src/screens/CaptureScreen.tsx`
+
+- [ ] **Step 1: Replace the file with the refactored version**
+
+Write the entire `src/screens/CaptureScreen.tsx` with this content:
+
+```tsx
+import React, { useEffect, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import {
+  Activity,
+  Battery,
+  RadioTower,
+  ShieldCheck,
+  Timer,
+} from 'lucide-react-native';
+import { type HeartRateMonitorState } from '../ble/useHeartRateMonitor';
+import { ActionButton } from '../components/ActionButton';
+import { DialTile } from '../components/DialTile';
+import { LiveDot } from '../components/LiveDot';
+import { TrainingChart } from '../components/TrainingChart';
+import { colors, radius, spacing, typography } from '../theme';
+import {
+  calculateLiveMetrics,
+  formatDuration,
+} from '../training/trainingMetrics';
+
+const BPM_EMPTY = '--';
+
+type Props = {
+  readonly monitor: HeartRateMonitorState;
+  readonly onCaptureAction: () => Promise<void>;
+  readonly onMonitorAction: () => Promise<void>;
+};
+
+export function CaptureScreen({
+  monitor,
+  onCaptureAction,
+  onMonitorAction,
+}: Props) {
+  const now = useTicker(monitor.isMonitoring || monitor.isCapturing);
+  const status = getStatusCopy(monitor);
+  const windowSamples = useMemo(
+    () =>
+      monitor.startedAt
+        ? monitor.samples.filter(
+            (sample) => sample.timestamp >= monitor.startedAt!,
+          )
+        : monitor.samples,
+    [monitor.samples, monitor.startedAt],
+  );
+  const windowMetrics = calculateLiveMetrics(windowSamples);
+  const firstSampleAt = monitor.samples[0]?.timestamp ?? null;
+  const monitorElapsedMs = firstSampleAt ? now - firstSampleAt : 0;
+  const workoutElapsedMs = monitor.startedAt ? now - monitor.startedAt : 0;
+  const actionLabel = monitor.isCapturing
+    ? 'Fechar janela de treino'
+    : 'Iniciar janela de treino';
+
+  const isReceiving = monitor.phase === 'receiving';
+  const isLive = monitor.isMonitoring || monitor.isCapturing;
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.topRail}>
+        <View style={styles.stateBlock}>
+          <View style={styles.eyebrowRow}>
+            <Text
+              style={[
+                styles.eyebrowDot,
+                { color: isReceiving ? colors.success : colors.textDim },
+              ]}
+            >
+              •
+            </Text>
+            <Text style={styles.eyebrow}>{status.label}</Text>
+          </View>
+          <Text style={styles.sensorName}>{formatDeviceName(monitor)}</Text>
+        </View>
+        <View style={styles.timeStack}>
+          <View style={styles.timerRow}>
+            <LiveDot live={isLive} size={6} />
+            <Text style={styles.timerText}>
+              {monitor.isCapturing
+                ? formatDuration(workoutElapsedMs)
+                : formatDuration(monitorElapsedMs)}
+            </Text>
+          </View>
+          <Text style={styles.timerLabel}>
+            {monitor.isCapturing ? 'janela' : 'monitor'}
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.bpmRow}>
+        <View style={styles.bpmBlock}>
+          <Text
+            style={[
+              styles.bpmValue,
+              isReceiving ? styles.bpmPulse : null,
+            ]}
+          >
+            {monitor.currentBpm ?? BPM_EMPTY}
+          </Text>
+        </View>
+        <View style={styles.bpmSide}>
+          <Text style={styles.bpmUnit}>BPM</Text>
+          <Text style={styles.statusLine}>
+            {monitor.errorMessage ?? status.detail}
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.captureRail}>
+        <RailMetric
+          label="MÉDIA"
+          value={windowMetrics.averageBpm ?? BPM_EMPTY}
+        />
+        <RailMetric
+          label="PICO"
+          value={windowMetrics.peakBpm ?? BPM_EMPTY}
+          tone="hot"
+        />
+        <RailMetric
+          label="AMOSTRAS"
+          value={windowSamples.length || BPM_EMPTY}
+        />
+      </View>
+
+      <TrainingChart samples={windowSamples} />
+
+      <View style={styles.dialColumn}>
+        <DialTile
+          label="BLE"
+          value={getBleShortState(monitor.phase, monitor.isMonitoring)}
+          tone={monitor.phase === 'receiving' ? 'green' : 'amber'}
+        />
+        <DialTile label="BATERIA" value={getBatteryLabel(monitor)} />
+        <DialTile
+          label="FUNDO"
+          value={monitor.batteryOptimizationIgnored ? 'liberado' : 'otimizar'}
+          tone={monitor.batteryOptimizationIgnored ? 'green' : 'amber'}
+        />
+      </View>
+
+      {!monitor.batteryOptimizationIgnored ? (
+        <Pressable
+          onPress={() => {
+            monitor.openBatterySettings().catch(() => undefined);
+          }}
+          style={styles.batteryPrompt}
+        >
+          <Text style={styles.batteryPromptTitle}>
+            Manter com tela bloqueada
+          </Text>
+          <Text style={styles.batteryPromptText}>
+            Toque para abrir a configuração de bateria e remover restrições do
+            FightRate.
+          </Text>
+        </Pressable>
+      ) : null}
+
+      <View style={styles.actionGrid}>
+        {!monitor.isMonitoring ? (
+          <ActionButton
+            fullWidth
+            label="Ativar monitor contínuo"
+            onPress={() => {
+              onMonitorAction().catch(() => undefined);
+            }}
+          />
+        ) : null}
+        <ActionButton
+          fullWidth
+          label={actionLabel}
+          onPress={() => {
+            onCaptureAction().catch(() => undefined);
+          }}
+          variant={monitor.isCapturing ? 'stopAlert' : 'primary'}
+        />
+      </View>
+
+      <View style={styles.truthLine}>
+        <Activity color={colors.warning} size={18} strokeWidth={2.5} />
+        <Text style={styles.truthText}>
+          Cinta reconhecida = cada BPM real é salvo. Toque em Iniciar apenas
+          para destacar uma janela para análise.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function RailMetric({
+  label,
+  value,
+  tone = 'normal',
+}: {
+  readonly label: string;
+  readonly value: string | number;
+  readonly tone?: 'normal' | 'hot';
+}) {
+  return (
+    <View style={styles.railMetric}>
+      <Text
+        style={[styles.railValue, tone === 'hot' ? styles.railValueHot : null]}
+      >
+        {value}
+      </Text>
+      <Text style={styles.railLabel}>{label}</Text>
+    </View>
+  );
+}
+
+function getStatusCopy(monitor: HeartRateMonitorState) {
+  if (monitor.isCapturing) {
+    return {
+      label: 'JANELA DE TREINO',
+      detail: 'Treino destacado enquanto o monitor contínuo segue gravando.',
+    };
+  }
+  if (monitor.phase === 'receiving') {
+    return {
+      label: 'LEITURA ATIVA',
+      detail: 'BPM real chegando e sendo salvo continuamente em SQLite.',
+    };
+  }
+  if (monitor.phase === 'scanning') {
+    return {
+      label: 'PROCURANDO CINTA',
+      detail: 'O serviço continua procurando até encontrar a cinta.',
+    };
+  }
+  if (monitor.phase === 'connecting') {
+    return {
+      label: 'CONECTANDO 2A37',
+      detail:
+        'Abrindo Heart Rate Service 180D e armando notify da característica 2A37.',
+    };
+  }
+  if (monitor.phase === 'permission-denied') {
+    return {
+      label: 'PERMISSÃO NEGADA',
+      detail: 'Autorize Bluetooth, Localização e Notificações.',
+    };
+  }
+  if (monitor.phase === 'bluetooth-off') {
+    return {
+      label: 'BLUETOOTH DESLIGADO',
+      detail: 'Ligue o Bluetooth antes de ativar o monitor.',
+    };
+  }
+  if (monitor.phase === 'error') {
+    return {
+      label: 'ERRO DE CAPTURA',
+      detail: monitor.errorMessage ?? 'Falha no serviço BLE.',
+    };
+  }
+  return {
+    label: 'MONITOR DESATIVADO',
+    detail: 'Ative o monitor contínuo; depois marque a janela de treino.',
+  };
+}
+
+function formatDeviceName(monitor: HeartRateMonitorState) {
+  const name = monitor.connectedDevice?.name;
+  if (!name) return 'Magene H003 ou cinta BLE 180D';
+  if (/magene|h003/i.test(name)) return 'Magene H003 · cinta cardíaca';
+  if (/heart|hrm/i.test(name)) return `${name} · cinta cardíaca`;
+  return `${name} · BLE`;
+}
+
+function getBleShortState(
+  phase: HeartRateMonitorState['phase'],
+  isMonitoring: boolean,
+) {
+  if (!isMonitoring) return 'parado';
+  if (phase === 'receiving') return 'lendo';
+  if (phase === 'scanning') return 'busca';
+  if (phase === 'connecting') return 'conectando';
+  if (phase === 'connected') return '2A37';
+  if (phase === 'error') return 'erro';
+  return 'ativo';
+}
+
+function getBatteryLabel(monitor: HeartRateMonitorState) {
+  const percent = monitor.connectedDevice?.batteryPercent;
+  if (typeof percent === 'number') return `${percent}%`;
+  return 'sem leitura';
+}
+
+function useTicker(active: boolean) {
+  const [now, setNow] = useState(Date.now());
+
+  useEffect(() => {
+    if (!active) {
+      setNow(Date.now());
+      return;
+    }
+
+    const interval = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(interval);
+  }, [active]);
+
+  return now;
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    gap: spacing.md,
+  },
+  topRail: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+    paddingVertical: spacing.md,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: spacing.md,
+  },
+  stateBlock: {
+    flex: 1,
+  },
+  eyebrowRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  eyebrowDot: {
+    fontSize: 18,
+    lineHeight: 18,
+    fontWeight: '900',
+  },
+  eyebrow: {
+    ...typography.label,
+    color: colors.action,
+  },
+  sensorName: {
+    color: colors.text,
+    fontSize: 18,
+    lineHeight: 23,
+    fontWeight: '900',
+    letterSpacing: -0.5,
+    marginTop: spacing.xs,
+  },
+  timeStack: {
+    alignItems: 'flex-end',
+    gap: spacing.xxs,
+    minWidth: 84,
+  },
+  timerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  timerText: {
+    ...typography.label,
+    color: colors.text,
+  },
+  timerLabel: {
+    ...typography.label,
+    color: colors.textDim,
+    fontSize: 9,
+  },
+  bpmRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: spacing.md,
+  },
+  bpmBlock: {
+    flex: 1,
+  },
+  bpmValue: {
+    ...typography.displayNumeric,
+  },
+  bpmPulse: {
+    opacity: 1,
+  },
+  bpmSide: {
+    flex: 1,
+    paddingBottom: spacing.sm,
+    gap: spacing.xs,
+  },
+  bpmUnit: {
+    ...typography.label,
+    color: colors.textMuted,
+  },
+  statusLine: {
+    ...typography.body,
+    color: colors.textMuted,
+  },
+  captureRail: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+    flexDirection: 'row',
+  },
+  railMetric: {
+    flex: 1,
+    paddingVertical: spacing.sm,
+    paddingRight: spacing.sm,
+  },
+  railValue: {
+    ...typography.metricNumeric,
+  },
+  railValueHot: {
+    color: colors.action,
+  },
+  railLabel: {
+    ...typography.label,
+    color: colors.textMuted,
+    marginTop: spacing.xxs,
+  },
+  dialColumn: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+  },
+  batteryPrompt: {
+    borderWidth: 1,
+    borderColor: colors.warning,
+    borderRadius: radius.md,
+    backgroundColor: colors.surfaceHot,
+    padding: spacing.md,
+  },
+  batteryPromptTitle: {
+    ...typography.label,
+    color: colors.warning,
+  },
+  batteryPromptText: {
+    ...typography.body,
+    color: colors.textMuted,
+    marginTop: spacing.xs,
+  },
+  actionGrid: {
+    gap: spacing.sm,
+  },
+  truthLine: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.sm,
+  },
+  truthText: {
+    ...typography.body,
+    color: colors.textMuted,
+    flex: 1,
+  },
+});
+```
+
+- [ ] **Step 2: Run typecheck and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 type errors, all tests pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add src/screens/CaptureScreen.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(capture): CaptureScreen with LiveDot, JetBrains Mono BPM, stopAlert ring"
+```
+
+---
+
+## F5 — Histórico + Sensor (T5.1 + T5.2)
+
+### Task F5.1: HistoryScreen refactor
+
+**Files:**
+- Modify: `src/screens/HistoryScreen.tsx`
+
+- [ ] **Step 1: Apply TrackRow and EmptyState replacements**
+
+In `src/screens/HistoryScreen.tsx`, the **only changes** required are:
+1. Add `TrackRow` and `EmptyState` imports.
+2. Replace `EmptyHistory` function body with delegation to `EmptyState`.
+3. Replace the inner `Pressable ... styles.sessionStrip` blocks in both `WindowHistory` and `ContinuousHistory` with `TrackRow` components.
+
+This is a complex refactor. To keep it tractable, do the following focused edits:
+
+**Edit 1: imports**
+
+Add these at the top of `src/screens/HistoryScreen.tsx` (after the existing `Activity, ChevronDown, ChevronUp` import from lucide):
+
+```tsx
+import { TrackRow } from '../components/TrackRow';
+import { EmptyState } from '../components/EmptyState';
+```
+
+**Edit 2: replace `EmptyHistory` function**
+
+Find the function `function EmptyHistory({...})` near the bottom of the file. Replace its body (everything from `return (` to its closing `}`) with:
+
+```tsx
+export function EmptyHistory({...} should stay) {
+  return (
+    <EmptyState
+      eyebrow={eyebrow}
+      title={title}
+      copy={copy}
+      tone={eyebrow === 'ANÁLISE BLOQUEADA' ? 'red' : 'amber'}
+    />
+  );
+}
+```
+
+In practice, since `EmptyHistory` is currently used in three places (`WindowHistory`, `ContinuousHistory`, `RangeHistory`) with different eyebrows, the easiest approach is to **leave the function signature as is** and rewrite its body to render `EmptyState`. Replace the entire function body (from `return (` to the matching `}`) with:
+
+```tsx
+return (
+  <EmptyState
+    eyebrow={eyebrow}
+    title={title}
+    copy={copy}
+    tone={eyebrow === 'ANÁLISE BLOQUEADA' ? 'red' : 'amber'}
+  />
+);
+```
+
+**Edit 3: replace sessionStrip with TrackRow in WindowHistory**
+
+Find the JSX inside `WindowHistory`'s `.map(session => { ... })` block. The current code is approximately:
+
+```tsx
+<Pressable
+  accessibilityRole="button"
+  onPress={() => onOpenSession(session)}
+  style={({ pressed }) => [
+    styles.sessionStrip,
+    pressed ? styles.pressed : null,
+  ]}
+>
+  <View style={styles.dateBlock}>...</View>
+  <View style={styles.sessionBody}>...</View>
+  {isOpen ? <OpenIcon /> : <ClosedIcon />}
+</Pressable>
+
+{isOpen ? (
+  <WindowDetail ... />
+) : null}
+```
+
+Replace the entire `<Pressable ...>...</Pressable>` block with:
+
+```tsx
+<TrackRow
+  accessibilityLabel={`Janela ${formatSessionDay(session.startedAt)} ${formatSessionHour(session.startedAt)}`}
+  day={formatSessionDay(session.startedAt)}
+  hour={formatSessionHour(session.startedAt)}
+  isOpen={isOpen}
+  meta={`${formatDuration(session.durationMs)} · ${session.sampleCount} amostras`}
+  metrics={[
+    { label: `MÉD ${session.averageBpm}` },
+    { label: `PICO ${session.peakBpm}`, tone: 'hot' as const },
+    { label: `MIN ${session.minBpm}` },
+  ]}
+  onPress={() => onOpenSession(session)}
+  title={session.deviceName || 'Cinta cardíaca BLE'}
+  trackNumber={index + 1}
+>
+  {isOpen ? (
+    <WindowDetail
+      loading={loadingId === session.id}
+      metrics={selectedMetrics}
+      samples={selectedSamples}
+      zones={zones}
+    />
+  ) : null}
+</TrackRow>
+```
+
+**Edit 4: replace sessionStrip with TrackRow in ContinuousHistory**
+
+Apply the same pattern as Edit 3, but for `ContinuousHistory`'s map. Replace the `<Pressable ...>...</Pressable>` block with:
+
+```tsx
+<TrackRow
+  accessibilityLabel={`Uso contínuo ${formatSessionDay(block.startedAt)}`}
+  day={formatSessionDay(block.startedAt)}
+  hour={formatSessionHour(block.startedAt)}
+  isOpen={isOpen}
+  meta={formatUsageRange(block) + ' · ' + block.sampleCount + ' amostras'}
+  metrics={[
+    { label: `MÉD ${block.averageBpm}` },
+    { label: `PICO ${block.peakBpm}`, tone: 'hot' as const },
+    { label: `MIN ${block.minBpm}` },
+  ]}
+  onPress={() => onOpenBlock(block)}
+  title={block.deviceName || 'Uso contínuo'}
+  trackNumber={index + 1}
+>
+  {isOpen && selectedBlock ? (
+    <UsageDetail block={selectedBlock} />
+  ) : null}
+</TrackRow>
+```
+
+- [ ] **Step 2: Remove unused styles**
+
+In `styles`, the following style keys are no longer used (because `TrackRow` carries its own): `sessionStrip`, `pressed`, `dateBlock`, `sessionDay`, `sessionHour`, `sessionBody`, `sessionTitle`, `sessionMeta`, `metricLine`, `metricText`, `metricTextHot`. Delete these from the `StyleSheet.create({...})` block to satisfy `npm run lint`.
+
+- [ ] **Step 3: Run typecheck and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm run lint 2>&1 | tail -5 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 type errors, 0 lint errors, all tests pass.
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd /d/h && git add src/screens/HistoryScreen.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(history): HistoryScreen with TrackRow + EmptyState"
+```
+
+---
+
+### Task F5.2: SensorScreen refactor
+
+**Files:**
+- Modify: `src/screens/SensorScreen.tsx`
+
+- [ ] **Step 1: Replace the entire file**
+
+Write the entire `src/screens/SensorScreen.tsx` with this content:
+
+```tsx
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import {
+  Battery,
+  Bluetooth,
+  RadioReceiver,
+  ShieldCheck,
+  Signal,
+  Activity,
+} from 'lucide-react-native';
+import { type HeartRateMonitorState } from '../ble/useHeartRateMonitor';
+import { formatRssi } from '../ble/rssi';
+import { ActionButton } from '../components/ActionButton';
+import { DialTile } from '../components/DialTile';
+import { LiveDot } from '../components/LiveDot';
+import { colors, radius, spacing, typography } from '../theme';
+
+type Props = {
+  readonly monitor: HeartRateMonitorState;
+  readonly onMonitorAction: () => Promise<void>;
+};
+
+export function SensorScreen({ monitor, onMonitorAction }: Props) {
+  const device = monitor.connectedDevice;
+  const services = monitor.services.length
+    ? monitor.services
+    : ['Heart Rate Service · 0x180D · aguardando conexão'];
+  const characteristics = monitor.characteristics.length
+    ? monitor.characteristics
+    : ['Heart Rate Measurement · 0x2A37 · notify esperado'];
+
+  const isReceiving = monitor.phase === 'receiving';
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.sensorConsole}>
+        <View style={styles.consoleTopline}>
+          <View style={styles.consoleLeft}>
+            <View style={styles.eyebrowRow}>
+              <Text
+                style={[
+                  styles.eyebrowDot,
+                  { color: isReceiving ? colors.success : colors.textDim },
+                ]}
+              >
+                •
+              </Text>
+              <Text style={styles.eyebrow}>SENSOR REAL</Text>
+            </View>
+            <Text style={styles.title}>
+              {friendlyDeviceTitle(device?.name)}
+            </Text>
+          </View>
+          <View style={styles.phaseBadge}>
+            <Bluetooth color={colors.warning} size={14} strokeWidth={2.4} />
+            <Text style={styles.phaseText}>{phaseLabel(monitor.phase)}</Text>
+            {isReceiving ? <LiveDot live size={5} /> : null}
+          </View>
+        </View>
+
+        <View style={styles.signalColumn}>
+          <DialTile
+            label="RSSI"
+            value={formatRssi(device?.rssi)}
+            tone="amber"
+          />
+          <DialTile
+            label="LEITURAS"
+            value={`${monitor.samples.length}`}
+            tone="amber"
+          />
+          <DialTile
+            label="BATERIA"
+            value={formatBattery(device?.batteryPercent)}
+            tone="amber"
+          />
+          <DialTile
+            label="FUNDO"
+            value={monitor.batteryOptimizationIgnored ? 'liberado' : 'restrito'}
+            tone={monitor.batteryOptimizationIgnored ? 'green' : 'amber'}
+          />
+        </View>
+
+        <Text style={styles.explainer}>
+          {monitor.errorMessage ?? sensorExplanation(monitor)}
+        </Text>
+
+        <View style={styles.actionRow}>
+          {!monitor.isMonitoring ? (
+            <ActionButton
+              label="Buscar sensor"
+              onPress={() => {
+                onMonitorAction().catch(() => undefined);
+              }}
+              showIcon={false}
+              variant="primary"
+            />
+          ) : (
+            <View style={styles.livePill}>
+              <LiveDot live size={6} />
+              <Text style={styles.livePillText}>Monitor contínuo ativo</Text>
+            </View>
+          )}
+          {!monitor.batteryOptimizationIgnored ? (
+            <Pressable
+              onPress={() =>
+                monitor.openBatterySettings().catch(() => undefined)
+              }
+              style={styles.secondaryButton}
+            >
+              <Text style={styles.secondaryButtonText}>Bateria</Text>
+            </Pressable>
+          ) : null}
+        </View>
+      </View>
+
+      {monitor.discoveredDevices.length > 0 ? (
+        <View style={styles.discoveryBlock}>
+          <Text style={styles.blockLabel}>ENCONTRADOS AGORA</Text>
+          {monitor.discoveredDevices.map((candidate) => (
+            <Pressable
+              key={candidate.id}
+              onPress={() =>
+                monitor.connectToDevice(candidate.id).catch(() => undefined)
+              }
+              style={styles.deviceRow}
+            >
+              <View style={styles.deviceDot} />
+              <View style={styles.deviceInfo}>
+                <Text style={styles.deviceName}>
+                  {friendlyDeviceTitle(candidate.name)}
+                </Text>
+                <Text style={styles.deviceMeta}>
+                  {candidate.name} · {formatRssi(candidate.rssi)}
+                </Text>
+              </View>
+              <View style={styles.connectPill}>
+                <Text style={styles.connectPillText}>Conectar</Text>
+              </View>
+            </Pressable>
+          ))}
+        </View>
+      ) : null}
+
+      <BleInventoryBlock title="SERVIÇOS BLE" rows={services} />
+      <BleInventoryBlock title="CARACTERÍSTICAS" rows={characteristics} />
+    </View>
+  );
+}
+
+function BleInventoryBlock({
+  title,
+  rows,
+}: {
+  readonly title: string;
+  readonly rows: readonly string[];
+}) {
+  return (
+    <View style={styles.diagnosticBlock}>
+      <Text style={styles.blockLabel}>{title}</Text>
+      {rows.slice(0, 8).map((row) => {
+        const parsed = parseBleRow(row);
+        return (
+          <View key={row} style={styles.diagnosticRow}>
+            <RadioReceiver color={colors.textDim} size={14} strokeWidth={2.2} />
+            <View style={styles.diagnosticBody}>
+              <Text style={styles.diagnosticTitle}>{parsed.name}</Text>
+              <Text style={styles.diagnosticText}>
+                {parsed.uuid} · {parsed.detail}
+              </Text>
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+function friendlyDeviceTitle(name?: string | null) {
+  if (!name) {
+    return 'Cinta cardíaca BLE';
+  }
+  if (/magene|h003/i.test(name)) {
+    return 'Magene H003';
+  }
+  if (/heart|hrm/i.test(name)) {
+    return 'Cinta cardíaca BLE';
+  }
+  return name;
+}
+
+function parseBleRow(row: string) {
+  const [name = row, uuid = 'BLE', ...rest] = row.split(' · ');
+  return {
+    name,
+    uuid,
+    detail: rest.join(' · ') || 'aguardando leitura',
+  };
+}
+
+function phaseLabel(phase: HeartRateMonitorState['phase']) {
+  const labels: Record<HeartRateMonitorState['phase'], string> = {
+    idle: 'parado',
+    'requesting-permission': 'permissões',
+    'bluetooth-off': 'bluetooth off',
+    scanning: 'buscando',
+    connecting: 'conectando',
+    connected: 'conectado',
+    receiving: 'recebendo',
+    'permission-denied': 'sem permissão',
+    'sensor-not-found': 'sem sensor',
+    error: 'erro',
+  };
+  return labels[phase];
+}
+
+function sensorExplanation(monitor: HeartRateMonitorState) {
+  if (monitor.phase === 'receiving' && monitor.samples.length > 0) {
+    return `Amostras reais chegando: ${monitor.samples.length}. Cada BPM reconhecido está sendo salvo em SQLite.`;
+  }
+  if (monitor.phase === 'receiving' || monitor.phase === 'connected') {
+    return 'Sensor reconhecido. O app está armando a leitura 2A37; se não vier BPM, reativa notify e reconecta sozinho.';
+  }
+  if (monitor.phase === 'scanning') {
+    return 'Busca nativa BLE ativa. Se o app for bloqueado, a notificação mantém o serviço vivo.';
+  }
+  return 'A tela traduz nomes técnicos: 180D é o serviço cardíaco; 2A37 é o dado de BPM.';
+}
+
+function formatBattery(percent?: number | null) {
+  if (typeof percent === 'number') {
+    return `${percent}%`;
+  }
+  return '--';
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    gap: spacing.sm,
+  },
+  sensorConsole: {
+    borderTopWidth: 1,
+    borderColor: colors.line,
+    paddingVertical: spacing.md,
+    gap: spacing.md,
+  },
+  consoleTopline: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: spacing.md,
+    alignItems: 'center',
+  },
+  consoleLeft: {
+    flex: 1,
+  },
+  eyebrowRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  eyebrowDot: {
+    fontSize: 18,
+    lineHeight: 18,
+    fontWeight: '900',
+  },
+  eyebrow: {
+    ...typography.label,
+    color: colors.action,
+  },
+  title: {
+    ...typography.detailNumeric,
+    color: colors.text,
+    fontSize: 22,
+    lineHeight: 26,
+    letterSpacing: -0.8,
+    marginTop: spacing.xs,
+  },
+  phaseBadge: {
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.sm,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    height: 32,
+    borderRadius: radius.xl,
+    borderWidth: 1,
+    borderColor: colors.line,
+    backgroundColor: colors.surface,
+  },
+  phaseText: {
+    ...typography.label,
+    color: colors.text,
+  },
+  signalColumn: {
+    borderTopWidth: 1,
+    borderColor: colors.line,
+  },
+  explainer: {
+    ...typography.body,
+    color: colors.textMuted,
+  },
+  actionRow: {
+    flexDirection: 'row',
+    gap: spacing.sm,
+    alignItems: 'center',
+  },
+  livePill: {
+    minHeight: 48,
+    flex: 1,
+    borderWidth: 1,
+    borderColor: colors.line,
+    paddingHorizontal: spacing.md,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  livePillText: {
+    ...typography.label,
+    color: colors.success,
+  },
+  secondaryButton: {
+    minHeight: 48,
+    borderWidth: 1,
+    borderColor: colors.line,
+    borderRadius: radius.xl,
+    paddingHorizontal: spacing.md,
+    justifyContent: 'center',
+  },
+  secondaryButtonText: {
+    ...typography.label,
+    color: colors.warning,
+  },
+  discoveryBlock: {
+    borderTopWidth: 1,
+    borderTopColor: colors.line,
+    paddingTop: spacing.md,
+    gap: spacing.sm,
+  },
+  blockLabel: {
+    ...typography.label,
+    color: colors.warning,
+  },
+  deviceRow: {
+    flexDirection: 'row',
+    gap: spacing.sm,
+    alignItems: 'center',
+    paddingVertical: spacing.sm,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.line,
+  },
+  deviceDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: colors.success,
+  },
+  deviceInfo: {
+    flex: 1,
+  },
+  deviceName: {
+    color: colors.text,
+    fontSize: 18,
+    lineHeight: 22,
+    fontWeight: '900',
+  },
+  deviceMeta: {
+    ...typography.body,
+    color: colors.textMuted,
+    marginTop: spacing.xxs,
+  },
+  connectPill: {
+    borderWidth: 1,
+    borderColor: colors.line,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+  },
+  connectPillText: {
+    ...typography.label,
+    color: colors.warning,
+  },
+  diagnosticBlock: {
+    borderTopWidth: 1,
+    borderTopColor: colors.line,
+    paddingTop: spacing.sm,
+    gap: spacing.xs,
+  },
+  diagnosticRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingVertical: spacing.xs,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.line,
+  },
+  diagnosticBody: {
+    flex: 1,
+    gap: 2,
+  },
+  diagnosticTitle: {
+    ...typography.label,
+    color: colors.text,
+  },
+  diagnosticText: {
+    flex: 1,
+    color: colors.textMuted,
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '700',
+  },
+});
+```
+
+- [ ] **Step 2: Run typecheck, lint, and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm run lint 2>&1 | tail -5 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 type errors, 0 lint errors, all tests pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add src/screens/SensorScreen.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(sensor): SensorScreen with DialTile + LiveDot"
+```
+
+---
+
+## F6 — Insights + Nav (T6.1 + T6.2)
+
+### Task F6.1: InsightsScreen refactor
+
+**Files:**
+- Modify: `src/screens/InsightsScreen.tsx`
+
+- [ ] **Step 1: Replace the entire file**
+
+Write the entire `src/screens/InsightsScreen.tsx` with this content:
+
+```tsx
+import React, { useEffect, useMemo, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  Activity,
+  ChartNoAxesCombined,
+  Gauge,
+  ShieldCheck,
+} from 'lucide-react-native';
+import {
+  buildInsightDashboard,
+  formatDuration,
+} from '../training/trainingMetrics';
+import {
+  type CompletedTrainingSession,
+  type HeartRateSample,
+  type InsightMetricRow,
+  type TrainingInsight,
+} from '../training/trainingTypes';
+import { EmptyState } from '../components/EmptyState';
+import { InsightRow } from '../components/InsightRow';
+import { colors, spacing, typography } from '../theme';
+
+const CONTINUOUS_SAMPLE_LIMIT = 2_000;
+
+type Props = {
+  readonly liveSamples: readonly HeartRateSample[];
+  readonly sessions: readonly CompletedTrainingSession[];
+  readonly getContinuousSamples: (
+    limit?: number,
+  ) => Promise<readonly HeartRateSample[]>;
+};
+
+export function InsightsScreen({
+  liveSamples,
+  sessions,
+  getContinuousSamples,
+}: Props) {
+  const [continuousSamples, setContinuousSamples] = useState<
+    readonly HeartRateSample[]
+  >([]);
+
+  useEffect(() => {
+    let mounted = true;
+
+    getContinuousSamples(CONTINUOUS_SAMPLE_LIMIT)
+      .then((samples) => {
+        if (mounted) {
+          setContinuousSamples(samples);
+        }
+      })
+      .catch(() => {
+        if (mounted) {
+          setContinuousSamples([]);
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, [getContinuousSamples, sessions.length]);
+
+  const analysisSamples = useMemo(
+    () => mergeSamples(continuousSamples, liveSamples),
+    [continuousSamples, liveSamples],
+  );
+
+  const dashboard = useMemo(
+    () =>
+      buildInsightDashboard({
+        liveSamples,
+        continuousSamples: analysisSamples,
+        sessions,
+      }),
+    [analysisSamples, liveSamples, sessions],
+  );
+
+  const latestSession = sessions[0] ?? null;
+  const loadRow = dashboard.rows.find((row) => row.key === 'load') ?? null;
+  const hrvRow = dashboard.rows.find((row) => row.key === 'hrv') ?? null;
+
+  if (dashboard.sampleCount === 0 && sessions.length === 0) {
+    return (
+      <View style={styles.screen}>
+        <EmptyState
+          eyebrow="ANÁLISE BLOQUEADA"
+          title="Sem dado real, sem conclusão"
+          copy="Ative o monitor contínuo. O FightRate não inventa pico, zona, carga, VFC ou recuperação."
+          tone="red"
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.instrumentHeader}>
+        <View style={styles.headerRail} />
+        <View style={styles.headerCopy}>
+          <Text style={styles.eyebrow}>PAINEL DE CÁLCULO</Text>
+          <Text style={styles.headerTitle}>Matriz científica</Text>
+          <Text style={styles.copy}>
+            Leituras calculadas a partir de BPM timestampado real. VFC só é
+            liberada quando o sensor entrega RR intervals.
+          </Text>
+        </View>
+        <View style={styles.headerScore}>
+          <ChartNoAxesCombined
+            color={colors.warning}
+            size={20}
+            strokeWidth={2.4}
+          />
+          <Text style={styles.scoreValue}>{loadRow?.value ?? '--'}</Text>
+          <Text style={styles.scoreLabel}>carga</Text>
+        </View>
+      </View>
+
+      <View style={styles.evidenceStrip}>
+        <EvidenceCell label="amostras" value={dashboard.sampleCount} />
+        <EvidenceCell
+          label="janela"
+          value={formatDuration(dashboard.durationMs)}
+        />
+        <EvidenceCell label="range" value={formatTimeRange(dashboard)} />
+      </View>
+
+      <View style={styles.metricMatrix}>
+        <View style={styles.matrixHeader}>
+          <Text style={styles.sectionLabel}>CÁLCULOS</Text>
+          <Text style={styles.matrixNote}>valor · status · leitura</Text>
+        </View>
+        {dashboard.rows.map((row, index) => (
+          <InsightRow
+            key={row.key}
+            detail={row.detail}
+            index={index + 1}
+            label={row.label}
+            statusLabel={row.statusLabel}
+            summary={row.summary}
+            testID={`insight-${row.key}`}
+            tone={row.tone}
+            unit={row.unit}
+            value={row.value}
+          />
+        ))}
+      </View>
+
+      <View style={styles.zonePanel}>
+        <View style={styles.matrixHeader}>
+          <Text style={styles.sectionLabel}>ZONAS OPERACIONAIS</Text>
+          <Text style={styles.matrixNote}>tempo real em cada trilho</Text>
+        </View>
+        {dashboard.zones.map((zone) => (
+          <View key={zone.key} style={styles.zoneRow}>
+            <Text style={styles.zoneLabel}>{zone.label}</Text>
+            <View style={styles.zoneTrack}>
+              <View style={[styles.zoneFill, { width: `${zone.percent}%` }]} />
+            </View>
+            <Text style={styles.zoneValue}>
+              {zone.percent}% · {formatDuration(zone.seconds * 1000)}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      <View style={styles.protocolPanel}>
+        <View style={styles.protocolIcon}>
+          {hrvRow?.status === 'ok' ? (
+            <ShieldCheck color={colors.success} size={18} strokeWidth={2.4} />
+          ) : (
+            <Gauge color={colors.warning} size={18} strokeWidth={2.4} />
+          )}
+        </View>
+        <View style={styles.protocolCopy}>
+          <Text style={styles.protocolTitle}>Protocolo de honestidade</Text>
+          <Text style={styles.copy}>
+            Métricas dependentes de perfil ou RR ficam marcadas como
+            necessárias. Isso impede conclusões falsas sobre FCmáx, Karvonen,
+            TRIMP completo ou VFC.
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.insightStack}>
+        <Text style={styles.sectionLabel}>LEITURAS OPERACIONAIS</Text>
+        {dashboard.narrative.length > 0 ? (
+          dashboard.narrative.map((insight, index) => (
+            <InsightNote
+              key={insight.title}
+              insight={insight}
+              index={index + 1}
+            />
+          ))
+        ) : (
+          <View style={styles.waitingPanel}>
+            <Activity color={colors.warning} size={18} strokeWidth={2.5} />
+            <Text style={styles.copy}>
+              Receba mais amostras reais para gerar leitura de tendência e ação.
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {latestSession ? (
+        <View style={styles.lastSessionStrip}>
+          <Text style={styles.eyebrow}>ÚLTIMA JANELA SALVA</Text>
+          <Text style={styles.lastSessionText}>
+            {formatDuration(latestSession.durationMs)} · média{' '}
+            {latestSession.averageBpm} · pico {latestSession.peakBpm} ·{' '}
+            {latestSession.sampleCount} amostras
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function EvidenceCell({
+  label,
+  value,
+}: {
+  readonly label: string;
+  readonly value: string | number;
+}) {
+  return (
+    <View style={styles.evidenceCell}>
+      <Text style={styles.evidenceValue}>{value}</Text>
+      <Text style={styles.evidenceLabel}>{label}</Text>
+    </View>
+  );
+}
+
+function InsightNote({
+  insight,
+  index,
+}: {
+  readonly insight: TrainingInsight;
+  readonly index: number;
+}) {
+  return (
+    <View style={styles.insightNote}>
+      <Text style={styles.noteIndex}>
+        {index.toString().padStart(2, '0')}
+      </Text>
+      <View style={styles.noteBody}>
+        <Text style={styles.insightTitle}>{insight.title}</Text>
+        <Text style={styles.noteText}>{insight.why}</Text>
+        <Text style={styles.noteAction}>{insight.action}</Text>
+        <Text style={styles.confidence}>{insight.confidence}</Text>
+      </View>
+    </View>
+  );
+}
+
+function mergeSamples(
+  persistedSamples: readonly HeartRateSample[],
+  liveSamples: readonly HeartRateSample[],
+) {
+  const byKey = new Map<string, HeartRateSample>();
+
+  [...persistedSamples, ...liveSamples].forEach((sample) => {
+    byKey.set(`${sample.timestamp}:${sample.bpm}`, sample);
+  });
+
+  return [...byKey.values()].sort(
+    (left, right) => left.timestamp - right.timestamp,
+  );
+}
+
+function formatTimeRange(dashboard: {
+  readonly startedAt: number | null;
+  readonly endedAt: number | null;
+}) {
+  if (dashboard.startedAt === null || dashboard.endedAt === null) {
+    return '--';
+  }
+
+  const start = new Date(dashboard.startedAt).toLocaleTimeString('pt-BR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+  const end = new Date(dashboard.endedAt).toLocaleTimeString('pt-BR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+  return `${start}–${end}`;
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    gap: spacing.lg,
+  },
+  eyebrow: {
+    ...typography.label,
+    color: colors.action,
+  },
+  copy: {
+    ...typography.body,
+    color: colors.textMuted,
+  },
+  instrumentHeader: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+    paddingVertical: spacing.md,
+    flexDirection: 'row',
+    gap: spacing.md,
+    alignItems: 'stretch',
+  },
+  headerRail: {
+    width: 4,
+    borderRadius: 1,
+    backgroundColor: colors.action,
+  },
+  headerCopy: {
+    flex: 1,
+    gap: spacing.xs,
+  },
+  headerTitle: {
+    color: colors.text,
+    fontSize: 36,
+    lineHeight: 37,
+    fontWeight: '900',
+    letterSpacing: -2,
+  },
+  headerScore: {
+    minWidth: 86,
+    borderLeftWidth: 1,
+    borderLeftColor: colors.line,
+    paddingLeft: spacing.md,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  scoreValue: {
+    ...typography.displaySmallNumeric,
+    fontSize: 36,
+    lineHeight: 38,
+    marginTop: spacing.xs,
+  },
+  scoreLabel: {
+    ...typography.label,
+    color: colors.textDim,
+  },
+  evidenceStrip: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+    flexDirection: 'row',
+  },
+  evidenceCell: {
+    flex: 1,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.xs,
+    borderRightWidth: 1,
+    borderRightColor: colors.line,
+  },
+  evidenceValue: {
+    ...typography.detailNumeric,
+  },
+  evidenceLabel: {
+    ...typography.label,
+    color: colors.textDim,
+    marginTop: 2,
+  },
+  metricMatrix: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+  },
+  matrixHeader: {
+    paddingVertical: spacing.sm,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.line,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.sm,
+  },
+  sectionLabel: {
+    ...typography.label,
+    color: colors.warning,
+  },
+  matrixNote: {
+    ...typography.label,
+    color: colors.textDim,
+    textAlign: 'right',
+    flexShrink: 1,
+  },
+  zonePanel: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+  },
+  zoneRow: {
+    paddingVertical: spacing.sm,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.line,
+    gap: spacing.xs,
+  },
+  zoneLabel: {
+    ...typography.label,
+    color: colors.text,
+  },
+  zoneTrack: {
+    height: 9,
+    backgroundColor: colors.surfaceRaised,
+    overflow: 'hidden',
+    borderRadius: 2,
+  },
+  zoneFill: {
+    height: '100%',
+    backgroundColor: colors.action,
+  },
+  zoneValue: {
+    ...typography.body,
+    color: colors.textMuted,
+  },
+  protocolPanel: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+    paddingVertical: spacing.md,
+    flexDirection: 'row',
+    gap: spacing.md,
+  },
+  protocolIcon: {
+    width: 34,
+    alignItems: 'center',
+    paddingTop: 2,
+  },
+  protocolCopy: {
+    flex: 1,
+    gap: spacing.xs,
+  },
+  protocolTitle: {
+    color: colors.text,
+    fontSize: 18,
+    lineHeight: 22,
+    fontWeight: '900',
+    letterSpacing: -0.7,
+  },
+  insightStack: {
+    gap: spacing.md,
+  },
+  insightNote: {
+    borderTopWidth: 1,
+    borderTopColor: colors.line,
+    paddingTop: spacing.md,
+    flexDirection: 'row',
+    gap: spacing.md,
+  },
+  noteIndex: {
+    color: colors.action,
+    fontSize: 18,
+    lineHeight: 24,
+    fontWeight: '900',
+    letterSpacing: -0.5,
+    width: 28,
+  },
+  noteBody: {
+    flex: 1,
+    gap: spacing.xs,
+  },
+  insightTitle: {
+    color: colors.text,
+    fontSize: 22,
+    lineHeight: 25,
+    fontWeight: '900',
+    letterSpacing: -1,
+  },
+  noteText: {
+    ...typography.body,
+    color: colors.textMuted,
+  },
+  noteAction: {
+    color: colors.text,
+    fontSize: 14,
+    lineHeight: 19,
+    fontWeight: '800',
+  },
+  confidence: {
+    ...typography.label,
+    color: colors.textDim,
+    marginTop: spacing.xs,
+  },
+  waitingPanel: {
+    borderTopWidth: 1,
+    borderTopColor: colors.line,
+    paddingTop: spacing.md,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.sm,
+  },
+  lastSessionStrip: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.line,
+    paddingVertical: spacing.md,
+  },
+  lastSessionText: {
+    ...typography.detailNumeric,
+    color: colors.text,
+    fontSize: 17,
+    lineHeight: 23,
+    marginTop: spacing.xs,
+  },
+});
+```
+
+- [ ] **Step 2: Run typecheck, lint, and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm run lint 2>&1 | tail -5 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add src/screens/InsightsScreen.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(insights): InsightsScreen with InsightRow + EmptyState"
+```
+
+---
+
+### Task F6.2: FightRateApp — tab fade, brand LiveDot, tab live indicator
+
+**Files:**
+- Modify: `src/app/FightRateApp.tsx`
+
+- [ ] **Step 1: Replace the entire file**
+
+Write the entire `src/app/FightRateApp.tsx` with this content:
+
+```tsx
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Image,
+  Pressable,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {
+  Bluetooth,
+  ChartNoAxesCombined,
+  History,
+  Radio,
+  type LucideIcon,
+} from 'lucide-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useHeartRateMonitor } from '../ble/useHeartRateMonitor';
+import { LiveDot } from '../components/LiveDot';
+import { CaptureScreen } from '../screens/CaptureScreen';
+import { HistoryScreen } from '../screens/HistoryScreen';
+import { InsightsScreen } from '../screens/InsightsScreen';
+import { SensorScreen } from '../screens/SensorScreen';
+import { colors, motion, radius, spacing, typography } from '../theme';
+
+type TabKey = 'capture' | 'history' | 'sensor' | 'insights';
+
+type Tab = {
+  readonly key: TabKey;
+  readonly label: string;
+  readonly icon: LucideIcon;
+};
+
+const tabs: readonly Tab[] = [
+  { key: 'capture', label: 'Captura', icon: Radio },
+  { key: 'history', label: 'Histórico', icon: History },
+  { key: 'sensor', label: 'Sensor', icon: Bluetooth },
+  { key: 'insights', label: 'Insights', icon: ChartNoAxesCombined },
+];
+
+export function FightRateApp() {
+  const insets = useSafeAreaInsets();
+  const monitor = useHeartRateMonitor();
+  const [activeTab, setActiveTab] = useState<TabKey>('capture');
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    opacity.value = 0;
+    opacity.value = withTiming(1, {
+      duration: motion.duration.fast,
+      easing: Easing.out(Easing.quad),
+    });
+  }, [activeTab, opacity]);
+
+  const fadeStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+
+  const onCaptureAction = useCallback(async () => {
+    if (monitor.isCapturing) {
+      await monitor.stopCapture();
+      return;
+    }
+
+    await monitor.startCapture();
+  }, [monitor]);
+
+  const onMonitorAction = useCallback(async () => {
+    if (monitor.isMonitoring) {
+      await monitor.stopMonitoring();
+      return;
+    }
+
+    await monitor.startMonitoring();
+  }, [monitor]);
+
+  const activeTitle = useMemo(() => {
+    if (activeTab === 'capture') {
+      if (monitor.isCapturing) {
+        return 'Janela de treino ativa';
+      }
+      if (monitor.isMonitoring) {
+        return 'Monitor contínuo';
+      }
+      return 'Ativar sensor';
+    }
+
+    if (activeTab === 'history') {
+      return 'Histórico real';
+    }
+
+    if (activeTab === 'sensor') {
+      return 'Sensor BLE';
+    }
+
+    return 'Análise real';
+  }, [activeTab, monitor.isCapturing, monitor.isMonitoring]);
+
+  const isAnyLive = monitor.isMonitoring || monitor.isCapturing;
+
+  return (
+    <View style={styles.root}>
+      <StatusBar barStyle="light-content" backgroundColor={colors.canvas} />
+      <ScrollView
+        contentContainerStyle={[
+          styles.content,
+          {
+            paddingTop: insets.top + spacing.lg,
+            paddingBottom: insets.bottom + 118,
+          },
+        ]}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={styles.brandRow}>
+          <Image
+            source={require('../assets/fightrate-logo.png')}
+            style={styles.logo}
+          />
+          <View style={styles.titleColumn}>
+            <View style={styles.kickerRow}>
+              {isAnyLive ? <LiveDot live size={6} /> : null}
+              <Text style={styles.kicker}>FightRate</Text>
+            </View>
+            <Text style={styles.title}>{activeTitle}</Text>
+          </View>
+        </View>
+
+        <Animated.View style={fadeStyle} key={`tab-${activeTab}`}>
+          {activeTab === 'capture' ? (
+            <CaptureScreen
+              monitor={monitor}
+              onCaptureAction={onCaptureAction}
+              onMonitorAction={onMonitorAction}
+            />
+          ) : null}
+          {activeTab === 'history' ? (
+            <HistoryScreen
+              sessions={monitor.sessions}
+              getSessionSamples={monitor.getSessionSamples}
+              getContinuousSamples={monitor.getContinuousSamples}
+              liveSamples={monitor.samples}
+            />
+          ) : null}
+          {activeTab === 'sensor' ? (
+            <SensorScreen
+              monitor={monitor}
+              onMonitorAction={onMonitorAction}
+            />
+          ) : null}
+          {activeTab === 'insights' ? (
+            <InsightsScreen
+              liveSamples={monitor.samples}
+              sessions={monitor.sessions}
+              getContinuousSamples={monitor.getContinuousSamples}
+            />
+          ) : null}
+        </Animated.View>
+      </ScrollView>
+
+      <View style={[styles.navWrap, { bottom: insets.bottom + spacing.sm }]}>
+        <View style={styles.navRail}>
+          {tabs.map((tab) => {
+            const selected = tab.key === activeTab;
+            const Icon = tab.icon;
+            const isTabLive =
+              (tab.key === 'capture' && monitor.isCapturing) ||
+              (tab.key === 'sensor' && monitor.isMonitoring);
+            return (
+              <Pressable
+                accessibilityRole="tab"
+                accessibilityState={{ selected }}
+                key={tab.key}
+                onPress={() => setActiveTab(tab.key)}
+                style={[styles.navItem, selected ? styles.navItemActive : null]}
+              >
+                <View style={styles.navIconRow}>
+                  <Icon
+                    color={selected ? colors.text : colors.textMuted}
+                    size={18}
+                    strokeWidth={2.4}
+                  />
+                  {isTabLive ? (
+                    <View style={styles.tabLiveDot}>
+                      <LiveDot live size={4} />
+                    </View>
+                  ) : null}
+                </View>
+                <Text
+                  style={[
+                    styles.navLabel,
+                    selected ? styles.navLabelActive : null,
+                  ]}
+                >
+                  {tab.label}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: colors.canvas,
+  },
+  content: {
+    paddingHorizontal: spacing.md,
+    gap: spacing.lg,
+  },
+  brandRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+  },
+  logo: {
+    width: 54,
+    height: 54,
+    borderRadius: radius.sm,
+  },
+  titleColumn: {
+    flex: 1,
+  },
+  kickerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  kicker: {
+    ...typography.label,
+    color: colors.action,
+  },
+  title: {
+    marginTop: spacing.xs,
+    color: colors.text,
+    fontSize: 34,
+    lineHeight: 36,
+    fontWeight: '900',
+    letterSpacing: -2.1,
+  },
+  navWrap: {
+    position: 'absolute',
+    left: spacing.md,
+    right: spacing.md,
+  },
+  navRail: {
+    borderWidth: 1,
+    borderColor: colors.line,
+    borderRadius: radius.xl,
+    backgroundColor: colors.surfaceRaised,
+    padding: spacing.xs,
+    flexDirection: 'row',
+    gap: spacing.xs,
+    shadowColor: colors.black,
+    shadowOpacity: 0.45,
+    shadowRadius: 24,
+    elevation: 18,
+  },
+  navItem: {
+    flex: 1,
+    minHeight: 54,
+    borderRadius: radius.xl,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xxs,
+  },
+  navItemActive: {
+    backgroundColor: colors.action,
+  },
+  navIconRow: {
+    position: 'relative',
+  },
+  tabLiveDot: {
+    position: 'absolute',
+    top: -2,
+    right: -6,
+  },
+  navLabel: {
+    ...typography.label,
+    color: colors.textMuted,
+    fontSize: 9,
+  },
+  navLabelActive: {
+    color: colors.text,
+  },
+});
+```
+
+- [ ] **Step 2: Run typecheck, lint, and tests**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -3 && npm run lint 2>&1 | tail -5 && npm test -- --runInBand 2>&1 | tail -5`
+
+Expected: 0 errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add src/app/FightRateApp.tsx
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "feat(app): FightRateApp tab fade + brand LiveDot + tab live indicator"
+```
+
+---
+
+## F7 — Verify + Ship (T7.1 + T7.2 + T7.3 + T7.4)
+
+### Task F7.1: Update FIGHTRATE_DESIGN_SYSTEM.md with new tokens
+
+**Files:**
+- Modify: `FIGHTRATE_DESIGN_SYSTEM.md`
+
+- [ ] **Step 1: Append new section after section 4 (Tipografia)**
+
+Use `edit` to insert this block immediately after the end of section 4 (the `#### Texto explicativo` subsection in `FIGHTRATE_DESIGN_SYSTEM.md`):
+
+```markdown
+### Tipografia numérica tabular (v2)
+
+Para todos os valores numéricos do app (BPM, métricas, zone, timestamps, IDs, UUIDs), o app usa **JetBrains Mono** com `fontVariant: ['tabular-nums']` para alinhamento perfeito de dígitos. Esta fonte está bundled em `assets/fonts/JetBrainsMono-{Regular,Medium,Bold,ExtraBold}.ttf` e linkada via `react-native.config.js` + `react-native-asset`.
+
+Tokens em `src/theme/typography.ts`:
+
+```ts
+displayNumeric:  { fontSize: 110, lineHeight: 100, fontWeight: '900', letterSpacing: -7 }  // BPM principal
+displaySmallNumeric: { fontSize: 56, lineHeight: 54, fontWeight: '900', letterSpacing: -3 }  // Métricas grandes
+metricNumeric: { fontSize: 28, lineHeight: 30, fontWeight: '800', letterSpacing: -1.2 }  // Tiles
+detailNumeric: { fontSize: 18, lineHeight: 22, fontWeight: '800', letterSpacing: -0.8 }  // Detalhes
+```
+
+`display`, `displaySmall`, `body`, `label`, `button` permanecem em Inter (fallback do sistema). Apenas os tokens numéricos exigem JetBrains Mono.
+```
+
+- [ ] **Step 2: Append a new section after section 9 (Motion)**
+
+Insert this block after section 9:
+
+```markdown
+### Motion presets (v2)
+
+`src/theme/motion.ts` define easing e durações canônicas:
+
+```ts
+easeOutQuart: 'cubic-bezier(0.25, 1, 0.5, 1)'  // entradas
+easeOutExpo: 'cubic-bezier(0.16, 1, 0.3, 1)'   // transições longas
+easeOutBack: 'cubic-bezier(0.34, 1.56, 0.64, 1)' // pin (overshoot sutil)
+easeInOutQuart: 'cubic-bezier(0.76, 0, 0.24, 1)' // pulse loops
+
+duration: { instant: 80, fast: 160, normal: 240, slow: 380, pulse: 800, pulseSlow: 1600 }
+stagger: { row: 50, item: 80 }
+```
+
+Animações registradas:
+
+- `bpmPulse` (loop, 800ms) — BPM quando `receiving`
+- `liveDotPulse` (loop, 1600ms) — LiveDot quando `live = true`
+- `stopAlertRing` (loop, 1600ms) — anel de aviso em volta do botão Parar quando `isCapturing`
+- `tabFade` (200ms cross-fade) — entre tabs
+- `rowEnter` (240ms fade+translateY 8→0, stagger 50ms) — listas de Histórico e Insights
+- `pinEnter` (500ms easeOutBack 1.4→1) — pin do TrainingChart
+- `pressDown/Up` (80/160ms scale 1→0.96→1, opacity 1→0.82→1) — feedback físico de todos os botões
+
+Todas respeitam `AccessibilityInfo.isReduceMotionEnabled()` (instantâneas quando `true`).
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add FIGHTRATE_DESIGN_SYSTEM.md
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "docs(design): update FIGHTRATE_DESIGN_SYSTEM.md with numeric typography + motion presets"
+```
+
+---
+
+### Task F7.2: Final verify (typecheck + lint + test + audit)
+
+**Files:** none (verification only)
+
+- [ ] **Step 1: typecheck**
+
+Run: `cd /d/h && npm run typecheck 2>&1 | tail -5`
+
+Expected: 0 errors.
+
+- [ ] **Step 2: lint**
+
+Run: `cd /d/h && npm run lint 2>&1 | tail -5`
+
+Expected: 0 errors.
+
+- [ ] **Step 3: tests**
+
+Run: `cd /d/h && npm test -- --runInBand 2>&1 | tail -10`
+
+Expected: all tests pass (55 antigos + 9 novos ≈ 64).
+
+- [ ] **Step 4: audit**
+
+Run: `cd /d/h && npm audit --audit-level=moderate 2>&1 | tail -5`
+
+Expected: 0 vulnerabilities at moderate or higher.
+
+- [ ] **Step 5: If any step fails, fix inline and rerun until all 4 pass**
+
+- [ ] **Step 6: Commit any fixes**
+
+```bash
+cd /d/h && git add -A
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "chore: final verify pass (typecheck + lint + test + audit)" --allow-empty
+```
+
+---
+
+### Task F7.3: Build release APK
+
+**Files:** none (build verification only)
+
+- [ ] **Step 1: Confirm react-native-asset linked fonts (if Step F1.1.3 used direct copy)**
+
+Run: `ls /d/h/android/app/src/main/assets/fonts/`
+
+Expected: 4 ttf files.
+
+- [ ] **Step 2: Build release APK**
+
+Run:
+```bash
+cd /d/h/android
+$env:JAVA_HOME = "C:\Users\Evandro\AppData\Local\Programs\Android Studio\jbr"
+$env:Path = "$env:JAVA_HOME\bin;$env:Path"
+./gradlew.bat :app:assembleRelease -PreactNativeArchitectures=arm64-v8a 2>&1 | tail -20
+```
+
+Expected: `BUILD SUCCESSFUL` and `app-arm64-v8a-release.apk` produced in `android/app/build/outputs/apk/release/`.
+
+- [ ] **Step 3: Verify APK contains fonts**
+
+Run: `unzip -l /d/h/android/app/build/outputs/apk/release/app-arm64-v8a-release.apk | grep -i jetbrains`
+
+Expected: 4 entries for `assets/fonts/JetBrainsMono-*.ttf`.
+
+- [ ] **Step 4: Compress APK to 7z for Telegram**
+
+Run:
+```bash
+cd /d/h
+"C:/Users/Evandro/AppData/Local/Microsoft/WindowsApps/7z.exe" a -t7z -mx=9 -m0=lzma2 "android/app/build/outputs/apk/release/app-arm64-v8a-release.apk.7z" "android/app/build/outputs/apk/release/app-arm64-v8a-release.apk" 2>&1 | tail -3
+ls -lh android/app/build/outputs/apk/release/
+```
+
+Expected: 7z file ~ 9-12 MB (depends on font delta).
+
+- [ ] **Step 5: Commit the 7z archive to a build artifact dir (optional, for traceability)**
+
+```bash
+cd /d/h && git add android/app/build/outputs/apk/release/*.7z 2>/dev/null
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "build: release APK v2 (Instrumento Forte)" 2>&1 | tail -3
+```
+
+---
+
+### Task F7.4: Send APK via Telegram and update .impeccable.md
+
+**Files:**
+- Modify: `.impeccable.md`
+
+- [ ] **Step 1: Send via Telegram**
+
+Call the `telegram_attach` tool with the 7z path:
+
+```ts
+telegram_attach({
+  paths: ['D:\\h\\android\\app\\build\\outputs\\apk\\release\\app-arm64-v8a-release.apk.7z'],
+  caption: '🎯 FightRate v2 — Instrumento Forte (release APK, ~9-12 MB)\n\nRefinamento UI/UX concluído:\n- JetBrains Mono tabular em todos os displays numéricos\n- LiveDot pulsante (LED) em AO VIVO, BPM, tab bar\n- Anel de aviso no botão Parar durante captura\n- Furos laterais no TrainingChart (estilo ECG)\n- DialTile no SensorScreen\n- TrackRow T01..Tn no Histórico\n- InsightRow com stagger reveal\n- Press feedback refinado em todos os botões\n- applicationId preservado: com.healthtracking.fightrate\n\nPara instalar: descompacte o 7z e rode `adb install -r app-arm64-v8a-release.apk`',
+})
+```
+
+- [ ] **Step 2: Update .impeccable.md**
+
+Append this paragraph at the end of `.impeccable.md`:
+
+```markdown
+
+## Estado atual (2026-06-15)
+
+Direção 01 — Corner Instrument refinada para **Instrumento Forte** (release v2). Mudanças:
+- JetBrains Mono tabular em displays numéricos.
+- 6 novos componentes (LiveDot, PressableSurface, EmptyState, DialTile, TrackRow, InsightRow) e 2 hooks (usePulseAnimation, useMotionPreference).
+- Animações orquestradas (LiveDot pulse, BPM pulse, stop alert ring, tab cross-fade, stagger reveal em listas).
+- TrainingChart refinado (furos laterais estilo ECG, LiveDot no readout).
+- BLE, SQLite, hooks de monitor NÃO foram tocados.
+
+Próxima iteração: avaliar Direção C (Cinemática) — entrada de tela com reveal, transições slide, sombras direcionais.
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /d/h && git add .impeccable.md
+git -c user.name="fightrate-bot" -c user.email="bot@fightrate.local" commit -m "docs: update .impeccable.md with v2 status"
+```
+
+- [ ] **Step 4: Final summary to user**
+
+After all tasks complete, present a final summary in PT-BR with:
+- Number of new tests (and total).
+- APK size before/after.
+- Files changed.
+- Brief description of each refinement.
+
+---
+
+## Self-Review
+
+### Spec coverage
+
+Each spec section maps to a task:
+
+- **§3.1 Tipografia** → F1.1 (font link) + F1.3 (typography tokens).
+- **§3.2 Motion** → F1.2 (motion.ts).
+- **§3.3 Cores** → F1.4 (ringWarn).
+- **§3.4 Spacing** → no changes (covered by existing tokens).
+- **§4.1 LiveDot** → F2.2.
+- **§4.2 PressableSurface** → F2.3.
+- **§4.3 EmptyState** → F2.4.
+- **§4.4 DialTile** → F2.5.
+- **§4.5 TrackRow** → F2.6.
+- **§4.6 InsightRow** → F2.7.
+- **§4.7 usePulseAnimation** → F2.1.
+- **§5.1 ActionButton** → F3.1.
+- **§5.2 TrainingChart** → F4.1.
+- **§5.3 SectionPanel** → F3.3.
+- **§5.4 MetricTile** → F3.4.
+- **§5.5 StatusTag** → F3.2.
+- **§6.1 CaptureScreen** → F4.2.
+- **§6.2 HistoryScreen** → F5.1.
+- **§6.3 SensorScreen** → F5.2.
+- **§6.4 InsightsScreen** → F6.1.
+- **§6.5 FightRateApp** → F6.2.
+- **§7 Animações** → spread across F2 (hooks) + F3 (ActionButton ring) + F4 (chart readout) + F6 (tab fade, stagger).
+- **§9 Critérios de aceitação** → verified by F7.2.
+- **§11 Riscos** → mitigated by F1.1.3 fallback to direct copy.
+
+### Placeholder scan
+
+Searched the plan for "TBD", "TODO", "implement later", "fill in details", "appropriate error handling", "similar to Task N". No matches.
+
+### Type consistency
+
+- `LiveDot` props: `live`, `size`, `testID` — used consistently.
+- `PressableSurface` props: `children`, `onPress`, `disabled`, `style`, `accessibilityLabel`, `testID` — used consistently.
+- `EmptyState` props: `eyebrow`, `title`, `copy`, `tone`, `testID` — used consistently.
+- `DialTile` props: `label`, `value`, `tone`, `testID` — used consistently.
+- `TrackRow` props: `trackNumber`, `day`, `hour`, `title`, `meta`, `metrics`, `isOpen`, `onPress`, `accessibilityLabel`, `children`, `testID` — used consistently.
+- `InsightRow` props: `index`, `label`, `statusLabel`, `summary`, `detail`, `value`, `unit?`, `tone`, `testID` — used consistently.
+- `usePulseAnimation(active, durationMs?)` — single signature.
+- `useMotionPreference()` — no args, returns boolean.
+
+### No backwards-incompatible changes
+
+- All new props are optional with sensible defaults.
+- Existing imports stay working.
+- BLE, SQLite, monitor hooks untouched.