From a429721c6e2ffee2466db70f64ece502f6e3a2bd Mon Sep 17 00:00:00 2001
From: otivm <sandor@factoryfouroh.info>
Date: Sun, 3 May 2026 15:02:02 +0000
Subject: [PATCH] iv: add ParameterRow, CostRow, DriftEntry sub-components

---
 src/components/CostRow.jsx      | 28 +++++++++++++++++++++
 src/components/DriftEntry.jsx   | 26 ++++++++++++++++++++
 src/components/ParameterRow.jsx | 43 +++++++++++++++++++++++++++++++++
 3 files changed, 97 insertions(+)
 create mode 100644 src/components/CostRow.jsx
 create mode 100644 src/components/DriftEntry.jsx
 create mode 100644 src/components/ParameterRow.jsx

diff --git a/src/components/CostRow.jsx b/src/components/CostRow.jsx
new file mode 100644
index 0000000..cdd2dca
--- /dev/null
+++ b/src/components/CostRow.jsx
@@ -0,0 +1,28 @@
+// CostRow.jsx — OTIVM-IV
+// Renders one cost line within a cost table.
+// Used by Section.jsx type "cost-table".
+//
+// Props:
+//   label   — cost item name (e.g. 'OTIVM access')
+//   amount  — amount string (e.g. '2.00 dn')
+//   period  — period label (e.g. 'per otium cycle')
+//   source  — academic source or 'simulator calibration'
+//   conf    — confidence: HIGH | MEDIUM | LOW
+//   debit   — boolean, true = red (outgoing), false = green (incoming)
+
+export default function CostRow({ label, amount, period, source, conf, debit = true }) {
+  return (
+    <tr>
+      <td>
+        {label}
+        {period && <div className="source">{period}</div>}
+      </td>
+      <td className={`amount ${debit ? 'debit' : 'credit'}`}>
+        {debit ? '−' : '+'}{amount}
+      </td>
+      <td>
+        <span className="source">{source} · {conf}</span>
+      </td>
+    </tr>
+  )
+}
diff --git a/src/components/DriftEntry.jsx b/src/components/DriftEntry.jsx
new file mode 100644
index 0000000..ce6c75e
--- /dev/null
+++ b/src/components/DriftEntry.jsx
@@ -0,0 +1,26 @@
+// DriftEntry.jsx — OTIVM-IV
+// Renders one entry from parameter_drift_log.
+// Used by Section.jsx type "drift-log".
+//
+// Props:
+//   param     — parameter display name (e.g. 'Liquiditas')
+//   delta     — change string (e.g. '+12' or '−8')
+//   trigger   — trigger_type from drift log
+//               (dispatch_cost | venture_complete | interval_complete |
+//                otium_access_fee | personal_maintenance | officia_obligation |
+//                exchange_complete)
+//   note      — delta_note from drift log (e.g. 'Olive route')
+//   positive  — boolean, true = green delta, false = red delta
+
+export default function DriftEntry({ param, delta, trigger, note, positive }) {
+  return (
+    <div className="otivm-drift-entry">
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
+        <span className="otivm-drift-param">{param}</span>
+        <span className={positive ? 'otivm-drift-pos' : 'otivm-drift-neg'}>{delta}</span>
+      </div>
+      <div className="otivm-drift-trigger">{trigger}</div>
+      {note && <div className="otivm-drift-note">{note}</div>}
+    </div>
+  )
+}
diff --git a/src/components/ParameterRow.jsx b/src/components/ParameterRow.jsx
new file mode 100644
index 0000000..8878aae
--- /dev/null
+++ b/src/components/ParameterRow.jsx
@@ -0,0 +1,43 @@
+// ParameterRow.jsx — OTIVM-IV
+// Renders one row from actor_parameters.
+// Used by Section.jsx type "parameter-list".
+//
+// Props:
+//   token      — parameter_token string (e.g. 'liquiditas')
+//   name       — display name (e.g. 'Capital')
+//   true_val   — value_true from actor_parameters
+//   perceived  — value_perceived from actor_parameters
+//   conf       — confidence_tag (measured|indicated|inferred|estimated|unknown)
+//
+// Shows a gap indicator when true_val !== perceived.
+// Band colour is derived from perceived value.
+
+export default function ParameterRow({ token, name, true_val, perceived, conf }) {
+  const gap = true_val !== perceived
+
+  return (
+    <div className="otivm-param-row">
+      <div>
+        <div className="otivm-param-token">{token}</div>
+        <div className="otivm-param-name">{name}</div>
+      </div>
+      <div style={{ textAlign: 'right' }}>
+        <span className={`otivm-band ${bandClass(perceived)}`}>{perceived}</span>
+        {gap && (
+          <div style={{ marginTop: '3px' }}>
+            <span className="otivm-band otivm-band-gap">true: {true_val}</span>
+          </div>
+        )}
+        <span className="otivm-param-conf">{conf}</span>
+      </div>
+    </div>
+  )
+}
+
+function bandClass(val) {
+  if (!val) return 'otivm-band-low'
+  const v = val.toLowerCase()
+  if (v === 'high' || v === 'distinguished') return 'otivm-band-high'
+  if (v === 'medium' || v === 'neutral')     return 'otivm-band-medium'
+  return 'otivm-band-low'
+}