Dashboard: Give every charging-card value exactly one home

The card stated the same numbers up to six times: the level appeared in the
reading line, twice in a "40% -> 78%" row, as the curve's end label and twice
more in the chart legend. On a device held at its limit every span collapsed
to the same figure, so the card read as an echo of itself.

The middle row is gone. Elapsed time moves into the card header beside the
chevron via a new typed headerStatus on AmplyNavigationCard - the header
floats its trailing content and reports only the title's height, so this
costs no vertical space. It is a String rather than a composable slot on
purpose: the header sits inside the card's own tap target, so interactive
content there would have to opt out of the surface tap. A reserved minimum
title width plus a weighted status keep long values (duration never rolls
over into days, so "123h 59m" is reachable) from starving either the title
or the chevron.

The level range survives in the chart legend, stated as the session's range
rather than the plotted curve's span. The live curve is a bounded recent
window, so its own span quietly narrows from "40->80%" to "79->80%" while
the charge is still the same charge. percentRangeLabel defaults to the
curve's span, so an explicit null means "no range" instead of falling back
to the window - which is how the hub teaser, whose headline already carries
the range, keeps from stating it twice.

The compact chart drops its end labels, and no longer describes those
endpoints to screen readers either: its hosts render the current values one
line above, and the labels come from the last recorded sample, which lags by
a recorder tick. Dropping them also frees the right gutter for the curve.

It also refuses to draw without real variation. A device at its limit
produces flat series, and a zero-range series self-normalizes to the canvas
midpoint, so flat lines stacked into what looked like a plotted trend but
was really the "no range" fallback. Variation must come from an adjacent
non-null pair, because the path breaks at nulls: [40, null, 41] is two
one-point segments and draws nothing.

Both live surfaces now share one elapsed clock. Its first tick is aligned to
the next whole session-minute (a fixed minute delay starting at 2m59s would
hold the curve back to 3m59s), and it reads the clock on composition rather
than trusting a caller's captured snapshot, so a card scrolling back into a
lazy list doesn't re-enter holding a stale time.

Store screenshots are regenerated. Their fixture now pins "now" so a live
session has a believable age, and carries a real CC/CV curve - three linear
series self-normalize to identical shapes and drew on top of each other.

Author: d4rken

app/src/debug/java/eu/darken/amply/screenshots/ScreenshotContent.kt

@@ -107,9 +107,16 @@ private fun DashboardShot(state: DashboardUiState) = PreviewWrapper {
         onEmailSupport = {},
         onHelp = {},
         onDismissInterruption = {},
+        // Fixture sessions start at elapsed-realtime 0, so pin "now" to give them a believable age:
+        // otherwise every shot claims a charge that started this instant, and the charge curve — which
+        // is withheld until a session has a few minutes of shape — never appears at all.
+        nowElapsedRealtimeMillis = LIVE_SESSION_AGE_MILLIS,
     )
 }
 
+/** 1h 15m into a charge: long enough for the curve to have earned its place on the card. */
+private const val LIVE_SESSION_AGE_MILLIS = 4_500_000L
+
 private fun pixelDevice() = DeviceInfo("Google", "Pixel 8", 36, "preview")
 
 private fun pixelPolicies() = listOf(
@@ -155,20 +162,33 @@ private fun charging() = holdingAtLimit().copy(
     currentNowMicroamps = 2_050_000,
 )
 
+// A real charge, not three straight lines: the compact card self-normalizes every series, so linear
+// fixture data makes level and temperature resolve to the identical shape and draw on top of each
+// other — three legend entries, two visible curves. These follow an actual CC/CV charge instead:
+// level tapers as it approaches the limit, power falls away with it, temperature peaks mid-charge.
+private val LEVEL_CURVE = listOf(41, 45, 49, 53, 57, 61, 64, 67, 70, 73, 75, 77, 78, 79, 80)
+private val POWER_CURVE = listOf(
+    19_000, 18_800, 18_400, 17_900, 17_100, 16_000, 14_500, 12_500,
+    10_500, 8_500, 6_800, 5_200, 4_000, 3_200, 2_500,
+)
+private val TEMPERATURE_CURVE = listOf(
+    300, 304, 308, 311, 313, 314, 315, 315, 314, 314, 313, 313, 312, 312, 311,
+)
+
 private fun liveStats() = StatsDashboardState(
     enabled = true,
     live = StatsLiveSession(
         id = 1,
         startedAtWallMillis = 0L,
         startedElapsedRealtimeMillis = 0L,
-        startPercent = 41,
+        startPercent = LEVEL_CURVE.first(),
         partial = false,
-        curve = (0..14).map { i ->
+        curve = LEVEL_CURVE.indices.map { i ->
             ChargeCurvePoint(
                 elapsedFromStartMillis = i * 300_000L,
-                percent = (41 + i * 2).coerceAtMost(80),
-                powerMilliwatts = (19_000 - i * 900).coerceAtLeast(2_500),
-                temperatureTenthsC = 300 + i,
+                percent = LEVEL_CURVE[i],
+                powerMilliwatts = POWER_CURVE[i],
+                temperatureTenthsC = TEMPERATURE_CURVE[i],
             )
         },
     ),

app/src/main/java/eu/darken/amply/common/compose/AmplyCard.kt

@@ -58,6 +58,9 @@ object AmplyCardDefaults {
      * title↔body gap doesn't read as cramped once the trailing control is floated out of the row. */
     val HeaderContentSpacing = 4.dp
 
+    /** Width a header title always keeps, however wide the trailing content wants to be. */
+    val MinHeaderTitleWidth = 96.dp
+
     val ContentPaddingValues = PaddingValues(ContentPadding)
 }
 
@@ -290,7 +293,12 @@ fun AmplyCardHeader(
         val gap = 8.dp.roundToPx()
         val bottomInset = AmplyCardDefaults.HeaderContentSpacing.roundToPx()
         val loose = constraints.copy(minWidth = 0, minHeight = 0)
-        val trailingPlaceable = measurables[1].measure(loose)
+        // Cap the trailing content so it can never starve the title: text trailing content (a status
+        // line) would otherwise grow with its string — a multi-day "123h 59m" at a large font scale —
+        // and squeeze the title into a vertical stack of wrapped characters.
+        val trailingMaxWidth = (constraints.maxWidth - AmplyCardDefaults.MinHeaderTitleWidth.roundToPx() - gap)
+            .coerceAtLeast(0)
+        val trailingPlaceable = measurables[1].measure(loose.copy(maxWidth = trailingMaxWidth))
         val titleMaxWidth = (constraints.maxWidth - trailingPlaceable.width - gap).coerceAtLeast(0)
         val titlePlaceable = measurables[0].measure(loose.copy(maxWidth = titleMaxWidth))
         // Header reports the title height plus a little breathing room below; the (taller) trailing
@@ -312,6 +320,12 @@ fun AmplyCardHeader(
  * Navigation card: the whole card opens a destination ([onClick]) with an [onClickLabel] for
  * accessibility, a standard header, and a decorative RTL-aware trailing chevron.
  *
+ * [headerStatus] adds a short status line beside the chevron. It is deliberately a **String**, not a
+ * composable slot: the header sits inside the card's own click target, so anything interactive there
+ * would have to opt out of the surface's tap — typing it as text makes that impossible rather than
+ * merely discouraged. Being floated, it costs the card no vertical height (see [AmplyCardHeader]), so
+ * it suits a value that would otherwise need a row of its own.
+ *
  * The surface owns the primary tap. Content may add at most a small trailing text action for a
  * *secondary* destination or side effect (never a duplicate of [onClick]); anything richer — switches,
  * multiple buttons, a whole control row — belongs in [AmplyToggleCard] or a plain [AmplyCard]. A
@@ -327,6 +341,7 @@ fun AmplyNavigationCard(
     icon: ImageVector? = null,
     iconTint: Color = MaterialTheme.colorScheme.primary,
     tone: AmplyCardTone = AmplyCardTone.Default,
+    headerStatus: String? = null,
     content: @Composable ColumnScope.() -> Unit,
 ) {
     AmplyClickableCard(
@@ -341,11 +356,32 @@ fun AmplyNavigationCard(
             icon = icon,
             iconTint = iconTint,
             trailing = {
-                Icon(
-                    Icons.AutoMirrored.Filled.KeyboardArrowRight,
-                    contentDescription = null,
-                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
-                )
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    if (headerStatus != null) {
+                        Text(
+                            headerStatus,
+                            style = MaterialTheme.typography.labelMedium,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            // Truncate rather than wrap: the header's height is the title's, so a
+                            // second status line would overflow it instead of growing the card.
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                            // Weighted so the chevron is measured first and keeps its width — an
+                            // unweighted text is measured against the whole row and can starve the
+                            // navigation affordance to nothing. fill = false keeps a short status
+                            // snug against the chevron instead of stretching to the cap.
+                            modifier = Modifier.weight(1f, fill = false),
+                        )
+                    }
+                    Icon(
+                        Icons.AutoMirrored.Filled.KeyboardArrowRight,
+                        contentDescription = null,
+                        tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+                }
             },
         )
         content()
@@ -422,6 +458,32 @@ private fun AmplyCardPreview() = PreviewWrapper {
                 color = MaterialTheme.colorScheme.onSurfaceVariant,
             )
         }
+        AmplyNavigationCard(
+            onClick = {},
+            onClickLabel = "Open details",
+            title = "With header status",
+            icon = Icons.AutoMirrored.Filled.KeyboardArrowRight,
+            headerStatus = "2h 14m",
+        ) {
+            Text(
+                "Status floats beside the chevron and costs no height.",
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+        }
+        AmplyNavigationCard(
+            onClick = {},
+            onClickLabel = "Open details",
+            title = "A title long enough to compete for the header row",
+            icon = Icons.AutoMirrored.Filled.KeyboardArrowRight,
+            headerStatus = "123h 59m",
+        ) {
+            Text(
+                "The title keeps its reserved minimum; the status truncates.",
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+        }
         AmplyCard(tone = AmplyCardTone.PrimaryContainer) {
             Text("Primary-container tone (hero CTA).", style = MaterialTheme.typography.bodyMedium)
         }

app/src/main/java/eu/darken/amply/main/ui/battery/ChargeTeaser.kt

@@ -12,11 +12,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableLongStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -34,8 +29,8 @@ import eu.darken.amply.stats.core.StatsLiveSession
 import eu.darken.amply.stats.core.StatsSealReason
 import eu.darken.amply.stats.ui.StatsCurveChart
 import eu.darken.amply.stats.ui.StatsFormat
+import eu.darken.amply.stats.ui.rememberLiveElapsedMillis
 import eu.darken.amply.stats.ui.shouldShowLiveCurve
-import kotlinx.coroutines.delay
 
 /**
  * The hub's compact current-or-last charge. Tapping opens that session's full detail; the states with
@@ -85,27 +80,26 @@ private fun LiveTeaser(
     onOpenSession: (Long) -> Unit,
     modifier: Modifier,
 ) {
-    // Battery readouts drive recomposition, but identical consecutive readouts are conflated upstream
-    // — the minute tick keeps the elapsed text moving even when nothing else changes. Same backstop
-    // the dashboard's charging card uses; StatsLiveSession carries a start, never a duration.
-    var tickedNow by remember { mutableLongStateOf(nowElapsedRealtimeMillis) }
-    LaunchedEffect(Unit) {
-        while (true) {
-            delay(LIVE_TICK_MILLIS)
-            tickedNow = SystemClock.elapsedRealtime()
-        }
-    }
-    val now = maxOf(tickedNow, nowElapsedRealtimeMillis)
-    val elapsedMillis = (now - session.startedElapsedRealtimeMillis).coerceAtLeast(0)
+    // Shared with the dashboard's charging card so the two clocks can't drift apart; StatsLiveSession
+    // carries a start, never a duration.
+    val elapsedMillis = rememberLiveElapsedMillis(session, nowElapsedRealtimeMillis)
 
     TeaserCard(
         onClick = { onOpenSession(session.id) },
         headline = StatsFormat.percentRange(session.startPercent, currentPercent),
         detail = StatsFormat.duration(elapsedMillis),
         modifier = modifier,
     ) {
-        if (shouldShowLiveCurve(session.curve.size, elapsedMillis)) {
-            StatsCurveChart(curve = session.curve, chartHeight = 84.dp, showAxes = false)
+        if (shouldShowLiveCurve(session.curve, elapsedMillis)) {
+            StatsCurveChart(
+                curve = session.curve,
+                chartHeight = 84.dp,
+                showAxes = false,
+                // No range in the legend: this card's headline already states it. Explicitly null
+                // rather than omitted — the default would fall back to the plotted window's span,
+                // which on a long session narrows to something the headline contradicts.
+                percentRangeLabel = null,
+            )
         }
         if (session.partial) {
             PartialNote()
@@ -184,9 +178,6 @@ private fun PartialNote() = Text(
     color = MaterialTheme.colorScheme.primary,
 )
 
-/** Backstop cadence for the live elapsed text when battery readouts stop changing. */
-private const val LIVE_TICK_MILLIS = 60_000L
-
 internal val previewCurve = (0..12).map { i ->
     ChargeCurvePoint(
         elapsedFromStartMillis = i * 300_000L,

app/src/main/java/eu/darken/amply/main/ui/dashboard/ChargingCard.kt

@@ -5,20 +5,13 @@ import android.os.SystemClock
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ShowChart
 import androidx.compose.material.icons.filled.BatteryChargingFull
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableLongStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
@@ -40,8 +33,8 @@ import eu.darken.amply.stats.core.StatsLiveSession
 import eu.darken.amply.stats.core.StatsSealReason
 import eu.darken.amply.stats.ui.StatsCurveChart
 import eu.darken.amply.stats.ui.StatsFormat
+import eu.darken.amply.stats.ui.rememberLiveElapsedMillis
 import eu.darken.amply.stats.ui.shouldShowLiveCurve
-import kotlinx.coroutines.delay
 
 const val CHARGING_CARD_TEST_TAG = "dashboard.charging.card"
 
@@ -56,6 +49,11 @@ const val CHARGING_CARD_TEST_TAG = "dashboard.charging.card"
  *
  * The card holds a fixed slot on the dashboard and always opens the battery hub — one card, one
  * destination. Retry is the sole in-card action (a repair, not navigation) and must not bubble.
+ *
+ * Each value appears exactly once. The header carries the session's elapsed time (floated beside the
+ * chevron, so it costs no height), the reading line carries the current values, and the chart's legend
+ * carries the session's level range — the card deliberately does not repeat any of them in a row of
+ * its own.
  */
 @Composable
 fun ChargingCard(
@@ -65,7 +63,7 @@ fun ChargingCard(
     onRetryCapture: () -> Unit,
     modifier: Modifier = Modifier,
     // Monotonic (never negative, immune to clock changes) and shares the curve's clock; re-evaluated
-    // on each recomposition and backstopped by a minute tick while live (see LiveBody).
+    // on each recomposition and backstopped by a minute tick while live (see rememberLiveElapsedMillis).
     nowElapsedRealtimeMillis: Long = SystemClock.elapsedRealtime(),
 ) {
     // An absent readout renders every field as "Not reported" rather than hiding the line — the card
@@ -77,6 +75,13 @@ fun ChargingCard(
     // so the headline only says "Charging" when the platform positively reports it.
     val onCharger = battery.onCharger
     val charging = onCharger && battery.status == BatteryManager.BATTERY_STATUS_CHARGING
+    // Elapsed belongs to the live session, so it is computed here (where the header needs it) and
+    // handed down to the body, which gates the curve on the very same value.
+    val elapsedMillis = if (presentation is ChargingCardPresentation.Live) {
+        rememberLiveElapsedMillis(presentation.session, nowElapsedRealtimeMillis)
+    } else {
+        null
+    }
     AmplyNavigationCard(
         onClick = onOpenHub,
         onClickLabel = stringResource(R.string.dashboard_charging_open_action),
@@ -89,6 +94,7 @@ fun ChargingCard(
         ),
         icon = if (onCharger) Icons.Filled.BatteryChargingFull else Icons.AutoMirrored.Filled.ShowChart,
         modifier = modifier.testTag(CHARGING_CARD_TEST_TAG),
+        headerStatus = elapsedMillis?.let { StatsFormat.duration(it) },
     ) {
         Text(
             batteryNowLine(battery),
@@ -101,7 +107,7 @@ fun ChargingCard(
             ChargingCardPresentation.Unavailable -> BodyText(stringResource(R.string.dashboard_stats_unavailable))
             ChargingCardPresentation.Indeterminate ->
                 BodyText(stringResource(R.string.dashboard_charging_indeterminate))
-            is ChargingCardPresentation.Live -> LiveBody(presentation, battery, nowElapsedRealtimeMillis)
+            is ChargingCardPresentation.Live -> LiveBody(presentation, battery, elapsedMillis ?: 0L)
             is ChargingCardPresentation.ConnectedWithoutSession -> ConnectedBody(presentation, onRetryCapture)
             is ChargingCardPresentation.Idle -> IdleBody(presentation)
         }
@@ -141,47 +147,22 @@ private fun BodyText(text: String) = Text(
 private fun ColumnScope.LiveBody(
     live: ChargingCardPresentation.Live,
     battery: BatteryReadout,
-    nowElapsedRealtimeMillis: Long,
+    elapsedMillis: Long,
 ) {
-    // Fresh battery readouts normally drive recomposition (~3s), but identical consecutive readouts
-    // are conflated upstream — the minute tick keeps "charging for" moving even without new data.
-    // maxOf picks whichever clock read is fresher; both are monotonic elapsed-realtime.
-    var tickedNow by remember { mutableLongStateOf(nowElapsedRealtimeMillis) }
-    LaunchedEffect(Unit) {
-        while (true) {
-            delay(LIVE_TICK_MILLIS)
-            tickedNow = SystemClock.elapsedRealtime()
-        }
-    }
-    val now = maxOf(tickedNow, nowElapsedRealtimeMillis)
-
-    val elapsedMillis = (now - live.session.startedElapsedRealtimeMillis).coerceAtLeast(0)
-    val elapsed = StatsFormat.duration(elapsedMillis)
-    Row(
-        modifier = Modifier.fillMaxWidth(),
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Text(
-            StatsFormat.percentRange(live.session.startPercent, battery.levelPercent),
-            style = MaterialTheme.typography.bodyMedium,
-            color = MaterialTheme.colorScheme.onSurfaceVariant,
+    if (shouldShowLiveCurve(live.session.curve, elapsedMillis)) {
+        StatsCurveChart(
+            curve = live.session.curve,
+            chartHeight = 84.dp,
+            showAxes = false,
+            // The session's own range, not the plotted window's: the live curve is a bounded recent
+            // window that ages the start out of a long session, so its span would quietly narrow from
+            // "40→80%" to "79→80%" while the charge is still the same charge.
+            percentRangeLabel = StatsFormat.percentSpan(live.session.startPercent, battery.levelPercent),
         )
-        if (elapsed != null) {
-            Text(
-                elapsed,
-                style = MaterialTheme.typography.bodyMedium,
-                color = MaterialTheme.colorScheme.onSurfaceVariant,
-            )
-        }
     }
 
-    if (shouldShowLiveCurve(live.session.curve.size, elapsedMillis)) {
-        StatsCurveChart(curve = live.session.curve, chartHeight = 84.dp, showAxes = false)
-    }
-
-    // Small bottom-right caption noting a mid-charge start (so the start%/elapsed aren't read as a
-    // full charge history).
+    // Small bottom-right caption noting a mid-charge start (so the elapsed time and the level range
+    // aren't read as a full charge history).
     if (live.session.partial) {
         Text(
             stringResource(R.string.dashboard_stats_live_since, StatsFormat.dateTime(live.session.startedAtWallMillis)),
@@ -234,9 +215,6 @@ private fun IdleBody(idle: ChargingCardPresentation.Idle) {
     }
 }
 
-/** Backstop cadence for the live elapsed text when battery readouts stop changing. */
-private const val LIVE_TICK_MILLIS = 60_000L
-
 private val previewCurve = (0..12).map { i ->
     ChargeCurvePoint(
         elapsedFromStartMillis = i * 300_000L,