Show energy sessions in timeline and fix mobile overflow

Author: =

apps/predbat/frontend.zip

@@ -158,6 +158,12 @@
 }
 
 @media (max-width: 700px) {
+  .app-shell {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: clip;
+  }
+
   .app-content,
   .app-shell.navigation-collapsed .app-content {
     margin-left: 0;

frontend/src/App.css

@@ -403,6 +403,81 @@
   color: var(--color-text);
 }
 
+/* Energy-session colours take priority over the underlying battery action. */
+.plan-timeline-event.timeline-rate-event-power-down {
+  border-color: var(--color-danger);
+  background: var(--color-danger);
+  color: var(--color-semantic-contrast);
+}
+
+.plan-timeline-event.timeline-rate-event-power-up {
+  border-color: var(--color-success);
+  background: var(--color-success);
+  color: var(--color-semantic-contrast);
+}
+
+.plan-timeline-event.timeline-rate-event-axle-import {
+  border-color: var(--color-flow-grid);
+  background: var(--color-flow-grid);
+  color: var(--color-semantic-contrast);
+}
+
+.plan-timeline-event.timeline-rate-event-axle-export {
+  border-color: var(--color-export);
+  background: var(--color-export);
+  color: var(--color-semantic-contrast);
+}
+
+.plan-timeline-event.timeline-rate-event-axle-event {
+  border-color: var(--color-warning);
+  background: var(--color-warning);
+  color: var(--color-semantic-contrast);
+}
+
+.plan-timeline-event.timeline-rate-event-generic {
+  border-color: var(--color-text-muted);
+  background: var(--color-text-muted);
+  color: var(--color-semantic-contrast);
+}
+
+.plan-timeline-rate-event {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: auto;
+  padding: 0.2rem 0.4rem;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  font-size: 0.58rem;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.plan-timeline-rate-event.is-power-down {
+  color: var(--color-danger);
+}
+
+.plan-timeline-rate-event.is-power-up {
+  color: var(--color-success);
+}
+
+.plan-timeline-rate-event.is-axle-import {
+  color: var(--color-flow-grid);
+}
+
+.plan-timeline-rate-event.is-axle-export {
+  color: var(--color-export);
+}
+
+.plan-timeline-rate-event.is-axle-event {
+  color: var(--color-warning);
+}
+
+.plan-timeline-rate-event.is-generic {
+  color: var(--color-text-muted);
+}
+
 /*
  * SOC heading.
  */

frontend/src/components/PlanVisual.css

@@ -72,6 +72,25 @@ type TimelineEvent = {
   carbonChange: number
 
   explanation?: string
+
+  rateEventType?: NonNullable<PlanRow['rate_event_type']>
+}
+
+const RATE_EVENT_DETAILS: Record<NonNullable<PlanRow['rate_event_type']>, { label: string; colour: string }> = {
+  octopus_power_down: { label: 'Power Down', colour: 'power-down' },
+  octopus_power_up: { label: 'Power Up', colour: 'power-up' },
+  octopus_happy_hour: { label: 'Happy Hour', colour: 'power-up' },
+  axle_import: { label: 'Axle import', colour: 'axle-import' },
+  axle_export: { label: 'Axle export', colour: 'axle-export' },
+  axle_event: { label: 'Axle event', colour: 'axle-event' },
+  energy_event: { label: 'Energy event', colour: 'generic' }
+}
+
+function getRateEventType(row: PlanRow) {
+  const isEnergyEvent =
+    row.import_rate_adjust_type === 'saving' || row.export_rate_adjust_type === 'saving'
+
+  return isEnergyEvent ? (row.rate_event_type ?? 'energy_event') : undefined
 }
 
 type TimelineTick = {
@@ -409,6 +428,8 @@ function buildTimelineEvents(
 
   let currentAction = getTimelineAction(rows[0].state)
 
+  let currentRateEventType = getRateEventType(rows[0])
+
   function addEvent(endIndex: number) {
     const eventRows = rows.slice(startIndex, endIndex + 1)
 
@@ -533,19 +554,25 @@ function buildTimelineEvents(
 
       carCharging,
 
-      explanation
+      explanation,
+
+      rateEventType: currentRateEventType
     })
   }
 
   for (let index = 1; index < rows.length; index += 1) {
     const action = getTimelineAction(rows[index].state)
 
-    if (action !== currentAction) {
+    const rateEventType = getRateEventType(rows[index])
+
+    if (action !== currentAction || rateEventType !== currentRateEventType) {
       addEvent(index - 1)
 
       startIndex = index
 
       currentAction = action
+
+      currentRateEventType = rateEventType
     }
   }
 
@@ -897,6 +924,10 @@ export default function PlanVisual({ plan }: PlanVisualProps) {
     ? formatTargetSoc(activeEvent.targetSocStart, activeEvent.targetSocEnd)
     : null
 
+  const activeRateEvent = activeEvent?.rateEventType
+    ? RATE_EVENT_DETAILS[activeEvent.rateEventType]
+    : null
+
   const ticks = buildTimeTicks(timelineStart, timelineEnd)
 
   /*
@@ -1025,6 +1056,14 @@ export default function PlanVisual({ plan }: PlanVisualProps) {
 
               <span>{formatEventRange(activeEvent.start, activeEvent.end)}</span>
             </div>
+
+            {activeRateEvent && (
+              <span className={`plan-timeline-rate-event is-${activeRateEvent.colour}`}>
+                <FontAwesomeIcon icon={faBolt} aria-hidden="true" />
+
+                {activeRateEvent.label}
+              </span>
+            )}
           </div>
 
           <div className="plan-timeline-detail-values">
@@ -1156,18 +1195,23 @@ export default function PlanVisual({ plan }: PlanVisualProps) {
 
               const isActive = activeEvent?.id === event.id
 
+              const rateEvent = event.rateEventType
+                ? RATE_EVENT_DETAILS[event.rateEventType]
+                : null
+
               return (
                 <button
                   key={event.id}
                   type="button"
-                  className={`plan-timeline-event timeline-action-${event.action} ${isCurrent ? 'is-current' : ''} ${isActive ? 'is-active' : ''}`}
+                  className={`plan-timeline-event timeline-action-${event.action} ${rateEvent ? `timeline-rate-event-${rateEvent.colour}` : ''} ${isCurrent ? 'is-current' : ''} ${isActive ? 'is-active' : ''}`}
                   style={{
                     left: `${startX}px`,
 
                     width: `${eventWidth}px`
                   }}
                   aria-label={
-                    `${getEventTitle(event)}, ` + `${formatEventRange(event.start, event.end)}`
+                    `${rateEvent ? `${rateEvent.label}, ` : ''}${getEventTitle(event)}, ` +
+                    `${formatEventRange(event.start, event.end)}`
                   }
                   aria-pressed={selectedEventId === event.id}
                   onMouseEnter={() => {

frontend/src/components/PlanVisual.tsx

@@ -87,6 +87,16 @@ body {
   min-height: 100dvh;
 }
 
+@media (max-width: 700px) {
+  html,
+  body,
+  #root {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: clip;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

frontend/src/index.css

@@ -70,6 +70,7 @@
 .config-table td.is-changed { color: var(--color-warning); font-weight: 700; }
 .config-table select, .config-table input[type='number'] { width: min(16rem, 100%); padding: 0.42rem 0.5rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-text); font: inherit; }
 .config-switch {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: 7px;
@@ -80,6 +81,11 @@
 
 .config-switch input {
     position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    margin: 0;
     opacity: 0;
     pointer-events: none;
 }

frontend/src/pages/ConfigPage.css

@@ -17,7 +17,7 @@ const currencyModule = { exports: {} }
 vm.runInNewContext(compile(currencySource), { module: currencyModule, exports: currencyModule.exports })
 
 const module = { exports: {} }
-vm.runInNewContext(compile(source), {
+vm.runInNewContext(compile(source.replace('function buildTimelineEvents(', 'export function buildTimelineEvents(')), {
   module,
   exports: module.exports,
   require(specifier) {
@@ -46,3 +46,35 @@ test('SOC hover interpolates the plotted value at the pointer time', () => {
   assert.equal(module.exports.interpolateSoc(points, 45), 45)
   assert.equal(module.exports.interpolateSoc(points, 90), 40)
 })
+
+test('timeline splits a continuous charge action around a Power Up session', () => {
+  const row = (time, rateEventType) => ({
+    time,
+    state: 'Chrg',
+    state_target: 80,
+    soc_percent: 50,
+    import_rate: 0,
+    export_rate: 12,
+    car_charging: 0,
+    carbon_change: 0,
+    reasons: [],
+    import_rate_adjust_type: rateEventType ? 'saving' : undefined,
+    rate_event_type: rateEventType
+  })
+
+  const events = module.exports.buildTimelineEvents({
+    rows: [
+      row('2026-10-11T10:30:00+01:00'),
+      row('2026-10-11T11:00:00+01:00', 'octopus_power_up'),
+      row('2026-10-11T11:30:00+01:00', 'octopus_power_up'),
+      row('2026-10-11T12:00:00+01:00')
+    ],
+    currency_symbols: ['£', 'p'],
+    reason_templates: {}
+  }, 30 * 60 * 1000, 50)
+
+  assert.equal(events.length, 3)
+  assert.equal(events[1].rateEventType, 'octopus_power_up')
+  assert.equal(events[1].start.toISOString(), '2026-10-11T10:00:00.000Z')
+  assert.equal(events[1].end.toISOString(), '2026-10-11T11:00:00.000Z')
+})