fix(planning): complete explanation and trace behavior (#46)

src/app/components/calendar-year/calendar-year.html

@@ -137,7 +137,7 @@
 	}
 
 	@if (selectedExplanation(); as selected) {
-		<details class="plan-details" (toggle)="togglePlanDetails($event)">
+		<details class="plan-details" open (toggle)="togglePlanDetails($event)">
 			<summary>{{ tr().planning.whyPlacement }}</summary>
 			<section class="placement-explanation" aria-labelledby="placement-explanation-title">
 				<header class="explanation-heading">
@@ -256,9 +256,7 @@
 							{{ selected.remainingQuantity }}
 							@if (selected.remainingBalance) {
 								<br /><small>
-									{{
-										formatIdentifier(selected.remainingBalance.classification)
-									}}
+									{{ formatIdentifier(selected.remainingBalance.classification) }}
 									·
 									{{ selected.remainingBalance.reason.message }}
 								</small>
@@ -396,12 +394,13 @@
 										: tr().planning.ineligible
 								}}
 							</p>
-							@if (result.historicalStatus) {
-								<p>
-									<strong>{{ tr().planning.historical }}:</strong>
-									{{ traceStatusLabel(result.historicalStatus) }}
-								</p>
-							}
+							<p>
+								<strong>{{ tr().planning.historical }}:</strong>
+								{{
+									dateStatuses()[result.date]?.label ??
+										traceStatusLabel(result.historicalStatus ?? 'not-examined')
+								}}
+							</p>
 							@if (result.reason) {
 								<p>
 									<strong>{{ tr().planning.reason }}:</strong>
@@ -498,15 +497,63 @@
 					<span class="legend-symbol" aria-hidden="true">◎</span
 					>{{ tr().planning.currentPlacement }}
 				</li>
+			}
+			@if (counterfactual()) {
 				<li>
-					<span class="legend-symbol" aria-hidden="true">✓</span
+					<span class="legend-symbol hypothetical-symbol" aria-hidden="true">~✓</span
 					>{{ tr().planning.eligible }}
 				</li>
 				<li>
-					<span class="legend-symbol" aria-hidden="true">×</span
+					<span class="legend-symbol hypothetical-symbol" aria-hidden="true">~×</span
 					>{{ tr().planning.ineligible }}
 				</li>
 			}
+			@if (traceReplay()) {
+				<li>
+					<span class="legend-symbol" aria-hidden="true">✓</span
+					>{{ traceStatusLabel('chosen') }}
+				</li>
+				<li>
+					<span class="legend-symbol" aria-hidden="true">−</span
+					>{{ traceStatusLabel('evaluated-rejected') }}
+				</li>
+				<li>
+					<span class="legend-symbol" aria-hidden="true">⌁</span
+					>{{ traceStatusLabel('pruned') }}
+				</li>
+				<li>
+					<span class="legend-symbol" aria-hidden="true">?</span
+					>{{ traceStatusLabel('not-examined') }}
+				</li>
+				<li>
+					<span class="legend-symbol" aria-hidden="true">×</span
+					>{{ traceStatusLabel('ineligible') }}
+				</li>
+				<li>
+					<span class="legend-symbol" aria-hidden="true">+</span
+					>{{ traceChangeLabel('added') }}
+				</li>
+				<li>
+					<span class="legend-symbol" aria-hidden="true">←</span
+					>{{ traceChangeLabel('moved-from') }}
+				</li>
+				<li>
+					<span class="legend-symbol" aria-hidden="true">→</span
+					>{{ traceChangeLabel('moved-to') }}
+				</li>
+				<li>
+					<span class="legend-symbol" aria-hidden="true">−</span
+					>{{ traceChangeLabel('removed') }}
+				</li>
+				<li>
+					<span class="legend-symbol" aria-hidden="true">≈</span
+					>{{ traceChangeLabel('shared') }}
+				</li>
+				<li>
+					<span class="legend-symbol" aria-hidden="true">=</span
+					>{{ traceChangeLabel('unchanged') }}
+				</li>
+			}
 		</ul>
 	</div>