diff --git a/extension/src/popup/components/form-header.ts b/extension/src/popup/components/form-header.ts
index 61e6f67..e3f92c2 100644
--- a/extension/src/popup/components/form-header.ts
+++ b/extension/src/popup/components/form-header.ts
@@ -1,17 +1,21 @@
 /// Shared header chrome for typed form views (login, secure-note, identity, card,
 /// key, totp, document). Renders the title row plus a fullscreen-only "esc to
 /// cancel" subtitle. Use the existing `${...}` template-literal interpolation
-/// at call sites: `${renderFormHeader('new login')}`.
+/// at call sites: `${renderFormHeader({ titleText: 'new login' })}`.
 ///
 /// item-form.ts (the type-selection screen) uses a different header structure
 /// and does NOT consume this helper.
 
 import { isInTab } from '../../shared/state';
 
-export function renderFormHeader(titleText: string): string {
+export interface FormHeaderOpts {
+  titleText: string;
+}
+
+export function renderFormHeader(opts: FormHeaderOpts): string {
   return `
       <div class="form-header">
-        <div class="detail-title">${titleText}</div>
+        <div class="detail-title">${opts.titleText}</div>
         <span style="flex:1;"></span>
         ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
       </div>
diff --git a/extension/src/popup/components/types/card.ts b/extension/src/popup/components/types/card.ts
index 9f8d7c0..9413011 100644
--- a/extension/src/popup/components/types/card.ts
+++ b/extension/src/popup/components/types/card.ts
@@ -175,7 +175,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      ${renderFormHeader(mode === 'add' ? 'new card' : 'edit card')}
+      ${renderFormHeader({ titleText: mode === 'add' ? 'new card' : 'edit card' })}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Amex Gold"></div>
diff --git a/extension/src/popup/components/types/document.ts b/extension/src/popup/components/types/document.ts
index 3d9b850..ba4fdab 100644
--- a/extension/src/popup/components/types/document.ts
+++ b/extension/src/popup/components/types/document.ts
@@ -86,7 +86,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      ${renderFormHeader(isEdit ? 'edit document' : 'new document')}
+      ${renderFormHeader({ titleText: isEdit ? 'edit document' : 'new document' })}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group">
         <label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
diff --git a/extension/src/popup/components/types/identity.ts b/extension/src/popup/components/types/identity.ts
index 76b3075..f9776c1 100644
--- a/extension/src/popup/components/types/identity.ts
+++ b/extension/src/popup/components/types/identity.ts
@@ -135,7 +135,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      ${renderFormHeader(mode === 'add' ? 'new identity' : 'edit identity')}
+      ${renderFormHeader({ titleText: mode === 'add' ? 'new identity' : 'edit identity' })}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Aaron Lee · personal"></div>
diff --git a/extension/src/popup/components/types/key.ts b/extension/src/popup/components/types/key.ts
index e5c3720..36cb3ba 100644
--- a/extension/src/popup/components/types/key.ts
+++ b/extension/src/popup/components/types/key.ts
@@ -124,7 +124,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      ${renderFormHeader(mode === 'add' ? 'new key' : 'edit key')}
+      ${renderFormHeader({ titleText: mode === 'add' ? 'new key' : 'edit key' })}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="github ssh"></div>
diff --git a/extension/src/popup/components/types/login.ts b/extension/src/popup/components/types/login.ts
index 6fda287..16f2308 100644
--- a/extension/src/popup/components/types/login.ts
+++ b/extension/src/popup/components/types/login.ts
@@ -245,7 +245,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      ${renderFormHeader(mode === 'add' ? 'new login' : 'edit login')}
+      ${renderFormHeader({ titleText: mode === 'add' ? 'new login' : 'edit login' })}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>
diff --git a/extension/src/popup/components/types/secure-note.ts b/extension/src/popup/components/types/secure-note.ts
index 90de1d8..ff33d4d 100644
--- a/extension/src/popup/components/types/secure-note.ts
+++ b/extension/src/popup/components/types/secure-note.ts
@@ -113,7 +113,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      ${renderFormHeader(mode === 'add' ? 'new secure note' : 'edit secure note')}
+      ${renderFormHeader({ titleText: mode === 'add' ? 'new secure note' : 'edit secure note' })}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="My recovery codes"></div>
diff --git a/extension/src/popup/components/types/totp.ts b/extension/src/popup/components/types/totp.ts
index 531ef19..abfa6af 100644
--- a/extension/src/popup/components/types/totp.ts
+++ b/extension/src/popup/components/types/totp.ts
@@ -214,7 +214,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   const renderInner = (): string => `
     <div class="pad">
-      ${renderFormHeader(mode === 'add' ? 'new totp' : 'edit totp')}
+      ${renderFormHeader({ titleText: mode === 'add' ? 'new totp' : 'edit totp' })}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>