Error: Snapshot `component story visual snapshots > ProposalCard / Ready 1` mismatched - Expected + Received @@ -56,12 +56,19 @@ class="flex items-center gap-2" > <p class="font-mono text-sm text-zinc-500" > - Proposed by → + Proposed by → - GPROPO...7890 + + <a + class="text-zinc-400 hover:text-emerald-400 hover:underline transition-colors" + data-discover="true" + href="/app/owners/GPROPOSER1234567890" + > + GPROPO...7890 + </a> </p> </div> <button aria-label="Copy proposer address for proposal #42" class="rounded text-zinc-500 transition-colors hover:text-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-400" @@ -117,11 +124,11 @@ title="Copy proposal link" type="button" > <svg aria-hidden="true" - class="lucide lucide-link2 lucide-link-2" + class="lucide lucide-link-2" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" @@ -168,12 +175,15 @@ class="flex items-center gap-2" > <div class="flex gap-1" > - <div - class="w-2 h-2 rounded-full bg-emerald-400" + <a + aria-label="View profile for approver GAPPRO...6789" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GAPPROVER123456789" title="GAPPRO...6789" /> <div class="w-2 h-2 rounded-full bg-emerald-400" /> ❯ src/visual/componentStories.visual.test.tsx:96:38

Error: Snapshot `component story visual snapshots > ProposalCard / Pending 1` mismatched - Expected + Received @@ -56,12 +56,19 @@ class="flex items-center gap-2" > <p class="font-mono text-sm text-zinc-500" > - Proposed by → + Proposed by → - GPROPO...7890 + + <a + class="text-zinc-400 hover:text-emerald-400 hover:underline transition-colors" + data-discover="true" + href="/app/owners/GPROPOSER1234567890" + > + GPROPO...7890 + </a> </p> </div> <button aria-label="Copy proposer address for proposal #42" class="rounded text-zinc-500 transition-colors hover:text-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-400" @@ -117,11 +124,11 @@ title="Copy proposal link" type="button" > <svg aria-hidden="true" - class="lucide lucide-link2 lucide-link-2" + class="lucide lucide-link-2" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" @@ -168,12 +175,15 @@ class="flex items-center gap-2" > <div class="flex gap-1" > - <div - class="w-2 h-2 rounded-full bg-emerald-400" + <a + aria-label="View profile for approver GAPPRO...6789" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GAPPROVER123456789" title="GAPPRO...6789" /> <div class="w-2 h-2 rounded-full bg-zinc-700" /> ❯ src/visual/componentStories.visual.test.tsx:96:38

Error: Snapshot `component story visual snapshots > GrantRevokeRoleModal / Grant 1` mismatched - Expected + Received @@ -178,11 +178,11 @@ </label> <input aria-label="Deadline" class="w-full rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-2.5 text-sm text-white focus:border-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-400" type="date" - value="2026-10-24" + value="2026-10-27" /> </div> <div class="pt-2" > ❯ src/visual/componentStories.visual.test.tsx:96:38

Error: Snapshot `component story visual snapshots > GovernanceHealthWidget / Loading 1` mismatched - Expected + Received @@ -2,19 +2,24 @@ class="dark min-w-[320px] bg-zinc-950 p-4 text-zinc-100" > <div aria-label="Governance Health" class="bg-zinc-900 border border-zinc-800 rounded-xl p-4 mb-6" + role="region" > <div - class="flex items-center justify-between mb-3" - > - <h3 + class="flex flex-wrap items-center justify-between gap-2 mb-3" + > + <div + class="flex items-center gap-2.5" + > + <h3 - class="font-semibold text-sm" + class="font-semibold text-sm" - > + > - Governance Health + Governance Health - </h3> + </h3> + </div> <span class="text-xs text-zinc-500 animate-pulse" > Loading… </span> ❯ src/visual/componentStories.visual.test.tsx:96:38

Error: Snapshot `component story visual snapshots > GovernanceHealthWidget / Concentrated 1` mismatched - Expected + Received @@ -2,19 +2,33 @@ class="dark min-w-[320px] bg-zinc-950 p-4 text-zinc-100" > <div aria-label="Governance Health" class="bg-zinc-900 border border-zinc-800 rounded-xl p-4 mb-6" + role="region" > <div - class="flex items-center justify-between mb-3" + class="flex flex-wrap items-center justify-between gap-2 mb-3" > - <h3 + <div + class="flex items-center gap-2.5" + > + <h3 - class="font-semibold text-sm" + class="font-semibold text-sm" - > + > - Governance Health + Governance Health - </h3> + </h3> + <span + class="text-xs px-2 py-0.5 rounded-full border font-medium bg-orange-500/15 text-orange-400 border-orange-500/30" + data-testid="governance-health-score" + > + Score: + 61 + /100 · + High Risk + </span> + </div> <div aria-label="Whale warning active" class="inline-flex items-center gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-1.5 text-xs font-medium text-amber-300 shadow-sm" role="alert" > @@ -34,10 +48,16 @@ <span> Whale Warning: Single owner controls 70% of voting power (exceeds 33.3% threshold) </span> </div> </div> + <p + class="text-xs text-zinc-300 mb-3 leading-relaxed" + data-testid="governance-explanation" + > + Governance faces significant centralization or liveness risks that could compromise security. + </p> <div class="mb-3" > <div aria-label="Largest owner holds 70.0% of total voting power" @@ -106,21 +126,31 @@ > 3 </p> </div> </div> - <p + <div - class="mt-3 text-xs text-amber-300/80 leading-relaxed border-t border-amber-500/20 pt-2" + class="mt-3 pt-3 border-t border-zinc-800/80 space-y-1.5" + data-testid="governance-risks" + > + <p + class="text-xs font-medium text-amber-400" - > + > - One owner controls more than + Flagged Risks: - + </p> - <span + <ul - class="font-semibold" + class="text-xs space-y-1 text-zinc-400 list-disc list-inside" > - 33 + <li - % - </span> - - of total voting power. Consider redistributing weight to reduce centralization risk. + class="leading-relaxed" + > + Dominant owner controls 70.0% of voting power (&gt;50%), holding absolute majority control. + </li> + <li + class="leading-relaxed" + > + A single owner holds enough voting power to pass proposals unilaterally. + </li> + </ul> - </p> + </div> </div> </div> ❯ src/visual/componentStories.visual.test.tsx:96:38

Error: Snapshot `component story visual snapshots > GovernanceHealthWidget / Balanced 1` mismatched - Expected + Received @@ -2,19 +2,33 @@ class="dark min-w-[320px] bg-zinc-950 p-4 text-zinc-100" > <div aria-label="Governance Health" class="bg-zinc-900 border border-zinc-800 rounded-xl p-4 mb-6" + role="region" > <div - class="flex items-center justify-between mb-3" + class="flex flex-wrap items-center justify-between gap-2 mb-3" > - <h3 + <div + class="flex items-center gap-2.5" + > + <h3 - class="font-semibold text-sm" + class="font-semibold text-sm" - > + > - Governance Health + Governance Health - </h3> + </h3> + <span + class="text-xs px-2 py-0.5 rounded-full border font-medium bg-amber-500/15 text-amber-400 border-amber-500/30" + data-testid="governance-health-score" + > + Score: + 76 + /100 · + Moderate Risk + </span> + </div> <div aria-label="Whale warning active" class="inline-flex items-center gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-1.5 text-xs font-medium text-amber-300 shadow-sm" role="alert" > @@ -34,10 +48,16 @@ <span> Whale Warning: Single owner controls 40% of voting power (exceeds 33.3% threshold) </span> </div> </div> + <p + class="text-xs text-zinc-300 mb-3 leading-relaxed" + data-testid="governance-explanation" + > + Governance has moderate concentration or quorum friction. Minor rebalancing is recommended. + </p> <div class="mb-3" > <div aria-label="Largest owner holds 40.0% of total voting power" @@ -106,21 +126,26 @@ > 3 </p> </div> </div> - <p + <div - class="mt-3 text-xs text-amber-300/80 leading-relaxed border-t border-amber-500/20 pt-2" + class="mt-3 pt-3 border-t border-zinc-800/80 space-y-1.5" + data-testid="governance-risks" + > + <p + class="text-xs font-medium text-amber-400" - > + > - One owner controls more than + Flagged Risks: - + </p> - <span + <ul - class="font-semibold" + class="text-xs space-y-1 text-zinc-400 list-disc list-inside" > - 33 - % - </span> - + <li + class="leading-relaxed" + > - of total voting power. Consider redistributing weight to reduce centralization risk. - </p> + Largest owner holds 40.0% of voting power, exceeding the recommended 33% safety threshold. + </li> + </ul> + </div> </div> </div> ❯ src/visual/componentStories.visual.test.tsx:96:38

Error: Snapshot `component story visual snapshots > CreateWeightChangeProposalModal / Default 1` mismatched - Expected + Received @@ -109,17 +109,17 @@ Deadline </span> <input class="w-full rounded-xl border border-zinc-800 bg-zinc-900 px-4 py-3 text-sm text-white focus:outline-none focus:ring-2 focus:ring-zinc-400" type="date" - value="2026-10-24" + value="2026-10-27" /> <p class="text-xs text-zinc-500" > Submission deadline: - October 24, 2026 + October 27, 2026 </p> </label> </div> <section class="mt-5 rounded-2xl border border-zinc-800 bg-zinc-900/60 p-4" ❯ src/visual/componentStories.visual.test.tsx:96:38

Error: Snapshot `component story visual snapshots > CreateRecurringPaymentModal / Default 1` mismatched - Expected + Received @@ -62,10 +62,53 @@ class="text-xs text-zinc-500 mt-1.5" > Same amount disbursed each period. </p> </div> + <div + class="space-y-1.5" + > + <div + class="flex items-center gap-2" + > + <button + class="text-xs text-zinc-400 hover:text-zinc-200 whitespace-nowrap" + type="button" + > + Manage templates + </button> + </div> + <button + class="inline-flex items-center gap-1 text-xs text-zinc-400 hover:text-emerald-400 transition-colors" + type="button" + > + <svg + aria-hidden="true" + class="lucide lucide-bookmark-plus" + fill="none" + height="13" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + viewBox="0 0 24 24" + width="13" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M12 7v6" + /> + <path + d="M15 10H9" + /> + <path + d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" + /> + </svg> + Save as template + </button> + </div> <div> <label class="text-xs text-zinc-400 block mb-1.5" > Proposer @@ -81,14 +124,17 @@ class="text-xs text-zinc-400 block mb-1.5" for="recurring-recipient" > Recipient Address </label> + <div + class="space-y-1.5" + /> <input aria-invalid="false" aria-label="Recipient Stellar address" - class="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2.5 text-white text-sm font-mono placeholder-zinc-600 focus:ring-2 focus:ring-zinc-400 focus:outline-none focus:border-zinc-500" + class="mt-1.5 w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2.5 text-white text-sm font-mono placeholder-zinc-600 focus:ring-2 focus:ring-zinc-400 focus:outline-none focus:border-zinc-500" id="recurring-recipient" placeholder="G..." value="" /> </div> @@ -229,11 +275,11 @@ <input aria-label="Payment start date" class="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2.5 text-white text-sm focus:ring-2 focus:ring-zinc-400 focus:outline-none focus:border-zinc-500" id="recurring-start" type="date" - value="2026-10-17" + value="2026-10-20" /> </div> <div> <label class="text-xs text-zinc-400 block mb-1.5" @@ -285,15 +331,15 @@ </div> <div class="pt-2" > <button - aria-label="Create Recurring Payment" + aria-label="Review Recurring Payment" class="w-full bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed text-white py-2.5 rounded-lg font-medium transition-colors focus:ring-2 focus:ring-zinc-400 focus:outline-none" type="button" > - Create Recurring Payment + Review Payment </button> </div> </div> </div> </div> ❯ src/visual/componentStories.visual.test.tsx:96:38

Error: Snapshot `component story visual snapshots > CreateProposalModal / TypeSelection 1` mismatched - Expected + Received @@ -1,29 +1,29 @@ <div class="dark min-w-[320px] bg-zinc-950 p-4 text-zinc-100" > <div - aria-hidden="true" - class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4" + class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-3 sm:p-4 overflow-y-auto" > <div aria-labelledby="modal-title" aria-modal="true" - class="bg-zinc-900 border border-zinc-700 rounded-2xl p-4 sm:p-6 w-full max-w-md" + class="bg-zinc-900 border border-zinc-700 rounded-2xl p-4 sm:p-6 w-full max-w-md max-h-[calc(100dvh-1.5rem)] sm:max-h-[90vh] overflow-y-auto my-auto shadow-2xl" role="dialog" > <div - class="flex items-center justify-between mb-6" + class="flex items-center justify-between mb-5 sm:mb-6" > <h2 class="text-white font-semibold text-lg" id="modal-title" > New Proposal </h2> <button - class="text-zinc-500 hover:text-zinc-300 text-xl focus:ring-2 focus:ring-zinc-400 focus:outline-none rounded-md" + aria-label="Close modal" + class="text-zinc-500 hover:text-zinc-300 text-xl focus:ring-2 focus:ring-zinc-400 focus:outline-none rounded-lg min-h-[44px] min-w-[44px] flex items-center justify-center -mr-2" type="button" > ✕ </button> </div> @@ -37,41 +37,76 @@ class="text-sm text-zinc-400" > Select the type of proposal to create: </p> <div - class="grid grid-cols-2 gap-3" + class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 sm:gap-3" > <button - class="rounded-xl border border-zinc-700 bg-zinc-800/50 p-4 text-sm font-medium text-zinc-200 transition-colors hover:border-emerald-500/50 hover:bg-zinc-800 disabled:opacity-50 focus:ring-2 focus:ring-zinc-400 focus:outline-none" + class="rounded-xl border border-zinc-700 bg-zinc-800/50 p-3.5 sm:p-4 min-h-[48px] text-sm font-medium text-zinc-200 transition-colors hover:border-emerald-500/50 hover:bg-zinc-800 disabled:opacity-50 focus:ring-2 focus:ring-zinc-400 focus:outline-none flex items-center justify-between sm:justify-center" type="button" > - Transfer + <span> + Transfer + </span> + <span + class="text-zinc-500 sm:hidden" + > + → + </span> </button> <button - class="rounded-xl border border-zinc-700 bg-zinc-800/50 p-4 text-sm font-medium text-zinc-200 transition-colors hover:border-emerald-500/50 hover:bg-zinc-800 disabled:opacity-50 focus:ring-2 focus:ring-zinc-400 focus:outline-none" + class="rounded-xl border border-zinc-700 bg-zinc-800/50 p-3.5 sm:p-4 min-h-[48px] text-sm font-medium text-zinc-200 transition-colors hover:border-emerald-500/50 hover:bg-zinc-800 disabled:opacity-50 focus:ring-2 focus:ring-zinc-400 focus:outline-none flex items-center justify-between sm:justify-center" type="button" > - Add Owner + <span> + Add Owner + </span> + <span + class="text-zinc-500 sm:hidden" + > + → + </span> </button> <button - class="rounded-xl border border-zinc-700 bg-zinc-800/50 p-4 text-sm font-medium text-zinc-200 transition-colors hover:border-emerald-500/50 hover:bg-zinc-800 disabled:opacity-50 focus:ring-2 focus:ring-zinc-400 focus:outline-none" + class="rounded-xl border border-zinc-700 bg-zinc-800/50 p-3.5 sm:p-4 min-h-[48px] text-sm font-medium text-zinc-200 transition-col

Error: Snapshot `component story visual snapshots > ApprovalBar / QuorumReached 1` mismatched - Expected + Received @@ -6,48 +6,78 @@ class="flex items-center gap-2" > <div class="flex gap-1" > - <div - class="w-2 h-2 rounded-full bg-emerald-400" - title="GADDR0...DDR0" - /> - <div - class="w-2 h-2 rounded-full bg-emerald-400" - title="GADDR1...DDR1" - /> - <div - class="w-2 h-2 rounded-full bg-emerald-400" - title="GADDR2...DDR2" - /> - <div - class="w-2 h-2 rounded-full bg-emerald-400" - title="GADDR3...DDR3" - /> - <div - class="w-2 h-2 rounded-full bg-emerald-400" - title="GADDR4...DDR4" - /> - <div - class="w-2 h-2 rounded-full bg-emerald-400" - title="GADDR5...DDR5" - /> - <div - class="w-2 h-2 rounded-full bg-emerald-400" - title="GADDR6...DDR6" - /> - <div - class="w-2 h-2 rounded-full bg-emerald-400" - title="GADDR7...DDR7" - /> - <div - class="w-2 h-2 rounded-full bg-emerald-400" - title="GADDR8...DDR8" - /> - <div - class="w-2 h-2 rounded-full bg-emerald-400" + <a + aria-label="View profile for approver GADDR0...DDR0" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GADDR0" + title="GADDR0...DDR0" + /> + <a + aria-label="View profile for approver GADDR1...DDR1" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GADDR1" + title="GADDR1...DDR1" + /> + <a + aria-label="View profile for approver GADDR2...DDR2" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GADDR2" + title="GADDR2...DDR2" + /> + <a + aria-label="View profile for approver GADDR3...DDR3" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GADDR3" + title="GADDR3...DDR3" + /> + <a + aria-label="View profile for approver GADDR4...DDR4" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GADDR4" + title="GADDR4...DDR4" + /> + <a + aria-label="View profile for approver GADDR5...DDR5" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GADDR5" + title="GADDR5...DDR5" + /> + <a + aria-label="View profile for approver GADDR6...DDR6" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GADDR6" + title="GADDR6...DDR6" + /> + <a + aria-label="View profile for approver GADDR7...DDR7" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GADDR7" + title="GADDR7...DDR7" + /> + <a + aria-label="View profile for approver GADDR8...DDR8" + class="w-2 h-2 rounded-full bg-emerald-400 hover:ring-2 hover:ring-emerald-300 transition-all cursor-pointer" + data-discover="true" + href="/app/owners/GADDR8" + title="GADDR8...DDR8" + /> + <a + aria-label="View profile for approver GADDR9...DDR9" +