From e872de691386bf45790891fd51b08a23b5c7db84 Mon Sep 17 00:00:00 2001
From: Walker Sutton <walker.c.sutton@gmail.com>
Date: Tue, 29 Sep 2026 23:59:56 -0400
Subject: [PATCH] feat: prompt for rider weight wherever W/kg would render as 0

Adds a shared RiderWeightField (Settings) and RiderWeightPrompt, shown in
the export dialog, the preview canvas, and W/kg element properties when the
template uses power_to_weight but no weight is set. Element list flags
affected W/kg rows with a warning icon.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/src/app.svelte                            |   8 +-
 app/src/components/layout/CenterCanvas.svelte |  23 ++-
 .../overlays/ExportFormatDialog.svelte        |  20 +++
 app/src/components/overlays/Settings.svelte   |  25 +--
 app/src/components/panels/ElementList.svelte  |  18 +-
 .../panels/ElementProperties.svelte           |  10 ++
 app/src/components/ui/RiderWeightField.svelte | 115 +++++++++++++
 .../components/ui/RiderWeightPrompt.svelte    | 161 ++++++++++++++++++
 app/src/state/appState.svelte.js              |  32 +++-
 9 files changed, 373 insertions(+), 39 deletions(-)
 create mode 100644 app/src/components/ui/RiderWeightField.svelte
 create mode 100644 app/src/components/ui/RiderWeightPrompt.svelte

diff --git a/app/src/app.svelte b/app/src/app.svelte
index 8c8cb40..af99057 100644
--- a/app/src/app.svelte
+++ b/app/src/app.svelte
@@ -728,6 +728,7 @@
       sizeFor={exportSizeEstimateFor}
       bytesFor={renderFileSizeBytesFor}
       diskFreeBytes={exportDiskFreeBytes}
+      usesRiderWeight={app.usesRiderWeight}
       testAvailableFor={exportTestAvailableFor}
       calibrating={app.calibratingFormat}
       oncalibrate={(fmt) => app.calibrateExportEstimate(fmt)}
@@ -786,13 +787,6 @@
     use:windowDrag
     class="h-[52px] shrink-0 bg-[var(--panel)] rounded-[10px] flex items-center gap-2 pr-3 pl-[88px] z-50"
   >
-    <!-- Logo chip -->
-    <span
-      class="w-5 h-5 shrink-0 rounded-md bg-primary text-[#050505] font-mono font-bold text-xs flex items-center justify-center select-none"
-      >C</span
-    >
-    <div class="h-5 w-px bg-white/[0.07] shrink-0"></div>
-
     <!-- ── Template toolbar ─────────────────────────────────────────────────── -->
     <div class="flex items-center gap-1 shrink-0">
       <!-- Template picker -->
diff --git a/app/src/components/layout/CenterCanvas.svelte b/app/src/components/layout/CenterCanvas.svelte
index 7a05bb5..b326473 100644
--- a/app/src/components/layout/CenterCanvas.svelte
+++ b/app/src/components/layout/CenterCanvas.svelte
@@ -9,6 +9,7 @@
   import VideoBackdrop from '../canvas/VideoBackdrop.svelte'
   import WysiwygLayer from '../canvas/WysiwygLayer.svelte'
   import PlaybackControls from '../canvas/PlaybackControls.svelte'
+  import RiderWeightPrompt from '../ui/RiderWeightPrompt.svelte'
   import VideoAlignmentBar from '../canvas/VideoAlignmentBar.svelte'
   import { videoStartOnAxis } from '@/lib/videoAlignment.js'
   import { isLapMetric } from '@/lib/elementTypes.js'
@@ -743,11 +744,31 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={clipEl}
-    class="flex-1 flex items-center justify-center p-6 overflow-hidden"
+    class="relative flex-1 flex items-center justify-center p-6 overflow-hidden"
     style="background: radial-gradient(120% 90% at 50% 0%, rgba(220, 20, 60, 0.09), transparent 58%);"
     onwheel={onCanvasWheel}
     ondblclick={resetZoom}
   >
+    <!-- Missing rider weight — every W/kg readout in the preview is sitting at
+         0, which is easy to miss when nothing is selected. It floats over the
+         canvas rather than sitting above it: taking up layout space would push
+         the preview down while it's shown and let it snap back when it goes. -->
+    {#if app.usesRiderWeight && app.hasActivity}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="pointer-events-none absolute inset-x-3 top-3 z-20 flex justify-center"
+        ondblclick={(e) => e.stopPropagation()}
+        onwheel={(e) => e.stopPropagation()}
+      >
+        <RiderWeightPrompt
+          compact
+          floating
+          class="pointer-events-auto w-full max-w-2xl"
+          message="W/kg is showing 0 — enter your rider weight to see real numbers."
+        />
+      </div>
+    {/if}
+
     {#if app.config && app.hasActivity}
       <!-- Aspect-ratio wrapper — always shown when a template is loaded -->
       <div
diff --git a/app/src/components/overlays/ExportFormatDialog.svelte b/app/src/components/overlays/ExportFormatDialog.svelte
index 064d71f..7fe6bd5 100644
--- a/app/src/components/overlays/ExportFormatDialog.svelte
+++ b/app/src/components/overlays/ExportFormatDialog.svelte
@@ -3,6 +3,7 @@
   import { TriangleAlert } from 'lucide-svelte'
   import WindowDragStrip from './WindowDragStrip.svelte'
   import Switch from '../ui/Switch.svelte'
+  import RiderWeightPrompt from '../ui/RiderWeightPrompt.svelte'
   import { formatFileSize } from '@/lib/utils.js'
 
   let {
@@ -22,6 +23,9 @@
     bytesFor = null,
     // Free bytes on the output volume, or null when unknown
     diskFreeBytes = null,
+    // True when the template renders W/kg — with no rider weight set those
+    // readouts export as 0, so offer the weight field before rendering.
+    usesRiderWeight = false,
     // (format) => boolean — true when the codec has no same-machine
     // measurement yet, so it offers a quick test render
     testAvailableFor = null,
@@ -60,6 +64,13 @@
   })
 
   function onKeydown(e) {
+    // Enter inside a field (the rider-weight prompt) edits, it doesn't render.
+    const t = e.target
+    if (
+      e.key === 'Enter' &&
+      (t?.tagName === 'INPUT' || t?.tagName === 'SELECT')
+    )
+      return
     if (e.key === 'Escape') {
       e.preventDefault()
       oncancel?.()
@@ -251,6 +262,15 @@
       </div>
     {/if}
 
+    <!-- W/kg with no rider weight: the export would bake in 0.0 for every such
+         readout, so collect the weight here rather than after the render. -->
+    {#if usesRiderWeight}
+      <RiderWeightPrompt
+        class="mt-4"
+        message="This template shows W/kg, but no rider weight is set — those readouts will export as 0."
+      />
+    {/if}
+
     <div class="mt-4 flex justify-end gap-2">
       <button
         onclick={() => oncancel?.()}
diff --git a/app/src/components/overlays/Settings.svelte b/app/src/components/overlays/Settings.svelte
index 3483274..3f206fc 100644
--- a/app/src/components/overlays/Settings.svelte
+++ b/app/src/components/overlays/Settings.svelte
@@ -4,6 +4,7 @@
   import { X } from 'lucide-svelte'
   import { formatHomePath } from '../../lib/utils.js'
   import Select from '../ui/Select.svelte'
+  import RiderWeightField from '../ui/RiderWeightField.svelte'
 
   const app = getContext('app')
 
@@ -87,29 +88,7 @@
           Used only for the W/kg metric. Stored on this device — never saved to
           templates.
         </p>
-        <div class="flex items-center gap-1.5">
-          <input
-            type="number"
-            min="0"
-            step="0.1"
-            inputmode="decimal"
-            placeholder="—"
-            value={app.riderWeight ?? ''}
-            oninput={(e) => (app.riderWeight = e.target.value)}
-            class="min-w-0 flex-1 h-7 rounded-[6px] border-0 bg-[var(--panel2)] px-2 text-xs
-                   text-foreground font-mono focus:outline-none focus:ring-1 focus:ring-ring"
-          />
-          <div class="shrink-0 w-20">
-            <Select
-              value={app.riderWeightUnit}
-              options={[
-                { value: 'kg', label: 'kg' },
-                { value: 'lb', label: 'lb' },
-              ]}
-              onchange={(v) => (app.riderWeightUnit = v)}
-            />
-          </div>
-        </div>
+        <RiderWeightField />
       </div>
 
       <!-- Output folder -->
diff --git a/app/src/components/panels/ElementList.svelte b/app/src/components/panels/ElementList.svelte
index 024c8d8..de9f037 100644
--- a/app/src/components/panels/ElementList.svelte
+++ b/app/src/components/panels/ElementList.svelte
@@ -17,6 +17,7 @@
     Square,
     Thermometer,
     Trash2,
+    TriangleAlert,
     Type,
     X,
   } from 'lucide-svelte'
@@ -28,6 +29,11 @@
 
   const app = getContext('app')
 
+  // W/kg with no rider weight renders 0 — flag those rows so the problem shows
+  // up in the list, not just in the selected element's properties.
+  const missingRiderWeight = (metric) =>
+    metric === 'power_to_weight' && app.riderWeightKg == null
+
   let addImagePending = $state(false)
 
   // ── Drag state ───────────────────────────────────────────────────────────────
@@ -63,7 +69,7 @@
     const byId = {}
     for (const el of app.config.elements) {
       const meta = elementMeta(el)
-      byId[el.id] = { id: el.id, type: meta.kind, name: meta.name, unit: meta.unit }
+      byId[el.id] = { id: el.id, type: meta.kind, name: meta.name, unit: meta.unit, metric: el.value }
     }
     return [...(app.elementLayerOrder ?? [])].reverse().map((id) => byId[id]).filter(Boolean)
   })
@@ -587,6 +593,11 @@
                       {#if el.unit}
                         <span class="shrink-0 text-[9px] font-medium px-1 py-0.5 rounded bg-[var(--panel3)] text-[var(--dim)] uppercase tracking-wide">{el.unit === 'imperial' ? 'imp' : el.unit}</span>
                       {/if}
+                      {#if missingRiderWeight(el.metric)}
+                        <span class="shrink-0 text-[var(--ds-warning)]" title="Rider weight not set — this W/kg readout renders as 0">
+                          <TriangleAlert size={11} />
+                        </span>
+                      {/if}
                     </button>
                     <div class="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0.5 opacity-0 group-hover/el:opacity-100 transition-opacity">
                       <button
@@ -651,6 +662,11 @@
               {#if el.unit}
                 <span class="shrink-0 text-[9px] font-medium px-1 py-0.5 rounded bg-[var(--panel3)] text-[var(--dim)] uppercase tracking-wide">{el.unit === 'imperial' ? 'imp' : el.unit}</span>
               {/if}
+              {#if missingRiderWeight(el.metric)}
+                <span class="shrink-0 text-[var(--ds-warning)]" title="Rider weight not set — this W/kg readout renders as 0">
+                  <TriangleAlert size={11} />
+                </span>
+              {/if}
             </button>
             <div class="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0.5 opacity-0 group-hover/el:opacity-100 transition-opacity">
               <button
diff --git a/app/src/components/panels/ElementProperties.svelte b/app/src/components/panels/ElementProperties.svelte
index 015ee19..da471ae 100644
--- a/app/src/components/panels/ElementProperties.svelte
+++ b/app/src/components/panels/ElementProperties.svelte
@@ -12,6 +12,7 @@
   import Switch from '../ui/Switch.svelte'
   import Tooltip from '../ui/Tooltip.svelte'
   import ColorInput from '../ui/ColorInput.svelte'
+  import RiderWeightPrompt from '../ui/RiderWeightPrompt.svelte'
   import AssetPicker from '../overlays/AssetPicker.svelte'
   import * as backend from '../../api/backend.js'
   import { defaultColorBands, elementMeta, elementTypeName, LAP_METRICS as ALL_LAP_METRICS, isLapMetric } from '../../lib/elementTypes.js'
@@ -1170,6 +1171,9 @@ Looks unrealistic for ${item.value} (expected ${issue.expected}). Enter a manual
           options={VALUE_METRIC_OPTIONS}
           onchange={(v) => update('value', v)}
         />
+        {#if item.value === 'power_to_weight'}
+          <RiderWeightPrompt />
+        {/if}
 
         {#if isSummaryMetric(item.value)}
         <label class="space-y-1 block">
@@ -1755,6 +1759,9 @@ Looks unrealistic for ${item.value} (expected ${issue.expected}). Enter a manual
           options={METER_METRICS.map((m) => ({ value: m, label: metricLabel(m) }))}
           onchange={(v) => update('value', v)}
         />
+        {#if item.value === 'power_to_weight'}
+          <RiderWeightPrompt />
+        {/if}
         {#if UNITS_BY_METRIC[item.value]}
         <label class="space-y-1 block">
           <span class="text-xs text-zinc-500">Unit</span>
@@ -2013,6 +2020,9 @@ Looks unrealistic for ${item.value} (expected ${issue.expected}). Enter a manual
           options={METER_METRICS.map((m) => ({ value: m, label: metricLabel(m) }))}
           onchange={(v) => update('value', v)}
         />
+        {#if item.value === 'power_to_weight'}
+          <RiderWeightPrompt />
+        {/if}
         {#if UNITS_BY_METRIC[item.value]}
         <label class="space-y-1 block">
           <span class="text-xs text-zinc-500">Unit</span>
diff --git a/app/src/components/ui/RiderWeightField.svelte b/app/src/components/ui/RiderWeightField.svelte
new file mode 100644
index 0000000..aa938b3
--- /dev/null
+++ b/app/src/components/ui/RiderWeightField.svelte
@@ -0,0 +1,115 @@
+<script>
+  // Rider weight input + unit picker, with the typing rules the W/kg prompts
+  // depend on: the app-level weight is only written on Enter or blur, never
+  // per-keystroke. Committing every keystroke would turn the "7" of "75" into a
+  // real 7 kg weight — silently wrong numbers, and the prompt asking for the
+  // weight would vanish before the second digit was typed.
+  import { getContext } from 'svelte'
+  import Select from './Select.svelte'
+
+  const app = getContext('app')
+
+  let {
+    // Called with the committed weight (in the current unit) after a valid entry.
+    onset = null,
+  } = $props()
+
+  // Plausible rider range in kg. A partially typed number almost always lands
+  // outside it, so it doubles as the guard against committing half an entry.
+  const MIN_KG = 30
+  const MAX_KG = 200
+  const LB_PER_KG = 1 / 0.45359237
+
+  let draft = $state(app.riderWeight == null ? '' : String(app.riderWeight))
+  let editing = $state(false)
+  let error = $state(null)
+
+  // Follow the weight when it changes elsewhere (Settings, another prompt),
+  // but never overwrite what the user is in the middle of typing.
+  $effect(() => {
+    const weight = app.riderWeight
+    if (!editing) draft = weight == null ? '' : String(weight)
+  })
+
+  let bounds = $derived(
+    app.riderWeightUnit === 'lb'
+      ? [Math.round(MIN_KG * LB_PER_KG), Math.round(MAX_KG * LB_PER_KG)]
+      : [MIN_KG, MAX_KG],
+  )
+
+  function commit() {
+    const raw = draft.trim()
+    if (raw === '') {
+      // Cleared on purpose — drop the weight and go back to prompting.
+      error = null
+      app.riderWeight = null
+      return
+    }
+    const entered = Number(raw)
+    const kg =
+      app.riderWeightUnit === 'lb' ? entered * 0.45359237 : entered
+    if (!Number.isFinite(entered) || kg < MIN_KG || kg > MAX_KG) {
+      error = `Enter a weight between ${bounds[0]} and ${bounds[1]} ${app.riderWeightUnit}.`
+      return
+    }
+    error = null
+    app.riderWeight = entered
+    onset?.(entered)
+  }
+
+  function onKeydown(e) {
+    if (e.key === 'Enter') {
+      // Don't let Enter reach a dialog that treats it as "confirm".
+      e.preventDefault()
+      e.stopPropagation()
+      commit()
+    }
+  }
+
+  // Switching units re-reads the same number under the new unit, so re-check it.
+  function changeUnit(unit) {
+    app.riderWeightUnit = unit
+    if (draft.trim() !== '') commit()
+  }
+</script>
+
+<div class="space-y-1">
+  <div class="flex items-center gap-1.5">
+    <input
+      type="number"
+      min="0"
+      step="0.1"
+      inputmode="decimal"
+      placeholder="—"
+      aria-label="Rider weight"
+      aria-invalid={error ? 'true' : undefined}
+      value={draft}
+      oninput={(e) => {
+        draft = e.target.value
+        error = null
+      }}
+      onfocus={() => (editing = true)}
+      onblur={() => {
+        editing = false
+        commit()
+      }}
+      onkeydown={onKeydown}
+      class="w-20 h-7 rounded-[6px] border-0 bg-[var(--panel2)] px-2 text-xs
+             text-foreground font-mono focus:outline-none focus:ring-1
+             {error ? 'ring-1 ring-destructive focus:ring-destructive' : 'focus:ring-ring'}"
+    />
+    <div class="shrink-0 w-20">
+      <Select
+        value={app.riderWeightUnit}
+        options={[
+          { value: 'kg', label: 'kg' },
+          { value: 'lb', label: 'lb' },
+        ]}
+        onchange={changeUnit}
+      />
+    </div>
+  </div>
+  {#if error}
+    <p class="text-[10px] leading-snug text-destructive">{error}</p>
+  {/if}
+</div>
diff --git a/app/src/components/ui/RiderWeightPrompt.svelte b/app/src/components/ui/RiderWeightPrompt.svelte
new file mode 100644
index 0000000..d2b1de0
--- /dev/null
+++ b/app/src/components/ui/RiderWeightPrompt.svelte
@@ -0,0 +1,161 @@
+<script>
+  // W/kg is the one metric that needs a number the activity file can't supply.
+  // With no rider weight every W/kg readout renders 0.0, which reads as a bug —
+  // so wherever that's about to happen, ask for the weight right there instead
+  // of sending the user off to Settings.
+  //
+  // Mount this anywhere W/kg is in play (it decides for itself whether there's
+  // anything to say); the parent only supplies the contextual gate.
+  import { getContext, onDestroy } from 'svelte'
+  import { quintOut } from 'svelte/easing'
+  import { fade, slide } from 'svelte/transition'
+  import { Check, TriangleAlert } from 'lucide-svelte'
+  import RiderWeightField from './RiderWeightField.svelte'
+
+  const app = getContext('app')
+
+  // Respect the OS "reduce motion" setting: keep the fade that explains the
+  // box is leaving, drop the movement that can trigger motion sickness.
+  const reduceMotion =
+    typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+
+  // Floating dismiss: fade with a clear lift + shrink so it reads as the box
+  // sliding away rather than a flat crossfade. quintOut on both directions — an
+  // exiting element still eases out, never in. This is an auto-dismiss (the
+  // user isn't the one closing it, so their eye isn't already on it): it needs
+  // more travel and time than a user-initiated close to be caught at all.
+  //
+  // Driven with `tick` (JS sets the style each frame) rather than `css`: a css
+  // transition makes Svelte emit a @keyframes rule, and WebKit (this app runs
+  // in WKWebView) snaps a keyframed transform to its first frame before playing
+  // — that snap was the abrupt jump. tick writes the exact eased value each
+  // frame, so there's no keyframe to jump to.
+  function dismiss(node, { duration = 260, lift = 10 } = {}) {
+    return {
+      duration,
+      easing: quintOut,
+      tick: (t) => {
+        node.style.opacity = String(t)
+        node.style.transform = reduceMotion
+          ? ''
+          : `translateY(${(1 - t) * -lift}px) scale(${0.96 + t * 0.04})`
+      },
+    }
+  }
+
+  let {
+    // Sentence explaining what's wrong in this particular spot.
+    message = 'W/kg needs your rider weight — without it this element renders as 0.',
+    // Single-row layout for strips above the preview; the stacked block is for
+    // panels and dialogs where there's vertical room.
+    compact = false,
+    // Set when the parent positions this over its content instead of in the
+    // layout flow: nothing reflows when it goes, so it just fades out.
+    floating = false,
+    // Outer spacing — applied to the box so nothing is reserved when the prompt
+    // has nothing to say.
+    class: className = '',
+  } = $props()
+
+  // Hold the box just long enough to read the confirmation rather than
+  // disappearing the instant the weight commits. In flow, the click that
+  // commits it (blur, then Render / a canvas click) would otherwise land on
+  // whatever slid up into its place — and a prompt that blinks out mid-entry is
+  // what made people stop typing after one digit in the first place.
+  const CONFIRM_MS = 1400
+  // Kept separate so the displayed value survives the exit: `showConfirm` drives
+  // visibility, `confirmedWeight` the text. Resetting one value to hide the box
+  // would blank the label mid-fade.
+  let showConfirm = $state(false)
+  let confirmedWeight = $state(null)
+  let confirmTimer = null
+
+  function onset(weight) {
+    confirmedWeight = weight
+    showConfirm = true
+    clearTimeout(confirmTimer)
+    confirmTimer = setTimeout(() => (showConfirm = false), CONFIRM_MS)
+  }
+
+  onDestroy(() => clearTimeout(confirmTimer))
+
+  let needed = $derived(app.needsRiderWeight)
+  let showing = $derived(needed || showConfirm)
+  let headline = $derived(
+    needed
+      ? message
+      : `Rider weight set — ${confirmedWeight} ${app.riderWeightUnit}.`,
+  )
+</script>
+
+{#snippet box()}
+  <div
+    class="{compact
+      ? 'flex items-center gap-2.5 rounded-[6px] px-3 py-1.5'
+      : 'space-y-2 rounded-[6px] px-3 py-2.5'} border {needed
+      ? 'border-[var(--ds-warning)]/30 bg-[var(--ds-warning)]/10'
+      : 'border-[var(--ds-success)]/30 bg-[var(--ds-success)]/10'}"
+  >
+    <div class="flex {compact ? 'min-w-0 flex-1 items-center' : 'items-start'} gap-2.5">
+      {#if needed}
+        <TriangleAlert
+          size={14}
+          class="{compact ? '' : 'mt-0.5'} shrink-0 text-[var(--ds-warning)]"
+        />
+      {:else}
+        <Check
+          size={14}
+          class="{compact ? '' : 'mt-0.5'} shrink-0 text-[var(--ds-success)]"
+        />
+      {/if}
+      <p class="{compact ? 'truncate ' : ''}text-xs leading-snug text-zinc-300">
+        {headline}
+      </p>
+    </div>
+    <div class={compact ? 'shrink-0' : ''}>
+      <RiderWeightField {onset} />
+    </div>
+    {#if !compact && needed}
+      <p class="text-[10px] leading-snug text-zinc-500">
+        Stored on this device only — never saved into templates.
+      </p>
+    {/if}
+  </div>
+{/snippet}
+
+{#if showing}
+  {#if floating}
+    <!-- Out of the layout flow: nothing below it moves, so the box just puts
+         itself away — lift + shrink + fade, ease-out both ways, exit quicker
+         than entry. An opaque base under the tinted box keeps it readable over
+         whatever it's floating on.
+         `|global`: the block that toggles is the parent `{#if showing}`, not
+         this `{#if floating}` — without it a local transition never fires. -->
+    <div
+      class="{className} overflow-hidden rounded-[6px] bg-[var(--panel)] shadow-lg"
+      style="transform-origin: top center"
+      in:dismiss|global={{ duration: 200, lift: 6 }}
+      out:dismiss|global={{ duration: 280, lift: 10 }}
+    >
+      {@render box()}
+    </div>
+  {:else}
+    <!-- In flow (panels, dialogs): collapse the height rather than popping out
+         of existence, so what sits below settles instead of snapping upward.
+         The box fades a little sooner so the text is gone before it clips.
+         Entering and exiting both ease out; the exit is the quicker of the two. -->
+    <div
+      class={className}
+      in:slide|global={{ duration: 200, easing: quintOut }}
+      out:slide|global={{ duration: 160, easing: quintOut }}
+    >
+      <div
+        in:fade|global={{ duration: 150, easing: quintOut }}
+        out:fade|global={{ duration: 110, easing: quintOut }}
+      >
+        {@render box()}
+      </div>
+    </div>
+  {/if}
+{/if}
diff --git a/app/src/state/appState.svelte.js b/app/src/state/appState.svelte.js
index 85e68e1..742daca 100644
--- a/app/src/state/appState.svelte.js
+++ b/app/src/state/appState.svelte.js
@@ -114,6 +114,20 @@ export function createAppState() {
     Number.isFinite(storedRiderWeight) ? storedRiderWeight : null,
   )
   let riderWeightUnit = $state(localStorage.getItem('riderWeightUnit') ?? 'kg')
+  // Weight in kilograms for the renderer, or null when unset/invalid.
+  function resolvedRiderWeightKg() {
+    if (
+      riderWeight == null ||
+      !Number.isFinite(riderWeight) ||
+      riderWeight <= 0
+    )
+      return null
+    return riderWeightUnit === 'lb' ? riderWeight * 0.45359237 : riderWeight
+  }
+  // Whether the loaded template renders W/kg anywhere.
+  function templateUsesRiderWeight() {
+    return (config?.elements ?? []).some((e) => e.value === 'power_to_weight')
+  }
   // Unit system ("metric" | "imperial") for every readout left on Auto —
   // per-element unit overrides still win. An app-level preference like rider
   // weight: configured once in Settings, stored on this device, injected into
@@ -1509,13 +1523,17 @@ export function createAppState() {
     },
     // Weight resolved to kilograms for the renderer, or null when unset.
     get riderWeightKg() {
-      if (
-        riderWeight == null ||
-        !Number.isFinite(riderWeight) ||
-        riderWeight <= 0
-      )
-        return null
-      return riderWeightUnit === 'lb' ? riderWeight * 0.45359237 : riderWeight
+      return resolvedRiderWeightKg()
+    },
+    // True when the template renders W/kg anywhere — where the weight prompts
+    // belong, whether or not a weight is currently set.
+    get usesRiderWeight() {
+      return templateUsesRiderWeight()
+    },
+    // True when the template renders W/kg but no weight is set — every such
+    // readout comes out 0.0 until the user enters one, so callers prompt.
+    get needsRiderWeight() {
+      return resolvedRiderWeightKg() == null && templateUsesRiderWeight()
     },
     get outputWidth() {
       return outputWidth