From 3e4312ca6ff4f0e601fba44683443f776a7a19af Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sat, 2 May 2026 18:47:12 -0400
Subject: [PATCH] feat(ext/popup/field-history): colorize revealed password
 entries

Import colorizePassword and post-process .revealed value cells after
innerHTML render, replacing escaped-HTML text with colored spans via
the valueStore plaintext lookup.
---
 extension/src/popup/components/field-history.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/extension/src/popup/components/field-history.ts b/extension/src/popup/components/field-history.ts
index a61ee6b..27de410 100644
--- a/extension/src/popup/components/field-history.ts
+++ b/extension/src/popup/components/field-history.ts
@@ -1,6 +1,7 @@
 /// Field history view — shows password/concealed field history for an item.
 
 import { getState, setState, sendMessage, navigate, escapeHtml } from '../../shared/state';
+import { colorizePassword } from '../../shared/password-coloring';
 import type { FieldHistoryView } from '../../shared/types';
 
 function relativeTime(unixSec: number): string {
@@ -103,6 +104,16 @@ export async function renderFieldHistory(app: HTMLElement): Promise<void> {
     </div>
   `;
 
+  // Colorize revealed entries: replace plain-text content with colorized spans
+  app.querySelectorAll<HTMLElement>('.history-entry__value.revealed').forEach((el) => {
+    const key = el.closest<HTMLElement>('.history-entry')?.dataset.entry ?? '';
+    const plaintext = valueStore.get(key);
+    if (plaintext !== undefined) {
+      el.textContent = '';
+      el.appendChild(colorizePassword(plaintext));
+    }
+  });
+
   // Wire handlers
   app.querySelector<HTMLButtonElement>('#back-btn')?.addEventListener('click', () => navigate('detail'));