From f7b58be0888c48a45b601aa2810e533f2da91fe0 Mon Sep 17 00:00:00 2001
From: raiden9420 <rudraksh.r.mahajan@gmail.com>
Date: Sun, 22 Mar 2026 17:52:01 +0530
Subject: [PATCH 1/2] chore: ignore agent metadata and reports; update UI
 components

---
 .gitignore                                 |  13 +-
 Team_T8_report_20260318.pdf                | Bin 14466 -> 0 bytes
 frontend/src/App.jsx                       | 118 ++++++++----------
 frontend/src/components/MolViewer.jsx      |   9 +-
 frontend/src/components/PldtMetrics.jsx    |   4 +-
 frontend/src/components/ProteinMetrics.jsx |   6 +-
 frontend/src/components/SequenceInput.jsx  |  35 ++++--
 frontend/src/components/Sidebar.jsx        |  11 +-
 frontend/src/components/TopBar.jsx         |   6 +-
 frontend/src/index.css                     | 134 ++++++++++++---------
 skills-lock.json                           | 110 +++++++++++++++++
 11 files changed, 295 insertions(+), 151 deletions(-)
 delete mode 100644 Team_T8_report_20260318.pdf
 create mode 100644 skills-lock.json

diff --git a/.gitignore b/.gitignore
index 4c4563d..e6b98d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -100,9 +100,10 @@ TESTSPRITE_GUIDE.md
 # AI & LLM Agents
 .gemini/
 
-# Testing Caches
-.pytest_cache/
-.mypy_cache/
-
-# Un-ignore the frontend lib folder which was caught by the Python lib/ rule
-!frontend/src/lib/
\ No newline at end of file
+# AI Agent Reports & Metadata
+.agents/
+impeccable.md
+.impeccable.md
+audit_report.md
+critique_report.md
+Team_T8_report_*.pdf
\ No newline at end of file
diff --git a/Team_T8_report_20260318.pdf b/Team_T8_report_20260318.pdf
deleted file mode 100644
index d73f688aab3932e076cf1458c2fb49498dc870aa..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 14466
zcmdVB*|xIEmOpsEpJEB3q5=Y<*djKdqJUyA2+~L=jfz#7bx|)+byxTGti`v_KAHQR
zeMbE=FLRAG77#09M$DKIzu84V@{~hxwD}wK|NP(o*Z=#ob<*UWt?uRz@5Ijgo;mhU
zUgO73tZ(GR*-s@&o%oY{-<AXahW|8v5;OR%-~SEc@E;=o-2Px3@k9RcM*cK^z5O;E
z{^rE?ud2W5{JqKe{&Bb@CyLFT=l|wpzIFe>X0esne(e5WM?YrckN=+q;yrS5^7s#?
ze9i3N)BIzX|INRDJ@WtLwEoo9uR;9(bcKwQr~O~)kN7Y4_lwoP_IJ6bk7>@2dCxvS
z*dHvA|3#A2pGZz}?s5rye(*nLckS5zeVqK;&o!^r_@O!!O0=og58cF3n(oj)+7Bk*
z-@l}W{~?;K^Ec6bets9(uetvv!(3?cJFyfe%V}Z1<c;l|f6L{vi0-a4{^L3M<GJ|J
z@>%}Dwn>(+kGwgyd*9>VN&YJT?dR|Ekn_fWl1D4A`uF+yPiB5!AV1juG-lfWl9^xf
z$|v)G8Z-32WagK={s%JC`IpT6lGp!0X7FD-`|q3P*M3?jc8+xWk0T~={_?9RM}$AN
z_upV}a?kG1#QoFG!~YD_>^Jk0_fJKw+~Xwv_bB;(R2crjCU57S`AIzewW%x9F3})b
z4HBpEHqmTQwML_y|Ngz+-w1r;PwH6y!*}f8NeIrr|L@7${`^$(dihBISEO>#vA>p+
z59UAh&M)*?`R4on{`Vi`NBxt&`PIcQaLK_xaI9Pvsg-{oz|PN}`QZPVwH%+)G}mMp
zcYl8V3`xIF+~22nl6-SKq<%2L&sn(UZ@-qz-*&;@md~$!vi<qBz_!1@^>5Sty9oX~
z*?-nMod3*n{&G}hmC0g3Q&T5bZ@+ZaGoR)^K5|kkCw4RMhs0adFH)Z@7e@3OZvq%R
z9J3p|w0|@7&1v0aM3TL<RZF_GBKGc*%&}=_Ua{2CzRKHpdsgdpy#(8Z*my7BiSxJ;
zAo7U(Zbl`Z)M}HS1Oan$!rJ$a(LF6o^%fL<72wpWxZ~TGS$4-EMi{LHvo{8r+pb5^
zMXO~>wy9QnLAh>xgo2E@YT>m^CgbwaoN)Xu9;}O!WQ40bjWV}to#^VfC&yruud%H5
zuiN>E8zjyezL5_9THkIrW31el%OG;9aN(hi@W}(b5aD<QY}Xcl8y(#}6B`ozE`!Oq
zGX0$8;@iFT+l`E_Bi-F75-c}*bJhkf?i``^SdXL4?R;tsaNa<Qqh3D}l>J#ho$B0V
zne3Dbd$5VYH=KLS90|zee&L_(&F4<M+tkdFgWXfP%+<Fx^NC~qIH&d6=+zir>`+hx
z<aP0nld2?s<^a}9%JpgYN_#cI9uq;=S1W}{FWjSpa{2ldfiWc}qxVOa%^PH`M(2GE
zEo<|#SV7EXD=~KRO6R8WegIyp2Z|8418NQI*5V6h3wy2JU3c$eseHm7euxH=kNBs(
zX)X2xG^~79-A!~;sr~W50iE-=zv|LpO?vF7<ABdzo9<>@0IWgpqv5sdc`FVQywGT$
zovQm7v-<lE2+VSk_@j=p{kC*s+1(dPi{`7h95&hkGpb+hx9<*CFWy?Zm5+0w<{bbO
zw1p<Z&rY@J8A`eb&43u(bz_Z>8^KeL@^P5FQrrm(_FWxgXVZr?ge#yz^|TF*UH7AJ
z;THqCqt&v<UJoa?*OWEKS!|}=<9m9W4wvq#TlUr1Jm2c41swPzy##ebliR7q^X77(
zr9;zMD$`{CYWaKW%XrFO(jDvVPfO=jd%iH9WU;OmQt|Xw?O8N-8{Kk9yKi?NO{de1
z*CC^%wJgy=VR>q`yU_F9Cr_2#?zt)}oAUX*IW1pyEpXw9P4v&%Jh<{esAs-b9W2M<
zNEwKR^6V9Zdt4)UX|f$mU&?%pf@hzfDq^%q=b|&-tZ!!hB}|L;&hx$xkU+JnO>@;Y
zIYj5?t3Kn=p3*L~b*C4NFO7PC8-2W!tV32|SJN~PnYG(fn^w!JZ4dmp4b+%tT=x0l
zY7k6JJELiMnq5yq<yn4zfNeL0I};@Ks`!O8_tYSUn));7NvqQFI_QiBm+cIGH+odL
zViq61Nuh88WFS<-t~C7h!R%@ayw?h9HLxYu_843S*!87c&JDg^y{iPqWFG>}T~|S#
zfZ2ltdsO6skvVxt+_HLxt*S<8HTQZ>AFHQR4^_HTFsWL5M!wYYq+0RbuVE@`2+C>o
zI$Ug$W$;@ff)Y9v3XxbXC?~z7wYP^oB*QQ5vRzse@?&{X+g+>0G^_~Gr2E*4ouU0k
zB}DVD<#1<n3m@C6##tP27*Rj4U1-?C?TvqM&r@Y71K+k%qgHI$8o7=v_N=#(0Cye=
z7^C0`t10!?qx;}n>}z$<yBS;|lMsfG-Oczi>%5vq#VQm_&UQMl%g|%D8X5gsHzlOH
zXST*FJlyWy2K<g**HGYHUCn}dt$a&s&%U^pI&^D%fwX|}XVV?M3Y!V++T-^EY&s)f
z>TVT6lM7!xu00yt`v^R$3%}iqJ@w2Ij{1c^%`|W0AXZ>a>(6GJsa31mqbICU(H1%-
zw|(t)DlFMv9lKf8eC7teyxfzz{BB4&0)4J84>asUj_+@j>80p&d@DD{@t(L259bSa
z<-udQ+jp;Wz*hN`AJ<3Fa?wZE=jSMmZIEh%$t~6MY1Rt<XlQm@hUyuQrFCqPXg7k#
z$+Tpxi(hC-9^sW4)anO<0~hHAJ?)8NyW1UJn$z{ozQ5sSayI+C6(3ul@_JO8S5Gk=
zp(V)ZkHOFFt@cJCHI<fdTwP5N4FH(bT@5AtM)+6O1J+UD1rok-jstD$!J<(EMrZms
zTP0qEO_VH^TAz78>5hV{H}W14D1>m++RGo%@>{+64iuyb`k;4pTp3eNxWez-c4C&E
zg@sPt_E#dSBhLO{t+UolOvTlHa|DnuaD1$@AR(<&Y;6kk^L+~M8`|z8s(QX>NAbZV
za=f2TtSGV@Z((XZ3ITqvkCahMpXti5qc4&6-07!d#97=&roOd|hdKSQaxp$GU-K&`
z&T^%@A2LiK3+wKxw*!Y3*?;2V$UU7tC1JCk&p#{9Ar`M@>HMOlb}c;>R5p-%!^(o{
zp`FoTA@F`RX*9rbf9C*eMN!Y+u(O+c(f|Xm3C`7e@$B||uiyUeQ-g~KYn-SXU~w!C
z`37+bLHAV~xmE6=MdjYG#$zk0yq_WyTCk0i!#enrtyLdxXtkF(v3P4_$;KCh@_p8O
z*t0GD9x9ve>=K?=BTgYn^jl_M=PvxNl^Z+`g1*$-fO8SVX9Zu@R+S`#j^mx(UL}^8
z6ep7dHOj7KF+Ml-7ny#cyGICjkE!|G1bWqA>ZNWB(LWsQ1zYxPwHAjJbqD|hZE1}+
zI(DDeDFjliir3E-{uVT!l}qb&snyqkqO$EqWmp9DD^wv4Ptdsu(~C5(@FUbdHfy=Q
znShp&_Q;1i8_U)7UQ1f?ds<j@i8i)=b?WOY+*r79u4c<%973n#I7@Gh%q5IbD-Mfw
zMmlUX>^*rO^o9Ot2Kb@)srSRrGa^&R*~I&ay5f+}<?v1mMyEv)T>##_<*h8>ca?ug
z(xL6ku+l@;O}-T=v65l5ahPZ=bjdPB9Xb?x0EWkaP8_QJXr#1Nvrrv*B)ZuTxaDqq
zmaf@*>jikR((U4o{B1(QdgWAwqt@Dc+l~uS4fNnW)^Lp;WV}2fC+&3|TN`Nm2|#mZ
zu2nNmMg<|d1Wyp`WVUG#$^}f;BE0?B$Mdto^S_o@rv&@LHyN(0^UC({<Z8phYJPei
zAEPi}lBDM0kukQt3*MH#^23tbwvpglofzY64!378U9<%WIXPJaX_V00nnpFp-L)3H
zvU$TKZtm8-*{Zej9>?B(AzG2RkqYMy1DQ#`IzJ$V-K(JUD{L}jK^2g`DDH3K-AJ*x
zu_WWr?s8vLFKv2=_1AzM*f15TG>?<uOK-2BP+ns?eJA#b(NzbZ^c4uV6BwA`F6~9?
zt|cmq`#|+Y<+gwsXwN$sBy-_@r^{otgQf9yX<sU91)lUJtE4yf<1(OY2uQ<3VO;~&
z^>uFu&)C2s*qhkxDtAJVll5x2uw@p65o}ha*FzcH077S$;ca9n(*p&s<g;{|%XTo)
z_CssFWQgd(H>0Px=`_yQ&Y5DiK4Fq#zOJDMjL!>lz?jUPRf*|?xk9|yd(rGP*Wp`C
z_gr|--k!{<K+^mQ(06oP?cQ_LA2QnIAiYk>bKKeNiJEs=ffHkWyW%H2(sF=ljVoz-
znBQ8!E>6{HyD(<vY88FIKaUT%-T$A%JRtXnoAF0z4*zoi>%Zx^5S=#h4~|O#)N;o~
zI#!y}b3oQ}wQ?0RWOJw^YsQ7xBFG(y(;i%ngm&rEfA|HU8Iexw@m&@c4M(1c-0~=L
zyaczf3vf%iUHc9nr)$J}5XedQ&E~icE5T=YA%$soJ(dM6m~dox;-J~xs<X@yZB)xD
zyDJ6uFgcZLUbOQzw}H@;!?Z`^F+&ZftH!6dkkS-P`xTnepI<6m^yi!ujw?c|W-pUS
z)yp8QA*^~7C1tZ*!JiRuXuXs2*t!(KK>`@keu?gxZG0Y|?;)`VOsHdm9l$TAovpM2
zXldZkhf23d_R8#cSXa6MJ=V9^eGRV6gNaJ#fEvhlWEuQpygxBcgPFAl3t5p}x-xGP
zuU;eEXUx=u%1a<@q1M)64_kQ!uhgcuD@~oUTQzsmq*u#z6>_MJQLF`UWuv#-%S*wb
zX#yzs`1itUIEBmiT={5q=mH}fb^Y-62{-h`Z>4Xry*_l6r{nU#^_h#X&~|!jCeaGf
z0KeLX1;FFB-nPx&4y$FVG`%<F3n-hj>&rDuGFz{B8{xUSZ?-;!M7vkdm<;B<3NH=|
zwUS(x*N@8?<M<NWgD55u?A>uk9U`P5?Qeq=jI2?yyC<gac6}EvAmGs1mAthPGJ{<S
zt$Z+|0+jN7he7^ng{Y$qG(UX%kjPes7(~>YvD88lttijjPsHeuyST1YS_$-xg&ojS
zFPM`XmeZZCX^)&zU66YdNo`V<B3ZZ;bbWR@4$GZl^E7?Wu$~_yms49e$cbMbBka1)
zYPT{vs}CS`P+k}ywd+WD*34m#Qb9H>tgmN5`Fv<O#P_(QT?YqaV$?5#3sbU2!>*L=
zXCe-6`kVAU5m$zPt@^JFX?je<R8P`w8?-#HEewx7unP-%uYVmh@TuC_ilWdVZczi*
zvCgTy0?25sRQtxUA@+rp9V^w9IVfTK9s%yl%~Wqz2B+>fcS&?7DCr2(6ieU3x_=U@
z%DaG_w(XjCq;`6eQeUzr%WU5yhNlq|^$t}VH729d4giNX#+CPP&bBn6(|pKJvH9}U
z8*9F&kGb)L*ryfj4-1#xoaD6Dyevn9+x??s3dw}q1}1-W^Nil@(&y5ptkxF;5aA5=
zAJkYP2hH6SfUH9o+_wx`svekw<}XTE={D+3)b`a0#vgv&BJ)v2hvs~6SO>GTHbr-O
zz1`?NwFhThO5LkLEmMUl)oy+OsH?A6(?fLrkk+Z;lAGre8T0kbskPFoAQnb1y=v5h
zfrar0;GG-lo9=Fhi|0oiD&I<h`y}^k#ofx4Qd>xbP5jw8M1cDoert;4thYCpt1em7
z2d)dHujpO#b`!eJmf*qr7|O@j>7K0$8d<@rh3yD58_<$h)qMgksGCa*{BX{jD>?IS
zC3F$>zW_$UYEWD@)+HW{FtS`(cV=lBYf9Qu_+)4@EA%?l=204pQ18;%OlrgJm-=+S
zwa&zYj=+M`-`!)^j%@;%8hEFy700V($5qS;42=b1%LX+e0nMdTIKQ!a@Ft)2E8qD}
zgLciOLsy+m&5U6zJzJfCRzP*ijAWFYNxT?iaIsR#ZHD9-FGoGUNK(4LEB5RjzPUc2
zC2X2rweh~B_~8&_?cMxXY(4LKn-lNuOPO3z;#6i&6hif+N2tv&124@LnRn<V6MUGF
zJd130Vx_Y?;qndd7=^<W66Cav$K^wsEZQfo$K95B5KnC&HG6ZF6@T4Q`@1^^38m|W
zI^%op_Ri9`-^y52+3xOyK|XJJpho>HB52nRwolebhZE<GE!RF%<01H5y%Mz%k{OC~
zgJx$eTM`9^y{4XgV7lAw*FXkz9`0#mqfM9JzPo;R`W%m6YkIz8kgVomfQDF&(&5CH
zcUmTOmSXC*8so^O-8rx{=r%7cn4^0KUc2kex$A*0m&BgG=eSj&mE0wz)^;%VNtSxO
zURb)9kHgM2P<Tfsy)klY&gQ^kK!5t=2*NpC6(vBKd8N6W(&EX1qJzx$v%$lA>UwAJ
z_&yiv1>`dnz1C-4`NCSI{`7>K{lYVihu8F;0ngTiu?7`|?iHjn@e<(JA0iPsgyT80
z)MrC<ny>P%xVd%$O;f?DPka&IaZL8cZ-^Y}$}cR5`U1w->TSJ0D^XJUu=BzeNrx8O
zVI)|2gx&CPi68R$vOgAk$L{bJ!75yNVlB1;jKOk!Jh9x_<hy<*A;LEwIxv}<)#hMa
zg!{AWn|KxBmE^oI<}@12?PNr;hDJ4JYRN=8*=4U*t+Vc>b@k(ki_AKGy}|TN>zj(B
zh}q}L@$ReR%~{?&y!oTt9cAiZ<u|?ZS|Kjzl@fZ#@WEK3WWKk8->Puy#=bFl`H!<=
z)m(sGJr9l5Zc;ux-9V9blCbIY^wIbHodqu@UwvIok*H=+H$sE{Ns2%Fb^UvtmY<Dv
zD5^J;-6Dss0zSlHqc{MSz>SCLoUp5nTosAxmmOM?yN#M5xj%}Xa9cOcLaDepw-IrA
zJB^2}+NWCFU7GU#nd`i`qrE7t(H{oaW3losdiJz!H(GbHgo}vJBoGQhG)uGtcfeKf
zWp%!<3wyEKUB$TmNrP3n$=NrFsV^a@#Pac~T#}3fW2QhTjGDun;4QW+6b>hyfOVC1
zD%KT<Jlch7chbg}o^S7NbGE;c8qZ@=6WY^auipNq^JEq@kNOJh1aG9g2tE^imF$Ei
zh+7-1w$+ETFT#Y4?_^fjK6fEKHd$NR1^S~-i1j+#t}H_V`5do%<Rw(*qqy(FN9la)
zD5ZpT95uw~bA$Z~i~zRcljXgPR^n>|eO;ca-7*kpS)4W-gSn$iV;FmXsNROJ7-36N
zA3N~s_ObIUYeuI5Q+s-PgJ;$}Yf^FaTH?(Bdv8w*qRPi!;d4PylNQ1^J3Kkp2k2bz
z`sH;yZ|X#dtUb~@&%)vI{Dx(2l@SFjm03ZTap$o>fr2$%UMDlCGnb9E?2qbUXcI^J
z*r5wEvBQ;%_eN(RMAI+JIK8yWjVp>mdG)Sqy=xiPTHSX8yMXicBW0gAe5tct(y%-r
zdQ-9ZI6P=Feiud%sZV3_JKHdy_Vp-C3NkqDEwDV{Qo9+G<FU2tugh(rQT*=u83dom
zS8qL<s8y(4^LM#bH(9LP7jXhiCBdor^P8Fb)6wAMl<g+*h#n(y$gNh4z|iHD!ZM!a
zXlvBiLd9GL%8C6N>$mb=L|tI^uk8LmXPN)Ic7LnW{s+4sz{;)&Lul!Ru~c$sHW$cy
zq890kK(XrqP~;8ADo=6NZcym(cq(<~YLd^<P{zFUwvsPd;en!yv*Gqv^&$tX(P=q+
zzeeSj$(xoEe_B4K2=J&k!>9gQxiijT2O8?7(K?n_&`~-HhkS=_tDL!Na`F5zF}?Y4
z<ld^2c_N2!R6#R+dsfUv;~Fgs^P?*FaHVUm@B8MwDeETv4h-V;)?u&{(MRMBdc9E|
zL{bSMJ5yUfXwE={)o-iisI-8zlT~pp(5{Bcd!;ZtckuXCgB}B8+h1MHb!+4g#pA0%
z?Fl-)wPV9{YpiovJgyRP9!g0)l)0vPC^*e3z3~ygt3(id(OUB<cyDQ*$oGpz(gW}f
zVPy#!9K-@uWHQog-cAserxe<vatyXLL=%_3W|4qVxb|G9c$D5qKoMHOc=hCoSD|-N
znI6xN$CZxH)1xz1=MXCDjUt2e>4p9DOa{F3#{>+n>Xh`0O@}E1r~b6Jd>0h?acyhd
zSKQ26)CPJ^(34NUPFsI6?Rm3>d|x@6M`tYb>3%XOG6%+??92KZHgP87Xu$(FLVN|9
zWozBFhoxgOxl1&hlnKfr(3Z<#1I_&udR}2Z7V*PPbw2fFV^<nPLD`e5T?Ae(^3=w7
z9Y#tzH^ciy+N0SEs+7x#p)BX%w{`1CT0N?7{MWkLZhyKm>Sm7<*-7@BJAEuw`MJ_>
zHaFGcVU3mtse4EKVswz=+9yY}Wg$Y&k5e*cvWqVi^xR~%`QBrI2#r_W0_0D1Vc)@P
ztDgtL$r+<8q_0+Q^??tQUZ0yY&|edbS#s6!r;9hjW%+ifZAf&S=%wzl7=Th#IbLt}
zdt0gnfQUZfkeTOsD#~;<x}Myg3wVL?%*4~7w02>7XQ<<nJKELL0(j_%J%Ti!UA{We
zd-T+6oiyxJE;FzDJqnh~uy#hsdrUO^!W`@$6X!<bD{Oz!XYAqx?WpcTx};X8Snb)l
zqnjHK_dbTma#DVBQcstybGz^A%N#Y)&!^*T82?oWigiW(v@QR5o21mzc32iYZq}et
z*UhhYvejAt6?VvmqI~(HEY>I2qS0SRm8ATc2f((FmHEO(s2*3vl=y(d6!`2)#{IIW
zeD(dZ@o{B_EsR%dqq=Ukw6zq42_($O2YAhW9^`Px=doKE1;&l9RJvuP`Bs@a0-Z*~
zJ}FJgqdMNneSCzf!puSwR8<R?&0PzhNlIl~ZP3ziN?rHQ&!}{om$bsMWFd{05ab!0
z=lmFV-Wnq_F9%eV#nxkv@@EN)Rp@R$FzG?vHJ2h9^2E?4?0%T~STl6LY6|DEfJu%M
z9CJh_ts{8PLo{>hVzAHoLM{z8(ppza(DPyg!m#$emc#*QJx7DXbnLK6ZfSHG0qAD^
zd8u8k?Y_nAQNJX3{m>0q*2K3J4zCl-b0J(Ryu_+ioZgVv!EsZV)$}t&z3R)6wHmw^
zC$sk+40>d4<U;LiJ$VjvpS>Nn7C~s^P5WGNyJ{&9e~w-U0a(J5xDA{Iz={S{l(K+l
z`BPuZlaq_~t;_X(oW>k%(6C00NKUU@j-5hvP^@doh}N5Xq#e9A(-zQ_NxeK@;1}dH
zB0s8X*i~r^+2_Fs$qf}Y52y2s!>78|Fd{|f1@u_Yx;U}VL%N4&INa9xniYS~`QGol
zgYMRQ$t||A<;TND6v8cc(=G0M??X%BD((ou8FC6QsM*YIa`SnYE7f@LW(7!uR!2ME
z8@P*AR6WLnA|$<Fv7f9fblIW&C1++^X*?*eV#4gFCkmiS!9Kk+%%<88^&HdV*(w;h
z`htve->j*0SEJRHj5?(M3d=JtUpkXhGnjcVi^9$bGS}u+b9O{B8;kX7MXSCxd<!Lp
z8~4>030_=33TSZ6CUKXU!04rUC8r}|UFp#oUJ3yu&HXd((mPKpeB@T^+aX6JH;P!r
z%DFzt6B$SUzSR$CeVWIL!Z2(>G;x4h*UxS|^tr;he>mw7eZY?&PO!%7i*>QZtEe4Y
zg<2kn@+I~qtj7CKBRorS|6CNtZIO=C7Ay{1&-Y~lyXET%e0T&H(GZ;$PtQav6zaSd
zoH~7`^M$Gz6ZOT~nzPt_#eQ47lR1_8>uC-9A3vNHy5E3x?sPz28_#Mw(@EZbKJf~b
zEuVeF8r<O4>$R<Jv%^H57yDa-_Jig0YTo2+jo;=Gn*PxAU)zQ@qgp1n+GAeJ8Qgo7
zTZfr((P2YLml2@frfP0Z6T5xY1H#K<X^-oRWnhZ?LIvLN=BF}8v9vPH(#45-H`X6|
z%6GD7D!#H!*k#<u?5UR_5yW<r=LbP54c0w0m)E9@j;y`bF2N!JIzgPS*Kl9CYP0C;
z+s1Yg`unb~?`*9JGeRXR9!f$FsjuTrBU`%0ywp)B%4~#mLmPAks0chpx6S0%IX%wj
zLIv~==<M;io#MO5LJfb|I9`C6I4fv@7(IhYohQe`(f75p%3@S#vQ4*KtO^4)e3c)?
z8^)RM3VA&)*{~Hav!-;5?Gx+{4C-;(Ho8VDHzth_bJd2lO+?c=e&XBDWI8f~`j}EG
z1;1w?=Syxqg@$LP7_fMa!)lwq^!XvZY=J)ME%!Mx=NTw>@Zh`}*clENO<&R<L#T(?
zCR?KHTCy%aCd>`uK~)1=nfV2uW@!XLE`u<5<AL@;p`z7H{MI6=7j;Zqhx+y=F65z;
z!-%*aa?WwSd&P^=+Lfny?yxhN9tN>``=Y8^E1p>q*hi^3rCe~b;^k%iYII|)`>Doo
zII<6Uy5Zgm)I&0OdtD7H@-mCb8-;m~toN%hSw2N}LC*Y6G91abr&4E+G8ND<v65&m
zSarXcwJl6PrS|8+^sCi==}>FH*%ZqC4p+^sW6iBWn>v&vhoFb6+oe>!x%kVZxy8RS
za{qk#@V{x~;+<ymAB@~W_?<RtYFe6ivh!m*g9P_pPH?Pj9x%6#&dyqZQa2uuvc*;S
zEQe8Zzz*O0V9_`3<1QbJPW|Kf>mjd0uX!0nrC{_a3|SXttZETX%<FRn@OFzu@jx1k
z3VwYoBGxJ18<;TmOO`Op^XN9XTo~vFs)}Y>W}|Br6gr;^V8hwmqFA6dD&IDO(KW*h
zlFySn>NExby4s@77VRr$FHeyK{AT<T*urV}g+$eG57$+mgdKO>JW3o}2K$zbHCP^B
zDh+au`oigDfhfIlPo+^EtuI6{`6l<0d>LV@F$x?mjYX04wAlrcFri{X_R_8L*Z|ES
z>vl<L9vIug_>Ojs1JbSmnIZQE+MqbEm*_pKKzFb<09tz~)b8oM66`s;aJijM=vY_Q
z^tX>Xn73I`OQXxzf#Y&u&p&iOj?2VAOu@OfOslPS`&&)D6mT^F`69(Ff*CLQ+;l$o
z7q4;a@w*@Oar{_bj@o%VhJ`?stEJ6ij~z`)ED20^wfs!gvS9|zGd9!;8|`d+K<V%~
zZI+%D3Erc%*c~cuTL?E<9{oE#j(NNSs{$RhjZdIms>3r-*G^}Bv#l+_^;aXgbAb~#
zz-D5<8?A=Y^$Xa18hO<fGQ`aJx4ZrJ^T;n3RU2Whg$MJ=D$hoLwm{p(p~w`Wsk=}O
zNFH~0SEs)gVjNyrNfYJfqj~7pjKE!Hr?`VD6m0CujlsE78mJ>3^((5JD-`a%n=qAG
zo-BhkRD}3u6Drw_!<6t4@j-f}EMUt>PtBmfsgSk%VW=Bn(<;0seb~Ktcz3eyH9DsW
z9=Bu?IGihE$}En)$@va1QGc6x(|~ODTY>0~{2d#H&wW{(Zs?M|?N=5+<ZO2B&75W`
z`+h)QHd^a;44SGMXWhd%P%#<wEFnEr*L~yWPoJ!Ec?q}4XV!`_Kj?xRC+o=-dXgW|
zYSoih+qMq+<aSc&4;*8_og|tU$%^zn^M1e8eyx;A#6UYgjQeDf2yPD%j=^>JU5vk*
zzR-TV+`Ts_^#(x4T|j*8zPsAVN7JZNBC;9@pzL`^Zr%NMuZ@G;V|26frSHy)=z|#c
z5E=IC*V7R@3YFP9V8N2rlsv=krzBTNfjl9gM_Gem9rF5WXXhz3=g0eQsoOfUVddOu
za*KV`-P$C<6+aL1@cc|iX@@`V{Kq^$r}5d;J%N7CSL1fWJ~v9-?tCcgr4qSpCQzC@
zAN^NlcLQj$g`Br%?9pAB3(ANOhczP~3Dn(A%P3W~UJ&9=oZwb>2Mi9|v*$(Y5QF+=
zH7cJQngpD~!Y*VgYj^ih>7CRAxyN<hUc`qr{eWBMGvzOA?mi&*j>ymtLInE~RI6MK
zex~GM(!JWh#wSI(-^!{6&58rMhXx22&px|ealKgbSAV=7SxN19wGbOWT<BOV&rAJ9
zJi0Sy`P?qPiw7z#MiRW*&JX=+?bGqN+Os|9{Kc!*m{*dU)cAhL#vT)9Svs9pXHRw*
zEld3&GFrIU;wX&Oy2U?UdG;-{8$$Op5K7JJ#GF=QU^=@-om%)9NUFt<$hS5ap=W^%
z%qsg4knTev)oqFB+FW^k8jIX}Yoh(=z^5tdCFdk=h6hC)##MyE#*hW2{dc>4v&<vQ
zVf&S*rCSz$&(EBTb{<JHhe2>Kf9Gq~t3ECfAW4O+w=jgbKP8sWF-v3D!w_^1a1}bf
zv`uZv>CeaVizJL3?er=&ZWD3;T3IxsZ#h;6i00MY_vN*C9~0}ybA_4P|Lpu}^m=T1
z751~47he5i4F(QT`!e22y(4{_ZQ$<eSlaf!{WtH13aF=fC|0%aE|5Yme{)}cl=EGw
z*xb&h-{01_oW}L7GkqS0w?iICX<=&EqjaPy8YecsMu081tEt$^$*Rw1CY=rvM}8a%
zgQZpHRV?|?w^omwk67pLHp6Z-SI_o-)Hqj5z46@xPtuqg&nvpUyDuAawTMu9Q!7OS
z?g62iMWc&84WMIz`#5Dh)i|d`6;44_EBtbKRw?{EgC4^BQ2&bEiy>z!H>b^m$TaTT
zW=KM_&{MJO+r{hc@oZb1Q^d!rLHG7e@vG=sUh{pq;TG>Jzj~(rmCpb3A^rcR&TqFn
ze^&YT&pmRN7wcN;uAjB%tD6mb)_Pmh&f6}{ZSM6MB^Mm7{{1xl(=DsNQ^8j7mP8fm
zMhjiP9xt_p;xvq0lIhTRlkK9U0K4z~F>IBCU5hzBxXZjJvrlaZd}aawTG$||lK%LV
zbi`zqB{eKu4(iu5XkTV1-E~LIj@`>%HU*7w)M~&Nv$}Pqy*9x?iOvJAcxA&A-;iOa
zloslS?X8t^&#R!-Y(&+r&BNqYT9G{=hS~@Jcmyx8*eP+h^c!@&9@RO}Rt>E`H}~_p
zqO>2je-n!G=tMrq%0#fqpuO@K0fpA*e$Zq)z@{EYot|nppOZ$@G7k&RzgK8<5Ei`~
z9XHFd&9{3M%n3o{cv%$OcfEH3>ldt8)3|2qID8@|Q2A;NB2u?_w!h!);V{VIaK}6%
zZxk%+>vXqeBsn08B41cXpG_O#rL;e-$Rt{K*cL`{EM@My;`W1fJZoqeO1NvlVrWUP
ztNt=}*psrr$?Gy06TX)R+*ZTA)Fz2|a3qATgXV!T=f3JqZ-_AadXH0;90>4(0oLj0
zT8n1w{+5Rq0Q#L%&lYzrvokO}&<Zwe%nnl8=#y0ji`cI`lH&=7!LnAI6_-V$y3efH
zMMd{iESTzOlniUl^XVAT;)uq3^ANgSsEgR|0$U1WI~PT`!YzGRppI<4E6_8MgruB_
zdv1$GpXTlbpdHXx=me%r<q}v28!g`W#R=ZNl`?zocD{N32<qjb<>m+83Z__niQWRA
zkA<6olT9Pd0q1hZEAV5P=h`mCk~|+=R|{IMG6b~uxMoxZp_V_tX2b%5->xti@zD-F
z1)TfLW)wFu*IVIV?6QA*JCENQKREqc<3E0WS`<Z6KaZdPC~M_c5Ptpq#Q#x-|2lpD
zPh|w2pRWI>GLrmj+vcysD*sfk^)K4e#9!*+4dO3--~{>CdQI}L^{B>Q%i5j%lEy!d
z1*hA8p-16=<%7mMdGP%o+Tx84{m*T2vO)Z*kL-Q-pU(UDYj=z3&u`a$v*F~oG{}aX
zKTN`LnvG7g(;!>6)p7{OB!~a&8rpBrpKkxT|N8bHg8bNie&ghy?g9RWE#gP=^ZPZE
t?Qi+Tuq3}%_Uq<K{-OB)hx2Q3{C=z9{?2}1E;vbd8oxo%OyYj~{{S({RO|o%

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f04a7e8..646190b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -312,7 +312,7 @@ export default function App() {
     <div className="app-layout">
       <Sidebar activeView={view} onViewChange={handleViewChange} user={user} onSignOut={signOut} />
 
-      <div className="main-wrapper">
+      <main className="main-wrapper">
         <TopBar
           onSearch={handleSearch}
           searchQuery={searchQuery}
@@ -325,52 +325,42 @@ export default function App() {
 
         {/* ========== DASHBOARD VIEW ========== */}
         {view === 'dashboard' && (
-          <>
-            <div className="page-header">
-              <div className="page-header__row">
-                <div>
-                  <h1>Overview</h1>
-                  <h2>Protein Structure</h2>
-                </div>
-                <div className="page-header__actions">
-                  <div className="page-header__date">
-                    <span>🕐</span>
-                    <span>24H</span>
-                    <span style={{ marginLeft: 8 }}>📅</span>
-                    <span>
-                      {new Date().toLocaleDateString('en-US', {
-                        day: 'numeric',
-                        month: 'long',
-                        year: 'numeric',
-                      })}
-                    </span>
-                  </div>
-                  <button
-                    className="btn btn--primary"
-                    onClick={() => handlePredict()}
-                    disabled={status === 'processing'}
-                  >
-                    Prediction Request
-                    <span style={{ fontSize: 18 }}>→</span>
-                  </button>
-                </div>
+          <div className="dashboard-grid">
+            <div className="left-column">
+              <div className="mol-viewer-card">
+                <MolViewer pdbData={pdbData} status={status} />
+                <PredictionStatus status={status} error={error} />
+                <ConfidenceBar plddtData={plddtData} />
               </div>
             </div>
 
-            <div className="dashboard-grid">
-              <div className="left-column">
-                <div className="mol-viewer-card">
-                  <MolViewer pdbData={pdbData} status={status} />
-                  <PredictionStatus status={status} error={error} />
-                  <ConfidenceBar plddtData={plddtData} />
+            <div className="right-column">
+              <div className="page-header">
+                <div className="page-header__row">
+                  <div>
+                    <h1>Overview</h1>
+                    <h2>Protein Structure</h2>
+                  </div>
+                  <div className="page-header__actions">
+                    <div className="page-header__date">
+                      <span>🕐</span>
+                      <span>24H</span>
+                      <span style={{ marginLeft: 8 }}>📅</span>
+                      <span>
+                        {new Date().toLocaleDateString('en-US', {
+                          day: 'numeric',
+                          month: 'long',
+                          year: 'numeric',
+                        })}
+                      </span>
+                    </div>
+                  </div>
                 </div>
               </div>
-
-              <div className="right-column">
                 <SequenceInput
                   sequence={sequence}
                   setSequence={setSequence}
-                  onPredict={() => handlePredict()}
+                  onPredict={handlePredict}
                   status={status}
                 />
                 <PldtMetrics plddtData={plddtData} sequence={sequence} />
@@ -392,7 +382,6 @@ export default function App() {
                 />
               </div>
             </div>
-          </>
         )}
 
         {/* ========== DISCOVERY VIEW ========== */}
@@ -425,35 +414,33 @@ export default function App() {
 
         {/* ========== ANALYSIS VIEW ========== */}
         {view === 'analysis' && (
-          <>
-            <div className="page-header">
-              <div className="page-header__row">
-                <div>
-                  <h1>{selectedProtein?.proteinName || 'Analyzing Protein…'}</h1>
-                  <h2>
-                    {selectedProtein
-                      ? `${selectedProtein.accession} · ${selectedProtein.organism}`
-                      : 'Fetching protein data…'}
-                  </h2>
-                </div>
-                <div className="page-header__actions">
-                  <button className="btn btn--ghost" onClick={handleBackToSearch}>
-                    ← Back to Results
-                  </button>
-                </div>
+          <div className="dashboard-grid">
+            <div className="left-column">
+              <div className="mol-viewer-card">
+                <MolViewer pdbData={pdbData} status={status} />
+                <PredictionStatus status={status} error={error} />
+                <ConfidenceBar plddtData={plddtData} />
               </div>
             </div>
 
-            <div className="dashboard-grid">
-              <div className="left-column">
-                <div className="mol-viewer-card">
-                  <MolViewer pdbData={pdbData} status={status} />
-                  <PredictionStatus status={status} error={error} />
-                  <ConfidenceBar plddtData={plddtData} />
+            <div className="right-column">
+              <div className="page-header">
+                <div className="page-header__row">
+                  <div>
+                    <h1>{selectedProtein?.proteinName || 'Analyzing Protein…'}</h1>
+                    <h2>
+                      {selectedProtein
+                        ? `${selectedProtein.accession} · ${selectedProtein.organism}`
+                        : 'Fetching protein data…'}
+                    </h2>
+                  </div>
+                  <div className="page-header__actions">
+                    <button className="btn btn--ghost" onClick={handleBackToSearch}>
+                      ← Back to Results
+                    </button>
+                  </div>
                 </div>
               </div>
-
-              <div className="right-column">
                 <ProteinBio protein={selectedProtein} />
                 <LabReadiness metrics={labMetrics} isLoading={labLoading} />
                 <PldtMetrics plddtData={plddtData} sequence={sequence} />
@@ -474,9 +461,8 @@ export default function App() {
                 </div>
               </div>
             </div>
-          </>
         )}
-      </div>
+      </main>
 
       <Toast toasts={toasts} onDismiss={dismissToast} />
     </div>
diff --git a/frontend/src/components/MolViewer.jsx b/frontend/src/components/MolViewer.jsx
index 1c741bb..fe5c0d4 100644
--- a/frontend/src/components/MolViewer.jsx
+++ b/frontend/src/components/MolViewer.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback, memo } from 'react';
 
 const VIZ_STYLES = [
   { key: 'cartoon', label: 'Cartoon', icon: '🎨' },
@@ -7,7 +7,7 @@ const VIZ_STYLES = [
   { key: 'surface', label: 'Surface', icon: '◐' },
 ];
 
-export default function MolViewer({ pdbData, status }) {
+export default memo(function MolViewer({ pdbData, status }) {
   const containerRef = useRef(null);
   const viewerRef = useRef(null);
   const [vizStyle, setVizStyle] = useState('cartoon');
@@ -117,6 +117,7 @@ export default function MolViewer({ pdbData, status }) {
                 key={s.key}
                 className={`mol-viewer__style-btn${vizStyle === s.key ? ' mol-viewer__style-btn--active' : ''}`}
                 title={s.label}
+                aria-label={s.label}
                 onClick={() => {
                   setVizStyle(s.key);
                   applyStyle(s.key);
@@ -131,6 +132,7 @@ export default function MolViewer({ pdbData, status }) {
             <button
               className="mol-viewer__overlay-btn"
               title="Fullscreen"
+              aria-label="Fullscreen"
               onClick={() => containerRef.current?.requestFullscreen?.()}
             >
               <svg
@@ -152,6 +154,7 @@ export default function MolViewer({ pdbData, status }) {
             <button
               className="mol-viewer__overlay-btn"
               title="Reset view"
+              aria-label="Reset view"
               onClick={() => {
                 if (viewerRef.current) {
                   viewerRef.current.zoomTo();
@@ -180,4 +183,4 @@ export default function MolViewer({ pdbData, status }) {
       )}
     </div>
   );
-}
+});
diff --git a/frontend/src/components/PldtMetrics.jsx b/frontend/src/components/PldtMetrics.jsx
index 5e555ea..ba29b23 100644
--- a/frontend/src/components/PldtMetrics.jsx
+++ b/frontend/src/components/PldtMetrics.jsx
@@ -86,7 +86,7 @@ export default function PldtMetrics({ plddtData, sequence }) {
         <div className="card__title">
           <span
             className="card__title-icon"
-            style={{ background: 'rgba(27, 37, 89, 0.08)', color: 'var(--navy)' }}
+            style={{ color: 'var(--accent)' }}
           >
             ❤️
           </span>
@@ -120,7 +120,7 @@ export default function PldtMetrics({ plddtData, sequence }) {
               padding: '2px 10px',
               fontWeight: 700,
               fontSize: 13,
-              color: 'var(--navy)',
+              color: 'var(--text-primary)',
             }}
           >
             {mean !== null ? mean.toFixed(2) : '—'}
diff --git a/frontend/src/components/ProteinMetrics.jsx b/frontend/src/components/ProteinMetrics.jsx
index 751cc6d..f2ae3d8 100644
--- a/frontend/src/components/ProteinMetrics.jsx
+++ b/frontend/src/components/ProteinMetrics.jsx
@@ -10,7 +10,7 @@ export default function ProteinMetrics({ plddtData, seqLength }) {
         <div className="card__title">
           <span
             className="card__title-icon"
-            style={{ background: 'rgba(27, 37, 89, 0.08)', color: 'var(--navy)' }}
+            style={{ color: 'var(--accent)' }}
           >
             📊
           </span>
@@ -81,7 +81,7 @@ export default function ProteinMetrics({ plddtData, seqLength }) {
                 cy="60"
                 r="50"
                 fill="none"
-                stroke="var(--navy)"
+                stroke="var(--text-primary)"
                 strokeWidth="8"
                 strokeLinecap="round"
                 strokeDasharray={`${(plddtData.mean / 100) * 314} 314`}
@@ -95,7 +95,7 @@ export default function ProteinMetrics({ plddtData, seqLength }) {
               textAnchor="middle"
               fontSize="22"
               fontWeight="800"
-              fill="var(--navy)"
+              fill="var(--text-primary)"
             >
               {plddtData ? Math.round(plddtData.mean) : '—'}
             </text>
diff --git a/frontend/src/components/SequenceInput.jsx b/frontend/src/components/SequenceInput.jsx
index 16ccdf3..7966faa 100644
--- a/frontend/src/components/SequenceInput.jsx
+++ b/frontend/src/components/SequenceInput.jsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState, useEffect, memo } from 'react';
 
 const defaultAminoAcids = 'A,C,D,E,F,G,H,I,K,L,M,N,P,Q,R,S,T,V,W,Y';
 const aminoAcidsStr = (import.meta.env.VITE_VALID_AMINO_ACIDS || defaultAminoAcids).replace(
@@ -7,20 +7,31 @@ const aminoAcidsStr = (import.meta.env.VITE_VALID_AMINO_ACIDS || defaultAminoAci
 );
 const VALID_AMINO_ACIDS = new Set(aminoAcidsStr.split(''));
 
-export default function SequenceInput({ sequence, setSequence, onPredict, status }) {
+const SequenceInput = memo(function SequenceInput({ sequence: externalSeq, setSequence: setExternalSeq, onPredict, status }) {
+  const [localSeq, setLocalSeq] = useState(externalSeq || '');
+
+  useEffect(() => {
+    setLocalSeq(externalSeq || '');
+  }, [externalSeq]);
+
   const isLoading = status === 'processing';
-  const charCount = sequence.trim().length;
+  const charCount = localSeq.trim().length;
 
   const invalidChars = useMemo(() => {
     const bad = new Set();
-    for (const ch of sequence) {
+    for (const ch of localSeq) {
       if (!VALID_AMINO_ACIDS.has(ch)) bad.add(ch);
     }
     return [...bad].sort();
-  }, [sequence]);
+  }, [localSeq]);
 
   const hasInvalid = invalidChars.length > 0;
 
+  const handlePredictClicked = () => {
+    setExternalSeq(localSeq);
+    onPredict(localSeq);
+  };
+
   return (
     <div className="card" id="sequence-input-card">
       <div className="card__header">
@@ -40,7 +51,7 @@ export default function SequenceInput({ sequence, setSequence, onPredict, status
             onClick={async () => {
               try {
                 const text = await navigator.clipboard.readText();
-                if (text) setSequence(text.toUpperCase().replace(/[^A-Z]/g, ''));
+                if (text) setLocalSeq(text.toUpperCase().replace(/[^A-Z]/g, ''));
               } catch {
                 /* clipboard permission denied */
               }
@@ -60,7 +71,7 @@ export default function SequenceInput({ sequence, setSequence, onPredict, status
               <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
             </svg>
           </button>
-          <button className="card__action-btn" title="Clear" onClick={() => setSequence('')}>
+          <button className="card__action-btn" title="Clear" onClick={() => setLocalSeq('')}>
             ✕
           </button>
         </div>
@@ -71,8 +82,8 @@ export default function SequenceInput({ sequence, setSequence, onPredict, status
           id="sequence-textarea"
           className="sequence-input__textarea"
           placeholder="Paste your amino-acid sequence here (single letter codes: A, C, D, E, F, G, H, I, K, L, M, N, P, Q, R, S, T, V, W, Y)…"
-          value={sequence}
-          onChange={(e) => setSequence(e.target.value.toUpperCase().replace(/[^A-Z]/g, ''))}
+          value={localSeq}
+          onChange={(e) => setLocalSeq(e.target.value.toUpperCase().replace(/[^A-Z]/g, ''))}
           spellCheck={false}
           style={hasInvalid ? { borderColor: 'var(--warning)' } : undefined}
         />
@@ -104,7 +115,7 @@ export default function SequenceInput({ sequence, setSequence, onPredict, status
           <button
             id="predict-btn"
             className="sequence-input__predict-btn"
-            onClick={onPredict}
+            onClick={handlePredictClicked}
             disabled={isLoading || charCount < 10 || hasInvalid}
           >
             {isLoading ? (
@@ -134,4 +145,6 @@ export default function SequenceInput({ sequence, setSequence, onPredict, status
       </div>
     </div>
   );
-}
+});
+
+export default SequenceInput;
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 6b0daa1..ea0bb80 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -24,6 +24,7 @@ export default function Sidebar({ activeView, onViewChange, user, onSignOut }) {
         <button
           className={`sidebar__nav-item${activeView === 'dashboard' ? ' sidebar__nav-item--active' : ''}`}
           title="Dashboard"
+          aria-label="Dashboard"
           onClick={() => onViewChange('dashboard')}
         >
           <svg
@@ -45,6 +46,7 @@ export default function Sidebar({ activeView, onViewChange, user, onSignOut }) {
         <button
           className={`sidebar__nav-item${activeView === 'discovery' || activeView === 'analysis' ? ' sidebar__nav-item--active' : ''}`}
           title="Search & Discovery"
+          aria-label="Search and Discovery"
           onClick={() => onViewChange('discovery')}
         >
           <svg
@@ -61,7 +63,7 @@ export default function Sidebar({ activeView, onViewChange, user, onSignOut }) {
             <line x1="21" y1="21" x2="16.65" y2="16.65" />
           </svg>
         </button>
-        <button className="sidebar__nav-item" title="History">
+        <button className="sidebar__nav-item" title="History" aria-label="History">
           <svg
             width="20"
             height="20"
@@ -76,7 +78,7 @@ export default function Sidebar({ activeView, onViewChange, user, onSignOut }) {
             <polyline points="12 6 12 12 16 14" />
           </svg>
         </button>
-        <button className="sidebar__nav-item" title="Taxonomy">
+        <button className="sidebar__nav-item" title="Taxonomy" aria-label="Taxonomy">
           <svg
             width="20"
             height="20"
@@ -92,7 +94,7 @@ export default function Sidebar({ activeView, onViewChange, user, onSignOut }) {
             <path d="M2 12l10 5 10-5" />
           </svg>
         </button>
-        <button className="sidebar__nav-item" title="Settings">
+        <button className="sidebar__nav-item" title="Settings" aria-label="Settings">
           <svg
             width="20"
             height="20"
@@ -110,7 +112,7 @@ export default function Sidebar({ activeView, onViewChange, user, onSignOut }) {
       </nav>
 
       <div className="sidebar__bottom">
-        <button className="sidebar__nav-item" title="Help">
+        <button className="sidebar__nav-item" title="Help" aria-label="Help">
           <svg
             width="20"
             height="20"
@@ -131,6 +133,7 @@ export default function Sidebar({ activeView, onViewChange, user, onSignOut }) {
           <button
             className="sidebar__avatar-btn"
             title={user?.user_metadata?.full_name || user?.email || 'User'}
+            aria-label="User menu"
             onClick={() => setShowMenu(!showMenu)}
             id="sidebar-user-btn"
           >
diff --git a/frontend/src/components/TopBar.jsx b/frontend/src/components/TopBar.jsx
index 9d0dc80..c0eeaed 100644
--- a/frontend/src/components/TopBar.jsx
+++ b/frontend/src/components/TopBar.jsx
@@ -47,7 +47,7 @@ export default function TopBar({
   return (
     <header className="topbar">
       <div className="topbar__left">
-        <span style={{ fontSize: 20, fontWeight: 700, color: 'var(--navy)', letterSpacing: -0.5 }}>
+        <span style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', letterSpacing: -0.5 }}>
           Protly<span style={{ color: 'var(--accent)' }}>.</span>
         </span>
 
@@ -123,6 +123,7 @@ export default function TopBar({
                 className="topbar__search-clear"
                 onClick={() => setSearchQuery('')}
                 title="Clear search"
+                aria-label="Clear search"
               >
                 ✕
               </button>
@@ -130,7 +131,7 @@ export default function TopBar({
           </div>
         )}
 
-        <button className="topbar__icon-btn" title="Notifications" id="notifications-btn">
+        <button className="topbar__icon-btn" title="Notifications" aria-label="Notifications" id="notifications-btn">
           <svg
             width="18"
             height="18"
@@ -152,6 +153,7 @@ export default function TopBar({
             className="topbar__user-btn"
             onClick={() => setShowUserMenu(!showUserMenu)}
             title={displayName}
+            aria-label="User menu"
             id="topbar-user-btn"
           >
             {avatarUrl ? (
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 49e9f8c..5de75b3 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,20 +4,20 @@
 
 :root {
   /* ---- Brand Palette ---- */
-  --navy: #1b2559;
-  --navy-light: #2d3a6e;
-  --navy-dark: #111940;
-  --accent: #4a6cf7;
-  --accent-hover: #3b5de7;
-  --accent-glow: rgba(74, 108, 247, 0.15);
+  --navy: #0a0a0a;
+  --navy-light: #1a1a1a;
+  --navy-dark: #000000;
+  --accent: #ffb547;
+  --accent-hover: #e8a036;
+  --accent-glow: rgba(255, 181, 71, 0.15);
 
   /* ---- Neutrals ---- */
-  --bg: #f4f7fe;
-  --surface: #ffffff;
-  --border: #e9edf7;
-  --text-primary: #1b2559;
-  --text-secondary: #8f9bba;
-  --text-muted: #a3aed0;
+  --bg: #000000;
+  --surface: #0f0f0f;
+  --border: #222222;
+  --text-primary: #e0e0e0;
+  --text-secondary: #a0a0a0;
+  --text-muted: #555555;
 
   /* ---- pLDDT Confidence Colors ---- */
   --plddt-very-high: #0053d6;
@@ -43,19 +43,20 @@
   --space-2xl: 48px;
 
   /* ---- Radius ---- */
-  --radius-sm: 8px;
-  --radius-md: 14px;
-  --radius-lg: 20px;
-  --radius-xl: 24px;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 4px;
+  --radius-xl: 8px;
   --radius-full: 9999px;
 
   /* ---- Shadows ---- */
-  --shadow-card: 0 2px 12px rgba(27, 37, 89, 0.04);
-  --shadow-hover: 0 4px 24px rgba(27, 37, 89, 0.08);
-  --shadow-modal: 0 8px 40px rgba(27, 37, 89, 0.12);
+  --shadow-card: none;
+  --shadow-hover: none;
+  --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.8);
 
   /* ---- Type ---- */
   --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
 }
 
 /* ---- Reset ---- */
@@ -152,16 +153,17 @@ textarea {
 .sidebar__logo {
   width: 42px;
   height: 42px;
-  background: linear-gradient(135deg, var(--accent), #7c3aed);
-  border-radius: var(--radius-md);
+  background: var(--navy-light);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: var(--accent);
   font-weight: 800;
   font-size: 18px;
   margin-bottom: var(--space-2xl);
-  box-shadow: 0 4px 16px rgba(74, 108, 247, 0.3);
+  box-shadow: none;
 }
 
 .sidebar__nav {
@@ -217,12 +219,13 @@ textarea {
 .sidebar__avatar {
   width: 38px;
   height: 38px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, #4a6cf7, #7c3aed);
+  border-radius: var(--radius-sm);
+  background: var(--navy-light);
+  border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: var(--accent);
   font-weight: 600;
   font-size: 14px;
 }
@@ -340,7 +343,7 @@ textarea {
 
 /* --- Header Area --- */
 .page-header {
-  padding: var(--space-xl) var(--space-xl) var(--space-md);
+  padding: 0 0 var(--space-lg);
 }
 
 .page-header__row {
@@ -354,7 +357,7 @@ textarea {
 .page-header h1 {
   font-size: 32px;
   font-weight: 800;
-  color: var(--navy);
+  color: var(--text-primary);
   letter-spacing: -0.5px;
 }
 
@@ -435,24 +438,42 @@ textarea {
 
 /* --- Main Grid --- */
 .dashboard-grid {
-  padding: 0 var(--space-xl) var(--space-xl);
-  display: grid;
-  grid-template-columns: 5fr 4fr;
-  gap: var(--space-lg);
+  display: flex;
   flex: 1;
+  height: calc(100vh - 73px); /* Exact height under topbar */
+  border-top: none; 
+}
+
+.left-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  min-width: 0;
+  background: var(--bg);
 }
 
 /* --- Cards --- */
 .card {
-  background: var(--surface);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  overflow: hidden;
-  transition: box-shadow 0.2s ease;
+  background: transparent;
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+  box-shadow: none;
+  overflow: visible;
+  transition: border-color 0.2s ease;
+  padding-bottom: var(--space-lg);
+  margin-bottom: var(--space-lg);
 }
 
 .card:hover {
-  box-shadow: var(--shadow-hover);
+  box-shadow: none;
+  border-color: var(--accent);
+}
+
+.card:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
 }
 
 .card__header {
@@ -513,21 +534,24 @@ textarea {
    MolViewer card
    ============================================================ */
 .mol-viewer-card {
+  flex: 1;
   position: relative;
-  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  border-radius: 0;
   overflow: hidden;
-  background: var(--surface);
-  box-shadow: var(--shadow-card);
+  background: #000;
+  box-shadow: none;
 }
 
 .mol-viewer-card:hover {
-  box-shadow: var(--shadow-hover);
+  box-shadow: none;
 }
 
 .mol-viewer__container {
+  flex: 1;
   width: 100%;
-  height: 380px;
-  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
+  background: #000;
   position: relative;
 }
 
@@ -783,9 +807,11 @@ textarea {
    ============================================================ */
 
 .right-column {
+  width: clamp(520px, 40vw, 800px); /* Responsive but fixed-like width */
   display: flex;
   flex-direction: column;
-  gap: var(--space-lg);
+  padding: var(--space-2xl) var(--space-xl);
+  overflow-y: auto;
 }
 
 /* --- Sequence Input --- */
@@ -797,7 +823,7 @@ textarea {
   border-radius: var(--radius-md);
   padding: var(--space-md);
   font-size: 12px;
-  font-family: 'Courier New', monospace;
+  font-family: var(--font-mono);
   color: var(--text-primary);
   resize: vertical;
   transition: border-color 0.2s ease;
@@ -858,7 +884,7 @@ textarea {
 .plddt-metrics__score-value {
   font-size: 42px;
   font-weight: 800;
-  color: var(--navy);
+  color: var(--text-primary);
   line-height: 1;
 }
 
@@ -1157,7 +1183,7 @@ textarea {
 .search-panel__title {
   font-size: 36px;
   font-weight: 800;
-  color: var(--navy);
+  color: var(--text-primary);
   letter-spacing: -0.5px;
   margin-bottom: var(--space-sm);
   background: linear-gradient(135deg, var(--navy) 0%, var(--accent) 100%);
@@ -1484,7 +1510,7 @@ textarea {
 
 .discovery-table__gene {
   font-weight: 500;
-  color: var(--navy);
+  color: var(--text-primary);
 }
 
 .discovery-table__organism {
@@ -1540,7 +1566,7 @@ textarea {
 .discovery-table__empty h3 {
   font-size: 18px;
   font-weight: 700;
-  color: var(--navy);
+  color: var(--text-primary);
   margin-bottom: var(--space-sm);
 }
 
@@ -1601,7 +1627,7 @@ textarea {
 .protein-bio__name {
   font-size: 16px;
   font-weight: 700;
-  color: var(--navy);
+  color: var(--text-primary);
   margin-bottom: var(--space-md);
   line-height: 1.4;
 }
@@ -1715,7 +1741,7 @@ textarea {
 .lab-readiness__tile-value {
   font-size: 22px;
   font-weight: 700;
-  color: var(--navy);
+  color: var(--text-primary);
 }
 
 .lab-readiness__tile-tag {
@@ -2038,14 +2064,14 @@ textarea {
 .login-card__logo-text {
   font-size: 28px;
   font-weight: 800;
-  color: var(--navy);
+  color: var(--text-primary);
   letter-spacing: -0.5px;
 }
 
 .login-card__title {
   font-size: 28px;
   font-weight: 800;
-  color: var(--navy);
+  color: var(--text-primary);
   text-align: center;
   margin-bottom: var(--space-xs);
 }
diff --git a/skills-lock.json b/skills-lock.json
new file mode 100644
index 0000000..e5d8aa4
--- /dev/null
+++ b/skills-lock.json
@@ -0,0 +1,110 @@
+{
+  "version": 1,
+  "skills": {
+    "adapt": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "da0d3fef219577871a36854e6f9163a3068ffce6d808a691ede86cdd7020e254"
+    },
+    "animate": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "124b6a70df6586772835204cc9bba5dfd1263902b0f6f22db66d66706312853e"
+    },
+    "arrange": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "fe13d5cdacfd89a4f7e4be930b58ad006b4f146159d1cd1c1ea4c925d9fc00e6"
+    },
+    "audit": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "fa7754330d2e9e72e6fcba364178738f1050fc75ae983f5997f630f75ef392ad"
+    },
+    "bolder": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "3cab0d19799ccfc3f0f6297ad3b1a49bb97627c477d9ddaf6544d77f40dc0724"
+    },
+    "clarify": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "cf789ca42a993fac1f1dc0bfc0d97328d798573705e3d3d3d3c38172708a204f"
+    },
+    "colorize": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "ac62348a5786ceb057509a2e9b44f4dced7540476be89217eb1a732c406de561"
+    },
+    "critique": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "073cfe05d48b725986ace8647e5f8c43fb2b7192518b1f5aa7d0a6a679dd0f8f"
+    },
+    "delight": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "aaa0908311fcfd22b2587e7008b430de7d8db6933db0166a7a6c6ebe7d2b6168"
+    },
+    "distill": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "bfb25784f2b49c625e0f2f9236071a7854adf6fb002696f109ffe87739b62c96"
+    },
+    "extract": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "35862644f6bbc2cca3a95d6d5c527cc75d6b1b178e64ab551ce0960d5e23be12"
+    },
+    "frontend-design": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "a6b1161c5ab5faa4559ffe2ffa6e9e7b22a07e55e70cbb8a095c890ea31606c4"
+    },
+    "harden": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "041823956988fc6d53e585a266ff0df3e5cc92200d98486b142c0cfd41131a8b"
+    },
+    "normalize": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "dc820af2dfeef81b80951d936300b1a97252ffc9dd34236e6f4082bdee137baa"
+    },
+    "onboard": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "87222f3b579a228df662345cdd9059510a6a7dab31d7ec0e713338a0c157fa86"
+    },
+    "optimize": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "d2ed7755a615b3a52e7f9abaed58696c706c84727bf626e5632bf708be516a16"
+    },
+    "overdrive": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "a59d87767099dc74bb08b7e3e0eac8c929f3daef64f241f0991ac603c574edd8"
+    },
+    "polish": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "06b69554048c8bf992e049e6b9e6cbd6c4f8ef2250065cb089cecf97372020cb"
+    },
+    "quieter": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "529161d734da8508d68924f326bb5f4b9942683d0a3aed5dcc2b1e43245e2856"
+    },
+    "teach-impeccable": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "e95d2bb071e0d1877d291a421ce93165e3c75ebc010a46e8070eab53a9f90fd9"
+    },
+    "typeset": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "computedHash": "146bb7705cf1a4439b2195baac5628f80bbc39ab4f06cd9415fec466da0a52cb"
+    }
+  }
+}

From efb4d68fee83a40e0dc3565a94ab669f5ed78c0b Mon Sep 17 00:00:00 2001
From: raiden9420 <rudraksh.r.mahajan@gmail.com>
Date: Sun, 22 Mar 2026 22:30:25 +0530
Subject: [PATCH 2/2] fix: resolve ESLint error in SequenceInput

---
 frontend/src/components/SequenceInput.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/SequenceInput.jsx b/frontend/src/components/SequenceInput.jsx
index 7966faa..98cdb18 100644
--- a/frontend/src/components/SequenceInput.jsx
+++ b/frontend/src/components/SequenceInput.jsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect, memo } from 'react';
+import { useMemo, useState, memo } from 'react';
 
 const defaultAminoAcids = 'A,C,D,E,F,G,H,I,K,L,M,N,P,Q,R,S,T,V,W,Y';
 const aminoAcidsStr = (import.meta.env.VITE_VALID_AMINO_ACIDS || defaultAminoAcids).replace(
@@ -9,10 +9,12 @@ const VALID_AMINO_ACIDS = new Set(aminoAcidsStr.split(''));
 
 const SequenceInput = memo(function SequenceInput({ sequence: externalSeq, setSequence: setExternalSeq, onPredict, status }) {
   const [localSeq, setLocalSeq] = useState(externalSeq || '');
+  const [prevExternalSeq, setPrevExternalSeq] = useState(externalSeq);
 
-  useEffect(() => {
+  if (externalSeq !== prevExternalSeq) {
+    setPrevExternalSeq(externalSeq);
     setLocalSeq(externalSeq || '');
-  }, [externalSeq]);
+  }
 
   const isLoading = status === 'processing';
   const charCount = localSeq.trim().length;