iv: add ParameterRow, CostRow, DriftEntry sub-components

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>
+  )
+}

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>
+  )
+}

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'
+}