feat: reorganize transaction detail view layout

- Move transaction hash (txid) to first position after title
- Group fields into logical sections with visual dividers:
  Identity (hash, type, status, time), Value (amount, native qty,
  token contract), Parties (from, to), Protocol (calldata/action),
  On-chain (block, nonce, fee, gas price, gas used), Raw data
- Add tx-detail-group CSS class for subtle border separators
- Show on-chain details group wrapper only when data is loaded
- Maintain all existing functionality and copy-to-clipboard behavior

closes #131

TODO.md

@@ -1,55 +0,0 @@
-# Workflow
-
-* branch (from `main`)
-* do the work in Next Step
-* move Next Step to the top of Completed Steps
-* move the top item of Future Steps into Next Step
-* commit (`TODO.md` changes in the same commit as the work)
-* merge to `main` if the branch is not protected, otherwise open a PR
-* push
-
-# Status
-
-pre-1.0. Tagged v0.1.0 on 2026-02-27. Active development on branch
-feat/issue-144-settings-about (another agent working as of 2026-07-06).
-Full policy file set present; make check on main not verified.
-
-# Next Step
-
-Land feat/issue-144-settings-about: finish the settings About well
-(build info, app name and repo link, release date, version click easter
-egg, git info derived inside Docker), resolve the untracked scripts/
-directory (commit or gitignore), get review, merge to main.
-
-# Completed Steps
-
-- 2026-03-01: About well in settings with build info and easter egg (in
-  flight on feature branch); USD display suppressed on testnets (#142);
-  estimated USD for ETH in approve-tx view (#141).
-- Sepolia testnet support (#137); etherscan links go to token-specific
-  URLs (#136).
-- Transaction detail improvements: Type field and on-chain details
-  (#130), txid-first reordering (#133), swap display corrections
-  (#128), expanded confirm-tx warnings (#118).
-- Dark mode theme setting (Light/Dark/System) with contrast fixes
-  (#126); timestamps include timezone offset (#120); layout shift
-  audit, reserved space for error messages (#124).
-- Copy-flash visual feedback with timing tune (#113, #121);
-  cross-wallet-type duplicate detection (#115).
-- 2026-02-27: v0.1.0 tagged.
-- 2026-02-24: Initial scaffolding: popup UI, BIP-39 wallet creation via
-  ethers.js, wallet persistence, real ETH balances over RPC, ENS
-  forward and reverse resolution.
-
-# Future Steps
-
-- Verify main passes make check after the feature branch merges (not
-  verified 2026-07-06 because an agent was active in the tree); fix
-  anything red. main must always be green.
-- Prune stale branches: dozens of merged local and remote feature
-  branches remain (fix/*, feature/*, tx-*); delete merged ones locally
-  and on origin.
-- Continue the issue backlog toward a feature-complete wallet, then cut
-  further tags as milestones land.
-- Pre-1.0 security review of the extension (key handling, DEBUG mode
-  policy, RPC input validation) before any 1.0rc tag.

src/popup/index.html

@@ -1064,87 +1064,134 @@
                 <h2 id="tx-detail-heading" class="font-bold mb-2">
                     Transaction
                 </h2>
-                <div id="tx-detail-type-section" class="mb-4 hidden">
+
-                    <div class="text-xs text-muted mb-1">Type</div>
+                <!-- ── Identity ── -->
-                    <div id="tx-detail-type" class="text-xs font-bold"></div>
+                <div class="tx-detail-group mb-1">
-                </div>
+                    <div class="mb-3">
-                <div class="mb-4">
+                        <div class="text-xs text-muted mb-1">
-                    <div class="text-xs text-muted mb-1">Status</div>
+                            Transaction hash
-                    <div id="tx-detail-status" class="text-xs"></div>
+                        </div>
-                </div>
-                <div class="mb-4">
-                    <div class="text-xs text-muted mb-1">Time</div>
-                    <div id="tx-detail-time" class="text-xs"></div>
-                </div>
-                <div class="mb-4">
-                    <div class="text-xs text-muted mb-1">Amount</div>
-                    <div id="tx-detail-value" class="text-xs"></div>
-                </div>
-                <div class="mb-4 hidden">
-                    <div class="text-xs text-muted mb-1">Native quantity</div>
-                    <div id="tx-detail-native" class="text-xs"></div>
-                </div>
-                <div class="mb-4">
-                    <div class="text-xs text-muted mb-1">From</div>
-                    <div id="tx-detail-from" class="text-xs break-all"></div>
-                </div>
-                <div class="mb-4">
-                    <div class="text-xs text-muted mb-1">To</div>
-                    <div id="tx-detail-to" class="text-xs break-all"></div>
-                </div>
-                <div id="tx-detail-token-contract-section" class="mb-4 hidden">
-                    <div class="text-xs text-muted mb-1">Token contract</div>
-                    <div
-                        id="tx-detail-token-contract"
-                        class="text-xs break-all"
-                    ></div>
-                </div>
-                <div id="tx-detail-calldata-section" class="mb-4 hidden">
-                    <div
-                        id="tx-detail-calldata-well"
-                        class="mb-3 border border-border border-dashed p-2"
-                    >
-                        <div class="text-xs text-muted mb-1">Action</div>
                         <div
-                            id="tx-detail-calldata-action"
+                            id="tx-detail-hash"
-                            class="text-xs font-bold mb-2"
+                            class="text-xs break-all"
                         ></div>
+                    </div>
+                    <div id="tx-detail-type-section" class="mb-3 hidden">
+                        <div class="text-xs text-muted mb-1">Type</div>
                         <div
-                            id="tx-detail-calldata-details"
+                            id="tx-detail-type"
-                            class="text-xs"
+                            class="text-xs font-bold"
+                        ></div>
+                    </div>
+                    <div class="mb-3">
+                        <div class="text-xs text-muted mb-1">Status</div>
+                        <div id="tx-detail-status" class="text-xs"></div>
+                    </div>
+                    <div class="mb-1">
+                        <div class="text-xs text-muted mb-1">Time</div>
+                        <div id="tx-detail-time" class="text-xs"></div>
+                    </div>
+                </div>
+
+                <!-- ── Value ── -->
+                <div class="tx-detail-group mb-1">
+                    <div class="mb-3">
+                        <div class="text-xs text-muted mb-1">Amount</div>
+                        <div id="tx-detail-value" class="text-xs"></div>
+                    </div>
+                    <div class="mb-3 hidden">
+                        <div class="text-xs text-muted mb-1">
+                            Native quantity
+                        </div>
+                        <div id="tx-detail-native" class="text-xs"></div>
+                    </div>
+                    <div
+                        id="tx-detail-token-contract-section"
+                        class="mb-1 hidden"
+                    >
+                        <div class="text-xs text-muted mb-1">
+                            Token contract
+                        </div>
+                        <div
+                            id="tx-detail-token-contract"
+                            class="text-xs break-all"
                         ></div>
                     </div>
                 </div>
-                <div class="mb-4">
+
-                    <div class="text-xs text-muted mb-1">Transaction hash</div>
+                <!-- ── Parties ── -->
-                    <div id="tx-detail-hash" class="text-xs break-all"></div>
+                <div class="tx-detail-group mb-1">
+                    <div class="mb-3">
+                        <div class="text-xs text-muted mb-1">From</div>
+                        <div
+                            id="tx-detail-from"
+                            class="text-xs break-all"
+                        ></div>
+                    </div>
+                    <div class="mb-1">
+                        <div class="text-xs text-muted mb-1">To</div>
+                        <div id="tx-detail-to" class="text-xs break-all"></div>
+                    </div>
                 </div>
-                <div id="tx-detail-block-section" class="mb-4 hidden">
+
-                    <div class="text-xs text-muted mb-1">Block</div>
+                <!-- ── Protocol ── -->
-                    <div id="tx-detail-block" class="text-xs"></div>
+                <div id="tx-detail-calldata-section" class="mb-1 hidden">
+                    <div class="tx-detail-group mb-1">
+                        <div
+                            id="tx-detail-calldata-well"
+                            class="border border-border border-dashed p-2"
+                        >
+                            <div class="text-xs text-muted mb-1">Action</div>
+                            <div
+                                id="tx-detail-calldata-action"
+                                class="text-xs font-bold mb-2"
+                            ></div>
+                            <div
+                                id="tx-detail-calldata-details"
+                                class="text-xs"
+                            ></div>
+                        </div>
+                    </div>
                 </div>
-                <div id="tx-detail-nonce-section" class="mb-4 hidden">
+
-                    <div class="text-xs text-muted mb-1">Nonce</div>
+                <!-- ── On-chain details ── -->
-                    <div id="tx-detail-nonce" class="text-xs"></div>
+                <div
-                </div>
+                    id="tx-detail-onchain-group"
-                <div id="tx-detail-fee-section" class="mb-4 hidden">
+                    class="tx-detail-group mb-1 hidden"
-                    <div class="text-xs text-muted mb-1">Transaction fee</div>
+                >
-                    <div id="tx-detail-fee" class="text-xs"></div>
+                    <div id="tx-detail-block-section" class="mb-3 hidden">
-                </div>
+                        <div class="text-xs text-muted mb-1">Block</div>
-                <div id="tx-detail-gasprice-section" class="mb-4 hidden">
+                        <div id="tx-detail-block" class="text-xs"></div>
-                    <div class="text-xs text-muted mb-1">Gas price</div>
+                    </div>
-                    <div id="tx-detail-gasprice" class="text-xs"></div>
+                    <div id="tx-detail-nonce-section" class="mb-3 hidden">
-                </div>
+                        <div class="text-xs text-muted mb-1">Nonce</div>
-                <div id="tx-detail-gasused-section" class="mb-4 hidden">
+                        <div id="tx-detail-nonce" class="text-xs"></div>
-                    <div class="text-xs text-muted mb-1">Gas used</div>
+                    </div>
-                    <div id="tx-detail-gasused" class="text-xs"></div>
+                    <div id="tx-detail-fee-section" class="mb-3 hidden">
+                        <div class="text-xs text-muted mb-1">
+                            Transaction fee
+                        </div>
+                        <div id="tx-detail-fee" class="text-xs"></div>
+                    </div>
+                    <div id="tx-detail-gasprice-section" class="mb-3 hidden">
+                        <div class="text-xs text-muted mb-1">Gas price</div>
+                        <div id="tx-detail-gasprice" class="text-xs"></div>
+                    </div>
+                    <div id="tx-detail-gasused-section" class="mb-1 hidden">
+                        <div class="text-xs text-muted mb-1">Gas used</div>
+                        <div id="tx-detail-gasused" class="text-xs"></div>
+                    </div>
                 </div>
+
+                <!-- ── Raw data ── -->
                 <div id="tx-detail-rawdata-section" class="mb-4 hidden">
-                    <div class="text-xs text-muted mb-1">Raw data</div>
+                    <div class="tx-detail-group">
-                    <div
+                        <div class="text-xs text-muted mb-1">Raw data</div>
-                        id="tx-detail-rawdata"
+                        <div
-                        class="text-xs break-all font-mono border border-border border-dashed p-2"
+                            id="tx-detail-rawdata"
-                    ></div>
+                            class="text-xs break-all font-mono border border-border border-dashed p-2"
+                        ></div>
+                    </div>
                 </div>
             </div>
 

src/popup/styles/main.css

@@ -44,3 +44,11 @@ body {
         background-color 225ms ease-out,
         color 225ms ease-out;
 }
+
+/* Transaction detail view — visual grouping of related fields */
+.tx-detail-group {
+    border-bottom: 1px solid var(--color-border-light);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+    padding-top: 0.25rem;
+}

src/popup/views/transactionDetail.js

@@ -190,7 +190,9 @@ function render() {
     const rawDataSection = $("tx-detail-rawdata-section");
     if (rawDataSection) rawDataSection.classList.add("hidden");
 
-    // Hide on-chain detail sections until populated
+    // Hide on-chain detail sections (and their group wrapper) until populated
+    const onchainGroup = $("tx-detail-onchain-group");
+    if (onchainGroup) onchainGroup.classList.add("hidden");
     for (const id of [
         "tx-detail-block-section",
         "tx-detail-nonce-section",
@@ -285,6 +287,24 @@ function populateOnChainDetails(txData) {
         );
     }
 
+    // Show the on-chain details group if any child section is visible
+    const onchainGroup = $("tx-detail-onchain-group");
+    if (onchainGroup) {
+        const hasVisible = [
+            "tx-detail-block-section",
+            "tx-detail-nonce-section",
+            "tx-detail-fee-section",
+            "tx-detail-gasprice-section",
+            "tx-detail-gasused-section",
+        ].some((id) => {
+            const el = $(id);
+            return el && !el.classList.contains("hidden");
+        });
+        if (hasVisible) {
+            onchainGroup.classList.remove("hidden");
+        }
+    }
+
     // Bind copy handlers for newly added elements
     for (const id of [
         "tx-detail-block-section",