@titan-design/react-ui 0.2.7 → 0.4.0

package/src/components/custom/Workout/SetRow.tsx

@@ -2,6 +2,7 @@
 import { View, Text } from 'react-native'
 import { VelocityStrip } from './VelocityStrip'
 import { PrBadge, type PRType } from './PrBadge'
+import { roundRpe, rpeColor, roundWeight } from '../../../utils/workout-format'
 
 export type SetRowMode = 'active' | 'completed' | 'history'
 
@@ -22,13 +23,6 @@ export interface SetRowProps {
   targets?: { reps: number; weight: number }
 }
 
-function getRPEColor(rpe: number): string {
-  if (rpe >= 9.5) return '#ff4757'
-  if (rpe >= 8.5) return '#ffa502'
-  if (rpe >= 7) return '#ffd43b'
-  return '#2ed573'
-}
-
 function formatAccessibilityLabel(
   setNumber: number,
   reps: number | null,
@@ -36,7 +30,7 @@ function formatAccessibilityLabel(
   unit: string,
 ): string {
   const repsText = reps != null ? `${reps} reps` : 'no reps'
-  const weightText = weight != null ? `at ${weight} ${unit}` : ''
+  const weightText = weight != null ? `at ${roundWeight(weight)} ${unit}` : ''
   return `Set ${setNumber}: ${repsText}${weightText ? ` ${weightText}` : ''}`
 }
 
@@ -112,11 +106,11 @@ export function SetRow({
           </Text>
         ) : (
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 13,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: '#9CA3AF',
             }}
           >
             {setNumber}
@@ -129,14 +123,14 @@ export function SetRow({
         testID="set-row-previous"
       >
         <Text
+          className="text-text-secondary"
           style={{
             fontSize: 12,
             fontFamily: 'Inter, sans-serif',
-            color: '#9CA3AF',
           }}
         >
           {previous
-            ? `${previous.reps} x ${previous.weight}`
+            ? `${previous.reps} x ${roundWeight(previous.weight)}`
             : '\u2014'}
         </Text>
       </View>
@@ -147,11 +141,11 @@ export function SetRow({
       >
         {isActive && reps == null && targets ? (
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 13,
               fontStyle: 'italic',
               fontFamily: 'Inter, sans-serif',
-              color: '#6B7280',
             }}
             testID="set-row-target-reps"
           >
@@ -159,11 +153,11 @@ export function SetRow({
           </Text>
         ) : (
           <Text
+            className={reps != null ? 'text-text-primary' : 'text-text-tertiary'}
             style={{
               fontSize: 14,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: reps != null ? '#F3F4F6' : '#6B7280',
             }}
           >
             {reps != null ? reps : '\u2014'}
@@ -177,26 +171,26 @@ export function SetRow({
       >
         {isActive && weight == null && targets ? (
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 13,
               fontStyle: 'italic',
               fontFamily: 'Inter, sans-serif',
-              color: '#6B7280',
             }}
             testID="set-row-target-weight"
           >
-            {targets.weight}
+            {roundWeight(targets.weight)}
           </Text>
         ) : (
           <Text
+            className={weight != null ? 'text-text-primary' : 'text-text-tertiary'}
             style={{
               fontSize: 14,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: weight != null ? '#F3F4F6' : '#6B7280',
             }}
           >
-            {weight != null ? weight : '\u2014'}
+            {weight != null ? roundWeight(weight) : '\u2014'}
           </Text>
         )}
       </View>
@@ -206,14 +200,17 @@ export function SetRow({
         testID="set-row-rpe"
       >
         <Text
+          className={rpe != null ? undefined : 'text-text-tertiary'}
           style={{
             fontSize: 13,
             fontWeight: '600',
             fontFamily: 'Inter, sans-serif',
-            color: rpe != null ? getRPEColor(rpe) : '#6B7280',
+            // rpeColor returns a concrete hex (native-safe); only the tertiary
+            // fallback needs the className token.
+            color: rpe != null ? rpeColor(rpe) : undefined,
           }}
         >
-          {rpe != null ? rpe : '\u2014'}
+          {rpe != null ? roundRpe(rpe) : '\u2014'}
         </Text>
       </View>
 

package/src/components/custom/Workout/StatusDot.tsx

@@ -12,6 +12,7 @@ export type StatusDotVariant =
 
 export interface StatusDotProps extends ViewProps {
   variant: StatusDotVariant
+  /** Center glyph. Only rendered at size="md"; the 8px "sm" dot is too small to fit one. */
   icon?: 'check' | 'exclamation' | 'dash'
   size?: 'sm' | 'md'
   /** Adds a subtle glow effect in the variant color */

package/src/components/custom/Workout/StrengthTrendChart.tsx

@@ -2,17 +2,16 @@
 import { useEffect, useMemo, useState } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
-const TEXT_TERTIARY = '#6B7280'
-const BORDER_STRONG = '#2C2C2C'
+// Line/border color for the dashed projection, used where a className cannot
+// apply (passed as a prop into an inline style, and a per-edge borderTopColor).
+const PROJECTION_LINE_COLOR = resolveColor('text-tertiary')
 const STATUS_SUCCESS = '#14B8A6'
 const STATUS_ERROR = '#D14343'
 const STATUS_WARNING = '#FFB020'
 const GRID_LINE = 'rgba(255,255,255,0.06)'
-const TOOLTIP_BG = 'rgba(28,28,28,0.95)'
 const SUCCESS_PILL_BG = 'rgba(20,184,166,0.10)'
 const SUCCESS_PILL_BORDER = 'rgba(20,184,166,0.20)'
 const ERROR_PILL_BG = 'rgba(209,67,67,0.10)'
@@ -312,7 +311,7 @@ export function StrengthTrendChart({
             justifyContent: 'center',
           }}
         >
-          <Text style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_TERTIARY }}>
+          <Text className="text-text-tertiary" style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}>
             No strength data yet
           </Text>
         </View>
@@ -358,6 +357,7 @@ export function StrengthTrendChart({
               }}
             >
               <Text
+                className="text-text-tertiary"
                 style={{
                   position: 'absolute',
                   left: -PLOT_LEFT,
@@ -366,7 +366,6 @@ export function StrengthTrendChart({
                   textAlign: 'right',
                   fontSize: 9,
                   fontFamily: 'Inter, sans-serif',
-                  color: TEXT_TERTIARY,
                 }}
               >
                 {line.label}
@@ -406,7 +405,7 @@ export function StrengthTrendChart({
             <View style={{ width, height, position: 'absolute', top: 0, left: 0 }}>
               <ChartLine
                 coords={geometry.projection}
-                color={TEXT_TERTIARY}
+                color={PROJECTION_LINE_COLOR}
                 strokeWidth={2}
                 dashed
                 testID="strength-trend-chart-projection-segment"
@@ -475,6 +474,7 @@ export function StrengthTrendChart({
           <View
             testID="strength-trend-chart-tooltip"
             accessibilityElementsHidden
+            className="bg-surface-elevated border-border-strong"
             style={{
               position: 'absolute',
               left: Math.max(
@@ -483,30 +483,28 @@ export function StrengthTrendChart({
               ),
               top: Math.max(0, selectedCoord.y - 52),
               maxWidth: TOOLTIP_WIDTH,
-              backgroundColor: TOOLTIP_BG,
               borderWidth: 1,
-              borderColor: BORDER_STRONG,
               borderRadius: 8,
               paddingVertical: 8,
               paddingHorizontal: 10,
             }}
           >
             <Text
+              className="text-text-tertiary"
               style={{
                 fontSize: 10,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_TERTIARY,
               }}
             >
               {selectedCoord.point.sessionLabel ?? selectedCoord.point.date}
             </Text>
             <Text
+              className="text-text-primary"
               style={{
                 marginTop: 2,
                 fontSize: 13,
                 fontFamily: 'Inter, sans-serif',
                 fontWeight: '700',
-                color: TEXT_PRIMARY,
               }}
             >
               {`${formatValue(selectedCoord.point.e1rm)} ${unit}`}
@@ -547,6 +545,7 @@ export function StrengthTrendChart({
             <Text
               key={`axis-${i}`}
               testID="strength-trend-chart-axis-label"
+              className="text-text-tertiary"
               style={{
                 position: 'absolute',
                 left: boundary.x - 24,
@@ -554,7 +553,6 @@ export function StrengthTrendChart({
                 textAlign: 'center',
                 fontSize: 10,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_TERTIARY,
               }}
             >
               {boundary.label}
@@ -598,7 +596,7 @@ export function StrengthTrendChart({
       >
         <View className="flex-row items-center" style={{ gap: 5 }}>
           <View style={{ width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY }} />
-          <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
             Actual
           </Text>
         </View>
@@ -609,16 +607,16 @@ export function StrengthTrendChart({
               height: 0,
               borderTopWidth: 2,
               borderStyle: 'dashed',
-              borderTopColor: TEXT_TERTIARY,
+              borderTopColor: PROJECTION_LINE_COLOR,
             }}
           />
-          <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
             Projected
           </Text>
         </View>
         <View className="flex-row items-center" style={{ gap: 5 }}>
           <Text style={{ fontSize: 12, color: STATUS_WARNING }}>★</Text>
-          <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
             PR
           </Text>
         </View>

package/src/components/custom/Workout/TempoBar.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { TempoBar } from './TempoBar'
+
+const meta: Meta<typeof TempoBar> = {
+  title: 'Custom/Workout/TempoBar',
+  component: TempoBar,
+  tags: ['autodocs'],
+  argTypes: {
+    activePhase: {
+      control: 'select',
+      options: [null, 'concentric', 'hold', 'eccentric'],
+      description: 'Phase currently in progress (null = idle)',
+    },
+    phaseElapsedMs: { control: 'number', description: 'Elapsed ms in the active phase' },
+    completed: { control: 'object', description: 'Completed phase durations (ms)' },
+    target: { control: 'object', description: 'Per-phase target durations (seconds)' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 240 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TempoBar>
+
+// tempo target: 1s concentric, 1s hold-top, 3s eccentric
+const TARGET = { concentric: 1, hold: 1, eccentric: 3 }
+
+export const Idle: Story = {
+  args: { activePhase: null, phaseElapsedMs: 0, target: TARGET },
+}
+
+export const ConcentricActive: Story = {
+  args: { activePhase: 'concentric', phaseElapsedMs: 600, target: TARGET },
+}
+
+export const EccentricMidRep: Story = {
+  args: {
+    activePhase: 'eccentric',
+    phaseElapsedMs: 1500,
+    completed: { concentric: 900, hold: 1000 },
+    target: TARGET,
+  },
+}
+
+export const BehindPace: Story = {
+  args: {
+    activePhase: 'eccentric',
+    phaseElapsedMs: 4200,
+    completed: { concentric: 1600, hold: 1000 },
+    target: TARGET,
+  },
+}
+
+export const RepComplete: Story = {
+  args: {
+    activePhase: null,
+    phaseElapsedMs: 0,
+    completed: { concentric: 950, hold: 1050, eccentric: 3100 },
+    target: TARGET,
+  },
+}
+
+export const NoTarget: Story = {
+  args: {
+    activePhase: 'concentric',
+    phaseElapsedMs: 800,
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={{ gap: 20 }}>
+      <TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET} />
+      <TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={1500}
+        completed={{ concentric: 900, hold: 1000 }}
+        target={TARGET}
+      />
+      <TempoBar
+        activePhase={null}
+        phaseElapsedMs={0}
+        completed={{ concentric: 950, hold: 1050, eccentric: 3100 }}
+        target={TARGET}
+      />
+    </View>
+  ),
+}

package/src/components/custom/Workout/TempoBar.test.tsx

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  TempoBar,
+  getTempoPacingState,
+  getTempoFillPct,
+  TEMPO_PACING,
+} from './TempoBar'
+
+const TARGET = { concentric: 1, hold: 1, eccentric: 3 }
+
+describe('getTempoPacingState', () => {
+  it('returns none when there is no target', () => {
+    expect(getTempoPacingState(1000, null)).toBe('none')
+  })
+
+  it('returns none for a sub-threshold target', () => {
+    expect(getTempoPacingState(1000, TEMPO_PACING.minPhaseDurationMs - 1)).toBe('none')
+  })
+
+  it('returns on-pace when within the behind threshold', () => {
+    expect(getTempoPacingState(1000, 1000)).toBe('on-pace')
+    expect(getTempoPacingState(1100, 1000)).toBe('on-pace') // +10%, under 15%
+  })
+
+  it('returns behind once elapsed exceeds the behind threshold', () => {
+    expect(getTempoPacingState(1200, 1000)).toBe('behind') // +20%, over 15%
+  })
+})
+
+describe('getTempoFillPct', () => {
+  it('fills fully when there is no target', () => {
+    expect(getTempoFillPct(500, null)).toBe(100)
+  })
+
+  it('is proportional to elapsed vs target', () => {
+    expect(getTempoFillPct(500, 1000)).toBe(50)
+  })
+
+  it('clamps at 100 when past target', () => {
+    expect(getTempoFillPct(2000, 1000)).toBe(100)
+  })
+})
+
+describe('TempoBar', () => {
+  it('renders the bar with phase labels', () => {
+    render(<TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET} />)
+    expect(screen.getByTestId('tempo-bar')).toBeInTheDocument()
+    expect(screen.getByText('Con')).toBeInTheDocument()
+    expect(screen.getByText('Hold')).toBeInTheDocument()
+    expect(screen.getByText('Ecc')).toBeInTheDocument()
+  })
+
+  it('renders the active segment with an elapsed/target label', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />)
+    expect(screen.getByTestId('tempo-segment-active-Con')).toBeInTheDocument()
+    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
+  })
+
+  it('shows only elapsed when the active phase has no target', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={800} />)
+    expect(screen.getByText('0.8')).toBeInTheDocument()
+  })
+
+  it('marks a completed phase that hit its target with a check', () => {
+    render(
+      <TempoBar
+        activePhase="hold"
+        phaseElapsedMs={100}
+        completed={{ concentric: 950 }}
+        target={TARGET}
+      />,
+    )
+    expect(screen.getByTestId('tempo-segment-completed-Con')).toBeInTheDocument()
+    expect(screen.getByText('0.9 ✓')).toBeInTheDocument()
+  })
+
+  it('marks a completed phase that missed its target with a cross', () => {
+    render(
+      <TempoBar
+        activePhase="hold"
+        phaseElapsedMs={100}
+        completed={{ eccentric: 4000 }}
+        target={TARGET}
+      />,
+    )
+    // eccentric target 3s, 4s elapsed => behind => cross
+    expect(screen.getByText('4.0 ✗')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={1500}
+        completed={{ concentric: 900, hold: 1000 }}
+        target={TARGET}
+      />,
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/custom/Workout/TempoBar.tsx

@@ -0,0 +1,215 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+
+const t = getSemanticColors('dark')
+
+/**
+ * Titan-local phase key. Consumers map their own movement-phase enum onto this
+ * presentational key at the call site — TempoBar owns rendering only.
+ */
+export type TempoPhaseKey = 'concentric' | 'hold' | 'eccentric'
+
+/** Pacing tuning shared with the fill/pacing helpers below. */
+export const TEMPO_PACING = {
+  behindThresholdPct: 0.15,
+  minPhaseDurationMs: 500,
+} as const
+
+export type TempoPacingState = 'none' | 'on-pace' | 'behind'
+
+/**
+ * Classify how a phase's elapsed time tracks against its target duration.
+ * `none` when there is no meaningful target; `behind` once elapsed exceeds the
+ * target by more than the behind threshold; `on-pace` otherwise.
+ */
+export function getTempoPacingState(
+  elapsedMs: number,
+  targetMs: number | null,
+): TempoPacingState {
+  if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return 'none'
+  const ratio = elapsedMs / targetMs
+  if (ratio > 1 + TEMPO_PACING.behindThresholdPct) return 'behind'
+  return 'on-pace'
+}
+
+/** Fill percentage (0–100) for the active phase; full when no target is set. */
+export function getTempoFillPct(elapsedMs: number, targetMs: number | null): number {
+  if (!targetMs) return 100
+  return Math.min(100, (elapsedMs / targetMs) * 100)
+}
+
+interface PhaseConfig {
+  label: string
+  color: string
+  flex: number
+}
+
+const PHASE_ORDER: TempoPhaseKey[] = ['concentric', 'hold', 'eccentric']
+
+const PHASE_CONFIG: Record<TempoPhaseKey, PhaseConfig> = {
+  concentric: { label: 'Con', color: t['status-success'], flex: 2 },
+  hold: { label: 'Hold', color: t['brand-primary'], flex: 1 },
+  eccentric: { label: 'Ecc', color: t['status-warning'], flex: 3 },
+}
+
+export interface TempoBarProps extends ViewProps {
+  /** Phase currently in progress, or null when idle/at rest. */
+  activePhase: TempoPhaseKey | null
+  /** Elapsed time (ms) within the active phase. */
+  phaseElapsedMs: number
+  /** Completed phase durations (ms) for the current rep, keyed by phase. */
+  completed?: Partial<Record<TempoPhaseKey, number>>
+  /** Optional per-phase target durations (seconds) for pacing feedback. */
+  target?: Partial<Record<TempoPhaseKey, number>>
+  className?: string
+}
+
+/**
+ * TempoBar — live rep phase progression indicator.
+ *
+ * Renders a segmented bar (Con → Hold → Ecc) where the active phase fills in
+ * real time and completed phases show their duration with a ✓/✗ pacing mark.
+ * Presentational only: the consumer derives which phase is active, its elapsed
+ * time, and completed durations, then feeds them in.
+ */
+export function TempoBar({
+  activePhase,
+  phaseElapsedMs,
+  completed,
+  target,
+  className,
+  ...props
+}: TempoBarProps) {
+  return (
+    <View className={className} testID="tempo-bar" {...props}>
+      {/* Phase labels */}
+      <View style={{ flexDirection: 'row', marginBottom: 4 }}>
+        {PHASE_ORDER.map((phase) => {
+          const config = PHASE_CONFIG[phase]
+          return (
+            <View key={phase} style={{ flex: config.flex, alignItems: 'center' }}>
+              <Text style={{ fontSize: 10, color: t['text-disabled'] }}>{config.label}</Text>
+            </View>
+          )
+        })}
+      </View>
+
+      {/* Segmented bar */}
+      <View style={{ flexDirection: 'row', gap: 2, height: 20 }}>
+        {PHASE_ORDER.map((phase) => {
+          const config = PHASE_CONFIG[phase]
+          const isActive = activePhase === phase
+          const completedMs = completed?.[phase]
+          const targetSec = target?.[phase]
+          const targetMs = targetSec != null ? targetSec * 1000 : null
+
+          return (
+            <View
+              key={phase}
+              style={{
+                flex: config.flex,
+                backgroundColor: alpha('#ffffff', 0.06),
+                borderRadius: 4,
+                overflow: 'hidden',
+              }}
+            >
+              {isActive ? (
+                <ActiveSegment
+                  config={config}
+                  phaseElapsedMs={phaseElapsedMs}
+                  targetMs={targetMs}
+                />
+              ) : completedMs != null ? (
+                <CompletedSegment config={config} completedMs={completedMs} targetMs={targetMs} />
+              ) : null}
+            </View>
+          )
+        })}
+      </View>
+    </View>
+  )
+}
+
+function ActiveSegment({
+  config,
+  phaseElapsedMs,
+  targetMs,
+}: {
+  config: PhaseConfig
+  phaseElapsedMs: number
+  targetMs: number | null
+}) {
+  const pacing = getTempoPacingState(phaseElapsedMs, targetMs)
+  const barColor = pacing === 'behind' ? t['status-error'] : config.color
+  const fillPct = getTempoFillPct(phaseElapsedMs, targetMs)
+
+  const label = targetMs
+    ? `${formatDuration(phaseElapsedMs)} / ${formatDuration(targetMs)}`
+    : formatDuration(phaseElapsedMs)
+
+  return (
+    <View style={{ height: '100%', position: 'relative' }} testID={`tempo-segment-active-${config.label}`}>
+      <View
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: `${fillPct}%`,
+          backgroundColor: alpha(barColor, 0.3),
+          borderRadius: 4,
+        }}
+      />
+      <View
+        style={{
+          height: '100%',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text style={{ fontSize: 12, fontWeight: '700', color: barColor }}>{label}</Text>
+      </View>
+    </View>
+  )
+}
+
+function CompletedSegment({
+  config,
+  completedMs,
+  targetMs,
+}: {
+  config: PhaseConfig
+  completedMs: number
+  targetMs: number | null
+}) {
+  const pacing = getTempoPacingState(completedMs, targetMs)
+  const hitTarget = pacing !== 'behind'
+  const indicator =
+    targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? (hitTarget ? ' ✓' : ' ✗') : ''
+
+  return (
+    <View
+      style={{
+        height: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: alpha(config.color, 0.15),
+      }}
+      testID={`tempo-segment-completed-${config.label}`}
+    >
+      <Text style={{ fontSize: 12, fontWeight: '500', color: alpha(config.color, 0.7) }}>
+        {formatDuration(completedMs)}
+        {indicator}
+      </Text>
+    </View>
+  )
+}
+
+function formatDuration(ms: number): string {
+  const s = ms / 1000
+  return s < 10 ? s.toFixed(1) : Math.round(s).toString()
+}