Right pane tabs Jobs/Planes market + 5 new plane types with tech-spec panels + sell-plane cargo guard (ISS-047 part A)

components/RightPane.tsx

@@ -2,7 +2,8 @@
 
 import { useState } from 'react';
 import type { PackageState, PlaneState, StateSnapshot } from '@/lib/game/state';
-import { PLANE_TYPES } from '@/lib/game/catalog';
+import { PLANE_TYPES, SELL_FRACTION } from '@/lib/game/catalog';
+import { maxRangeKm } from '@/lib/sim/movement';
 import { formatCash, formatDeadlineRelative } from '@/lib/format';
 import { useGameAction } from '@/lib/useGameAction';
 import type { HoverTarget } from './hoverTypes';
@@ -119,6 +120,9 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
   const [buyModelId, setBuyModelId] = useState<string | null>(null);
   const [sellPlaneId, setSellPlaneId] = useState<string | null>(null);
 
+  // v0.28.0 (ISS-047): Jobs / Planes market tabs — the inactive tab's content unmounts.
+  const [activeTab, setActiveTab] = useState<'jobs' | 'planes'>('jobs');
+
   // ISS-023 (v0.21.0): the Relocate row moved to the left pane — it belongs with everything else
   // about our planes, not in the market. Its state + /api/airports fetch went with it.
   // ISS-035 (v0.23.0): same for the Refuel-to-full row — its state + derived values moved to the
@@ -150,6 +154,31 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
     <aside data-testid="right-pane" className="pane right-pane">
       <h2 className="pane-title">Jobs &amp; Market</h2>
 
+      {/* v0.28.0 (ISS-047): Jobs / Planes market tabs — the inactive tab's content unmounts. */}
+      <div className="pane-tabs" role="tablist">
+        <button
+          type="button"
+          data-testid="tab-jobs"
+          role="tab"
+          aria-selected={activeTab === 'jobs'}
+          className="tab-btn"
+          onClick={() => setActiveTab('jobs')}
+        >
+          Jobs
+        </button>
+        <button
+          type="button"
+          data-testid="tab-planes-market"
+          role="tab"
+          aria-selected={activeTab === 'planes'}
+          className="tab-btn"
+          onClick={() => setActiveTab('planes')}
+        >
+          Planes market
+        </button>
+      </div>
+
+      {activeTab === 'jobs' && (
       <section className="pane-section">
         <h3 className="pane-heading">Packages</h3>
         {open.length === 0 ? (
@@ -195,9 +224,11 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
           </ul>
         )}
       </section>
+      )}
 
       {/* ISS-021 (v0.20.0): the On board section moved to the left pane (between Fleet and Time). */}
 
+      {activeTab === 'planes' && (
       <section className="pane-section">
         <h3 className="pane-heading">Market</h3>
 
@@ -261,7 +292,46 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
 
         {/* ISS-023 (v0.21.0): the Relocate row moved to the left pane's "Relocate" section. */}
         {/* ISS-035 (v0.23.0): the Refuel-to-full row moved to the left pane's "Refuel" section, next to Relocate. */}
+
+        {/* v0.28.0 (ISS-047): tech-spec panel per catalog type — progression order (price ascending).
+            All values come from the snapshot's catalog; max range is the weighted-model closed form. */}
+        {[...catalog].sort((a, b) => a.price - b.price).map((e) => (
+          <div key={e.model} className="plane-type-card" data-testid={`plane-type-${e.model}`}>
+            <h4 className="plane-type-name">{e.label}</h4>
+            <div className="stat-row">
+              <span>Buy</span>
+              <strong>{formatCash(e.price)}</strong>
+            </div>
+            <div className="stat-row">
+              <span>Sell</span>
+              <strong>{formatCash(Math.round(e.price * SELL_FRACTION * 100) / 100)}</strong>
+            </div>
+            <div className="stat-row">
+              <span>Payload</span>
+              <strong>{(e.maxPayloadKg / 1000).toFixed(1)}t</strong>
+            </div>
+            <div className="stat-row">
+              <span>Cruise speed</span>
+              <strong>{e.speedKmh} km/h</strong>
+            </div>
+            <div className="stat-row">
+              <span>Fuel burn</span>
+              <strong>{e.burnPerKm} L/km</strong>
+            </div>
+            <div className="stat-row">
+              <span>Max fuel</span>
+              <strong>{e.maxFuel} L</strong>
+            </div>
+            <div className="stat-row">
+              <span>Max range</span>
+              <strong data-testid={`plane-type-range-${e.model}`}>
+                {Math.round(maxRangeKm(e.burnPerKm, e.emptyWeightKg, e.maxFuel))} km
+              </strong>
+            </div>
+          </div>
+        ))}
       </section>
+      )}
 
       {actionError && <p data-testid="right-error" className="pane-error">{actionError}</p>}
     </aside>