From a60303cb1a93b9853f8acedc26c60acc5b39a28b Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Tue, 13 Oct 2026 23:08:46 +0200
Subject: [PATCH 1/2] feat(fio): fio burn runway strips per plan and runway
 bars per material, amber yellow threshold
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Plan Burn Overview: a strip per plan (PStripPlot) with every consumed
  material's days left on a 0..3x-yellow axis, red and amber zones, "+n"
  beyond the axis and a "1 red · 2 yellow · 10 materials" summary line
- strip dots never overlap (lanes plus sideways dodge); hover/focus shows the
  dot, a touch tap lists every material under the finger
- expanded plan: "runs out first" line and a Runway column (PRunwayBar) with
  dashed thresholds; consumption and production hide below 1600 px
- yellow burn badges are amber (bg-warning) everywhere, including XIT
- PDataTable: expanded and empty rows are no longer 20 px wider than their
  box; FIOBurnView grid no longer grows without limit after an expand

Spec: specs/2026-10-13-charts-09-fio-burn-runway.md

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../fio/components/FIOBurnPlanTable.vue       |  92 +++++++-
 src/features/fio/components/FIOBurnTable.vue  | 198 ++++++++++++----
 src/features/fio/fioBurn.util.ts              |  48 ++++
 src/features/fio/useFIOBurn.ts                |   1 +
 src/features/fio/useFIOBurn.types.ts          |   1 +
 src/features/preferences/usePreferences.ts    |   2 +-
 src/locales/en_US/common.json                 |   7 +
 src/locales/en_US/fio.json                    |  21 +-
 .../fio/components/FIOBurnPlanTable.test.ts   | 139 ++++++++++--
 .../fio/components/FIOBurnTable.test.ts       |  99 +++++++-
 src/tests/features/fio/fioBurn.util.test.ts   |  51 +++++
 src/tests/features/fio/useFIOBurn.test.ts     |   1 +
 .../preferences/usePreferences.test.ts        |   4 +-
 .../components/XITBurnActionButton.test.ts    |   2 +-
 src/tests/ui/charts/PRunwayBar.test.ts        |  58 +++++
 src/tests/ui/charts/PStripPlot.test.ts        | 152 +++++++++++++
 src/tests/ui/charts/charts.util.test.ts       | 113 +++++++++-
 src/ui/charts/PRunwayBar.vue                  |  79 +++++++
 src/ui/charts/PStripPlot.vue                  | 212 ++++++++++++++++++
 src/ui/charts/charts.types.ts                 |  15 ++
 src/ui/charts/charts.util.ts                  |  83 ++++++-
 src/ui/components/PDataTable.vue              |   9 +-
 src/views/fio/FIOBurnView.vue                 |   2 +-
 23 files changed, 1307 insertions(+), 82 deletions(-)
 create mode 100644 src/features/fio/fioBurn.util.ts
 create mode 100644 src/tests/features/fio/fioBurn.util.test.ts
 create mode 100644 src/tests/ui/charts/PRunwayBar.test.ts
 create mode 100644 src/tests/ui/charts/PStripPlot.test.ts
 create mode 100644 src/ui/charts/PRunwayBar.vue
 create mode 100644 src/ui/charts/PStripPlot.vue

diff --git a/src/features/fio/components/FIOBurnPlanTable.vue b/src/features/fio/components/FIOBurnPlanTable.vue
index c1c7b541b..22100e5cd 100644
--- a/src/features/fio/components/FIOBurnPlanTable.vue
+++ b/src/features/fio/components/FIOBurnPlanTable.vue
@@ -5,14 +5,17 @@
 	const { t } = useI18n();
 
 	// Composables
-	import { usePlanetData } from "@/database/services/usePlanetData";
 	import { usePreferences } from "@/features/preferences/usePreferences";
 
-	const { getBurnDisplayClass } = usePreferences();
-	const { planetName } = usePlanetData();
+	const { getBurnDisplayClass, burnDaysRed, burnDaysYellow } =
+		usePreferences();
+
+	// Components
+	import MaterialTile from "@/features/material_tile/components/MaterialTile.vue";
 
 	// Util
 	import { formatNumber } from "@/util/numbers";
+	import { burnAxisMax, burnSummary } from "@/features/fio/fioBurn.util";
 
 	// Types & Interfaces
 	import type { IFIOBurnPlanetTableElement } from "@/features/fio/useFIOBurn.types";
@@ -20,6 +23,7 @@
 
 	// UI
 	import { PDataTable } from "@/ui";
+	import PStripPlot from "@/ui/charts/PStripPlot.vue";
 
 	defineProps({
 		planTable: {
@@ -28,6 +32,8 @@
 		},
 	});
 
+	const axis = computed(() => burnAxisMax(burnDaysYellow.value));
+
 	const columns = computed<PDataTableColumn<IFIOBurnPlanetTableElement>[]>(
 		() => [
 			{
@@ -35,10 +41,12 @@
 				title: t("fio.burn.components.overview.table.plan"),
 				// by the name shown, not the id
 				sorter: (a, b) => a.planName.localeCompare(b.planName),
+				minWidth: 120,
 			},
 			{
-				key: "planetId",
-				title: t("fio.burn.components.overview.table.planet"),
+				key: "strip",
+				title: t("fio.burn.components.overview.table.strip"),
+				minWidth: 180,
 			},
 			{
 				key: "minDays",
@@ -47,28 +55,96 @@
 			},
 		]
 	);
+
+	// "1 red · 2 yellow · 10 materials", zero counts left out
+	function summary(row: IFIOBurnPlanetTableElement): string[] {
+		const s = burnSummary(
+			row.burnMaterials,
+			burnDaysRed.value,
+			burnDaysYellow.value
+		);
+		const prefix = "fio.burn.components.overview.summary";
+		return [
+			s.red ? t(`${prefix}.red`, { n: s.red }) : "",
+			s.yellow ? t(`${prefix}.yellow`, { n: s.yellow }) : "",
+			t(`${prefix}.materials`, s.consumed),
+		].filter(Boolean);
+	}
+
+	const stripItems = (row: IFIOBurnPlanetTableElement) =>
+		row.burnMaterials.map((m) => ({ key: m.ticker, value: m.exhaustion }));
 </script>
 
 <template>
 	<PDataTable :columns="columns" :data="planTable" striped>
+		<template #header-strip>
+			{{ $t("fio.burn.components.overview.table.strip") }}
+			<!-- own line: headers never wrap, and the column must fit at 1280 -->
+			<span class="block font-normal text-muted">
+				{{ $t("fio.burn.components.overview.axis", { max: axis }) }}
+			</span>
+		</template>
 		<template #cell-planUuid="{ row }">
 			<router-link
 				:to="`/plan/${row.planetId}/${row.planUuid}`"
 				class="text-link-primary font-bold hover:underline">
 				{{ row.planName }}
 			</router-link>
+			<!-- wraps between the parts only -->
+			<div class="text-xs text-muted">
+				<template v-for="(part, i) in summary(row)" :key="part">
+					<template v-if="i"> · </template>
+					<span class="whitespace-nowrap">{{ part }}</span>
+				</template>
+			</div>
 		</template>
-		<template #cell-planetId="{ row }">
-			{{ planetName(row.planetId, "Loading...") }}
+		<template #cell-strip="{ row }">
+			<PStripPlot
+				:items="stripItems(row)"
+				:axis="axis"
+				:red="burnDaysRed"
+				:yellow="burnDaysYellow"
+				:label="
+					t('fio.burn.components.overview.strip_label', {
+						plan_name: row.planName,
+					})
+				">
+				<template #tooltip="{ items }">
+					<!-- long "+n" lists in columns, so they fit the viewport -->
+					<div
+						:class="
+							items.length > 6
+								? 'grid grid-cols-2 md:grid-cols-3 gap-x-4'
+								: ''
+						">
+						<div
+							v-for="item in items"
+							:key="item.key"
+							class="flex items-center gap-x-2 py-0.5">
+							<MaterialTile :ticker="item.key" />
+							<span class="whitespace-nowrap">
+								{{
+									$t("fio.burn.components.plans.days_left", {
+										days: formatNumber(item.value, 1),
+									})
+								}}
+							</span>
+						</div>
+					</div>
+				</template>
+			</PStripPlot>
 		</template>
 		<template #cell-minDays="{ row }">
 			<div class="text-center">
 				<span
 					:class="getBurnDisplayClass(row.minDays).value"
-					class="py-1 px-2">
+					class="py-1 px-2 whitespace-nowrap">
 					{{ formatNumber(row.minDays) }}
 				</span>
 			</div>
 		</template>
 	</PDataTable>
+	<p class="pt-2 text-xs text-muted">
+		{{ $t("fio.burn.components.overview.caption") }}
+	</p>
 </template>
diff --git a/src/features/fio/components/FIOBurnTable.vue b/src/features/fio/components/FIOBurnTable.vue
index a09f9e480..ca14c9fd9 100644
--- a/src/features/fio/components/FIOBurnTable.vue
+++ b/src/features/fio/components/FIOBurnTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed, type PropType } from "vue";
+	import { computed, onBeforeUnmount, type PropType, ref } from "vue";
 
 	import { useI18n } from "vue-i18n";
 	const { t } = useI18n();
@@ -7,7 +7,8 @@
 	// Composables
 	import { usePlanetData } from "@/database/services/usePlanetData";
 	import { usePreferences } from "@/features/preferences/usePreferences";
-	const { getBurnDisplayClass } = usePreferences();
+	const { getBurnDisplayClass, burnDaysRed, burnDaysYellow } =
+		usePreferences();
 	const { planetName } = usePlanetData();
 
 	// Components
@@ -16,6 +17,7 @@
 
 	// Util
 	import { formatNumber, formatAmount } from "@/util/numbers";
+	import { burnAxisMax, burnSummary } from "@/features/fio/fioBurn.util";
 
 	// Type & Interfaces
 	import type {
@@ -26,6 +28,7 @@
 
 	// UI
 	import { PDataTable } from "@/ui";
+	import PRunwayBar from "@/ui/charts/PRunwayBar.vue";
 
 	const props = defineProps({
 		burnTable: {
@@ -38,45 +41,98 @@
 		{ key: "planName", title: t("fio.burn.components.plans.table.plan") },
 	]);
 
+	// below 1600 px the side-by-side panel has no room for all 7 columns:
+	// consumption and production go, the delta stays
+	const wideQuery =
+		typeof window.matchMedia === "function"
+			? window.matchMedia("(min-width: 1600px)")
+			: null;
+	const isWide = ref(wideQuery?.matches ?? true);
+	const onMedia = (e: MediaQueryListEvent) => (isWide.value = e.matches);
+	wideQuery?.addEventListener("change", onMedia);
+	onBeforeUnmount(() => wideQuery?.removeEventListener("change", onMedia));
+	const NARROW_HIDDEN = new Set(["input", "output"]);
+
 	const materialColumns = computed<
 		PDataTableColumn<IFIOBurnTableElementMaterial>[]
-	>(() => [
-		{
-			key: "ticker",
-			title: t("fio.burn.components.plans.table.ticker"),
-			sorter: true,
-		},
-		{
-			key: "input",
-			title: t("fio.burn.components.plans.table.consumption"),
-			sorter: true,
-		},
-		{
-			key: "output",
-			title: t("fio.burn.components.plans.table.production"),
-			sorter: true,
-		},
-		{
-			key: "delta",
-			title: t("fio.burn.components.plans.table.delta"),
-			sorter: true,
-		},
-		{
-			key: "stock",
-			title: t("fio.burn.components.plans.table.stock"),
-			sorter: true,
-		},
-		{
-			key: "exhaustion",
-			title: t("fio.burn.components.plans.table.burn"),
-			sorter: true,
-		},
-	]);
+	>(() =>
+		(
+			[
+				{
+					key: "ticker",
+					title: t("fio.burn.components.plans.table.ticker"),
+					sorter: true,
+				},
+				{
+					key: "input",
+					title: t("fio.burn.components.plans.table.consumption"),
+					sorter: true,
+				},
+				{
+					key: "output",
+					title: t("fio.burn.components.plans.table.production"),
+					sorter: true,
+				},
+				{
+					key: "delta",
+					title: t("fio.burn.components.plans.table.delta"),
+					sorter: true,
+				},
+				{
+					key: "stock",
+					title: t("fio.burn.components.plans.table.stock"),
+					sorter: true,
+				},
+				{
+					key: "runway",
+					title: t("fio.burn.components.plans.table.runway"),
+					minWidth: 120,
+				},
+				{
+					key: "exhaustion",
+					title: t("fio.burn.components.plans.table.burn"),
+					sorter: true,
+				},
+			] satisfies PDataTableColumn<IFIOBurnTableElementMaterial>[]
+		).filter((c) => isWide.value || !NARROW_HIDDEN.has(c.key))
+	);
 
 	// stable, inline functions re-render the whole table
 	const rowKey = (row: IFIOBurnTableElement) => row.key;
 	const expandLabel = (row: IFIOBurnTableElement) =>
 		t("fio.burn.components.plans.expand_row", { plan_name: row.planName });
+
+	const axis = computed(() => burnAxisMax(burnDaysYellow.value));
+
+	// per plan, for the line above its materials
+	const summaries = computed(() =>
+		Object.fromEntries(
+			props.burnTable.map((p) => [
+				p.key,
+				burnSummary(
+					p.burnMaterials,
+					burnDaysRed.value,
+					burnDaysYellow.value
+				),
+			])
+		)
+	);
+
+	// "2 more under 10 d · 3 produced here", zero counts left out
+	function summaryRest(s: ReturnType<typeof burnSummary>): string {
+		const prefix = "fio.burn.components.plans";
+		return [
+			s.moreUnderYellow
+				? t(`${prefix}.more_under`, {
+						n: s.moreUnderYellow,
+						days: burnDaysYellow.value,
+					})
+				: "",
+			s.produced ? t(`${prefix}.produced`, { n: s.produced }) : "",
+		]
+			.filter(Boolean)
+			.join(" · ");
+	}
 </script>
 
 <template>
@@ -87,9 +143,39 @@
 		:expand-label="expandLabel"
 		striped>
 		<template #expand="{ row }">
-			<PDataTable :columns="materialColumns" :data="row.burnMaterials" striped>
+			<div
+				class="flex flex-wrap items-center gap-x-3 gap-y-1 pb-3 text-sm">
+				<template v-if="summaries[row.key].first">
+					<MaterialTile :ticker="summaries[row.key].first!.ticker" />
+					<i18n-t
+						keypath="fio.burn.components.plans.runs_out_first"
+						tag="span"
+						scope="global">
+						<template #days>
+							<span class="font-bold">
+								{{
+									formatNumber(
+										summaries[row.key].first!.exhaustion,
+										1
+									)
+								}}
+							</span>
+						</template>
+					</i18n-t>
+				</template>
+				<span class="text-muted">
+					{{ summaryRest(summaries[row.key]) }}
+				</span>
+			</div>
+			<PDataTable
+				class="whitespace-nowrap"
+				:columns="materialColumns"
+				:data="row.burnMaterials"
+				striped>
 				<template #cell-ticker="{ row: material }">
-					<MaterialTile :key="material.ticker" :ticker="material.ticker" />
+					<MaterialTile
+						:key="material.ticker"
+						:ticker="material.ticker" />
 				</template>
 				<template #cell-input="{ row: material }">
 					<span :class="material.input <= 0 ? 'text-muted' : ''">
@@ -104,7 +190,9 @@
 				<template #cell-delta="{ row: material }">
 					<span
 						:class="
-							material.delta >= 0 ? 'text-positive' : 'text-negative'
+							material.delta >= 0
+								? 'text-positive'
+								: 'text-negative'
 						">
 						{{ formatNumber(material.delta) }}
 					</span>
@@ -112,10 +200,38 @@
 				<template #cell-stock="{ row: material }">
 					{{ formatAmount(material.stock) }}
 				</template>
+				<template #header-runway>
+					{{ $t("fio.burn.components.plans.table.runway") }}
+					<span class="font-normal text-muted">
+						{{
+							$t("fio.burn.components.overview.axis", {
+								max: axis,
+							})
+						}}
+					</span>
+				</template>
+				<template #cell-runway="{ row: material }">
+					<PRunwayBar
+						:value="material.exhaustion"
+						:axis="axis"
+						:red="burnDaysRed"
+						:yellow="burnDaysYellow"
+						:label="
+							t('fio.burn.components.plans.runway_label', {
+								ticker: material.ticker,
+								days: formatNumber(material.exhaustion, 1),
+							})
+						"
+						:note="
+							Number.isFinite(material.exhaustion)
+								? undefined
+								: t('fio.burn.components.plans.produced_here')
+						" />
+				</template>
 				<template #cell-exhaustion="{ row: material }">
 					<span
 						:class="getBurnDisplayClass(material.exhaustion).value"
-						class="py-1 px-2">
+						class="py-1 px-2 whitespace-nowrap">
 						{{ formatNumber(material.exhaustion) }}
 					</span>
 				</template>
@@ -143,10 +259,8 @@
 				<div class="flex flex-row items-center gap-x-3">
 					<div>
 						<span
-							class="py-1 px-2"
-							:class="
-								getBurnDisplayClass(row.minDays).value
-							">
+							class="py-1 px-2 whitespace-nowrap"
+							:class="getBurnDisplayClass(row.minDays).value">
 							{{ formatNumber(row.minDays) }}
 						</span>
 					</div>
diff --git a/src/features/fio/fioBurn.util.ts b/src/features/fio/fioBurn.util.ts
new file mode 100644
index 000000000..4dcd9bda2
--- /dev/null
+++ b/src/features/fio/fioBurn.util.ts
@@ -0,0 +1,48 @@
+// Util
+import { chartZone } from "@/ui/charts/charts.util";
+
+// Types & Interfaces
+import type { IFIOBurnTableElementMaterial } from "@/features/fio/useFIOBurn.types";
+
+/**
+ * End of the burn axis: 3 × the yellow threshold, so red and yellow sit in
+ * the first third.
+ * @author jplacht
+ *
+ * @param {number} yellow yellow threshold in days
+ * @returns {number} axis end in days
+ */
+export function burnAxisMax(yellow: number): number {
+	return yellow * 3;
+}
+
+/**
+ * Counts for a plan's summary lines. Consumed materials run out at some
+ * point (finite days), produced ones never do.
+ * @author jplacht
+ *
+ * @param {IFIOBurnTableElementMaterial[]} materials plan burn materials
+ * @param {number} red red threshold in days
+ * @param {number} yellow yellow threshold in days
+ */
+export function burnSummary(
+	materials: IFIOBurnTableElementMaterial[],
+	red: number,
+	yellow: number
+) {
+	const consumed = materials
+		.filter((m) => Number.isFinite(m.exhaustion))
+		.sort((a, b) => a.exhaustion - b.exhaustion);
+	const zones = consumed.map((m) => chartZone(m.exhaustion, red, yellow));
+	const underYellow = zones.filter((z) => z !== "none").length;
+
+	return {
+		red: zones.filter((z) => z === "red").length,
+		yellow: zones.filter((z) => z === "yellow").length,
+		consumed: consumed.length,
+		produced: materials.length - consumed.length,
+		first: consumed[0] as IFIOBurnTableElementMaterial | undefined,
+		// besides the first one
+		moreUnderYellow: Math.max(underYellow - 1, 0),
+	};
+}
diff --git a/src/features/fio/useFIOBurn.ts b/src/features/fio/useFIOBurn.ts
index 223b653ec..9adf37719 100644
--- a/src/features/fio/useFIOBurn.ts
+++ b/src/features/fio/useFIOBurn.ts
@@ -47,6 +47,7 @@ export function useFIOBurn(
 						planName: p.planName,
 						planetId: p.planetId,
 						minDays: p.minDays,
+						burnMaterials: p.burnMaterials,
 					};
 				}
 			);
diff --git a/src/features/fio/useFIOBurn.types.ts b/src/features/fio/useFIOBurn.types.ts
index 15393a79b..4ac28eb1f 100644
--- a/src/features/fio/useFIOBurn.types.ts
+++ b/src/features/fio/useFIOBurn.types.ts
@@ -22,4 +22,5 @@ export interface IFIOBurnPlanetTableElement {
 	planName: string;
 	planetId: string;
 	minDays: number;
+	burnMaterials: IFIOBurnTableElementMaterial[];
 }
diff --git a/src/features/preferences/usePreferences.ts b/src/features/preferences/usePreferences.ts
index a102a4fc9..16dee292f 100644
--- a/src/features/preferences/usePreferences.ts
+++ b/src/features/preferences/usePreferences.ts
@@ -247,7 +247,7 @@ export function usePreferences() {
 			if (value <= burnDaysRed.value) {
 				return "text-white bg-negative";
 			} else if (value <= burnDaysYellow.value)
-				return "text-black bg-positive";
+				return "text-black bg-warning";
 			else return "";
 		});
 	}
diff --git a/src/locales/en_US/common.json b/src/locales/en_US/common.json
index 413a1c461..681d38059 100644
--- a/src/locales/en_US/common.json
+++ b/src/locales/en_US/common.json
@@ -83,6 +83,13 @@
 		"page_load_failed": "This page couldn't load. Reload to get the latest version.",
 		"meter": {
 			"used": "{label} {pct} % used"
+		},
+		"strip": {
+			"dot": "{label}: {value}",
+			"over": "{n} more beyond the axis"
+		},
+		"runway": {
+			"beyond": "beyond the axis"
 		}
 	},
 	"values": {
diff --git a/src/locales/en_US/fio.json b/src/locales/en_US/fio.json
index b520e8d0d..bc82889ef 100644
--- a/src/locales/en_US/fio.json
+++ b/src/locales/en_US/fio.json
@@ -12,15 +12,29 @@
 		"components": {
 			"overview": {
 				"title": "Plan Burn Overview",
+				"axis": "0 – {max} d",
 				"table": {
 					"plan": "@:terms.plan",
-					"planet": "@:terms.planets",
+					"strip": "Days left per material",
 					"burn": "Burn"
-				}
+				},
+				"summary": {
+					"red": "{n} red",
+					"yellow": "{n} yellow",
+					"materials": "no materials | {n} material | {n} materials"
+				},
+				"strip_label": "Days left per material of {plan_name}",
+				"caption": "One dot per consumed material; hover or tap a dot to see which. The axis ends at 3 × the yellow threshold; materials beyond it are counted as \"+n\"."
 			},
 			"plans": {
 				"xit_title": "XIT Resupply: {plan_name}",
 				"expand_row": "Show materials of {plan_name}",
+				"runs_out_first": "runs out first, in {days} days",
+				"more_under": "{n} more under {days} d",
+				"produced": "{n} produced here",
+				"produced_here": "produced here",
+				"days_left": "{days} days left",
+				"runway_label": "{ticker}: {days} days left",
 				"table": {
 					"ticker": "@:terms.material_ticker",
 					"consumption": "@:terms.consumption",
@@ -29,7 +43,8 @@
 					"stock": "@:terms.stock",
 					"plan": "@:terms.plan",
 					"burn": "Burn",
-					"exhaustion": "Exhaustion"
+					"exhaustion": "Exhaustion",
+					"runway": "Runway"
 				}
 			}
 		}
diff --git a/src/tests/features/fio/components/FIOBurnPlanTable.test.ts b/src/tests/features/fio/components/FIOBurnPlanTable.test.ts
index 8283e2725..d68e5bfe3 100644
--- a/src/tests/features/fio/components/FIOBurnPlanTable.test.ts
+++ b/src/tests/features/fio/components/FIOBurnPlanTable.test.ts
@@ -1,29 +1,101 @@
 import { describe, it, expect } from "vitest";
+import { nextTick } from "vue";
 import type { VueWrapper } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
 
 import FIOBurnPlanTable from "@/features/fio/components/FIOBurnPlanTable.vue";
+import { usePreferences } from "@/features/preferences/usePreferences";
 import { mountComponent, tableRows } from "@/tests/mountComponent";
 
 // Types & Interfaces
-import type { IFIOBurnPlanetTableElement } from "@/features/fio/useFIOBurn.types";
+import type {
+	IFIOBurnPlanetTableElement,
+	IFIOBurnTableElementMaterial,
+} from "@/features/fio/useFIOBurn.types";
+
+const material = (
+	ticker: string,
+	exhaustion: number
+): IFIOBurnTableElementMaterial => ({
+	ticker,
+	input: 1,
+	output: 0,
+	delta: -1,
+	stock: 0,
+	exhaustion,
+});
+
+const MATERIALS = [
+	material("C", 3),
+	material("DW", 8),
+	material("RAT", 9),
+	material("PT", 26),
+	material("EXO", 40),
+	material("FE", Infinity),
+];
 
 // the ids sort the other way round than the names
 const PLANS: IFIOBurnPlanetTableElement[] = [
-	{ planUuid: "a-uuid", planName: "Zeta", planetId: "KW-020a", minDays: 3 },
-	{ planUuid: "z-uuid", planName: "Alpha", planetId: "KW-020a", minDays: 9 },
-	{ planUuid: "m-uuid", planName: "Mid", planetId: "KW-020a", minDays: 1 },
+	{
+		planUuid: "a-uuid",
+		planName: "Zeta",
+		planetId: "KW-020a",
+		minDays: 3,
+		burnMaterials: MATERIALS,
+	},
+	{
+		planUuid: "z-uuid",
+		planName: "Alpha",
+		planetId: "KW-020a",
+		minDays: 9,
+		burnMaterials: [],
+	},
+	{
+		planUuid: "m-uuid",
+		planName: "Mid",
+		planetId: "KW-020a",
+		minDays: 1,
+		burnMaterials: [],
+	},
 ];
 
+const MESSAGES = {
+	fio: {
+		burn: {
+			components: {
+				overview: {
+					axis: "0 – {max} d",
+					summary: {
+						red: "{n} red",
+						yellow: "{n} yellow",
+						materials:
+							"no materials | {n} material | {n} materials",
+					},
+				},
+			},
+		},
+	},
+};
+
 const plans = (wrapper: VueWrapper) =>
-	tableRows(wrapper).map((r) => r.planUuid);
+	wrapper.findAll("tbody td[data-col-key=planUuid] a").map((a) => a.text());
 const sort = (wrapper: VueWrapper, key: string) =>
 	wrapper.find(`th[data-col-key="${key}"] button`).trigger("click");
 
+async function mountTable() {
+	const pinia = createPinia();
+	setActivePinia(pinia);
+	const { wrapper } = await mountComponent(
+		FIOBurnPlanTable,
+		{ planTable: PLANS },
+		{ pinia, messages: MESSAGES }
+	);
+	return wrapper;
+}
+
 describe("FIOBurnPlanTable", () => {
 	it("sorts the plan column by the plan name, not its id", async () => {
-		const { wrapper } = await mountComponent(FIOBurnPlanTable, {
-			planTable: PLANS,
-		});
+		const wrapper = await mountTable();
 		expect(plans(wrapper)).toEqual(["Zeta", "Alpha", "Mid"]);
 
 		await sort(wrapper, "planUuid");
@@ -32,15 +104,52 @@ describe("FIOBurnPlanTable", () => {
 		expect(plans(wrapper)).toEqual(["Alpha", "Mid", "Zeta"]);
 	});
 
-	it("sorts by burn days and has no sort on the planet", async () => {
-		const { wrapper } = await mountComponent(FIOBurnPlanTable, {
-			planTable: PLANS,
-		});
+	it("sorts by burn days", async () => {
+		const wrapper = await mountTable();
 
 		await sort(wrapper, "minDays");
 		expect(plans(wrapper)).toEqual(["Alpha", "Zeta", "Mid"]);
-		expect(
-			wrapper.find('th[data-col-key="planetId"] button').exists()
-		).toBe(false);
+		expect(tableRows(wrapper).map((r) => Object.keys(r))[0]).toEqual([
+			"planUuid",
+			"strip",
+			"minDays",
+		]);
+	});
+
+	it("sums up each plan's materials under its name", async () => {
+		const wrapper = await mountTable();
+		const summaries = wrapper
+			.findAll("tbody td[data-col-key=planUuid] div")
+			.map((d) => d.text());
+
+		expect(summaries).toEqual([
+			"1 red · 2 yellow · 5 materials",
+			"no materials",
+			"no materials",
+		]);
+	});
+
+	it("strips one dot per material on the axis and +n beyond it", async () => {
+		const wrapper = await mountTable();
+		const strip = wrapper.find("tbody td[data-col-key=strip]");
+
+		// C, DW, RAT, PT on 0..30; EXO beyond; FE produced
+		expect(strip.findAll(".relative button")).toHaveLength(4);
+		expect(strip.text()).toBe("+1");
+	});
+
+	it("moves the axis with the yellow threshold, without a reload", async () => {
+		const wrapper = await mountTable();
+		const header = () => wrapper.find('th[data-col-key="strip"]').text();
+		expect(header()).toContain("0 – 30 d");
+
+		usePreferences().burnDaysYellow.value = 5;
+		await nextTick();
+
+		expect(header()).toContain("0 – 15 d");
+		// PT and EXO are beyond 15 d now
+		const strip = wrapper.find("tbody td[data-col-key=strip]");
+		expect(strip.findAll(".relative button")).toHaveLength(3);
+		expect(strip.text()).toBe("+2");
 	});
 });
diff --git a/src/tests/features/fio/components/FIOBurnTable.test.ts b/src/tests/features/fio/components/FIOBurnTable.test.ts
index 4a81da029..bd3c1dc57 100644
--- a/src/tests/features/fio/components/FIOBurnTable.test.ts
+++ b/src/tests/features/fio/components/FIOBurnTable.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 
 import FIOBurnTable from "@/features/fio/components/FIOBurnTable.vue";
 import { mountComponent } from "@/tests/mountComponent";
@@ -14,16 +14,61 @@ const ROW: IFIOBurnTableElement = {
 	hasStorage: true,
 	minDays: 4,
 	burnMaterials: [
-		{ ticker: "RAT", input: 10, output: 0, delta: -10, stock: 40, exhaustion: 4 },
+		{
+			ticker: "RAT",
+			input: 10,
+			output: 0,
+			delta: -10,
+			stock: 40,
+			exhaustion: 4,
+		},
+		{
+			ticker: "DW",
+			input: 10,
+			output: 0,
+			delta: -10,
+			stock: 80,
+			exhaustion: 8,
+		},
+		{
+			ticker: "FE",
+			input: 0,
+			output: 5,
+			delta: 5,
+			stock: 0,
+			exhaustion: Infinity,
+		},
 	],
 };
 
+const MESSAGES = {
+	fio: {
+		burn: {
+			components: {
+				plans: {
+					runs_out_first: "runs out first, in {days} days",
+					more_under: "{n} more under {days} d",
+					produced: "{n} produced here",
+					produced_here: "produced here",
+				},
+			},
+		},
+	},
+};
+
+async function mountExpanded() {
+	const { wrapper } = await mountComponent(
+		FIOBurnTable,
+		{ burnTable: [ROW] },
+		{ messages: MESSAGES }
+	);
+	const button = wrapper.find("tbody button[aria-expanded]");
+	return { wrapper, button };
+}
+
 describe("FIOBurnTable", () => {
 	it("names the expand button and shows the materials when expanded", async () => {
-		const { wrapper } = await mountComponent(FIOBurnTable, {
-			burnTable: [ROW],
-		});
-		const button = wrapper.find("tbody button[aria-expanded]");
+		const { wrapper, button } = await mountExpanded();
 
 		expect(button.attributes("aria-label")).toBe(
 			"fio.burn.components.plans.expand_row"
@@ -36,4 +81,46 @@ describe("FIOBurnTable", () => {
 			wrapper.find('.p-data-table-expand td[data-col-key="stock"]').text()
 		).toBe("40");
 	});
+
+	it("says what runs out first and draws a runway per material", async () => {
+		const { wrapper, button } = await mountExpanded();
+		await button.trigger("click");
+
+		const expand = wrapper.find(".p-data-table-expand");
+		expect(expand.text()).toContain("runs out first, in 4.0 days");
+		expect(expand.text()).toContain("1 more under 10 d · 1 produced here");
+
+		const runways = expand.findAll('td[data-col-key="runway"] [role=img]');
+		expect(runways).toHaveLength(3);
+		// 4 of 30 days, red
+		expect(runways[0].find(".bg-negative").attributes("style")).toContain(
+			"width: 13.333"
+		);
+		expect(runways[2].text()).toBe("produced here");
+	});
+
+	it("drops consumption and production below 1600 px", async () => {
+		vi.stubGlobal(
+			"matchMedia",
+			vi.fn(() => ({
+				matches: false,
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
+			}))
+		);
+		const { wrapper, button } = await mountExpanded();
+		await button.trigger("click");
+
+		const keys = wrapper
+			.findAll(".p-data-table-expand th[data-col-key]")
+			.map((th) => th.attributes("data-col-key"));
+		expect(keys).toEqual([
+			"ticker",
+			"delta",
+			"stock",
+			"runway",
+			"exhaustion",
+		]);
+		vi.unstubAllGlobals();
+	});
 });
diff --git a/src/tests/features/fio/fioBurn.util.test.ts b/src/tests/features/fio/fioBurn.util.test.ts
new file mode 100644
index 000000000..be0bea0a3
--- /dev/null
+++ b/src/tests/features/fio/fioBurn.util.test.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+
+import { burnAxisMax, burnSummary } from "@/features/fio/fioBurn.util";
+
+const material = (ticker: string, exhaustion: number) => ({
+	ticker,
+	input: 1,
+	output: 0,
+	delta: -1,
+	stock: 0,
+	exhaustion,
+});
+
+describe("burnAxisMax", () => {
+	it("is 3 × the yellow threshold", () => {
+		expect(burnAxisMax(10)).toBe(30);
+		expect(burnAxisMax(5)).toBe(15);
+	});
+});
+
+describe("burnSummary", () => {
+	it("counts zones, consumed and produced materials and finds the first", () => {
+		const s = burnSummary(
+			[
+				material("DW", 7.99),
+				material("C", 3.04),
+				material("FE", Infinity),
+				material("RAT", 5.99),
+				material("PT", 26.67),
+			],
+			5,
+			10
+		);
+
+		expect(s).toMatchObject({
+			red: 1,
+			yellow: 2,
+			consumed: 4,
+			produced: 1,
+			moreUnderYellow: 2,
+		});
+		expect(s.first?.ticker).toBe("C");
+	});
+
+	it("has no first material when everything is produced", () => {
+		const s = burnSummary([material("FE", Infinity)], 5, 10);
+
+		expect(s.first).toBeUndefined();
+		expect(s.moreUnderYellow).toBe(0);
+	});
+});
diff --git a/src/tests/features/fio/useFIOBurn.test.ts b/src/tests/features/fio/useFIOBurn.test.ts
index e01ba5052..77bd59236 100644
--- a/src/tests/features/fio/useFIOBurn.test.ts
+++ b/src/tests/features/fio/useFIOBurn.test.ts
@@ -127,6 +127,7 @@ describe("useFIOBurn", async () => {
 
 		expect(result[0]).toStrictEqual({
 			minDays: 0,
+			burnMaterials: [],
 			planName: "Unnamed",
 			planUuid: "B",
 			planetId: "B",
diff --git a/src/tests/features/preferences/usePreferences.test.ts b/src/tests/features/preferences/usePreferences.test.ts
index aecbd5d8f..347066c29 100644
--- a/src/tests/features/preferences/usePreferences.test.ts
+++ b/src/tests/features/preferences/usePreferences.test.ts
@@ -216,7 +216,7 @@ describe("usePreferences", async () => {
 				getBurnDisplayClass(4).value.includes("bg-negative")
 			).toBeTruthy();
 			expect(
-				getBurnDisplayClass(4).value.includes("bg-positive")
+				getBurnDisplayClass(4).value.includes("bg-warning")
 			).toBeFalsy();
 		});
 
@@ -225,7 +225,7 @@ describe("usePreferences", async () => {
 
 			const result = getBurnDisplayClass(6).value;
 
-			expect(result.includes("bg-positive")).toBeTruthy();
+			expect(result.includes("bg-warning")).toBeTruthy();
 			expect(result.includes("bg-negative")).toBeFalsy();
 		});
 
diff --git a/src/tests/features/xit/components/XITBurnActionButton.test.ts b/src/tests/features/xit/components/XITBurnActionButton.test.ts
index 2468facb5..c973cf331 100644
--- a/src/tests/features/xit/components/XITBurnActionButton.test.ts
+++ b/src/tests/features/xit/components/XITBurnActionButton.test.ts
@@ -169,7 +169,7 @@ describe("XITBurnActionButton", () => {
 
 		// red up to 5 days, yellow up to 10
 		expect(burnClass).toEqual([
-			["text-black", "bg-positive", "px-2", "py-0.75"],
+			["text-black", "bg-warning", "px-2", "py-0.75"],
 			["text-white", "bg-negative", "px-2", "py-0.75"],
 			[],
 			[],
diff --git a/src/tests/ui/charts/PRunwayBar.test.ts b/src/tests/ui/charts/PRunwayBar.test.ts
new file mode 100644
index 000000000..39eb6cfd5
--- /dev/null
+++ b/src/tests/ui/charts/PRunwayBar.test.ts
@@ -0,0 +1,58 @@
+import { describe, it, expect } from "vitest";
+
+import PRunwayBar from "@/ui/charts/PRunwayBar.vue";
+import { mountComponent } from "@/tests/mountComponent";
+
+async function mountBar(value: number, note?: string) {
+	const { wrapper } = await mountComponent(PRunwayBar, {
+		value,
+		axis: 30,
+		red: 5,
+		yellow: 10,
+		label: "C",
+		note,
+	});
+	const [fill, redLine, yellowLine] = wrapper.findAll(
+		"[role=img] > div > div"
+	);
+	return { wrapper, fill, redLine, yellowLine };
+}
+
+describe("PRunwayBar", () => {
+	it("fills to days / axis with the zone colour and draws the thresholds", async () => {
+		const { wrapper, fill, redLine, yellowLine } = await mountBar(3);
+
+		expect(fill.attributes("style")).toBe("width: 10%;");
+		expect(fill.classes()).toContain("bg-negative");
+		expect(redLine.attributes("style")).toContain("left: 16.666");
+		expect(yellowLine.attributes("style")).toContain("left: 33.333");
+		expect(wrapper.text()).not.toContain("›");
+	});
+
+	it("is amber in the yellow zone and neutral beyond it", async () => {
+		expect((await mountBar(8)).fill.classes()).toContain("bg-warning");
+		expect((await mountBar(12)).fill.classes()).toContain(
+			"bg-(--chart-ink)/72"
+		);
+	});
+
+	it("stops at the axis with › beyond it", async () => {
+		const { wrapper, fill } = await mountBar(58);
+
+		expect(fill.attributes("style")).toBe("width: 100%;");
+		expect(wrapper.text()).toContain("›");
+		expect(wrapper.find("[role=img]").attributes("aria-label")).toBe(
+			"C, common.ui.runway.beyond"
+		);
+	});
+
+	it("shows the note instead of a bar", async () => {
+		const { wrapper, fill } = await mountBar(Infinity, "produced here");
+
+		expect(fill).toBeUndefined();
+		expect(wrapper.text()).toBe("produced here");
+		expect(wrapper.find("[role=img]").attributes("aria-label")).toBe(
+			"C: produced here"
+		);
+	});
+});
diff --git a/src/tests/ui/charts/PStripPlot.test.ts b/src/tests/ui/charts/PStripPlot.test.ts
new file mode 100644
index 000000000..732e28f43
--- /dev/null
+++ b/src/tests/ui/charts/PStripPlot.test.ts
@@ -0,0 +1,152 @@
+import { describe, it, expect, vi } from "vitest";
+import { h, nextTick } from "vue";
+
+import PStripPlot from "@/ui/charts/PStripPlot.vue";
+import { mountComponent } from "@/tests/mountComponent";
+
+// Types & Interfaces
+import type { IStripItem } from "@/ui/charts/charts.types";
+
+const ITEMS: IStripItem[] = [
+	{ key: "C", value: 3 },
+	{ key: "DW", value: 8 },
+	{ key: "PT", value: 26.7 },
+	{ key: "EXO", value: 40 },
+	{ key: "REP", value: 58.3 },
+	{ key: "FE", value: Infinity },
+];
+
+async function mountStrip(items = ITEMS) {
+	const { wrapper } = await mountComponent(
+		PStripPlot,
+		{
+			items,
+			axis: 30,
+			red: 5,
+			yellow: 10,
+			label: "Plan A",
+		},
+		{ attach: true }
+	);
+	return wrapper;
+}
+
+const tooltip = () => document.body.querySelector("[role=tooltip]");
+
+describe("PStripPlot", () => {
+	it("draws one dot per value on the axis, coloured by zone, and counts the rest", async () => {
+		const wrapper = await mountStrip();
+		const dots = wrapper.findAll("[role=group] .relative button");
+
+		expect(dots.map((d) => d.attributes("aria-label"))).toEqual([
+			"common.ui.strip.dot",
+			"common.ui.strip.dot",
+			"common.ui.strip.dot",
+		]);
+		expect(dots.map((d) => d.attributes("style"))).toEqual([
+			"left: 10%; top: 50%;",
+			expect.stringContaining("left: 26.666"),
+			"left: 89%; top: 50%;",
+		]);
+		expect(dots[0].classes()).toContain("bg-negative");
+		expect(dots[1].classes()).toContain("bg-warning");
+		expect(dots[2].classes()).toContain("bg-white/70");
+		expect(wrapper.text()).toContain("+2");
+	});
+
+	it("shows a dot's tooltip on hover and focus, with a ring", async () => {
+		const wrapper = await mountStrip();
+		const dot = wrapper.findAll("[role=group] .relative button")[0];
+
+		await dot.trigger("mouseenter");
+		expect(tooltip()).not.toBeNull();
+		expect(dot.classes()).toContain("ring-2");
+		expect(dot.attributes("aria-describedby")).toBe(tooltip()!.id);
+
+		await dot.trigger("mouseleave");
+		expect(tooltip()).toBeNull();
+
+		await dot.trigger("focus");
+		expect(tooltip()).not.toBeNull();
+		await dot.trigger("keydown", { key: "Escape" });
+		expect(tooltip()).toBeNull();
+	});
+
+	it("opens on tap and lists every value beyond the axis for +n", async () => {
+		const { wrapper } = await mountComponent(
+			{
+				render: () =>
+					h(
+						PStripPlot,
+						{
+							items: ITEMS,
+							axis: 30,
+							red: 5,
+							yellow: 10,
+							label: "A",
+						},
+						{
+							tooltip: ({ items }: { items: IStripItem[] }) =>
+								items.map((i) => h("i", i.key)),
+						}
+					),
+			},
+			{},
+			{ attach: true }
+		);
+
+		await wrapper.find("[role=group] > button").trigger("click");
+		expect(
+			[...tooltip()!.querySelectorAll("i")].map((i) => i.textContent)
+		).toEqual(["EXO", "REP"]);
+	});
+
+	it("lists every dot under the finger on a tap", async () => {
+		const { wrapper } = await mountComponent(
+			{
+				render: () =>
+					h(
+						PStripPlot,
+						{
+							items: ITEMS,
+							axis: 30,
+							red: 5,
+							yellow: 10,
+							label: "A",
+						},
+						{
+							tooltip: ({ items }: { items: IStripItem[] }) =>
+								items.map((i) => h("i", i.key)),
+						}
+					),
+			},
+			{},
+			{ attach: true }
+		);
+		const dots = wrapper.findAll("[role=group] .relative button");
+		// C at 10 px, DW at 30 px, PT far away
+		[10, 30, 200].forEach((x, i) =>
+			vi
+				.spyOn(dots[i].element, "getBoundingClientRect")
+				.mockReturnValue(new DOMRect(x - 5.5, 0, 11, 11))
+		);
+
+		const tap = new MouseEvent("click", { clientX: 14, clientY: 6 });
+		Object.defineProperty(tap, "pointerType", { value: "touch" });
+		dots[0].element.dispatchEvent(tap);
+		await nextTick();
+		await nextTick();
+
+		expect(
+			[...tooltip()!.querySelectorAll("i")].map((i) => i.textContent)
+		).toEqual(["C", "DW"]);
+		expect(dots[1].classes()).toContain("ring-2");
+		expect(dots[2].classes()).not.toContain("ring-2");
+	});
+
+	it("has no +n without values beyond the axis", async () => {
+		const wrapper = await mountStrip([{ key: "C", value: 3 }]);
+
+		expect(wrapper.find("[role=group] > button").exists()).toBe(false);
+	});
+});
diff --git a/src/tests/ui/charts/charts.util.test.ts b/src/tests/ui/charts/charts.util.test.ts
index 2950f3034..1ce1cfd4d 100644
--- a/src/tests/ui/charts/charts.util.test.ts
+++ b/src/tests/ui/charts/charts.util.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 
-import { topWithOther } from "@/ui/charts/charts.util";
+import { chartZone, stripLayout, topWithOther } from "@/ui/charts/charts.util";
 
 const label = (n: number) => `Other (${n})`;
 const item = (name: string, value: number) => ({ name, value });
@@ -45,3 +45,114 @@ describe("topWithOther", () => {
 		expect(items.map((i) => i.name)).toEqual(["A", "B"]);
 	});
 });
+
+describe("stripLayout", () => {
+	const items = (...values: number[]) =>
+		values.map((value, i) => ({ key: `M${i}`, value }));
+
+	it("has one dot per finite value on the axis and counts the rest as over", () => {
+		const { dots, over } = stripLayout(
+			items(3, 40, 12, Infinity, 30, 31),
+			30
+		);
+
+		expect(dots.map((d) => d.value)).toEqual([3, 12, 30]);
+		expect(dots.map((d) => d.pct)).toEqual([10, 40, 100]);
+		expect(over.map((o) => o.value)).toEqual([31, 40]);
+	});
+
+	it("splits values closer than 1.2 d into an upper and a lower lane", () => {
+		const { dots } = stripLayout(items(8, 3, 3.5, 20, 4.2, 9.1), 30);
+
+		expect(dots.map((d) => [d.value, d.lane])).toEqual([
+			[3, "up"],
+			[3.5, "down"],
+			[4.2, "up"],
+			[8, "up"],
+			[9.1, "down"],
+			[20, "mid"],
+		]);
+		// neighbours closer than 1.2 d never share a lane
+		dots.slice(1).forEach((d, i) => {
+			if (d.value - dots[i].value < 1.2)
+				expect(d.lane).not.toBe(dots[i].lane);
+		});
+	});
+
+	it("keeps values 1.2 d apart in the middle lane", () => {
+		const { dots } = stripLayout(items(1, 2.2), 30);
+
+		expect(dots.map((d) => d.lane)).toEqual(["mid", "mid"]);
+	});
+});
+
+describe("chartZone", () => {
+	it("is red up to red, yellow up to yellow, inclusive", () => {
+		expect([5, 5.1, 10, 10.1].map((v) => chartZone(v, 5, 10))).toEqual([
+			"red",
+			"yellow",
+			"yellow",
+			"none",
+		]);
+	});
+});
+
+describe("stripLayout gap", () => {
+	it("scales the lane gap with the axis, about one dot wide", () => {
+		const values = [
+			{ key: "A", value: 10 },
+			{ key: "B", value: 13 },
+		];
+
+		// 3 d apart: far enough on 30 d, a dot apart on 90 d
+		expect(stripLayout(values, 30).dots.map((d) => d.lane)).toEqual([
+			"mid",
+			"mid",
+		]);
+		expect(stripLayout(values, 90).dots.map((d) => d.lane)).toEqual([
+			"up",
+			"down",
+		]);
+	});
+});
+
+describe("stripLayout overlap", () => {
+	// two dots touch when they share a lane (a middle dot blocks both) and
+	// sit less than one gap apart
+	function touching(values: number[], axis = 30, gap = 1.2) {
+		const { dots } = stripLayout(
+			values.map((value, i) => ({ key: `M${i}`, value })),
+			axis,
+			gap
+		);
+		const at = (pct: number) => (pct / 100) * axis;
+		return dots.flatMap((a, i) =>
+			dots
+				.slice(i + 1)
+				.filter(
+					(b) =>
+						(a.lane === b.lane ||
+							a.lane === "mid" ||
+							b.lane === "mid") &&
+						Math.abs(at(a.pct) - at(b.pct)) < gap - 1e-9
+				)
+				.map((b) => `${a.key}/${b.key}`)
+		);
+	}
+
+	it("dodges many equal values instead of stacking them", () => {
+		const { dots } = stripLayout(
+			Array.from({ length: 8 }, (_, i) => ({ key: `Z${i}`, value: 0 })),
+			30
+		);
+
+		expect(new Set(dots.map((d) => `${d.lane}@${d.pct}`)).size).toBe(8);
+		expect(touching(Array(8).fill(0))).toEqual([]);
+	});
+
+	it("never lets dots touch, whatever the values", () => {
+		expect(
+			touching([0, 0, 0, 0, 0.5, 1.4, 1.5, 3, 3.1, 3.2, 3.3, 7, 20, 21.8])
+		).toEqual([]);
+	});
+});
diff --git a/src/ui/charts/PRunwayBar.vue b/src/ui/charts/PRunwayBar.vue
new file mode 100644
index 000000000..a5c1bb4ba
--- /dev/null
+++ b/src/ui/charts/PRunwayBar.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+	import { computed } from "vue";
+	import { useI18n } from "vue-i18n";
+
+	const { t } = useI18n();
+
+	// Util
+	import { chartZone } from "@/ui/charts/charts.util";
+
+	// Types & Interfaces
+	import type { IChartZone } from "@/ui/charts/charts.types";
+
+	// a bar to min(value, axis) with dashed red and yellow threshold lines;
+	// "›" past the axis. With a note (e.g. "produced here") the track shows
+	// the note instead of a bar.
+	const {
+		value,
+		axis,
+		red,
+		yellow,
+		label,
+		note = "",
+	} = defineProps<{
+		value: number;
+		axis: number;
+		red: number;
+		yellow: number;
+		label: string;
+		note?: string;
+	}>();
+
+	const FILL_CLASS: Record<IChartZone, string> = {
+		red: "bg-negative",
+		yellow: "bg-warning",
+		none: "bg-(--chart-ink)/72",
+	};
+
+	const pct = (v: number) =>
+		axis > 0 ? (Math.min(Math.max(v, 0), axis) / axis) * 100 : 0;
+	const beyond = computed(() => value > axis);
+</script>
+
+<template>
+	<div
+		role="img"
+		:aria-label="
+			note
+				? `${label}: ${note}`
+				: beyond
+					? `${label}, ${t('common.ui.runway.beyond')}`
+					: label
+		"
+		class="flex items-center gap-x-1 min-w-24">
+		<div
+			class="relative grow rounded-full bg-white/10"
+			:class="note ? 'h-4' : 'h-2'">
+			<span
+				v-if="note"
+				class="absolute inset-y-0 left-2 flex items-center text-xs text-muted leading-none">
+				{{ note }}
+			</span>
+			<template v-else>
+				<div
+					class="h-full rounded-full"
+					:class="FILL_CLASS[chartZone(value, red, yellow)]"
+					:style="{ width: `${pct(value)}%` }" />
+				<div
+					class="absolute -inset-y-1 border-l border-dashed border-negative"
+					:style="{ left: `${pct(red)}%` }" />
+				<div
+					class="absolute -inset-y-1 border-l border-dashed border-warning"
+					:style="{ left: `${pct(yellow)}%` }" />
+			</template>
+		</div>
+		<span class="w-2 text-xs text-muted leading-none" aria-hidden="true">
+			{{ beyond && !note ? "›" : "" }}
+		</span>
+	</div>
+</template>
diff --git a/src/ui/charts/PStripPlot.vue b/src/ui/charts/PStripPlot.vue
new file mode 100644
index 000000000..d05936777
--- /dev/null
+++ b/src/ui/charts/PStripPlot.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+	import {
+		computed,
+		nextTick,
+		onBeforeUnmount,
+		onMounted,
+		ref,
+		shallowRef,
+		useId,
+	} from "vue";
+	import { useI18n } from "vue-i18n";
+
+	const { t } = useI18n();
+
+	// Util
+	import { createFloating } from "@/ui/popper";
+	import { formatNumber } from "@/util/numbers";
+	import { tooltipConfig } from "@/ui/styles";
+	import { chartZone, stripLayout } from "@/ui/charts/charts.util";
+
+	// Types & Interfaces
+	import type { IChartZone, IStripItem } from "@/ui/charts/charts.types";
+
+	// one dot per value on a 0..axis line with red and yellow zones; values
+	// beyond the axis are counted in "+n". The tooltip slot gets the items
+	// of the hovered, focused or tapped dot (one) or of "+n" (all beyond).
+	const { items, axis, red, yellow, label } = defineProps<{
+		items: IStripItem[];
+		axis: number;
+		red: number;
+		yellow: number;
+		label: string;
+	}>();
+
+	defineSlots<{
+		tooltip(props: { items: IStripItem[] }): unknown;
+	}>();
+
+	// lanes split by at least a dot (11 px) and a pixel, in days on this strip
+	const DOT_GAP_PX = 12;
+	const track = ref<HTMLElement | null>(null);
+	const trackWidth = ref(0);
+	let resize: ResizeObserver | undefined;
+	onMounted(() => {
+		if (typeof ResizeObserver === "undefined" || !track.value) return;
+		resize = new ResizeObserver(([entry]) => {
+			trackWidth.value = entry.contentRect.width;
+		});
+		resize.observe(track.value);
+	});
+
+	const layout = computed(() =>
+		stripLayout(
+			items,
+			axis,
+			Math.max(
+				axis / 25,
+				trackWidth.value ? (DOT_GAP_PX * axis) / trackWidth.value : 0
+			)
+		)
+	);
+	const zoneWidth = (to: number) =>
+		`${(Math.min(Math.max(to, 0), axis) / axis) * 100}%`;
+
+	const DOT_CLASS: Record<IChartZone, string> = {
+		red: "bg-negative",
+		yellow: "bg-warning",
+		none: "bg-white/70",
+	};
+	const LANE_TOP = { up: "30%", mid: "50%", down: "70%" } as const;
+
+	// "+n" uses this key
+	const OVER = "\u0000over";
+	// a finger covers this square (px); a tap lists every dot under it
+	const FINGER_PX = 45;
+	const tipId = useId();
+	const active = ref<string | null>(null);
+	const activeKeys = ref<string[]>([]);
+	const activeItems = computed<IStripItem[]>(() =>
+		active.value === OVER
+			? layout.value.over
+			: layout.value.dots.filter((d) => activeKeys.value.includes(d.key))
+	);
+	const tooltipRef = ref<HTMLElement | null>(null);
+	const anchor = shallowRef<HTMLElement | null>(null);
+	let floating: { destroy: () => void } | null = null;
+
+	async function show(key: string, event: Event, keys = [key]) {
+		const id = keys.join("\u0000");
+		if (active.value === id) return;
+		hide();
+		active.value = id;
+		activeKeys.value = keys;
+		anchor.value = event.currentTarget as HTMLElement;
+		await nextTick();
+		if (anchor.value && tooltipRef.value)
+			floating = createFloating(anchor.value, tooltipRef.value, "top", 8);
+	}
+
+	// with a mouse or the keyboard a dot shows itself; dots sit closer than a
+	// finger, so a tap shows every dot under it instead of a neighbour's
+	function tap(key: string, event: MouseEvent) {
+		const type = (event as PointerEvent).pointerType;
+		const touch =
+			type === "touch" ||
+			(type === undefined &&
+				window.matchMedia?.("(pointer: coarse)").matches === true);
+		if (!touch || !track.value) return show(key, event);
+
+		const near = [
+			...track.value.querySelectorAll<HTMLElement>("[data-key]"),
+		]
+			.filter((el) => {
+				const r = el.getBoundingClientRect();
+				return (
+					Math.abs(r.left + r.width / 2 - event.clientX) <=
+						FINGER_PX / 2 &&
+					Math.abs(r.top + r.height / 2 - event.clientY) <=
+						FINGER_PX / 2
+				);
+			})
+			.map((el) => el.dataset.key!);
+		return show(key, event, near.includes(key) ? near : [key, ...near]);
+	}
+
+	function hide() {
+		floating?.destroy();
+		floating = null;
+		active.value = null;
+		activeKeys.value = [];
+	}
+
+	onBeforeUnmount(() => {
+		resize?.disconnect();
+		hide();
+	});
+</script>
+
+<template>
+	<div class="flex items-center gap-x-2" role="group" :aria-label="label">
+		<!-- inset by half a dot, so dots at 0 and at the axis end stay inside -->
+		<div class="grow min-w-28 h-7 px-1.5">
+			<div ref="track" class="relative h-full">
+				<div
+					class="absolute inset-y-0 left-0 bg-negative/15"
+					:style="{ width: zoneWidth(red) }" />
+				<div
+					class="absolute inset-y-0 bg-warning/15"
+					:style="{
+						left: zoneWidth(red),
+						width: `calc(${zoneWidth(yellow)} - ${zoneWidth(red)})`,
+					}" />
+				<div class="absolute inset-x-0 top-1/2 h-px bg-white/20" />
+				<button
+					v-for="dot in layout.dots"
+					:key="dot.key"
+					:data-key="dot.key"
+					type="button"
+					class="absolute size-2.75 -translate-1/2 rounded-full pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-11.25 pointer-coarse:after:-translate-1/2 pointer-coarse:after:content-['']"
+					:class="[
+						DOT_CLASS[chartZone(dot.value, red, yellow)],
+						activeKeys.includes(dot.key)
+							? 'ring-2 ring-white z-10'
+							: '',
+					]"
+					:style="{ left: `${dot.pct}%`, top: LANE_TOP[dot.lane] }"
+					:aria-label="
+						t('common.ui.strip.dot', {
+							label: dot.key,
+							value: formatNumber(dot.value, 1),
+						})
+					"
+					:aria-describedby="
+						activeKeys.includes(dot.key) ? tipId : undefined
+					"
+					@mouseenter="show(dot.key, $event)"
+					@mouseleave="hide"
+					@focus="show(dot.key, $event)"
+					@blur="hide"
+					@click="tap(dot.key, $event)"
+					@keydown.esc="hide" />
+			</div>
+		</div>
+		<button
+			v-if="layout.over.length"
+			type="button"
+			class="shrink-0 min-w-7 min-h-7 pointer-coarse:min-w-11 pointer-coarse:min-h-11 text-xs text-muted text-right hover:text-white"
+			:class="active === OVER ? 'text-white' : ''"
+			:aria-label="t('common.ui.strip.over', { n: layout.over.length })"
+			:aria-describedby="active === OVER ? tipId : undefined"
+			@mouseenter="show(OVER, $event)"
+			@mouseleave="hide"
+			@focus="show(OVER, $event)"
+			@blur="hide"
+			@click="show(OVER, $event)"
+			@keydown.esc="hide">
+			+{{ layout.over.length }}
+		</button>
+		<span v-else class="shrink-0 size-7 pointer-coarse:size-11" />
+	</div>
+
+	<Teleport v-if="active" to="body">
+		<div
+			:id="tipId"
+			ref="tooltipRef"
+			role="tooltip"
+			class="z-9999 pointer-events-none"
+			:class="tooltipConfig.tooltip">
+			<slot name="tooltip" :items="activeItems" />
+		</div>
+	</Teleport>
+</template>
diff --git a/src/ui/charts/charts.types.ts b/src/ui/charts/charts.types.ts
index 418faf9fe..9c6056d8b 100644
--- a/src/ui/charts/charts.types.ts
+++ b/src/ui/charts/charts.types.ts
@@ -21,3 +21,18 @@ export interface IChartTheme {
 	/** 1 inputs, 2 workforce, 3 degradation, 4 shipping */
 	costPart: (slot: 1 | 2 | 3 | 4) => string;
 }
+
+export interface IStripItem {
+	/** unique per strip, e.g. a material ticker */
+	key: string;
+	value: number;
+}
+
+export interface IStripDot extends IStripItem {
+	/** position on the axis, 0..100 */
+	pct: number;
+	/** close neighbours split up and down so they never overlap */
+	lane: "mid" | "up" | "down";
+}
+
+export type IChartZone = "red" | "yellow" | "none";
diff --git a/src/ui/charts/charts.util.ts b/src/ui/charts/charts.util.ts
index eb5544756..4b46ac86e 100644
--- a/src/ui/charts/charts.util.ts
+++ b/src/ui/charts/charts.util.ts
@@ -1,4 +1,10 @@
-import type { IChartBarItem, IChartTheme } from "@/ui/charts/charts.types";
+import type {
+	IChartBarItem,
+	IChartTheme,
+	IChartZone,
+	IStripDot,
+	IStripItem,
+} from "@/ui/charts/charts.types";
 
 /**
  * Sorts items by absolute value, keeps the largest `top` and sums the
@@ -65,3 +71,78 @@ export function chartScale(theme: IChartTheme) {
 		ticks: { color: theme.muted, font: { size: 12 } },
 	};
 }
+
+/**
+ * Lays out a strip plot: every finite value up to `axis` becomes a dot,
+ * sorted, never overlapping. Neighbours closer than `minGap` split between an
+ * upper and a lower lane, single dots stay in the middle. Values beyond the
+ * axis are returned as `over`.
+ * @author jplacht
+ *
+ * @param {IStripItem[]} items values, any order; infinite ones are skipped
+ * @param {number} axis axis end, the strip runs 0..axis
+ * @param {number} minGap neighbours closer than this split into lanes,
+ * by default 1/25 of the axis (1.2 d on 30 d), about one dot wide
+ * @returns {{ dots: IStripDot[], over: IStripItem[] }} dots and the rest
+ */
+export function stripLayout(
+	items: IStripItem[],
+	axis: number,
+	minGap = axis / 25
+): { dots: IStripDot[]; over: IStripItem[] } {
+	const finite = items
+		.filter((i) => Number.isFinite(i.value))
+		.sort((a, b) => a.value - b.value);
+	const inside = finite.filter((i) => i.value <= axis);
+
+	// close dots take the first of up / down whose last dot is minGap away;
+	// when both are taken (many equal values, e.g. 0 d) the dot moves right
+	// to minGap after the nearer lane's last one. A middle dot blocks both.
+	const last = { up: -Infinity, down: -Infinity };
+	const dots: IStripDot[] = inside.map((item, idx) => {
+		const x = Math.max(item.value, 0);
+		const close =
+			x - Math.max(last.up, last.down) < minGap ||
+			(idx < inside.length - 1 && inside[idx + 1].value - x < minGap);
+
+		let lane: IStripDot["lane"] = "mid";
+		let at = x;
+		if (!close) {
+			last.up = last.down = x;
+		} else {
+			if (x - last.up >= minGap) lane = "up";
+			else if (x - last.down >= minGap) lane = "down";
+			else lane = last.up <= last.down ? "up" : "down";
+			at = Math.max(x, last[lane] + minGap);
+			last[lane] = at;
+		}
+
+		return {
+			...item,
+			// ponytail: a dodged run can reach the axis end and pile up there
+			pct: axis > 0 ? (Math.min(at, axis) / axis) * 100 : 0,
+			lane,
+		};
+	});
+
+	return { dots, over: finite.filter((i) => i.value > axis) };
+}
+
+/**
+ * Zone of a days-left value: red up to `red`, yellow up to `yellow`.
+ * @author jplacht
+ *
+ * @param {number} value days left
+ * @param {number} red red threshold, inclusive
+ * @param {number} yellow yellow threshold, inclusive
+ * @returns {IChartZone} zone
+ */
+export function chartZone(
+	value: number,
+	red: number,
+	yellow: number
+): IChartZone {
+	if (value <= red) return "red";
+	if (value <= yellow) return "yellow";
+	return "none";
+}
diff --git a/src/ui/components/PDataTable.vue b/src/ui/components/PDataTable.vue
index d70fd78bc..023e09225 100644
--- a/src/ui/components/PDataTable.vue
+++ b/src/ui/components/PDataTable.vue
@@ -711,8 +711,15 @@
 		@apply inline-flex items-center justify-center size-6 rounded-sm cursor-pointer align-middle;
 	}
 
+	/* the expand and empty boxes are the box's width themselves: their cell
+	   adds no padding, or the row would be wider than the box */
+	.p-data-table-expanded > td,
+	.p-data-table-empty-row > td {
+		@apply p-0;
+	}
+
 	.p-data-table-expand {
-		@apply sticky left-0 overflow-hidden px-2.5 py-1.25 box-border;
+		@apply sticky left-0 overflow-hidden px-5 py-2.5 box-border;
 	}
 
 	/* the summary row continues the body: a border above, the row colour */
diff --git a/src/views/fio/FIOBurnView.vue b/src/views/fio/FIOBurnView.vue
index d7827236b..c3c9c2838 100644
--- a/src/views/fio/FIOBurnView.vue
+++ b/src/views/fio/FIOBurnView.vue
@@ -216,7 +216,7 @@
 					</div>
 
 					<div
-						class="grow grid grid-cols-1 xl:grid-cols-[40%_auto] gap-3 divide-x divide-white/10 child:px-6 child:py-3">
+						class="grow grid grid-cols-1 content-start xl:content-stretch xl:grid-cols-[40%_minmax(0,1fr)] gap-3 divide-x divide-white/10 child:min-w-0 child:px-6 child:py-3">
 						<div>
 							<div class="grid grid-cols-1 xl:grid-cols-2 gap-3">
 								<div>

From 2a5927bf5665f8e402ecde469298b6227dc94a2d Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Tue, 13 Oct 2026 23:15:05 +0200
Subject: [PATCH 2/2] fix(ui): strip plot tooltip uses the kit's tooltip
 z-index

Z_TOOLTIP from src/ui/zIndex.ts (merged from main with the UI kit
harmonisation) instead of a hard-coded z-9999.

Spec: specs/2026-10-13-charts-09-fio-burn-runway.md

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/ui/charts/PStripPlot.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/ui/charts/PStripPlot.vue b/src/ui/charts/PStripPlot.vue
index d05936777..fa2b4ab9d 100644
--- a/src/ui/charts/PStripPlot.vue
+++ b/src/ui/charts/PStripPlot.vue
@@ -16,6 +16,7 @@
 	import { createFloating } from "@/ui/popper";
 	import { formatNumber } from "@/util/numbers";
 	import { tooltipConfig } from "@/ui/styles";
+	import { Z_TOOLTIP } from "@/ui/zIndex";
 	import { chartZone, stripLayout } from "@/ui/charts/charts.util";
 
 	// Types & Interfaces
@@ -204,7 +205,8 @@
 			:id="tipId"
 			ref="tooltipRef"
 			role="tooltip"
-			class="z-9999 pointer-events-none"
+			class="pointer-events-none"
+			:style="{ zIndex: Z_TOOLTIP }"
 			:class="tooltipConfig.tooltip">
 			<slot name="tooltip" :items="activeItems" />
 		</div>