HealthTracking/docs/superpowers/specs/2026-06-15-fightrate-ui-ux-refinamento-instrumento-forte.md

# FightRate RN — Refinamento UI/UX Instrumento Forte (Direção B)

> **Status:** spec aprovada para execução (workflow Spec → Plan → TDD, aprovação implícita do usuário em 2026-06-15)
> **Direção visual:** 01 — Corner Instrument (oficial), refinada para Instrumento Forte
> **Escopo:** React Native CLI bare, sem troca de stack, sem novas dependências externas além de fontes (JetBrains Mono localmente bundled)
> **Não-escopo:** reescrita de TrainingChart (já tem viewport/zoom/pan/pin — apenas refino cosmético de furos laterais), mudanças em BLE/service/SQLite, novas telas, mudanças no design system canônico (`FIGHTRATE_DESIGN_SYSTEM.md` é atualizado, não substituído)

---

## 1. Contexto e objetivo

O app FightRate já segue a direção oficial Corner Instrument: fundo preto lona, paleta 60/30/10, número BPM dominante, ausência deliberada de cards genéricos. O usuário gosta do estado atual e pediu refinamento de posicionamento e polimento "digno de Awwwards" em todas as telas, sem trocar a essência.

Esta spec implementa a **Direção B — Instrumento Forte** (escolhida em 2026-06-15 com aprovação do usuário, sem pausa para revisão intermediária). A Direção B adiciona metáfora física mais presente ao Corner Instrument: LED pulsante, números tabulares com JetBrains Mono, furos laterais no gráfico, anel de aviso pulsante no botão de parar treino, dial tiles no Sensor, e microanimações orquestradas.

A Direção A (Contido) foi considerada e descartada por ser menos impactante; a Direção C (Cinemática) por inflar bundle e ter risco de regressão em gestos. B é o meio-termo com maior retorno de polimento por unidade de risco.

## 2. Princípios de design (ordem de prioridade)

1. **Instrumento sobre dashboard.** Cada elemento deve parecer um dial, trilho, marcador ou botão físico. Nada de cards uniformes.
2. **Número vem primeiro, com verdade tabular.** Todos os valores numéricos usam JetBrains Mono com `fontVariant: ['tabular-nums']` para alinhamento perfeito de dígitos.
3. **Vivo sem distrair.** Animações comunicam estado (captura ativa, pin selecionado, pulse de BPM). Nunca decorativas, nunca durante treino ativo.
4. **Hierarquia assimétrica.** Lados esquerdo e direito não são simétricos. Datas, labels, valores e ícones têm pesos diferentes, alinhamentos diferentes.
5. **Hardware reading culture.** Status, BLE, bateria, RSSI aparecem como LEDs e marcadores discretos, não como caixas com sombra.
6. **Bordas e trilhos, não fundos arredondados.** Componentes de destaque herdam `borderTopWidth`/`borderBottomWidth: 1, borderColor: colors.line`. Cantos retos (radius.xs no máximo). Exceção única: botões primários (radius.xl/pill).

## 3. Tokens — mudanças

### 3.1 Tipografia — adicionar JetBrains Mono

`src/theme/typography.ts` ganha pesos para display numérico. Não removemos os tokens existentes; adicionamos variantes.

```ts
// Novos tokens (mantém os antigos)
displayNumeric: {
  fontFamily: 'JetBrainsMono-ExtraBold',
  fontVariant: ['tabular-nums'],
  fontSize: 110,
  lineHeight: 100,
  letterSpacing: -7,
  fontWeight: '900' as const,
},
displaySmallNumeric: {
  fontFamily: 'JetBrainsMono-ExtraBold',
  fontVariant: ['tabular-nums'],
  fontSize: 56,
  lineHeight: 54,
  letterSpacing: -3,
  fontWeight: '900' as const,
},
metricNumeric: {
  fontFamily: 'JetBrainsMono-Bold',
  fontVariant: ['tabular-nums'],
  fontSize: 28,
  lineHeight: 30,
  letterSpacing: -1.2,
  fontWeight: '800' as const,
},
detailNumeric: {
  fontFamily: 'JetBrainsMono-Bold',
  fontVariant: ['tabular-nums'],
  fontSize: 18,
  lineHeight: 22,
  letterSpacing: -0.8,
  fontWeight: '800' as const,
},
```

`display`, `displaySmall`, `body`, `label`, `button` permanecem (Inter fallback do sistema). Apenas os novos tokens numéricos exigem JetBrains Mono.

**Setup da fonte (RN bare, sem Expo):**

1. `assets/fonts/JetBrainsMono-{Regular,Medium,Bold,ExtraBold}.ttf` já baixado.
2. `react-native.config.js` em `D:\h\`:
   ```js
   module.exports = {
     project: { android: { packageName: 'com.healthtracking.fightrate', sourceDir: './android' } },
     assets: ['./assets/fonts'],
   };
   ```
3. `npx react-native-asset` (já é dep transitiva via `@react-native-community/cli`). Gera o link em `android/app/src/main/assets/fonts/` e atualiza `app/build.gradle` com `apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"` (não usamos, então esse passo é pulado).
4. Verificar build: APK deve ter os 4 TTFs em `assets/fonts/`.

### 3.2 Motion — adicionar `src/theme/motion.ts`

```ts
export const motion = {
  // Easing presets
  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 presets (ms)
  duration: {
    instant: 80,
    fast: 160,
    normal: 240,
    slow: 380,
    pulse: 800,
    pulseSlow: 1600,
  },

  // Stagger offsets
  stagger: {
    row: 50,
    item: 80,
  },
} as const;
```

**Uso:** Animação com Reanimated usa `Easing.bezier(0.25, 1, 0.5, 1)` para `easeOutQuart` e `withTiming(value, { duration: 240, easing: Easing.bezier(0.25, 1, 0.5, 1) })`. CSS-equivalente para StyleSheet animations.

### 3.3 Cores — sem mudanças

Paleta atual do `FIGHTRATE_DESIGN_SYSTEM.md` é mantida. Adicionamos 1 token semântico (não expande o número de cores):

```ts
// em colors.ts (nova chave)
ringWarn: 'rgba(226, 59, 46, 0.55)', // anel de aviso durante captura
```

### 3.4 Espaçamento — sem mudanças

Escala 4/8/12/16/24/32/48 do `spacing.ts` permanece.

## 4. Componentes novos

### 4.1 `src/components/LiveDot.tsx`

Ponto de 8px que pulsa (escala 1 → 1.4 → 1, opacity 0.6 → 1 → 0.6) em loop infinito de 1.6s, cor `colors.success` quando `live` é `true`, cor `colors.textDim` quando `live` é `false`. Implementado com Reanimated (`useSharedValue` + `withRepeat`).

Props: `{ readonly live: boolean; readonly label?: string }`.

**TDD:** testa que:
- Renderiza um `<View>` 8×8 com `backgroundColor = colors.success` quando `live = true`.
- Renderiza 8×8 com `backgroundColor = colors.textDim` quando `live = false`.
- `accessibilityLabel` recebe "AO VIVO" quando `live` e "INATIVO" caso contrário.

(Animação não é testada em Jest, mas o snapshot de render é.)

### 4.2 `src/components/PressableSurface.tsx`

Wrapper sobre `Pressable` que adiciona feedback físico refinado: `scale 1 → 0.96 → 1` em 160ms, `opacity 1 → 0.82 → 1` simultâneo, com `easeOutQuart`. Não tem sombra — apenas a transformação.

Props: `{ readonly onPress?, readonly children, readonly disabled?, readonly style?, readonly accessibilityLabel? }`.

**TDD:** testa que:
- Renderiza children dentro de `Pressable`.
- Aplica `style` recebido via prop.
- `accessibilityRole` é `button`.

### 4.3 `src/components/EmptyState.tsx`

Empty state instrutivo com geometria própria. Componentes:
- Eyebrow (typography.label, colors.action)
- Title (typography.display, 1 linha, ex.: "Sem uso contínuo ainda")
- Copy (typography.body, 1-2 linhas)
- Geometria SVG 64×64 opcional (quadrado + círculo concêntrico + risco diagonal) — gerada inline via `react-native-svg`

Props: `{ readonly eyebrow: string; readonly title: string; readonly copy: string; readonly tone?: 'amber' | 'red' | 'green' }`.

**TDD:** testa render dos textos e tom.

### 4.4 `src/components/DialTile.tsx`

Substitui os 4 cards 48.5% do `SensorScreen.signalGrid` por um trilho horizontal de marcadores em formato de dial. Cada dial tem:
- 56px height
- Valor numérico grande à esquerda (typography.detailNumeric)
- Label técnico (typography.label, colors.textDim) à direita
- Marcador vertical 2px (cor semântica: amber/green/red) à esquerda
- Trilho de fundo horizontal sutil

Props: `{ readonly label: string; readonly value: string; readonly tone?: 'amber' | 'green' | 'red' }`.

**TDD:** testa que:
- Renderiza label e value.
- Aplica cor correta de marker conforme `tone`.
- `accessibilityLabel` combina label e value.

### 4.5 `src/components/TrackRow.tsx`

Substitui `sessionStrip` do HistoryScreen. Layout:
- Track number `T01`, `T02`... (typography.label, colors.textMuted) à esquerda, 24px width
- Faixa lateral 2px de cor semântica (action se isOpen, line se não)
- Day block (existente) mantido, 56px width
- Body (existente) com título + meta + métricas
- Chevron (existente) à direita
- Padding interno reduzido (spacing.sm ao invés de md)

Props: `{ readonly trackNumber: number; readonly day: string; readonly hour: string; readonly title: string; readonly meta: string; readonly metrics: ReadonlyArray<{ label: string; tone?: 'normal' | 'hot' }>; readonly isOpen: boolean; readonly onPress: () => void; readonly accessibilityLabel: string }`.

**TDD:** testa que:
- Renderiza `T{trackNumber padded 2}`.
- Faixa lateral muda cor quando `isOpen`.
- `onPress` é chamado.

### 4.6 `src/components/InsightRow.tsx`

Substitui `InstrumentMetricRow` do InsightsScreen. Layout:
- Index `01`..`08` (typography.label, colors.textDim) à esquerda, 28px width
- Stack vertical: label/status, summary, detail
- Valor grande à direita (typography.metricNumeric, tom semântico)
- Animação de entrada: fade + translateY 8px, stagger 50ms por row (delay = index * 50)

Props: `{ readonly index: number; readonly label: string; readonly statusLabel: string; readonly summary: string; readonly detail: string; readonly value: string; readonly unit?: string; readonly tone: 'good' | 'warning' | 'danger' | 'neutral'; readonly totalRows: number }`.

**TDD:** testa que:
- Index formatado com 2 dígitos zero-pad.
- `accessibilityLabel` combina label, status, value.

(Animação de stagger: o delay é calculado por `index * motion.stagger.row` e o componente wrapa em `Animated.View` com `useAnimatedStyle`.)

### 4.7 `src/hooks/usePulseAnimation.ts`

Hook reutilizável para pulse de elementos "vivos":

```ts
export function usePulseAnimation(active: boolean, durationMs = 1600) {
  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]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
    opacity: opacity.value,
  }));

  return animatedStyle;
}
```

**TDD:** testa o hook isoladamente. Em Jest com mock de reanimated (`jest.setup.js` já tem), validamos que o hook retorna `{ transform: [{ scale: 1 }], opacity: 0.5 }` no estado inicial.

## 5. Componentes modificados

### 5.1 `ActionButton` (modificado)

- Adiciona `variant: 'stop' | 'primary' | 'secondary' | 'stopAlert'`. `stopAlert` é o novo estado de "Parar Janela" durante captura: fundo `colors.action`, texto `colors.text`, anel externo pulsante de `colors.ringWarn` (2px stroke, opacity 0.55, scale 1 → 1.06 → 1 em 1.6s).
- Variante `stop` (cor creme) é mantida para usos não relacionados a parar treino.
- `pressed`: muda de `scale 0.98 + opacity 0.88` para `scale 0.96 + opacity 0.82` (mais físico).
- Label em JetBrains Mono Bold para variantes numéricas (ex.: "01:42:18"), em `typography.button` (Inter) para textos PT-BR.

### 5.2 `TrainingChart` (modificado)

- Adiciona **furos laterais** ao longo do eixo X: 6 pequenos retângulos `1.5px × 4px`, cor `colors.line`, espaçados 24px, posicionados na borda inferior do viewBox, abaixo do último label de tick. Inspiração: rolo de ECG. Não interfere com gestos.
- Readout (`styles.readout`) ganha LiveDot ao lado do label (somente quando `viewport.liveTail` é `true`).
- Pin (quando ativo) ganha pulse de 0.5s na entrada: scale 1.4 → 1 com easeOutBack.
- `ActionButton` de zoom in/out mantém forma; o botão `↺` ganha LiveDot interno se `liveTail`.

### 5.3 `SectionPanel` (modificado)

- Adiciona `divider` prop (boolean). Quando `true`, renderiza apenas borda top + bottom 1px, sem padding lateral, e children se ajusta com `paddingHorizontal: spacing.md`. Usado para listas densas.
- Variante `subtle` que remove `backgroundColor: colors.surfaceRaised` (mantém borda apenas).

### 5.4 `MetricTile` (mantido, com uso diminuído)

- Continua existindo (alguns usos em History/Insights). Não recebe mudanças visuais, mas ganha `numeric: boolean` prop que aplica `fontFamily: 'JetBrainsMono-Bold'` quando `true`.

### 5.5 `StatusTag` (modificado)

- Tones renomeados: `'amber' | 'green' | 'red'` mantidos, mas o `red` agora usa `colors.action` como borda e `rgba(226, 59, 46, 0.12)` como fundo (mais alinhado com paleta).
- Adiciona `size: 'sm' | 'md'`. `sm` = 8px fontSize, padding xxs/xxs. `md` (default) = 10px (atual).

## 6. Mudanças por tela

### 6.1 `CaptureScreen` (refatorado)

Componente `CaptureScreen.tsx` reestrutura sem mexer em lógica de estado.

**Top rail (eyebrow + sensor name + timer):**
- Eyebrow "MAGENE H003 · CINTA CARDÍACA" ganha prefixo `•` (bullet) alinhado à esquerda, 2px à esquerda do texto, cor `colors.success` se receiving, `colors.textDim` se não.
- Timer ganha LiveDot ao lado de "AO VIVO" / "INATIVO".

**BPM display:**
- Valor principal passa de `bpmValue` (98px) para `bpmNumeric` (`displayNumeric`, JetBrains Mono ExtraBold, 110px).
- BPM pulsa (scale 1 → 1.02 → 1) a cada novo sample se `monitor.phase === 'receiving'`, com `usePulseAnimation(active, 800)`. Pulse discreto — não assusta.
- Ao lado do BPM number, "BPM" vira label técnico pequeno (10px) abaixo da unidade, alinhado à esquerda.

**Capture rail (MÉDIA / PICO / AMOSTRAS):**
- Cada valor usa `metricNumeric` (JetBrains Mono Bold 28px).
- Labels técnicas mantidas.
- Separadores verticais 1px em `colors.line` entre os 3.

**TrainingChart:**
- Versão refatorada com furos laterais + readout com LiveDot (vide 5.2).

**System strip (BLE / Bateria / Fundo):**
- Cada item vira `DialTile` (vide 4.4). 4 colunas em grid 2×2 ou 4×1 dependendo do viewport (testar `width < 380`).

**Action grid:**
- `Ativar monitor contínuo`: ActionButton primary padrão.
- `Iniciar/Fechar janela de treino`: ActionButton `stopAlert` quando `isCapturing` (anel pulsante), `primary` caso contrário.
- Stack vertical com `gap: spacing.sm`.

**Truth line (texto explicativo no rodapé):**
- Mantida, mas com ícone `Activity` em 18px (mantido) e copy levemente ajustada para PT-BR mais natural:
  - Antes: "Enquanto a cinta estiver reconhecida, todo BPM real é salvo. O botão de treino só marca a janela para análise."
  - Depois: "Cinta reconhecida = cada BPM real é salvo. Toque em Iniciar apenas para destacar uma janela para análise."

### 6.2 `HistoryScreen` (refatorado)

**Mode switch (Janelas / Uso total / Faixa):**
- Mantida, mas com `PressableSurface` (feedback refinado) ao invés de `Pressable` puro.

**WindowHistory / ContinuousHistory (listas de sessões/blocos):**
- Cada item vira `TrackRow` (vide 4.5).
- Stagger reveal na entrada: cada row aparece com fade + translateY 8px → 0, delay `index * motion.stagger.item` (80ms).
- Total header (archiveHeader) mantém `archiveNumber` mas usa `displayNumeric`.

**WindowDetail / UsageDetail (abertos):**
- TrainingChart refatorado (vide 5.2).
- Detail rail (métricas) usa `metricNumeric`.
- Zone stack: label à esquerda (typography.label), barra de progresso à direita (9px height, fill `colors.action`), percentual/duration à direita. Sem mudança funcional, mantém estética.

**RangeHistory (Faixa customizada):**
- Mantido. Inputs ganham `fontVariant: ['tabular-nums']`.

**Empty states:**
- `EmptyHistory` substituído por `EmptyState` (vide 4.3). Eyebrow/título/copy mantidos. Tom default `'amber'`.

### 6.3 `SensorScreen` (refatorado)

**Sensor console (topo):**
- `eyebrow` SENSOR REAL ganha prefixo `•` (verde se receiving, dim caso contrário).
- PhaseBadge vira pill 32px height com `borderRadius: radius.xl`, borda 1px `colors.line`, fundo `colors.surface`, ícone `Bluetooth` à esquerda, label typography.label.
- "Magene H003" passa para `detailNumeric` (JetBrains Mono 22px).

**Signal grid:**
- Substituído por 4 `DialTile` em stack vertical com `gap: spacing.xs`. Cada um 56px height, marcador vertical 2px à esquerda, valor à esquerda, label à direita.

**BleInventoryBlock (Serviços e Características):**
- Mantido. Adiciona separador 1px entre rows (já tem). Refinamento: `diagnosticTitle` em `typography.label` (já), `diagnosticText` em JetBrains Mono Regular 12px para alinhar UUIDs.

**Discovery block (dispositivos encontrados):**
- Mantido. Adiciona PulseBorder em `connectPill` quando é o dispositivo conectado (animação discreta).

**Action row (Buscar sensor / Monitor contínuo ativo):**
- `ActionButton` "Buscar sensor" vira primary padrão. "Bateria" vira secondary (mantido).
- Pill "Monitor contínuo ativo" vira `LiveDot` + label.

### 6.4 `InsightsScreen` (refatorado)

**Empty state inicial ("Sem dado real, sem conclusão"):**
- Substituído por `EmptyState` com tom `'red'`. Copy ajustada para mais assertiva:
  - "Ative o monitor contínuo. O FightRate não inventa pico, zona, carga, VFC ou recuperação."

**Instrument header (Matriz científica):**
- `headerRail` (5px esquerda vermelho) refinado para 4px com borderRadius 1px (mais instrumento).
- `headerTitle` "Matriz científica" em `displaySmall` (Inter 36px) mantido.
- `headerScore` mantém mas usa `scoreValue` em `displayNumeric` (JetBrains Mono 36px) — números tabulares.

**Evidence strip (amostras / janela / range):**
- Cada `EvidenceCell` usa `detailNumeric`.

**MetricMatrix (cálculos):**
- Substituído por lista de `InsightRow` (vide 4.6) com stagger reveal.
- Removido `metricIndexRail` separado (o index agora é parte do `InsightRow`).

**Zone panel (zonas operacionais):**
- Mantido. `zoneTrack` ganha `borderRadius: 2` (sutil), `zoneFill` muda de `colors.action` para gradiente horizontal com `colors.action` → `colors.warning` via `colors.stopSurface` interpolado (CSS-like via `color-mix`, mas RN não tem — usar `colors.action` para fill sólido, e a barra 9px com gradiente via `react-native-svg` se aceitarmos mais peso, ou manter fill sólido por ora).
- Decisão: **manter fill sólido em `colors.action`** (sem Skia/gradiente custom). Documentado como fora de escopo.

**Protocol panel (Protocolo de honestidade):**
- Mantido. `protocolTitle` em 18px já é detalhe bom.

**InsightStack (leituras operacionais):**
- Cada `InsightNote` ganha index `01`, `02`... à esquerda (28px width, typography.label, colors.action).
- Stagger reveal aplicado.

**LastSessionStrip:**
- Mantido. Refinamento: `lastSessionText` em `detailNumeric` JetBrains Mono 18px (números tabulares).

### 6.5 `FightRateApp` (refatorado)

**Brand row (logo + title):**
- Logo 54px mantido.
- Kicker "FightRate" mantido (typography.label, colors.action).
- Title ganha LiveDot (à esquerda do kicker) quando qualquer monitor está ativo. Bullet 8px pulsando, cor `colors.success` se `isMonitoring || isCapturing`, `colors.textDim` caso contrário.

**Tab bar inferior (4 tabs):**
- Pill vermelho para tab ativa mantido.
- Cada tab icon (Lucide) ganha LiveDot 4px no canto superior direito se a tab estiver em estado "vivo" (ex.: tab "Captura" tem LiveDot quando `isCapturing`; tab "Sensor" tem LiveDot quando `isMonitoring`).
- Press feedback refinado via `PressableSurface` (scale 0.96).
- Nav rail: borda `colors.line` 1px, fundo `colors.surfaceRaised` mantido, mas ganha sombra interna sutil (inset `rgba(0,0,0,0.4)` 1px top).

**Tab transition:**
- Cross-fade 200ms entre tabs. Implementado via `Animated.View` com `useAnimatedStyle` em vez de swap direto de `activeTab` mudar o JSX. O `FightRateApp` envolve o conteúdo em `Animated.View` e troca a opacidade com `withTiming(target, { duration: 200 })`. Isso é leve e evita stack de navegação real (mantém o padrão atual de tab sem router).

**Nav lateral e status:**
- Nenhuma mudança funcional.

## 7. Animações — especificação detalhada

| Nome | Tipo | Trigger | Duração | Easing | Propriedades |
|---|---|---|---|---|---|
| `bpmPulse` | loop condicional | `monitor.phase === 'receiving'` | 800ms | `easeInOutQuad` | scale 1 → 1.02 → 1 |
| `liveDotPulse` | loop | `live = true` | 1600ms | `easeInOutQuad` | scale 1 → 1.4 → 1, opacity 1 → 0.55 → 1 |
| `stopAlertRing` | loop condicional | `isCapturing` | 1600ms | `easeInOutQuad` | scale 1 → 1.06 → 1, opacity 0.55 → 0.2 → 0.55 |
| `tabFade` | one-shot | troca de tab | 200ms | `easeOutQuart` | opacity 0 → 1 |
| `rowEnter` | one-shot | mount de row em lista | 240ms | `easeOutQuart` | opacity 0 → 1, translateY 8 → 0 |
| `pinEnter` | one-shot | pin set | 500ms | `easeOutBack` | scale 1.4 → 1, opacity 0 → 1 |
| `pressDown` | one-shot | press start | 80ms | `easeOutQuart` | scale 1 → 0.96, opacity 1 → 0.82 |
| `pressUp` | one-shot | press end | 160ms | `easeOutQuart` | scale 0.96 → 1, opacity 0.82 → 1 |

`reduceMotion` é respeitado: quando `AccessibilityInfo.isReduceMotionEnabled()` é `true`, todas as animações viram instantâneas (duração 0ms, valor final direto). Implementado em `src/hooks/useMotionPreference.ts`.

## 8. Estrutura de arquivos — alterações

### Criados
- `assets/fonts/JetBrainsMono-Regular.ttf`
- `assets/fonts/JetBrainsMono-Medium.ttf`
- `assets/fonts/JetBrainsMono-Bold.ttf`
- `assets/fonts/JetBrainsMono-ExtraBold.ttf`
- `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/hooks/usePulseAnimation.ts`
- `src/hooks/useMotionPreference.ts`
- `src/theme/motion.ts`
- `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`
- `src/__tests__/usePulseAnimation.test.tsx`
- `src/__tests__/motion.test.ts`
- `src/__tests__/useMotionPreference.test.ts`

### Modificados
- `react-native.config.js` (adiciona `assets: ['./assets/fonts']`)
- `react-native-asset` linka fontes em `android/app/src/main/assets/fonts/` automaticamente após `npx react-native-asset`. Não exige mudança manual no `build.gradle`.
- `src/theme/index.ts` (exporta `motion`)
- `src/theme/typography.ts` (adiciona `displayNumeric`, `displaySmallNumeric`, `metricNumeric`, `detailNumeric`)
- `src/theme/colors.ts` (adiciona `ringWarn`)
- `src/components/ActionButton.tsx` (variante `stopAlert` + jetBrains mono labels)
- `src/components/StatusTag.tsx` (`size` prop + tom red refinado)
- `src/components/SectionPanel.tsx` (`divider` + `subtle`)
- `src/components/MetricTile.tsx` (`numeric` prop)
- `src/components/TrainingChart.tsx` (furos laterais + LiveDot no readout + pulse no pin)
- `src/screens/CaptureScreen.tsx` (refatorado com novos componentes)
- `src/screens/HistoryScreen.tsx` (TrackRow + EmptyState + stagger)
- `src/screens/SensorScreen.tsx` (DialTile + LiveDot)
- `src/screens/InsightsScreen.tsx` (InsightRow + EmptyState)
- `src/app/FightRateApp.tsx` (tab fade + LiveDot na brand row + tab bar live indicator)
- `jest.setup.js` (mock de `react-native-reanimated` para hooks animados — verificar se já tem)

### Removidos
- Nenhum arquivo é removido. Componentes legados (`ActionButton` sem `stopAlert`, `EmptyHistory` inline no `HistoryScreen`) são substituídos em uso mas mantidos no código durante transição. Remoção fica para refactor posterior se desejado.

## 9. Critérios de aceitação

### Build
- [ ] `npm run typecheck` passa com 0 erros.
- [ ] `npm run lint` passa com 0 erros.
- [ ] `npm test -- --runInBand` passa com 0 falhas (todos os novos testes inclusos, 55 antigos + 9 novos ≈ 64).
- [ ] `npm audit --audit-level=moderate` passa.
- [ ] `cd android && ./gradlew assembleRelease -PreactNativeArchitectures=arm64-v8a` produz `app-arm64-v8a-release.apk`.
- [ ] APK contém `assets/fonts/JetBrainsMono-{Regular,Medium,Bold,ExtraBold}.ttf` (validar com `unzip -l <apk>`).

### Visual
- [ ] BPM display em CaptureScreen usa JetBrains Mono ExtraBold 110px com `fontVariant: tabular-nums` (dígitos alinham perfeitamente em uma sequência de valores).
- [ ] LiveDot verde 8px visível ao lado do "AO VIVO" em CaptureScreen quando `isMonitoring || isCapturing`.
- [ ] Botão "Fechar janela de treino" tem anel vermelho pulsante ao redor (escala 1 → 1.06 → 1) quando `isCapturing`.
- [ ] TrainingChart tem 6 retângulos `1.5×4px` na borda inferior do gráfico, espaçados uniformemente.
- [ ] SensorScreen mostra 4 DialTile em stack vertical, cada um com marcador vertical 2px à esquerda.
- [ ] HistoryScreen mostra `T01`, `T02`... antes de cada session day block.
- [ ] InsightsScreen mostra index `01`..`08` no `InsightRow`, com fade+translateY de entrada.
- [ ] Tab bar inferior mostra LiveDot 4px em "Captura" quando `isCapturing`, e em "Sensor" quando `isMonitoring`.
- [ ] Transição entre tabs é cross-fade 200ms (sem flicker).

### Acessibilidade
- [ ] `accessibilityLabel` de cada `LiveDot` é "AO VIVO" ou "INATIVO" conforme estado.
- [ ] `AccessibilityInfo.isReduceMotionEnabled()` retorna `true`: todas as animações viram instantâneas (testado manualmente).
- [ ] Touch targets: nenhum botão tem `minHeight < 44`.
- [ ] Contraste de texto: nenhum par texto/fundo tem ratio < 4.5:1.

### Regressões
- [ ] TrainingChart gestos (pinch, pan, tap-pin) continuam funcionando após refinos de furos/LiveDot/pin pulse.
- [ ] BLE monitor (`useHeartRateMonitor`) não foi tocado — comportamento idêntico.
- [ ] SQLite store não foi tocado.
- [ ] Aplicação ainda instala por cima da versão anterior com `applicationId: com.healthtracking.fightrate`.

## 10. Fora de escopo

- Reescrita do TrainingChart (já tem viewport + zoom/pan/pin sólidos).
- Mudanças em `useHeartRateMonitor`, `FightRateCaptureNative`, `HeartRateForegroundService`, `FightRateCaptureStore`.
- Mudanças em paleta (cores, raios, espaçamentos existentes permanecem).
- Dark mode toggle (sempre dark; app é instrumento de captura em ambiente escuro).
- Internacionalização (PT-BR permanece).
- Novos ícones além dos Lucide já importados.
- Acessibilidade avançada (VoiceOver/TalkBack em todos os elementos além do mínimo WCAG).
- Skia para gradientes ou sombras complexas.
- Lottie para animações decorativas.
- Novos testes E2E (Detox/Maestro) — só unit + integração.
- Performance profiling detalhado (apenas smoke test de 60fps durante gestos).

## 11. Riscos e mitigações

| Risco | Probabilidade | Impacto | Mitigação |
|---|---|---|---|
| `react-native-asset` não linkar fontes no Android | Média | Alto — texto vira Inter em vez de JetBrains Mono | Verificar APK após build; fallback: configurar `android/app/build.gradle` com `fonts` resource manually; documentar |
| `usePulseAnimation` quebrar gestos do TrainingChart | Baixa | Alto — regressão funcional | Manter TrainingChart gestures intactos; pulse só em wrappers separados |
| Stagger reveal com 50+ rows laggar | Média | Médio — UX fica travada | Limitar stagger a 8 rows visíveis (index < 8 usa delay, resto = 0) |
| Tabs fade conflitando com re-render do JSX | Média | Baixo — flicker | Usar `Animated.View` com `key` estável por tab, `useAnimatedStyle` para opacity, swap interno instantâneo |
| Bundle APK crescer > 5 MB | Baixa | Médio — usuário pediu release enxuto | JetBrains Mono são ~270KB cada, total 1.1MB. Verificar delta no APK final |
| `useMotionPreference` hook quebrar em RN testing env | Baixa | Baixo — testes falham | Mock `AccessibilityInfo` em `jest.setup.js` |

## 12. Métricas de qualidade (pós-ship)

- Tela Captura: tempo para identificar estado (idle/monitoring/capturing) < 1s (medido por observação do usuário).
- HistoryScreen: scroll suave com 100+ sessions (validar com throttle de 4x no dev tools).
- InsightsScreen: 8 rows renderizam sem jank visível.
- Build time: `assembleRelease` < 5min.
- APK size delta: < 2 MB vs versão anterior (32 MB → ≤ 34 MB).

## 13. Próximos passos (handoff para writing-plans)

A spec está pronta para ser quebrada em plano de implementação TDD-ready. A skill `superpowers:writing-plans` deve produzir:
- 1 plan em `docs/superpowers/plans/2026-06-15-fightrate-ui-ux-refinamento-instrumento-forte.md`.
- Tasks agrupadas em 6 fatias (Foundations → Atomics → Captura → Histórico+Sensor → Insights+Nav → Verify+Ship).
- Cada task com `Files:`, `Step 1: Write failing test`, `Step 2: Run test to verify it fails`, `Step 3: Write minimal implementation`, `Step 4: Run test to verify it passes`, `Step 5: Commit`.
- Critérios de aceitação desta spec usados como `Given/When/Then` no nível de fatia.

Execução: prefer `superpowers:subagent-driven-development` (recomendado) ou `superpowers:executing-plans` se o agente quiser inline.