From 1035dae76ba72c69fb4f276a9d0b2d44529f30a8 Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Mon, 21 Sep 2026 22:50:34 -0400
Subject: [PATCH] Draw the derived ledger rows as output, not input

One box per measure is live; the other two are the same number said
differently. Both states were full input boxes differing by a border
colour, so three typed figures appeared where there was one typed figure
and two calculations -- and with six boxes on screen there was no reading
which one the adjustment would be built from.

The live box keeps its blue border and ground and gains weight; the derived
two lose their border and background and go muted. They are still editable,
which is what the border on hover says, and the title spells out that
clicking enters the number that way instead.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 ui/src/components/OperationPanel.jsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/OperationPanel.jsx b/ui/src/components/OperationPanel.jsx
index a498961..f616267 100644
--- a/ui/src/components/OperationPanel.jsx
+++ b/ui/src/components/OperationPanel.jsx
@@ -237,6 +237,15 @@ const FIELDS = [
   ['pct',    '% change'],
 ]
 
+// Exactly one box per measure is live -- scaleInputs is keyed by measure, so
+// focusing another row hands that measure's edit over rather than adding a
+// second one. The other two are the same number said differently, so they are
+// drawn as output: no border, no ground, muted. They are still editable, and a
+// border on hover is what says so.
+//
+// Both states used to be full input boxes differing by a border colour, which
+// made three typed figures out of one typed figure and two calculations.
+//
 // given the active edit for a measure, what do the three rows read?
 // dp is the measure's own precision, so the editable rows read the same way as
 // the lines above them -- whole dollars against whole dollars, five places
@@ -328,11 +337,16 @@ function LedgerInput({ value, active, onChange, onFocus, suffix }) {
           onChange(el.value.replace(/,/g, ''))
         }}
         onFocus={onFocus} placeholder="—"
+        title={active ? undefined : 'Derived — click to enter the number this way instead'}
         className={`border rounded py-0.5 text-xs w-24 text-right font-mono tabular-nums
+          transition-colors
           ${suffix ? 'pl-2 pr-5' : 'px-2'}
-          ${active ? 'border-blue-400 bg-blue-50/40 text-gray-800' : 'border-gray-200 bg-white text-gray-700'}`} />
+          ${active
+            ? 'border-blue-400 bg-blue-50/40 text-gray-900 font-medium'
+            : 'border-transparent bg-transparent text-gray-400 hover:border-gray-300 hover:bg-white'}`} />
       {suffix && (
-        <span className="absolute right-1.5 text-gray-400 pointer-events-none"
+        <span className={`absolute right-1.5 pointer-events-none
+          ${active ? 'text-gray-500' : 'text-gray-300'}`}
               style={{ fontSize: '10px' }}>{suffix}</span>
       )}
     </span>