style: standardize UI across tools, optimize QR layout, and configure Husky/ESLint

src/components/tools/ClipboardSniffer.vue

@@ -49,9 +49,9 @@ const clearText = () => {
 <template>
   <div class="tool-container full-width">
     <div class="tool-panel">
-      <div class="tool-header">
+      <div class="panel-header">
         <h2 class="tool-title">Clipboard Sniffer</h2>
-        <div class="extension-indicator-wrapper">
+        <div class="header-actions">
           <ExtensionStatus :isReady="isExtensionReady" />
         </div>
       </div>
@@ -99,13 +99,6 @@ const clearText = () => {
 </template>
 
 <style scoped>
-.tool-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: 100%;
-}
 
 .controls {
   display: flex;
@@ -151,13 +144,6 @@ const clearText = () => {
   border-color: var(--primary-accent);
 }
 
-.extension-indicator-wrapper {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-}
 
 .result-area {
   flex: 1;