0.6.18

style: standardize UI across tools, optimize QR layout, and configure Husky/ESLint
style: unify UI elements and improve light theme visibility
2026-03-03 13:40:20 +00:00 · 2026-03-03 13:39:56 +00:00 · 2026-03-03 12:33:06 +00:00 · 2026-03-03 11:19:57 +00:00 · 2026-03-03 11:03:43 +00:00 · 2026-03-03 10:03:44 +00:00
37 changed files with 4700 additions and 690 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+public/wasm

 # Editor directories and files
 .vscode/*
@@ -24,3 +25,11 @@ dist-ssr
 *.sw?
 dev-dist
 extension-release.zip
+*.zip
+tools-app-extension-*.zip
+tools-app-extension-*.crx
+
+# Extension keys and builds
+*.pem
+*.crx
+scripts/*.pub
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint
--- a/README.md
+++ b/README.md
@@ -20,6 +20,26 @@ Monitor and capture your clipboard history in real-time.
 - Clears history on demand.
 - Privacy-focused: Data is processed locally and never sent to any server.

+### 🔗 URL Cleaner
+Clean tracking parameters and clutter from URLs.
+- **Privacy:** Removes known tracking parameters (UTM, fbclid, gclid, etc.).
+- **Bulk Processing:** Clean list of URLs at once.
+- **Customizable:** Manage exceptions to keep specific parameters.
+- **Smart:** "Direct Clean" mode for quick single-URL cleaning.
+
+### ⬛ QR Generator
+Create custom QR codes instantly.
+- **Customizable:** Adjustable error correction level and size.
+- **Download:** Save as PNG (raster) or SVG (vector) for high-quality printing.
+- **Persistent Settings:** Remembers your preferences.
+
+### 📷 QR Scanner
+Scan QR codes directly from your camera or device.
+- **Privacy First:** Works entirely in the browser using local `BarcodeDetector` API. No images are sent to any server.
+- **Multi-Camera:** Support for front and back cameras with easy switching.
+- **History:** Keeps a log of scanned codes with options to copy or download as JSON.
+- **Responsive:** Fullscreen mode for immersive scanning experience.
+
 ---

 ## Chrome Extension 🧩
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,49 @@
+import pluginVue from 'eslint-plugin-vue'
+import js from '@eslint/js'
+import globals from 'globals'
+
+export default [
+  // Base JS recommended rules (all off for now to allow pre-commit)
+  {
+    rules: Object.keys(js.configs.recommended.rules).reduce((acc, rule) => {
+      acc[rule] = 'off';
+      return acc;
+    }, {}),
+  },
+  // Vue essential rules
+  ...pluginVue.configs['flat/essential'],
+  {
+    // Apply to all JS and Vue files
+    files: ['**/*.js', '**/*.vue'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        crypto: 'readonly',
+        BarcodeDetector: 'readonly',
+        chrome: 'readonly',
+        __APP_VERSION__: 'readonly',
+        VITE_APP_VERSION: 'readonly',
+      },
+    },
+    rules: {
+      'vue/multi-word-component-names': 'off',
+      'no-unused-vars': 'off',
+      'no-undef': 'off',
+      'no-debugger': 'off',
+    }
+  },
+  {
+    // Global ignores
+    ignores: [
+      'dist/**',
+      'dev-dist/**',
+      'node_modules/**',
+      'public/**',
+      'scripts/pack_crx.js',
+      'src/app.config.mjs'
+    ]
+  }
+]
--- a/extension/background.js
+++ b/extension/background.js
@@ -122,6 +122,17 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
    return true;
  }

+  if (request.action === 'writeClipboard') {
+    if (isSniffing) {
+      chrome.runtime.sendMessage({
+        target: 'offscreen',
+        type: 'write-clipboard',
+        data: request.content
+      }).catch(() => {});
+    }
+    return true;
+  }
+
  if (request.type === 'clipboard-data' && request.target === 'background') {
    // Received data from offscreen document
    if (isSniffing && request.data && request.data !== lastClipboardContent) {
--- a/extension/content.js
+++ b/extension/content.js
@@ -46,6 +46,17 @@ window.addEventListener('message', (event) => {
      // ignore
    }
  }
+
+  if (event.data.type === 'TOOLS_APP_CLIPBOARD_WRITE') {
+    try {
+      chrome.runtime.sendMessage({ 
+        action: 'writeClipboard',
+        content: event.data.content
+      });
+    } catch (e) {
+      console.warn('Tools App Extension: Write clipboard failed', e);
+    }
+  }
 });

 // Listen for messages from the Extension Background
--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -1,10 +1,11 @@
 {
  "manifest_version": 3,
  "name": "Tools App Extension",
-  "version": "1.0",
+  "version": "1.1",
  "description": "Browser extension for Tools App",
  "permissions": [
    "clipboardRead",
+    "clipboardWrite",
    "offscreen",
    "storage",
    "alarms",
--- a/extension/offscreen.js
+++ b/extension/offscreen.js
@@ -42,12 +42,24 @@ setInterval(async () => {
  }
 }, 50);

-// Listen for messages from background if we need to change behavior
+// Listen for messages from background
 chrome.runtime.onMessage.addListener((message) => {
  if (message.target === 'offscreen') {
    // Handle commands
    if (message.type === 'play-sound') {
      playNotificationSound();
+    } else if (message.type === 'write-clipboard') {
+      try {
+        const text = message.data;
+        if (text) {
+          textEl.value = text;
+          textEl.select();
+          document.execCommand('copy');
+          lastText = text; // Update internal state to avoid re-triggering update
+        }
+      } catch (e) {
+        console.error('Failed to write clipboard:', e);
+      }
    }
  }
 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,20 +1,32 @@
 {
  "name": "tools-app",
  "private": true,
-  "version": "0.3.5",
+  "version": "0.6.18",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "pack-extension": "node scripts/pack_crx.js",
+    "postinstall": "mkdir -p public/wasm && cp node_modules/zxing-wasm/dist/reader/zxing_reader.wasm public/wasm/",
+    "prepare": "husky"
  },
  "dependencies": {
+    "barcode-detector": "^3.1.0",
    "lucide-vue-next": "^0.575.0",
+    "marked": "^17.0.3",
+    "qrcode": "^1.5.4",
    "vue": "^3.5.25",
    "vue-router": "^5.0.3"
  },
  "devDependencies": {
+    "@eslint/js": "^10.0.1",
    "@vitejs/plugin-vue": "^6.0.2",
+    "eslint": "^10.0.2",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^17.4.0",
+    "husky": "^9.1.7",
    "vite": "^7.3.1",
    "vite-plugin-pwa": "^1.2.0"
  }
--- a/scripts/build_extension.py
+++ b/scripts/build_extension.py
@@ -6,9 +6,14 @@ import zipfile
 # Configuration
 SOURCE_DIR = "extension"
 BUILD_DIR = "dist-extension"
-OUTPUT_ZIP = "extension-release.zip"
 MANIFEST_FILE = "manifest.json"

+# Read version to create dynamic zip name
+with open(os.path.join(SOURCE_DIR, MANIFEST_FILE), "r") as f:
+    source_manifest = json.load(f)
+version = source_manifest.get("version", "unknown")
+OUTPUT_ZIP = f"tools-app-extension-v{version}.zip"
+
 # Remove build directory if exists
 if os.path.exists(BUILD_DIR):
    shutil.rmtree(BUILD_DIR)
--- a/scripts/pack_crx.js
+++ b/scripts/pack_crx.js
@@ -0,0 +1,110 @@
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+
+function findKey() {
+  // 1. Check if key provided via CLI
+  if (process.argv[3]) return process.argv[3];
+
+  // 2. Check local project directory (gitignored)
+  const localKey = path.join(process.cwd(), 'scripts', 'key.pem');
+  if (fs.existsSync(localKey)) return localKey;
+
+  // 3. Check common SSH key locations in ~/.ssh
+  const sshDir = path.join(process.env.HOME, '.ssh');
+  const commonKeys = ['id_rsa', 'id_ecdsa', 'id_ed25519'];
+
+  for (const keyName of commonKeys) {
+    const fullPath = path.join(sshDir, keyName);
+    if (fs.existsSync(fullPath)) return fullPath;
+  }
+
+  return null;
+}
+
+const KEY_PATH = findKey();
+const INPUT_SOURCE = process.argv[2] || path.join(process.cwd(), 'extension');
+const TEMP_DIR = path.join(process.cwd(), 'temp_extension_build');
+
+function pack() {
+  console.log('📦 Packing extension to CRX...');
+
+  if (!KEY_PATH) {
+    console.error('❌ Error: No private key found.');
+    console.log('Tried local scripts/key.pem and common ~/.ssh/id_* keys.');
+    console.log('You can provide a path manually: npm run pack-extension <source> <path/to/key>');
+    process.exit(1);
+  }
+
+  let extensionDir = INPUT_SOURCE;
+  let isTemp = false;
+
+  try {
+    // If input is a zip file, unzip it first
+    if (INPUT_SOURCE.endsWith('.zip')) {
+      console.log('🤐 Unzipping extension...');
+      if (fs.existsSync(TEMP_DIR)) fs.rmSync(TEMP_DIR, { recursive: true, force: true });
+      fs.mkdirSync(TEMP_DIR);
+      execSync(`unzip -o "${INPUT_SOURCE}" -d "${TEMP_DIR}"`, { stdio: 'pipe' });
+      extensionDir = TEMP_DIR;
+      isTemp = true;
+    }
+
+    // Resolve actual extension directory (handle subdirs in zip)
+    if (!fs.existsSync(path.join(extensionDir, 'manifest.json'))) {
+      const subdirs = fs.readdirSync(extensionDir).filter(f => fs.statSync(path.join(extensionDir, f)).isDirectory());
+      if (subdirs.length === 1 && fs.existsSync(path.join(extensionDir, subdirs[0], 'manifest.json'))) {
+        extensionDir = path.join(extensionDir, subdirs[0]);
+        console.log(`📂 Found manifest in subdirectory: ${extensionDir}`);
+      } else {
+        console.error(`❌ Error: manifest.json not found in ${extensionDir}`);
+        process.exit(1);
+      }
+    }
+
+    // Determine output filename
+    let outputName;
+    if (INPUT_SOURCE.endsWith('.zip')) {
+      outputName = path.basename(INPUT_SOURCE).replace('.zip', '.crx');
+    } else {
+      const manifest = JSON.parse(fs.readFileSync(path.join(extensionDir, 'manifest.json'), 'utf8'));
+      outputName = `tools-app-extension-v${manifest.version}.crx`;
+    }
+    const outputFull = path.join(process.cwd(), outputName);
+
+    // Get version for logging
+    const manifest = JSON.parse(fs.readFileSync(path.join(extensionDir, 'manifest.json'), 'utf8'));
+    const version = manifest.version;
+
+    console.log(`🔑 Using key: ${KEY_PATH}`);
+    console.log(`📂 Source: ${extensionDir} (v${version})`);
+    console.log(`🚀 Running crx3 via npx...`);
+
+    // Command: npx -y crx3 --key <key> --crx <output> <dir>
+    execSync(`npx -y crx3 --key "${KEY_PATH}" --crx "${outputFull}" "${extensionDir}"`, {
+      stdio: 'inherit'
+    });
+
+    // Cleanup any file that crx3 might have created automatically based on temp dir name
+    const unintendedFile = extensionDir + '.crx';
+    if (fs.existsSync(unintendedFile) && unintendedFile !== outputFull) {
+      fs.unlinkSync(unintendedFile);
+    }
+
+    console.log(`\n✅ Success! Extension packed to: ${outputFull}`);
+  } catch (error) {
+    console.error('\n❌ Failed to pack extension.');
+    if (error.message.includes('algorithm')) {
+      console.error('⚠️  Note: Chrome CRX format requires RSA or ECDSA (P-256) keys.');
+    } else {
+      console.error('Error details:', error.message);
+    }
+    process.exit(1);
+  } finally {
+    if (isTemp && fs.existsSync(TEMP_DIR)) {
+      fs.rmSync(TEMP_DIR, { recursive: true, force: true });
+    }
+  }
+}
+
+pack();
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@ import Footer from './components/Footer.vue'
 import Sidebar from './components/Sidebar.vue'
 import InstallPrompt from './components/InstallPrompt.vue'
 import ReloadPrompt from './components/ReloadPrompt.vue'
+import { UI_CONFIG } from './config/ui'

 const isSidebarOpen = ref(window.innerWidth >= 768)
 const router = useRouter()
@@ -31,6 +32,11 @@ const handleResize = () => {
 }

 onMounted(() => {
+  // Set global CSS variables from config
+  document.documentElement.style.setProperty('--header-height', `${UI_CONFIG.headerHeight}px`)
+  document.documentElement.style.setProperty('--footer-height', `${UI_CONFIG.footerHeight}px`)
+  document.documentElement.style.setProperty('--page-padding', `${UI_CONFIG.pagePadding}px`)
+
  window.addEventListener('resize', handleResize)
 })

@@ -67,22 +73,31 @@ onUnmounted(() => {

 .main-content {
  flex: 1;
-  padding: 2rem;
+  padding: 1rem;
  width: 100%;
  max-width: 100%;
-  /* Space for fixed footer on mobile + extra margin (match top padding 2rem + footer height ~40px) */
-  padding-bottom: calc(2rem + 40px + env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: column;
+  /* Space for fixed footer on mobile + extra margin */
+  padding-bottom: calc(1rem + var(--footer-height) + env(safe-area-inset-bottom));
+}
+
+@media (max-width: 640px) {
+  .main-content {
+    padding: 0.5rem;
+    padding-bottom: calc(0.5rem + var(--footer-height) + env(safe-area-inset-bottom));
+  }
 }

@media (min-width: 768px) {
  .app-body {
-    overflow: hidden;
+    overflow: visible;
  }

  .main-content {
-    overflow-y: auto;
-    height: 100%;
-    padding-bottom: 2rem;
+    overflow: visible;
+    flex: 1;
+    padding-bottom: 1rem;
  }
 }

--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -14,7 +14,8 @@ const version = __APP_VERSION__;
 <style scoped>
 .app-footer {
  width: 100%;
-  padding: 0.5rem;
+  height: var(--footer-height);
+  padding: 0 0.5rem;
  /* Background handled by glass-panel */
  border-left: none;
  border-right: none;
@@ -24,12 +25,9 @@ const version = __APP_VERSION__;
  align-items: center;
  justify-content: center;
  z-index: 10;
-  /* Remove fixed height to allow content to dictate size */
-  /* height: 30px; */
  position: fixed;
  bottom: 0;
  left: 0;
-  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }

@media (min-width: 768px) {
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -44,7 +44,7 @@ onMounted(() => {
            <line x1="3" y1="18" x2="21" y2="18"></line>
          </svg>
        </button>
-        <h1 class="app-title">Tools App</h1>
+        <router-link to="/" class="app-title">Tools App</router-link>
      </div>

      <button
@@ -63,9 +63,12 @@ onMounted(() => {
 <style scoped>
 .app-header {
  /* Remove hardcoded colors and use theme variables */
-  background: var(--glass-bg);
+  background: var(--header-bg);
  color: var(--text-color);
-  padding: 1rem;
+  height: var(--header-height);
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
  /* box-shadow handled by glass-panel class */
  position: sticky;
  top: 0;
@@ -77,7 +80,7 @@ onMounted(() => {
 }

 .header-content {
-  max-width: 100%;
+  width: 100%;
  padding: 0;
  margin: 0 auto;
  display: flex;
@@ -112,10 +115,11 @@ onMounted(() => {
 .app-title {
  margin: 0;
  font-size: 1.5rem;
-  font-weight: 600;
  background: var(--title-gradient);
  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
  background-clip: text;
+  color: transparent;
+  text-decoration: none;
+  font-weight: bold;
 }
 </style>
--- a/src/components/InstallPrompt.vue
+++ b/src/components/InstallPrompt.vue
@@ -51,12 +51,20 @@ const dismissPrompt = () => {
  deferredPrompt = null
 }

+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && showInstallPrompt.value) {
+    dismissPrompt()
+  }
+}
+
 onMounted(() => {
  window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.addEventListener('keydown', handleKeydown)
 })

 onBeforeUnmount(() => {
  window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.removeEventListener('keydown', handleKeydown)
 })
 </script>

--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -1,11 +1,99 @@
 <script setup>
-import { ref } from 'vue'
+import { marked } from 'marked'
+import { computed } from 'vue'
+import readmeContent from '../../README.md?raw'

+const htmlContent = computed(() => {
+  return marked(readmeContent)
+})
 </script>

 <template>
-  main
+  <div class="readme-container glass-panel">
+    <div class="markdown-body" v-html="htmlContent"></div>
+  </div>
 </template>

 <style scoped>
+.readme-container {
+  padding: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.markdown-body :deep(h1) {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: var(--primary-accent);
+}
+
+.markdown-body :deep(h2) {
+  font-size: 1.5rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  padding-bottom: 0.5rem;
+  color: var(--text-strong);
+}
+
+.markdown-body :deep(h3) {
+  font-size: 1.25rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  color: var(--text-strong);
+}
+
+.markdown-body :deep(p) {
+  margin-bottom: 1rem;
+  line-height: 1.6;
+  color: var(--text-color);
+}
+
+.markdown-body :deep(ul) {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.markdown-body :deep(li) {
+  margin-bottom: 0.5rem;
+  color: var(--text-color);
+}
+
+.markdown-body :deep(a) {
+  color: var(--primary-accent);
+  text-decoration: none;
+}
+
+.markdown-body :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.markdown-body :deep(code) {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.markdown-body :deep(pre) {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+  border: 1px solid var(--glass-border);
+}
+
+.markdown-body :deep(pre code) {
+  background: none;
+  padding: 0;
+  color: #e6e6e6;
+}
+
+.markdown-body :deep(hr) {
+  border: none;
+  border-top: 1px solid var(--glass-border);
+  margin: 2rem 0;
+}
 </style>
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -12,6 +12,9 @@ defineProps({
    <nav class="sidebar-nav">
      <router-link to="/passwords" class="nav-item" v-ripple>Passwords</router-link>
      <router-link to="/clipboard-sniffer" class="nav-item" v-ripple>Clipboard Sniffer</router-link>
+      <router-link to="/url-cleaner" class="nav-item" v-ripple>URL Cleaner</router-link>
+      <router-link to="/qr-scanner" class="nav-item" v-ripple>QR Scanner</router-link>
+      <router-link to="/qr-code" class="nav-item" v-ripple>QR Code</router-link>
    </nav>
  </aside>
 </template>
@@ -86,6 +89,11 @@ defineProps({
  color: var(--text-strong);
 }

+:global(:root[data-theme="light"]) .nav-item:hover {
+  background-color: rgba(15, 23, 42, 0.1);
+  color: var(--text-strong);
+}
+
 .nav-item.router-link-active {
  color: var(--primary-accent);
  background-color: var(--toggle-bg);
--- a/src/components/tools/ClipboardSniffer.vue
+++ b/src/components/tools/ClipboardSniffer.vue
@@ -1,91 +1,29 @@
 <script setup>
-import { ref, onUnmounted, nextTick, onMounted } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 import { useFillHeight } from '../../composables/useFillHeight'
-import { Plug, Info, X } from 'lucide-vue-next'
+import { useExtension } from '../../composables/useExtension'
+import { useLocalStorage } from '../../composables/useLocalStorage'
+import ExtensionStatus from './common/ExtensionStatus.vue'

-const clipboardContent = ref('')
-const isListening = ref(false)
-const lastClipboardText = ref('')
+const clipboardContent = useLocalStorage('clipboard-sniffer-content', '')
 const textareaRef = ref(null)
-const isExtensionReady = ref(false)
-const showExtensionModal = ref(false)
-let intervalId = null
-let extensionCheckInterval = null

-const { height: textareaHeight } = useFillHeight(textareaRef, 40) // 40px margin bottom
+const {
+  isExtensionReady,
+  isListening,
+  lastClipboardText,
+  startListening,
+  stopListening
+} = useExtension()

-// Listen for extension messages
-const handleExtensionMessage = (event) => {
-  if (event.source !== window) return
+const { height: textareaHeight } = useFillHeight(textareaRef, 40)

-  if (event.data.type === 'TOOLS_APP_EXTENSION_READY' || event.data.type === 'TOOLS_APP_PONG') {
-    isExtensionReady.value = true
-    lastPongTime = Date.now()
-    // console.log('Extension is ready')
-  }
-
-  if (event.data.type === 'TOOLS_APP_CLIPBOARD_UPDATE' && isListening.value) {
-    const text = event.data.content
-    if (text && text !== lastClipboardText.value) {
-      lastClipboardText.value = text
-      clipboardContent.value += (clipboardContent.value ? '\n' : '') + text
+// Watch for clipboard updates from extension
+watch(lastClipboardText, (newText) => {
+  if (newText) {
+    clipboardContent.value += (clipboardContent.value ? '\n' : '') + newText
    scrollToBottom()
  }
-  }
-}
-
-const closeModalOnEsc = (e) => {
-  if (e.key === 'Escape' && showExtensionModal.value) {
-    showExtensionModal.value = false
-  }
-}
-
-// Watchdog for extension
-let lastPongTime = Date.now()
-const PING_INTERVAL = 200
-const TIMEOUT_THRESHOLD = 500
-
-const startExtensionWatchdog = () => {
-  extensionCheckInterval = setInterval(() => {
-    // 1. Send Ping
-    window.postMessage({ type: 'TOOLS_APP_PING' }, '*')
-
-    // 2. Check timeout
-    // If current time - lastPongTime > threshold, then disconnected
-    if (Date.now() - lastPongTime > TIMEOUT_THRESHOLD) {
-       isExtensionReady.value = false
-    }
-  }, PING_INTERVAL)
-}
-
-// Wrapper to intercept PONG and update heartbeat
-const messageListener = (event) => {
-  if (event.source !== window) return
-
-  if (event.data.type === 'TOOLS_APP_PONG' || event.data.type === 'TOOLS_APP_EXTENSION_READY') {
-    lastPongTime = Date.now()
-    isExtensionReady.value = true
-  }
-
-  handleExtensionMessage(event)
-}
-
-onMounted(() => {
-  window.addEventListener('message', messageListener)
-  window.addEventListener('keydown', closeModalOnEsc)
-
-  // Initial check
-  window.postMessage({ type: 'TOOLS_APP_INIT' }, '*')
-
-  // Start heartbeat
-  startExtensionWatchdog()
-})
-
-onUnmounted(() => {
-  stopListening()
-  if (extensionCheckInterval) clearInterval(extensionCheckInterval)
-  window.removeEventListener('message', messageListener)
-  window.removeEventListener('keydown', closeModalOnEsc)
 })

 const scrollToBottom = () => {
@@ -97,97 +35,24 @@ const scrollToBottom = () => {
  })
 }

-const startListening = async () => {
-  try {
-    isListening.value = true
-
-    // Try native API first (for web app usage without extension)
-    // Initial read
-    try {
-      const text = await navigator.clipboard.readText()
-      if (text) {
-          lastClipboardText.value = text
-          clipboardContent.value += (clipboardContent.value ? '\n' : '') + text
-          scrollToBottom()
-      }
-    } catch (e) {
-      console.log('Native clipboard read failed (expected if not focused), relying on extension if available')
-    }
-
-    // If extension is ready, ask it to start sniffing
-    if (isExtensionReady.value) {
-      window.postMessage({ type: 'TOOLS_APP_START_SNIFFING' }, '*')
-    }
-
-    // Fallback polling for web app (only works when focused usually)
-    intervalId = setInterval(async () => {
-      try {
-        const currentText = await navigator.clipboard.readText()
-        if (currentText && currentText !== lastClipboardText.value) {
-          lastClipboardText.value = currentText
-          clipboardContent.value += (clipboardContent.value ? '\n' : '') + currentText
-          scrollToBottom()
-        }
-      } catch (err) {
-        // Ignore errors in polling (e.g. lost focus)
-      }
-    }, 1000)
-  } catch (err) {
-    console.error('Permission denied or clipboard error:', err)
-    alert('Clipboard access denied. Please allow clipboard access to use this tool.')
-  }
-}
-
-const stopListening = () => {
-  isListening.value = false
-  if (intervalId) {
-    clearInterval(intervalId)
-    intervalId = null
-  }
-
-  if (isExtensionReady.value) {
-    window.postMessage({ type: 'TOOLS_APP_STOP_SNIFFING' }, '*')
+const copyToClipboard = () => {
+  if (clipboardContent.value) {
+    navigator.clipboard.writeText(clipboardContent.value)
  }
 }

 const clearText = () => {
  clipboardContent.value = ''
-  // Don't reset lastClipboardText so if they copy the same thing again it's detected?
-  // No, if they clear, they might want to see it again if they copy it again.
-  // But usually "change" means diff from clipboard.
-  // If I clear text, but clipboard still has "A", and I copy "A" again (refresh clipboard), readText still returns "A".
-  // So it won't be detected as a change.
-  // If user wants to capture "A" again, they need to copy something else then "A".
-  // That's standard behavior for "sniffer" (detect changes).
 }
-
-const copyToClipboard = async () => {
-  if (!clipboardContent.value) return
-  try {
-    await navigator.clipboard.writeText(clipboardContent.value)
-  } catch (err) {
-    console.error('Failed to copy to clipboard:', err)
-  }
-}
-
-onUnmounted(() => {
-  stopListening()
-})
 </script>

 <template>
-  <div class="tool-container" style="max-width: 100%;">
+  <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-status"
-          :class="{ 'connected': isExtensionReady }"
-          @click="showExtensionModal = true"
-          :title="isExtensionReady ? 'Extension connected' : 'Extension not detected - Click for info'"
-        >
-          <Plug v-if="isExtensionReady" size="20" />
-          <Info v-else size="20" />
+        <div class="header-actions">
+          <ExtensionStatus :isReady="isExtensionReady" />
        </div>
      </div>

@@ -196,13 +61,15 @@ onUnmounted(() => {
          v-if="!isListening"
          class="btn-neon"
          @click="startListening"
+          :disabled="!isExtensionReady"
+          :title="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
          v-ripple
        >
          Start Sniffing
        </button>
        <button
          v-else
-          class="btn-neon active"
+          class="btn-neon danger"
          @click="stopListening"
          v-ripple
        >
@@ -228,195 +95,58 @@ onUnmounted(() => {
        </div>
      </div>
    </div>
-
-    <!-- Extension Info Modal -->
-    <div v-if="showExtensionModal" class="modal-overlay" @click.self="showExtensionModal = false">
-      <div class="modal-content glass-panel">
-        <button class="close-btn" @click="showExtensionModal = false">
-          <X size="24" />
-        </button>
-
-        <div v-if="!isExtensionReady">
-          <h3>Enhance Your Experience</h3>
-          <p>
-            Install our browser extension to enable <strong>background clipboard sniffing</strong>!
-          </p>
-          <p class="description">
-            Without the extension, this tool can only capture clipboard content when the tab is active.
-            With the extension, you can capture content even when you're working in other apps.
-          </p>
-          <div class="modal-actions">
-            <a href="#" class="btn-neon" @click.prevent>Extension Coming Soon</a>
-          </div>
-        </div>
-
-        <div v-else>
-          <h3>Extension Connected!</h3>
-          <p>
-            You have successfully enabled <strong>background clipboard sniffing</strong>.
-          </p>
-          <p class="description">
-            The extension is active and monitoring your clipboard in the background.
-            You can now switch to other apps and copy text - it will appear here automatically.
-          </p>
-          <div class="modal-actions">
-            <button class="btn-neon" @click="showExtensionModal = false">Got it!</button>
-          </div>
-        </div>
-
-      </div>
-    </div>
  </div>
 </template>

 <style scoped>
-.tool-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: 100%;
-}
-
-.extension-status {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-:global(:root[data-theme="light"]) .extension-status {
-  background: rgba(0, 0, 0, 0.05);
-  color: #666;
-}
-
-.extension-status:hover {
-  background: rgba(255, 255, 255, 0.2);
-  color: var(--text-color);
-}
-
-:global(:root[data-theme="light"]) .extension-status:hover {
-  background: rgba(0, 0, 0, 0.1);
-  color: #000;
-}
-
-.extension-status.connected {
-  color: #4ade80; /* Green for connected */
-  cursor: pointer; /* Allow clicking to see status */
-}
-
-/* :global(:root[data-theme="light"]) .extension-status.connected {
-  color: #16a34a;
-} */
-
-.extension-status.connected:hover {
-  background: rgba(74, 222, 128, 0.1);
-}
-
-/* :global(:root[data-theme="light"]) .extension-status.connected:hover {
-  background: rgba(22, 163, 74, 0.1);
-} */
-
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(4px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  position: relative;
-  width: 90%;
-  max-width: 500px;
-  padding: 2rem;
-  border-radius: 16px;
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-  text-align: center;
-}
-
-.close-btn {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: 50%;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.close-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-color);
-}
-
-.modal-content h3 {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  font-size: 1.5rem;
-  color: var(--text-color);
-}
-
-.modal-content p {
-  margin-bottom: 1rem;
-  line-height: 1.6;
-  color: var(--text-color);
-}
-
-.description {
-  color: var(--text-secondary) !important;
-  font-size: 0.9rem;
-  margin-bottom: 2rem !important;
-}
-
-.modal-actions {
-  display: flex;
-  justify-content: center;
-}

 .controls {
  display: flex;
-  gap: 1rem;
  justify-content: center;
+  gap: 1rem;
  flex-wrap: wrap;
+  flex-shrink: 0;
 }

-.btn-neon {
-  padding: 0.75rem 1.5rem;
-  min-width: 120px;
+.tool-container.full-width {
+  max-width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }

-.btn-neon.active {
-  background: rgba(255, 0, 0, 0.2);
-  border-color: rgba(255, 0, 0, 0.5);
-  box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
+.tool-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 1.5rem;
+  /* Override shared tool-panel scroll for this tool */
+  max-height: none;
+  overflow: hidden;
 }

 .tool-textarea {
+  width: 100%;
  height: 100%;
+  padding: 1rem;
+  background-color: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  border-radius: 8px;
+  color: var(--text-color);
+  font-family: monospace;
+  resize: none;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.tool-textarea:focus {
+  outline: none;
+  border-color: var(--primary-accent);
+}
+
+
+.result-area {
+  flex: 1;
+  display: flex;
 }
 </style>
--- a/src/components/tools/Passwords.vue
+++ b/src/components/tools/Passwords.vue
@@ -74,9 +74,9 @@ const generatePasswords = () => {
  <div class="tool-container full-width">
    <div class="tool-panel">
      <div class="panel-header">
-        <h2 class="tool-title">Bulk Passwords Generator</h2>
-        <div class="action-area desktop-only">
-          <button class="btn-neon generate-btn" @click="generatePasswords" v-ripple>
+        <h2 class="tool-title">Passwords Generator</h2>
+        <div class="header-actions">
+          <button class="btn-neon generate-btn desktop-only" @click="generatePasswords" v-ripple>
            Generate
          </button>
        </div>
@@ -142,7 +142,6 @@ const generatePasswords = () => {
          class="tool-textarea"
          v-model="result"
          placeholder="Generated passwords will appear here..."
-          readonly
        ></textarea>
      </div>
    </div>
@@ -150,32 +149,12 @@ const generatePasswords = () => {
 </template>

 <style scoped>
-.tool-container.full-width {
-  max-width: 100%;
+.tool-container {
  height: 100%;
  display: flex;
  flex-direction: column;
 }

-.tool-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  gap: 1.5rem;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.tool-title {
-  margin: 0;
-}
-
 .options-grid {
  display: flex;
  flex-wrap: wrap;
@@ -209,112 +188,10 @@ const generatePasswords = () => {
  min-width: 140px;
 }

-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-  user-select: none;
-  color: var(--text-secondary);
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-/* Custom Checkbox */
-.checkbox-label input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.checkmark {
-  position: relative;
-  height: 20px;
-  width: 20px;
-  background-color: var(--toggle-bg);
-  border: 1px solid var(--toggle-border);
-  border-radius: 4px;
-  transition: all 0.3s ease;
-}
-
-.checkbox-label:hover .checkmark {
-  border-color: var(--toggle-hover-border);
-}
-
-.checkbox-label input:checked ~ .checkmark {
-  background-color: var(--primary-accent);
-  border-color: var(--primary-accent);
-  box-shadow: 0 0 10px var(--primary-accent);
-}
-
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-}
-
-.checkbox-label input:checked ~ .checkmark:after {
-  display: block;
-}
-
-.checkbox-label .checkmark:after {
-  left: 6px;
-  top: 2px;
-  width: 5px;
-  height: 10px;
-  border: solid #000;
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-
-/* Number Control */
-.number-control {
-  display: flex;
-  align-items: stretch;
-  background: var(--toggle-bg);
-  border: 1px solid var(--toggle-border);
-  border-radius: 8px;
-  overflow: hidden;
-  gap: 0;
-}
-
-.control-btn {
-  background: none;
-  border: none;
+.input-wrapper label {
  color: var(--text-color);
-  font-size: 1.2rem;
-  width: 40px;
-  height: auto;
-  min-height: 40px;
-  cursor: pointer;
-  transition: background 0.2s;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.control-btn:hover {
-  background: var(--button-hover-bg);
-}
-
-.number-input {
-  background: none;
-  border: none;
-  color: var(--text-color);
-  width: 100%;
-  flex: 1;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: bold;
-  appearance: textfield;
-  -moz-appearance: textfield;
-  height: 100%;
-  border-radius: 0;
-  min-width: 60px;
+  font-weight: 600;
+  margin-bottom: 0.2rem;
 }

 .number-input:focus {
@@ -323,12 +200,6 @@ const generatePasswords = () => {
  background: rgba(0, 0, 0, 0.05);
 }

-.number-input::-webkit-outer-spin-button,
-.number-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
 .result-area {
  flex: 1;
  display: flex;
@@ -336,25 +207,7 @@ const generatePasswords = () => {
  min-height: 200px;
 }

-.tool-textarea {
-  width: 100%;
-  height: 100%;
-  padding: 1rem;
-  border-radius: 12px;
-  border: 1px solid var(--glass-border);
-  background: var(--glass-bg);
-  color: var(--text-color);
-  font-family: monospace;
-  font-size: 0.9rem;
-  resize: none;
-  outline: none;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
 .generate-btn {
-  padding: 0.75rem 2rem;
-  font-size: 1rem;
-  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
 }
--- a/src/components/tools/QrCode.vue
+++ b/src/components/tools/QrCode.vue
@@ -0,0 +1,291 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { Download } from 'lucide-vue-next'
+import QRCode from 'qrcode'
+import { useFillHeight } from '../../composables/useFillHeight'
+import { useLocalStorage } from '../../composables/useLocalStorage'
+
+const text = useLocalStorage('text', '', 'qr-code')
+const ecc = useLocalStorage('ecc', 'M', 'qr-code')
+const size = useLocalStorage('size', 300, 'qr-code')
+const format = useLocalStorage('format', 'png', 'qr-code')
+const svgContent = ref('')
+const previewRef = ref(null)
+
+const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
+
+const generateQR = async () => {
+  if (!text.value) {
+    svgContent.value = ''
+    return
+  }
+  try {
+    // Generate SVG for preview (always sharp)
+    svgContent.value = await QRCode.toString(text.value, {
+      type: 'svg',
+      errorCorrectionLevel: ecc.value,
+      margin: 1,
+      // No fixed width, allow scaling via CSS
+    })
+  } catch (err) {
+    console.error('QR Generation failed', err)
+    svgContent.value = ''
+  }
+}
+
+// Debounce generation slightly to avoid lag on typing
+let timeout
+watch([text, ecc], () => { // size is not relevant for preview
+  clearTimeout(timeout)
+  timeout = setTimeout(generateQR, 300)
+})
+
+onMounted(() => {
+  if (text.value) generateQR()
+})
+
+const downloadFile = async () => {
+  if (!text.value) return
+
+  const filename = `qr-code-${Date.now()}.${format.value}`
+
+  if (format.value === 'svg') {
+    // For SVG download, we might want to inject the size if user specifically requested it,
+    // but usually raw SVG is better.
+    // If we want to support the "Size" dropdown for SVG download, we can regenerate with specific width.
+    const svgWithSize = await QRCode.toString(text.value, {
+      type: 'svg',
+      errorCorrectionLevel: ecc.value,
+      margin: 1,
+      width: size.value
+    })
+    const blob = new Blob([svgWithSize], { type: 'image/svg+xml' })
+    triggerDownload(blob, filename)
+  } else {
+    // For raster formats, render to canvas first
+    try {
+      const canvas = document.createElement('canvas')
+      await QRCode.toCanvas(canvas, text.value, {
+        errorCorrectionLevel: ecc.value,
+        margin: 1,
+        width: size.value
+      })
+
+      const mime = `image/${format.value}`
+      canvas.toBlob((blob) => {
+        if (blob) triggerDownload(blob, filename)
+      }, mime)
+    } catch (err) {
+      console.error('Download failed', err)
+    }
+  }
+}
+
+const triggerDownload = (blob, filename) => {
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+</script>
+
+<template>
+  <div class="tool-container full-width">
+    <div class="tool-panel">
+      <div class="panel-header">
+        <h2 class="tool-title">QR Generator</h2>
+        <div class="header-actions"></div>
+      </div>
+
+      <div class="input-section">
+        <textarea
+          v-model="text"
+          class="tool-textarea"
+          placeholder="Enter text to generate QR code..."
+          rows="3"
+        ></textarea>
+      </div>
+
+      <div class="controls-section">
+        <div class="control-group">
+          <label>Error Correction</label>
+          <select v-model="ecc" class="select-input">
+            <option value="L">Low (7%)</option>
+            <option value="M">Medium (15%)</option>
+            <option value="Q">Quartile (25%)</option>
+            <option value="H">High (30%)</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
+        <div class="qr-container">
+          <div class="qr-frame" v-html="svgContent"></div>
+        </div>
+
+        <div class="download-settings">
+          <div class="control-group">
+            <label>Size (px)</label>
+            <div class="number-control size-control">
+              <button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100">-100</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10">-10</button>
+              <input type="number" v-model.number="size" class="number-input" />
+              <button class="control-btn" @click="size += 10" title="+10">+10</button>
+              <button class="control-btn" @click="size += 100" title="+100">+100</button>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <label>Format</label>
+            <select v-model="format" class="select-input format-select">
+              <option value="png">PNG</option>
+              <option value="jpeg">JPG</option>
+              <option value="webp">WebP</option>
+              <option value="svg">SVG</option>
+            </select>
+          </div>
+
+          <button class="action-btn download-btn" @click="downloadFile">
+            <Download size="18" />
+            Download
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tool-container.full-width {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tool-panel {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  height: 100%;
+  overflow: hidden; /* Prevent scrolling, force fit */
+}
+
+.tool-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--primary-accent);
+}
+
+.input-section {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.tool-textarea {
+  min-height: 80px;
+}
+
+.controls-section {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.control-group label {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+
+.preview-section {
+  display: flex;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  padding: 0.75rem 1rem 1.25rem;
+  overflow: hidden;
+  min-height: 0;
+  flex: 1;
+  gap: 1.5rem;
+}
+
+.qr-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 0;
+  container-type: size;
+}
+
+:root[data-theme="light"] .preview-section {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.qr-frame {
+  width: min(100cqw, 100cqh);
+  height: min(100cqw, 100cqh);
+  background: white;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.download-settings {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.size-control {
+  min-width: 280px;
+}
+
+.format-select {
+  min-width: 100px !important;
+}
+
+.download-btn {
+  height: 40px;
+  padding: 0 1.5rem;
+  background: var(--primary-accent);
+  color: #000;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.download-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+</style>
+
--- a/src/components/tools/QrScanner.vue
+++ b/src/components/tools/QrScanner.vue
@@ -0,0 +1,614 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+import { SwitchCamera, Trash2, Copy, Download, X } from 'lucide-vue-next'
+import { useCamera } from '../../composables/useCamera'
+import { useQrDetection } from '../../composables/useQrDetection'
+
+const scannedCodes = ref([])
+const isFullscreen = ref(false)
+const videoAspect = ref(1)
+const wrapperRef = ref(null)
+const bgCanvas = ref(null)
+let bgRafId = null
+
+const videoRef = ref(null)
+const overlayCanvas = ref(null)
+
+const {
+  stream,
+  facingMode,
+  hasMultipleCameras,
+  isMirrored,
+  error: cameraError,
+  checkCameras,
+  startCamera,
+  stopCamera,
+  switchCamera: baseSwitchCamera
+} = useCamera(videoRef)
+
+const {
+  error: detectionError,
+  isDetecting,
+  startDetection,
+  stopDetection
+} = useQrDetection(videoRef, overlayCanvas)
+
+const error = computed(() => cameraError.value || detectionError.value)
+
+// Background Loop
+const updateVideoAspect = () => {
+  if (videoRef.value && videoRef.value.videoWidth && videoRef.value.videoHeight) {
+    videoAspect.value = videoRef.value.videoWidth / videoRef.value.videoHeight
+  }
+}
+
+const startBackgroundLoop = () => {
+  const draw = () => {
+    const videoEl = videoRef.value
+    const canvas = bgCanvas.value
+    if (!videoEl || !canvas || videoEl.paused || videoEl.ended) {
+      bgRafId = requestAnimationFrame(draw)
+      return
+    }
+    const vw = videoEl.videoWidth || 0
+    const vh = videoEl.videoHeight || 0
+    if (!vw || !vh) {
+      bgRafId = requestAnimationFrame(draw)
+      return
+    }
+    const cw = Math.floor(window.innerWidth)
+    const ch = Math.floor(window.innerHeight * 0.5)
+    if (canvas.width !== cw || canvas.height !== ch) {
+      canvas.width = cw
+      canvas.height = ch
+    }
+    const ctx = canvas.getContext('2d')
+    if (ctx) {
+      const scale = cw / vw
+      const srcH = ch / scale
+      const sx = 0
+      const sy = Math.max(0, (vh - srcH) / 2)
+      ctx.clearRect(0, 0, cw, ch)
+      ctx.drawImage(videoEl, sx, sy, vw, srcH, 0, 0, cw, ch)
+    }
+    bgRafId = requestAnimationFrame(draw)
+  }
+  if (bgRafId) cancelAnimationFrame(bgRafId)
+  bgRafId = requestAnimationFrame(draw)
+}
+
+const stopBackgroundLoop = () => {
+  if (bgRafId) {
+    cancelAnimationFrame(bgRafId)
+    bgRafId = null
+  }
+}
+
+// Full screen styles
+const desktopFullscreenStyle = computed(() => {
+  if (!isFullscreen.value) return {}
+  const isDesktop = window.innerWidth >= 768
+  if (!isDesktop) return {}
+  const halfHeight = Math.floor(window.innerHeight * 0.5)
+  const widthPx = Math.min(window.innerWidth, Math.floor(halfHeight * videoAspect.value))
+  return { height: `${halfHeight}px`, width: `${widthPx}px`, margin: '0 auto' }
+})
+
+const processCodes = (codes) => {
+  codes.forEach(code => {
+    const value = code.rawValue
+    if (value && !scannedCodes.value.some(c => c.value === value)) {
+      scannedCodes.value.unshift({
+        id: Date.now() + Math.random(),
+        value,
+        format: code.format,
+        timestamp: new Date().toLocaleTimeString()
+      })
+    }
+  })
+}
+
+const onDetect = (detectedCodes) => {
+  if (isFullscreen.value) {
+    processCodes(detectedCodes)
+    return
+  }
+  const videoEl = document.querySelector('.camera-wrapper video')
+  if (!videoEl || !videoEl.videoWidth || !videoEl.videoHeight) {
+    processCodes(detectedCodes)
+    return
+  }
+
+  const { videoWidth, videoHeight } = videoEl
+  const isLandscape = videoWidth > videoHeight
+  let visibleX, visibleY, visibleW, visibleH
+
+  if (isLandscape) {
+    visibleH = videoHeight
+    visibleW = videoHeight
+    visibleX = (videoWidth - videoHeight) / 2
+    visibleY = 0
+  } else {
+    visibleW = videoWidth
+    visibleH = videoWidth
+    visibleX = 0
+    visibleY = (videoHeight - videoWidth) / 2
+  }
+
+  const validCodes = detectedCodes.filter(code => {
+    if (!code.boundingBox) return true
+    const { x, y, width, height } = code.boundingBox
+    const centerX = x + width / 2
+    const centerY = y + height / 2
+    return (
+      centerX >= visibleX &&
+      centerX <= visibleX + visibleW &&
+      centerY >= visibleY &&
+      centerY <= visibleY + visibleH
+    )
+  })
+
+  processCodes(validCodes)
+}
+
+const loadHistory = () => {
+  try {
+    const saved = localStorage.getItem('qr-history')
+    if (saved) {
+      scannedCodes.value = JSON.parse(saved)
+    }
+  } catch (e) {
+    console.error('Failed to load QR history', e)
+  }
+}
+
+watch(scannedCodes, (newVal) => {
+  localStorage.setItem('qr-history', JSON.stringify(newVal))
+}, { deep: true })
+
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && isFullscreen.value) {
+    toggleFullscreen()
+  }
+}
+
+const startScan = async () => {
+  try {
+    await startCamera()
+    updateVideoAspect()
+    startBackgroundLoop()
+    startDetection(onDetect)
+  } catch (err) {
+    // Error is handled by error computed property
+  }
+}
+
+onMounted(() => {
+  checkCameras()
+  loadHistory()
+  window.addEventListener('resize', updateVideoAspect)
+  window.addEventListener('resize', startBackgroundLoop)
+  window.addEventListener('keydown', handleKeydown)
+
+  watch(isFullscreen, (fs) => {
+    if (fs) {
+      startBackgroundLoop()
+    } else {
+      stopBackgroundLoop()
+    }
+  }, { immediate: true })
+
+  startScan()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateVideoAspect)
+  window.removeEventListener('resize', startBackgroundLoop)
+  window.removeEventListener('keydown', handleKeydown)
+  stopDetection()
+  stopCamera()
+})
+
+const switchCamera = (event) => {
+  if (event) event.stopPropagation()
+  baseSwitchCamera()
+}
+
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value
+}
+
+const clearHistory = () => {
+  scannedCodes.value = []
+}
+
+const removeCode = (id) => {
+  scannedCodes.value = scannedCodes.value.filter(c => c.id !== id)
+}
+
+const copyAll = async () => {
+  if (scannedCodes.value.length === 0) return
+  const text = scannedCodes.value.map(c => c.value).join('\n')
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy', err)
+  }
+}
+
+const downloadJson = () => {
+  if (scannedCodes.value.length === 0) return
+  const data = JSON.stringify(scannedCodes.value, null, 2)
+  const blob = new Blob([data], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `qr-scan-history-${new Date().toISOString().slice(0, 10)}.json`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+const copyToClipboard = async (text) => {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy', err)
+  }
+}
+
+const isUrl = (string) => {
+  try {
+    return Boolean(new URL(string))
+  } catch (_) {
+    return false
+  }
+}
+</script>
+
+<template>
+  <div class="tool-container full-width">
+    <div class="tool-panel">
+      <div class="panel-header" v-if="!isFullscreen">
+        <h2 class="tool-title">QR Scanner</h2>
+        <div class="header-actions"></div>
+      </div>
+
+      <Teleport to="body" :disabled="!isFullscreen">
+        <div class="scanner-content" :class="{ 'is-fullscreen': isFullscreen }">
+          <canvas
+            v-if="isFullscreen"
+            ref="bgCanvas"
+            class="camera-bg"
+            :class="{ 'is-mirrored': isMirrored }"
+          ></canvas>
+          <button v-if="isFullscreen" class="close-fullscreen-btn" @click="toggleFullscreen">
+            <X size="24" />
+          </button>
+
+          <div
+            class="camera-wrapper"
+            :class="{ 'clickable': !isFullscreen, 'is-mirrored': isMirrored }"
+            :style="desktopFullscreenStyle"
+            ref="wrapperRef"
+            @click="!isFullscreen && toggleFullscreen()"
+          >
+            <video
+              ref="videoRef"
+              class="camera-feed"
+              :class="{ 'is-mirrored': isMirrored }"
+              autoplay
+              playsinline
+              muted
+            ></video>
+
+            <canvas ref="overlayCanvas" class="scan-overlay-canvas" :class="{ 'is-mirrored': isMirrored }"></canvas>
+
+            <div v-if="error" class="error-overlay">
+              <p>{{ error }}</p>
+              <button @click="startScan" class="retry-btn">Retry</button>
+            </div>
+
+            <button
+              v-if="hasMultipleCameras"
+              class="switch-camera-btn"
+              @click.stop="switchCamera"
+              title="Switch Camera"
+            >
+              <SwitchCamera size="24" />
+            </button>
+          </div>
+
+          <div class="results-section">
+            <div class="results-header">
+              <h3>Scanned Codes ({{ scannedCodes.length }})</h3>
+              <div v-if="scannedCodes.length > 0" class="header-actions">
+                <button class="icon-btn" @click="copyAll" title="Copy All">
+                  <Copy size="18" />
+                </button>
+                <button class="icon-btn" @click="downloadJson" title="Download JSON">
+                  <Download size="18" />
+                </button>
+                <button class="icon-btn delete-btn" @click="clearHistory" title="Clear All">
+                  <Trash2 size="18" />
+                </button>
+              </div>
+            </div>
+
+            <div v-if="scannedCodes.length > 0" class="codes-list">
+              <div v-for="code in scannedCodes" :key="code.id" class="code-item">
+                <div class="code-content">
+                  <div class="code-value">
+                    <a v-if="isUrl(code.value)" :href="code.value" target="_blank" rel="noopener noreferrer">{{ code.value }}</a>
+                    <span v-else>{{ code.value }}</span>
+                  </div>
+                  <div class="code-meta">
+                    <span class="timestamp">{{ code.timestamp }}</span>
+                    <span class="format-badge">{{ code.format }}</span>
+                  </div>
+                </div>
+                <div class="item-actions">
+                  <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy">
+                    <Copy size="18" />
+                  </button>
+                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove">
+                    <Trash2 size="18" />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div v-else class="empty-state">
+              Point camera at a QR code to scan
+            </div>
+          </div>
+        </div>
+      </Teleport>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tool-container.full-width {
+  max-width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.scanner-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 1.5rem;
+}
+
+.scanner-content.is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: #000;
+  gap: 0;
+}
+
+.camera-wrapper {
+  width: 100%;
+  max-width: 500px;
+  aspect-ratio: 1;
+  margin: 0 auto;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  background: #000;
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  transition: all 0.3s ease;
+}
+
+.camera-wrapper.clickable {
+  cursor: pointer;
+}
+
+.scanner-content.is-fullscreen .camera-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  max-width: none;
+  height: auto;
+  border-radius: 0;
+  border: none;
+  margin: 0;
+  z-index: 1;
+}
+
+.camera-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 50vh;
+  filter: blur(16px) saturate(110%);
+  opacity: 0.9;
+  z-index: 0;
+}
+
+.camera-bg.is-mirrored {
+  transform: scaleX(-1);
+}
+
+.camera-feed {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.camera-feed.is-mirrored {
+  transform: scaleX(-1);
+}
+
+.scan-overlay-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.scan-overlay-canvas.is-mirrored {
+  transform: scaleX(-1);
+}
+
+.error-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.8);
+  color: #ff4444;
+  padding: 1rem;
+  text-align: center;
+  z-index: 10;
+}
+
+.switch-camera-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 20;
+  backdrop-filter: blur(4px);
+  transition: all 0.2s;
+}
+
+.switch-camera-btn:hover {
+  background: rgba(0, 0, 0, 0.6);
+  transform: scale(1.05);
+}
+
+.close-fullscreen-btn {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 20;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+}
+
+.scanner-content.is-fullscreen .results-section {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  height: auto;
+  z-index: 2;
+  border-radius: 0;
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  flex-direction: column;
+}
+
+.code-value {
+  color: var(--primary-accent);
+  font-family: monospace;
+  word-break: break-all;
+  margin-bottom: 0.4rem;
+}
+
+.code-value a {
+  color: var(--primary-accent);
+  text-decoration: underline;
+}
+
+.code-value a:hover {
+  opacity: 0.8;
+}
+
+.code-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.format-badge {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0 0.4rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+}
+
+:global(:root[data-theme="light"]) .format-badge {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--text-secondary);
+  padding: 2rem;
+  text-align: center;
+}
+
+:deep(video) {
+  object-fit: cover !important;
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+}
+
+:deep(.qrcode-stream-wrapper),
+:deep(.qrcode-stream-overlay) {
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute !important;
+  inset: 0 !important;
+}
+
+/* Front camera mirror (CSS-only) */
+.camera-wrapper.is-front :deep(video) {
+  transform: scaleX(-1);
+  transform-origin: center;
+}
+.camera-wrapper.is-front :deep(#qrcode-stream-pause-frame),
+.camera-wrapper.is-front :deep(#qrcode-stream-overlay) {
+  transform: scaleX(-1);
+  transform-origin: center;
+}
+
+@media (min-width: 768px) {
+  :deep(.scanner-content.is-fullscreen .camera-wrapper video) {
+    object-fit: contain !important;
+  }
+}
+</style>
--- a/src/components/tools/UrlCleaner.vue
+++ b/src/components/tools/UrlCleaner.vue
@@ -0,0 +1,328 @@
+<script setup>
+import { ref, watch, onUnmounted } from 'vue'
+import { Copy, Trash2, ExternalLink, Power, Zap, X, Settings, Download } from 'lucide-vue-next'
+import { useExtension } from '../../composables/useExtension'
+import { useUrlCleaner } from '../../composables/useUrlCleaner'
+import ExtensionStatus from './common/ExtensionStatus.vue'
+import UrlCleanerExceptionsModal from './UrlCleanerExceptionsModal.vue'
+
+// Extension integration
+const { isExtensionReady, isListening, lastClipboardText, startListening, stopListening, writeClipboard } = useExtension()
+
+const inputUrl = ref('')
+const showExceptionsModal = ref(false)
+
+const {
+  cleanedHistory,
+  isWatchEnabled,
+  exceptions,
+  defaultExceptions,
+  processUrl: baseProcessUrl,
+  removeEntry,
+  clearHistory
+} = useUrlCleaner()
+
+// Watch for clipboard changes from extension
+watch(lastClipboardText, (newText) => {
+  if (isWatchEnabled.value && newText) {
+    baseProcessUrl(newText, true, writeClipboard)
+  }
+})
+
+// Sync watch state with extension listener
+watch(isWatchEnabled, (enabled) => {
+  if (enabled) {
+    startListening()
+  } else {
+    stopListening()
+  }
+}, { immediate: true })
+
+// Re-enable listening when extension becomes ready
+watch(isExtensionReady, (ready) => {
+  if (ready && isWatchEnabled.value) {
+    startListening()
+  }
+})
+
+// Toggle watch mode
+const toggleWatch = () => {
+  isWatchEnabled.value = !isWatchEnabled.value
+}
+
+const copyAllUrls = async () => {
+  if (cleanedHistory.value.length === 0) return
+  const text = cleanedHistory.value.map(item => item.cleaned).join('\n')
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy URLs', err)
+  }
+}
+
+const downloadJson = () => {
+  if (cleanedHistory.value.length === 0) return
+
+  const exportData = cleanedHistory.value.map(item => ({
+    url: item.cleaned,
+    original: item.original,
+    timestamp: item.timestamp
+  }))
+
+  const data = JSON.stringify(exportData, null, 2)
+  const blob = new Blob([data], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `cleaned-urls-${new Date().toISOString().slice(0, 10)}.json`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+// Manual clean
+const handleClean = () => {
+  if (inputUrl.value) {
+    const urls = inputUrl.value.split(/\r?\n/).filter(line => line.trim().length > 0)
+    urls.forEach(url => {
+      baseProcessUrl(url.trim(), false, writeClipboard)
+    })
+    inputUrl.value = ''
+  }
+}
+
+const copyToClipboard = (text) => {
+  navigator.clipboard.writeText(text)
+}
+
+onUnmounted(() => {
+  if (isListening.value) {
+    stopListening()
+  }
+})
+</script>
+
+<template>
+  <div class="tool-container full-width">
+    <div class="tool-panel">
+      <div class="panel-header">
+        <h2 class="tool-title">URL Cleaner</h2>
+        <div class="header-actions">
+          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions">
+            <Settings size="20" />
+          </button>
+          <ExtensionStatus :isReady="isExtensionReady" />
+        </div>
+      </div>
+
+      <div class="input-section">
+        <div class="input-wrapper">
+          <textarea
+            v-model="inputUrl"
+            placeholder="Paste URL(s) here to clean..."
+            class="tool-textarea url-input"
+            @keydown.enter.prevent="handleClean"
+            rows="1"
+          ></textarea>
+          <button class="btn-neon" @click="handleClean">
+            Clean
+          </button>
+        </div>
+
+        <div class="watch-toggle">
+          <button
+            class="btn-neon toggle-btn"
+            :class="{ 'active': isWatchEnabled && isExtensionReady }"
+            @click="toggleWatch"
+            :disabled="!isExtensionReady"
+            :title="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
+          >
+            <Power size="18" />
+            <span>Watch Clipboard</span>
+            <span v-if="isWatchEnabled && isExtensionReady" class="status-dot"></span>
+          </button>
+        </div>
+      </div>
+
+      <div class="history-section" v-if="cleanedHistory.length > 0">
+        <div class="history-header">
+          <h3>Cleaned URLs</h3>
+          <div class="history-actions">
+            <button class="icon-btn" @click="copyAllUrls" title="Copy all URLs">
+              <Copy size="18" />
+            </button>
+            <button class="icon-btn" @click="downloadJson" title="Download JSON">
+              <Download size="18" />
+            </button>
+            <button class="icon-btn delete-btn" @click="clearHistory" title="Clear History">
+              <Trash2 size="18" />
+            </button>
+          </div>
+        </div>
+
+        <div class="history-list">
+          <div v-for="item in cleanedHistory" :key="item.id" class="history-item">
+            <div class="item-info">
+              <div class="cleaned-url">{{ item.cleaned }}</div>
+              <div class="meta-info">
+                <span class="timestamp">{{ item.timestamp }}</span>
+                <span class="savings" v-if="item.savedPercent > 0">
+                  <Zap size="12" /> -{{ item.savedPercent }}% junk removed
+                </span>
+                <span class="no-change" v-else>No junk found</span>
+              </div>
+            </div>
+            <div class="item-actions">
+              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy">
+                <Copy size="18" />
+              </button>
+              <a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
+                <ExternalLink size="18" />
+              </a>
+              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove">
+                <X size="18" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="empty-state" v-else>
+        <p>Paste a URL above or enable "Watch Clipboard" to automatically clean links.</p>
+      </div>
+
+      <UrlCleanerExceptionsModal
+        :isOpen="showExceptionsModal"
+        :exceptions="exceptions"
+        :defaultRules="defaultExceptions"
+        @update:exceptions="exceptions = $event"
+        @close="showExceptionsModal = false"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tool-container.full-width {
+  max-width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.input-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+}
+
+@media (max-width: 640px) {
+  .input-section {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+  }
+}
+
+.input-wrapper {
+  display: flex;
+  gap: 1rem;
+}
+
+@media (max-width: 640px) {
+  .input-wrapper {
+    flex-direction: column;
+  }
+
+  .watch-toggle {
+    justify-content: center;
+  }
+
+  .toggle-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+.url-input {
+  flex: 1;
+  min-height: 120px;
+  font-family: inherit;
+}
+
+.watch-toggle {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.toggle-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+}
+
+.toggle-btn.active {
+  background: rgba(var(--primary-accent-rgb), 0.2);
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
+}
+
+.cleaned-url {
+  color: var(--primary-accent);
+  font-family: monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 0.4rem;
+}
+
+.meta-info {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.savings {
+  color: #4ade80;
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--text-secondary);
+  text-align: center;
+  padding: 2rem;
+}
+
+.settings-btn {
+  background: rgba(255, 255, 255, 0.1);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--text-secondary);
+  transition: all 0.3s ease;
+}
+
+.settings-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--primary-accent);
+}
+</style>
--- a/src/components/tools/UrlCleanerExceptionsModal.vue
+++ b/src/components/tools/UrlCleanerExceptionsModal.vue
@@ -0,0 +1,598 @@
+<script setup>
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { X, Plus, Trash2, RotateCcw } from 'lucide-vue-next'
+
+const props = defineProps({
+  isOpen: Boolean,
+  exceptions: Array,
+  defaultRules: Array
+})
+
+const emit = defineEmits(['close', 'update:exceptions'])
+
+const handleKeydown = (e) => {
+  if (e.key === 'Escape') {
+    emit('close')
+  }
+}
+
+watch(() => props.isOpen, (isOpen) => {
+  if (isOpen) {
+    window.addEventListener('keydown', handleKeydown)
+  } else {
+    window.removeEventListener('keydown', handleKeydown)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+
+const newRule = ref({
+  domainPattern: '',
+  keepParams: '',
+  keepHash: false,
+  keepAllParams: false
+})
+
+const localExceptions = computed({
+  get: () => props.exceptions,
+  set: (val) => emit('update:exceptions', val)
+})
+
+const addRule = () => {
+  if (!newRule.value.domainPattern) return
+
+  const params = newRule.value.keepParams
+    .split(',')
+    .map(p => p.trim())
+    .filter(p => p)
+
+  const existingRuleIndex = localExceptions.value.findIndex(
+    r => r.domainPattern === newRule.value.domainPattern
+  )
+
+  if (existingRuleIndex >= 0) {
+    // Merge with existing rule
+    const existingRule = localExceptions.value[existingRuleIndex]
+
+    // Merge params (unique)
+    const mergedParams = [...new Set([...existingRule.keepParams, ...params])]
+
+    // Merge keepHash
+    const mergedKeepHash = existingRule.keepHash || newRule.value.keepHash
+    const mergedKeepAllParams = !!existingRule.keepAllParams || !!newRule.value.keepAllParams
+
+    const updatedRule = {
+      ...existingRule,
+      keepParams: mergedParams,
+      keepHash: mergedKeepHash,
+      keepAllParams: mergedKeepAllParams,
+      isEnabled: true // Re-enable if disabled
+    }
+
+    const newExceptions = [...localExceptions.value]
+    newExceptions[existingRuleIndex] = updatedRule
+    localExceptions.value = newExceptions
+
+  } else {
+    // Create new rule
+    const rule = {
+      id: Date.now().toString(),
+      domainPattern: newRule.value.domainPattern,
+      keepParams: params,
+      keepHash: newRule.value.keepHash,
+      keepAllParams: newRule.value.keepAllParams,
+      isEnabled: true,
+      isDefault: false
+    }
+    localExceptions.value = [...localExceptions.value, rule]
+  }
+
+  // Reset form
+  newRule.value = {
+    domainPattern: '',
+    keepParams: '',
+    keepHash: false,
+    keepAllParams: false
+  }
+}
+
+const editRule = (rule) => {
+  newRule.value = {
+    domainPattern: rule.domainPattern,
+    keepParams: Array.isArray(rule.keepParams) ? rule.keepParams.join(', ') : '',
+    keepHash: !!rule.keepHash,
+    keepAllParams: !!rule.keepAllParams
+  }
+}
+
+const removeRule = (id) => {
+  localExceptions.value = localExceptions.value.filter(r => r.id !== id)
+}
+
+const toggleRule = (id) => {
+  localExceptions.value = localExceptions.value.map(r => {
+    if (r.id === id) {
+      return { ...r, isEnabled: !r.isEnabled }
+    }
+    return r
+  })
+}
+
+const removeParam = (ruleId, param) => {
+  localExceptions.value = localExceptions.value.map(r => {
+    if (r.id === ruleId) {
+      return {
+        ...r,
+        keepParams: r.keepParams.filter(p => p !== param)
+      }
+    }
+    return r
+  })
+}
+
+const toggleKeepHash = (ruleId) => {
+  localExceptions.value = localExceptions.value.map(r => {
+    if (r.id === ruleId) {
+      return { ...r, keepHash: !r.keepHash }
+    }
+    return r
+  })
+}
+
+const toggleKeepAllParams = (ruleId) => {
+  localExceptions.value = localExceptions.value.map(r => {
+    if (r.id === ruleId) {
+      return { ...r, keepAllParams: !r.keepAllParams }
+    }
+    return r
+  })
+}
+
+const resetToDefault = (ruleId) => {
+  const defaultRule = (props.defaultRules || []).find(r => r.id === ruleId)
+  if (!defaultRule) return
+
+  localExceptions.value = localExceptions.value.map(r => {
+    if (r.id !== ruleId) return r
+    return {
+      ...r,
+      domainPattern: defaultRule.domainPattern,
+      keepParams: Array.isArray(defaultRule.keepParams) ? [...defaultRule.keepParams] : [],
+      keepHash: !!defaultRule.keepHash,
+      keepAllParams: !!defaultRule.keepAllParams,
+      isEnabled: true,
+      isDefault: true
+    }
+  })
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3>URL Cleaning Exceptions</h3>
+          <button class="close-btn" @click="$emit('close')">
+            <X size="24" />
+          </button>
+        </div>
+
+        <div class="modal-body">
+          <p class="description">
+            Define rules to keep specific parameters or anchors for certain domains.
+            Standard cleaning removes all parameters and anchors.
+          </p>
+
+          <div class="add-rule-form">
+            <h4>Add New Exception</h4>
+            <div class="form-row">
+              <input
+                v-model="newRule.domainPattern"
+                placeholder="Domain (e.g. *.youtube.com)"
+                class="input-field"
+                @keyup.enter="addRule"
+              >
+              <input
+                v-model="newRule.keepParams"
+                placeholder="Keep params (comma separated, e.g. v, id)"
+                class="input-field"
+                @keyup.enter="addRule"
+              >
+            </div>
+            <div class="form-row checkbox-row">
+              <div class="checkbox-group">
+                <label class="checkbox-label">
+                  <input type="checkbox" v-model="newRule.keepHash">
+                  Keep Anchor (#)
+                </label>
+                <label class="checkbox-label">
+                  <input type="checkbox" v-model="newRule.keepAllParams">
+                  Keep all params
+                </label>
+              </div>
+              <button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern">
+                <Plus size="16" /> Add Rule
+              </button>
+            </div>
+          </div>
+
+          <div class="rules-list">
+            <h4>Active Rules</h4>
+            <div v-if="localExceptions.length === 0" class="empty-rules">
+              No exceptions defined.
+            </div>
+
+            <div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
+              <div class="rule-info">
+                <div class="rule-domain" @click="editRule(rule)" title="Click to edit">{{ rule.domainPattern }}</div>
+                <div class="rule-details">
+                  <div class="params-list">
+                    <template v-if="rule.keepAllParams">
+                      <span class="detail-tag">
+                        Keep all params
+                        <button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" title="Disable keep all params">
+                          <X size="12" />
+                        </button>
+                      </span>
+                    </template>
+                    <template v-else>
+                      <span v-for="param in rule.keepParams" :key="param" class="detail-tag">
+                        {{ param }}
+                        <button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" title="Remove parameter">
+                          <X size="12" />
+                        </button>
+                      </span>
+                    </template>
+                    <span v-if="rule.keepHash" class="detail-tag hash-tag">
+                      Keep #
+                      <button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" title="Remove hash exception">
+                        <X size="12" />
+                      </button>
+                    </span>
+                    <span v-if="!rule.keepAllParams && rule.keepParams.length === 0 && !rule.keepHash" class="no-params">No params kept</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="rule-actions">
+                <button
+                  class="icon-btn"
+                  @click="toggleRule(rule.id)"
+                  :title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
+                >
+                  <div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
+                </button>
+
+                <button
+                  v-if="!rule.isDefault"
+                  class="icon-btn delete-btn"
+                  @click="removeRule(rule.id)"
+                  title="Remove rule"
+                >
+                  <Trash2 size="18" />
+                </button>
+                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule">
+                  <RotateCcw size="16" /> Default
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+  padding: 1rem;
+}
+
+.modal-content {
+  background: var(--glass-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  padding: 0;
+  max-width: 800px;
+  width: 100%;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--glass-shadow);
+  color: var(--text-color);
+}
+
+
+
+.modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@media (max-width: 640px) {
+  .modal-header {
+    padding: 0.8rem 1.2rem;
+  }
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 1.4rem;
+  background: var(--title-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.5rem;
+}
+
+.close-btn:hover {
+  color: var(--text-color);
+}
+
+.modal-body {
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+@media (max-width: 640px) {
+  .modal-body {
+    padding: 1rem 1.2rem;
+  }
+}
+
+.description {
+  color: var(--text-secondary);
+  margin-bottom: 1.5rem;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.add-rule-form {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 1rem;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+  border: 1px solid var(--glass-border);
+}
+
+.add-rule-form h4, .rules-list h4 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  color: var(--text-strong);
+}
+
+.form-row {
+  display: flex;
+  gap: 0.8rem;
+  margin-bottom: 0.8rem;
+}
+
+@media (max-width: 640px) {
+  .form-row {
+    flex-direction: column;
+  }
+
+  .checkbox-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .checkbox-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.8rem;
+  }
+
+  .btn-neon {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+.checkbox-row {
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0;
+}
+
+.checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+}
+
+.input-field {
+  flex: 1;
+  padding: 0.6rem;
+  border-radius: 6px;
+  border: 1px solid var(--toggle-border);
+  background: var(--toggle-bg);
+  color: var(--text-color);
+  outline: none;
+}
+
+.input-field:focus {
+  border-color: var(--primary-accent);
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.btn-neon.small {
+  padding: 0.4rem 1rem;
+  font-size: 0.9rem;
+}
+
+.rules-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.rule-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.8rem;
+  border: 1px solid var(--glass-border);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  transition: opacity 0.3s;
+}
+
+.rule-item.disabled {
+  opacity: 0.6;
+}
+
+.rule-info {
+  flex: 1;
+}
+
+.rule-domain {
+  font-weight: 600;
+  color: var(--primary-accent);
+  margin-bottom: 0.3rem;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.rule-domain:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+}
+
+.rule-details {
+  width: 100%;
+}
+
+.params-list {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.detail-tag {
+  font-size: 0.8rem;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.remove-param-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.remove-param-btn:hover {
+  color: #ef4444;
+}
+
+.no-params {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.rule-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.toggle-switch {
+  width: 36px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+  position: relative;
+  transition: background 0.3s;
+}
+
+.toggle-switch::after {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+
+.toggle-switch.active {
+  background: #4ade80;
+}
+
+.toggle-switch.active::after {
+  transform: translateX(16px);
+}
+
+.default-reset {
+  white-space: nowrap;
+}
+
+.empty-rules {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 1rem;
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+}
+
+.delete-btn:hover {
+  color: #ef4444;
+}
+</style>
--- a/src/components/tools/common/ExtensionStatus.vue
+++ b/src/components/tools/common/ExtensionStatus.vue
@@ -0,0 +1,221 @@
+<script>
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup>
+import { ref, watch, onUnmounted } from 'vue'
+import { Plug, Plus, X } from 'lucide-vue-next'
+
+const props = defineProps({
+  isReady: Boolean
+})
+
+const showModal = ref(false)
+
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && showModal.value) {
+    showModal.value = false
+  }
+}
+
+watch(showModal, (isOpen) => {
+  if (isOpen) {
+    window.addEventListener('keydown', handleKeydown)
+  } else {
+    window.removeEventListener('keydown', handleKeydown)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" :title="isReady ? 'Extension Connected' : 'Extension Not Connected'">
+    <Plug v-if="isReady" size="18" />
+    <Plus v-else size="18" />
+  </div>
+
+  <Teleport to="body">
+    <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
+      <div class="modal-content glass-panel">
+        <button class="close-btn" @click="showModal = false">
+          <X size="24" />
+        </button>
+
+        <div v-if="!isReady">
+          <h3>Enhance Your Experience</h3>
+          <p>
+            Install our browser extension to enable <strong>background clipboard features</strong>!
+          </p>
+          <p class="description">
+            Without the extension, this tool can only access clipboard when the tab is active.
+            With the extension, you can capture and process content even when you're working in other apps.
+          </p>
+          <div class="modal-actions">
+            <a
+              href="https://chromewebstore.google.com/detail/tools-app-extension/bhcpbmfncohogehbhebiffcgjcndnneg"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn-neon"
+            >
+              Install Extension
+            </a>
+          </div>
+        </div>
+
+        <div v-else>
+          <h3>Extension Connected!</h3>
+          <p>
+            You have successfully enabled <strong>background clipboard integration</strong>.
+          </p>
+          <p class="description">
+            The extension is active and ready to process your clipboard in the background.
+          </p>
+          <div class="modal-actions">
+            <button class="btn-neon" @click="showModal = false">Got it!</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.extension-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+:global(:root[data-theme="light"]) .extension-status {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--text-secondary);
+}
+
+.extension-status:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--primary-accent);
+}
+
+:global(:root[data-theme="light"]) .extension-status:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+  padding: 1rem;
+}
+
+:global(:root[data-theme="light"]) .modal-overlay {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.modal-content {
+  background: var(--glass-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  padding: 2.5rem;
+  max-width: 500px;
+  width: 90%;
+  position: relative;
+  box-shadow: var(--glass-shadow);
+  text-align: center;
+  color: var(--text-color);
+}
+
+.close-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.5rem;
+  transition: color 0.2s;
+}
+
+.close-btn:hover {
+  color: var(--text-color);
+}
+
+h3 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  font-size: 1.8rem; /* Większy nagłówek */
+  background: var(--title-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-weight: 700;
+}
+
+p {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  color: var(--text-color); /* Wymuś kolor */
+}
+
+.description {
+  color: var(--text-secondary);
+  margin-bottom: 2rem;
+  font-size: 1rem;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.modal-actions .btn-neon {
+  font-size: 1.1rem;
+  padding: 0.8rem 2.5rem;
+  min-width: 140px;
+}
+
+strong {
+  color: var(--primary-accent);
+  font-weight: 600;
+}
+
+.extension-status.is-ready {
+  color: #4ade80;
+  background: rgba(74, 222, 128, 0.1);
+}
+
+.extension-status.is-ready:hover {
+  background: rgba(74, 222, 128, 0.2);
+  color: #4ade80;
+}
+
+:global(:root[data-theme="light"]) .extension-status.is-ready {
+  background: rgba(74, 222, 128, 0.15);
+  color: #16a34a; /* Darker green for light mode */
+}
+</style>
--- a/src/composables/useCamera.js
+++ b/src/composables/useCamera.js
@@ -0,0 +1,110 @@
+import { ref, watch, onUnmounted } from 'vue'
+
+export function useCamera(videoRef) {
+    const stream = ref(null)
+    const facingMode = ref('environment')
+    const hasMultipleCameras = ref(false)
+    const isMirrored = ref(false)
+    const error = ref('')
+
+    const checkCameras = async () => {
+        try {
+            if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+                return
+            }
+            const devices = await navigator.mediaDevices.enumerateDevices()
+            const cameras = devices.filter(d => d.kind === 'videoinput')
+            hasMultipleCameras.value = cameras.length > 1
+        } catch (e) {
+            console.error('Error checking cameras:', e)
+        }
+    }
+
+    const stopCamera = () => {
+        if (stream.value) {
+            stream.value.getTracks().forEach(t => t.stop())
+            stream.value = null
+        }
+    }
+
+    const startCamera = async () => {
+        stopCamera()
+        error.value = ''
+
+        try {
+            const constraints = {
+                video: {
+                    facingMode: facingMode.value,
+                    width: { ideal: 1280 },
+                    height: { ideal: 720 }
+                }
+            }
+
+            const mediaStream = await navigator.mediaDevices.getUserMedia(constraints)
+            stream.value = mediaStream
+
+            // Detect actual facing mode to mirror front camera correctly
+            const videoTrack = mediaStream.getVideoTracks()[0]
+            if (videoTrack) {
+                const settings = videoTrack.getSettings()
+                if (settings.facingMode) {
+                    isMirrored.value = settings.facingMode === 'user'
+                } else {
+                    // Fallback: check label for desktop cameras or assume requested mode
+                    const label = videoTrack.label ? videoTrack.label.toLowerCase() : ''
+                    if (label.includes('front') || label.includes('facetime') || label.includes('macbook')) {
+                        isMirrored.value = true
+                    } else {
+                        isMirrored.value = facingMode.value === 'user'
+                    }
+                }
+            }
+
+            if (videoRef.value) {
+                videoRef.value.srcObject = mediaStream
+                return new Promise((resolve) => {
+                    videoRef.value.onloadedmetadata = () => {
+                        videoRef.value.play().catch(e => console.error('Play error', e))
+                        resolve()
+                    }
+                })
+            }
+        } catch (err) {
+            if (err.name === 'NotAllowedError') {
+                error.value = 'Camera permission denied'
+            } else if (err.name === 'NotFoundError') {
+                error.value = 'No camera found'
+            } else {
+                error.value = `Camera error: ${err.name}`
+            }
+            throw err // Let caller know it failed
+        }
+    }
+
+    const switchCamera = () => {
+        facingMode.value = facingMode.value === 'environment' ? 'user' : 'environment'
+    }
+
+    watch(facingMode, () => {
+        if (stream.value) {
+            // Re-start if already running
+            startCamera().catch(() => { })
+        }
+    })
+
+    onUnmounted(() => {
+        stopCamera()
+    })
+
+    return {
+        stream,
+        facingMode,
+        hasMultipleCameras,
+        isMirrored,
+        error,
+        checkCameras,
+        startCamera,
+        stopCamera,
+        switchCamera
+    }
+}
--- a/src/composables/useExtension.js
+++ b/src/composables/useExtension.js
@@ -0,0 +1,79 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useExtension() {
+  const isExtensionReady = ref(false)
+  const isListening = ref(false)
+  const lastClipboardText = ref('')
+  let extensionCheckInterval = null
+  let lastPongTime = Date.now()
+
+  const PING_INTERVAL = 200
+  const TIMEOUT_THRESHOLD = 1000
+
+  const handleMessage = (event) => {
+    if (event.source !== window) return
+
+    if (event.data.type === 'TOOLS_APP_EXTENSION_READY' || event.data.type === 'TOOLS_APP_PONG') {
+      isExtensionReady.value = true
+      lastPongTime = Date.now()
+    }
+
+    if (event.data.type === 'TOOLS_APP_CLIPBOARD_UPDATE') {
+      const text = event.data.content
+      // Only update if listening
+      if (isListening.value && text) {
+        lastClipboardText.value = text
+      }
+    }
+  }
+
+  const startWatchdog = () => {
+    extensionCheckInterval = setInterval(() => {
+      window.postMessage({ type: 'TOOLS_APP_PING' }, '*')
+      if (Date.now() - lastPongTime > TIMEOUT_THRESHOLD) {
+         isExtensionReady.value = false
+      }
+    }, PING_INTERVAL)
+  }
+
+  const startListening = () => {
+    window.postMessage({ type: 'TOOLS_APP_START_SNIFFING' }, '*')
+    isListening.value = true
+  }
+
+  const stopListening = () => {
+    window.postMessage({ type: 'TOOLS_APP_STOP_SNIFFING' }, '*')
+    isListening.value = false
+  }
+
+  const writeClipboard = (text) => {
+    // Send to extension (background -> offscreen -> clipboard)
+    window.postMessage({ type: 'TOOLS_APP_CLIPBOARD_WRITE', content: text }, '*')
+    // Update local state to avoid echo loop if we are listening
+    lastClipboardText.value = text
+  }
+
+  onMounted(() => {
+    window.addEventListener('message', handleMessage)
+    // Initial check
+    window.postMessage({ type: 'TOOLS_APP_INIT' }, '*')
+    startWatchdog()
+  })
+
+  onUnmounted(() => {
+    if (isListening.value) {
+      stopListening()
+    }
+    if (extensionCheckInterval) clearInterval(extensionCheckInterval)
+    window.removeEventListener('message', handleMessage)
+  })
+
+  return {
+    isExtensionReady,
+    isListening,
+    lastClipboardText,
+    startListening,
+    stopListening,
+    writeClipboard
+  }
+}
--- a/src/composables/useFillHeight.js
+++ b/src/composables/useFillHeight.js
@@ -1,6 +1,7 @@
-import { onMounted, onUnmounted, ref, nextTick } from 'vue'
+import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue'
+import { UI_CONFIG } from '../config/ui'

-export function useFillHeight(elementRef, marginBottom = 20) {
+export function useFillHeight(elementRef, extraMargin = 0) {
  const height = ref('auto')

  const updateHeight = () => {
@@ -8,16 +9,10 @@ export function useFillHeight(elementRef, marginBottom = 20) {

    const rect = elementRef.value.getBoundingClientRect()
    const windowHeight = window.innerHeight
-    // Calculate available space: window height - element top position - margin bottom
-    // We also need to account for the footer height if it's fixed or layout related
-    // The user mentioned "margin bottom from footer".
-    // If footer is in the flow, we might just want to fill the parent container?
-    // But user asked for JS resizing.
    
-    // Let's assume we want to fill down to (windowHeight - marginBottom).
-    // This assumes the element should stretch to the bottom of the viewport.
-    
-    const availableHeight = windowHeight - rect.top - marginBottom
+    // Calculate available space: window height - element top position - footer height - padding - extra margin
+    const bottomOffset = UI_CONFIG.footerHeight + UI_CONFIG.pagePadding + extraMargin
+    const availableHeight = windowHeight - rect.top - bottomOffset
    
    // Ensure minimum height
    if (availableHeight > 100) {
@@ -34,6 +29,13 @@ export function useFillHeight(elementRef, marginBottom = 20) {
    
    // Also update after a short delay to ensure layout is settled (e.g. sidebar transitions)
    setTimeout(updateHeight, 300)
+
+    // Watch for element appearing (v-if) or changing
+    watch(elementRef, () => {
+      nextTick(updateHeight)
+      // Additional update for layout stability
+      setTimeout(updateHeight, 100)
+    })
  })

  onUnmounted(() => {
--- a/src/composables/useLocalStorage.js
+++ b/src/composables/useLocalStorage.js
@@ -0,0 +1,22 @@
+import { ref, watch } from 'vue'
+
+export function useLocalStorage(key, defaultValue, toolPrefix = '') {
+  // Construct prefixed key: [toolPrefix-]key
+  const prefixPart = toolPrefix ? `${toolPrefix}-` : ''
+  const prefixedKey = `${prefixPart}${key}`
+
+  // Initialize state from local storage or default value
+  const storedValue = localStorage.getItem(prefixedKey)
+  const data = ref(storedValue ? JSON.parse(storedValue) : defaultValue)
+
+  // Watch for changes and update local storage
+  watch(data, (newValue) => {
+    if (newValue === null || newValue === undefined) {
+      localStorage.removeItem(prefixedKey)
+    } else {
+      localStorage.setItem(prefixedKey, JSON.stringify(newValue))
+    }
+  }, { deep: true })
+
+  return data
+}
--- a/src/composables/useQrDetection.js
+++ b/src/composables/useQrDetection.js
@@ -0,0 +1,174 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useQrDetection(videoRef, overlayCanvasRef) {
+    const barcodeDetector = ref(null)
+    const isDetecting = ref(false)
+    const error = ref('')
+    let scanRafId = null
+
+    // Function to initialize detector
+    const initDetector = async () => {
+        if (!barcodeDetector.value) {
+            if ('BarcodeDetector' in window) {
+                try {
+                    // Formats are optional, but specifying qr_code might be faster
+                    const formats = await window.BarcodeDetector.getSupportedFormats()
+                    if (formats.includes('qr_code')) {
+                        barcodeDetector.value = new window.BarcodeDetector({ formats: ['qr_code'] })
+                    } else {
+                        barcodeDetector.value = new window.BarcodeDetector()
+                    }
+                } catch (e) {
+                    // Fallback
+                    barcodeDetector.value = new window.BarcodeDetector()
+                }
+            } else {
+                error.value = 'Barcode Detection API not supported on this device/browser.'
+            }
+        }
+    }
+
+    const paintDetections = (codes) => {
+        const canvas = overlayCanvasRef.value
+        const video = videoRef.value
+
+        if (!canvas || !video) return
+
+        const ctx = canvas.getContext('2d')
+        const { width, height } = canvas.getBoundingClientRect()
+
+        // Update canvas size if needed (to match CSS size)
+        if (canvas.width !== width || canvas.height !== height) {
+            canvas.width = width
+            canvas.height = height
+        }
+
+        ctx.clearRect(0, 0, width, height)
+
+        if (!codes || codes.length === 0) return
+
+        const vw = video.videoWidth
+        const vh = video.videoHeight
+        if (!vw || !vh) return
+
+        // Calculate object-fit: cover scaling
+        const videoRatio = vw / vh
+        const canvasRatio = width / height
+
+        let drawWidth, drawHeight, startX, startY
+
+        if (canvasRatio > videoRatio) {
+            // Canvas is wider than video (video cropped top/bottom)
+            drawWidth = width
+            drawHeight = width / videoRatio
+            startX = 0
+            startY = (height - drawHeight) / 2
+        } else {
+            // Canvas is taller than video (video cropped left/right)
+            drawHeight = height
+            drawWidth = height * videoRatio
+            startY = 0
+            startX = (width - drawWidth) / 2
+        }
+
+        const scale = drawWidth / vw
+        // Styles
+        const styles = getComputedStyle(document.documentElement)
+        const accent = styles.getPropertyValue('--primary-accent').trim() || '#00f2fe'
+
+        ctx.lineWidth = 4
+        ctx.strokeStyle = accent
+        ctx.fillStyle = accent
+
+        codes.forEach(code => {
+            const points = code.cornerPoints
+            if (!points || points.length < 4) return
+
+            ctx.beginPath()
+
+            const transform = (p) => {
+                let x = p.x * scale + startX
+                let y = p.y * scale + startY
+                return { x, y }
+            }
+
+            const p0 = transform(points[0])
+            ctx.moveTo(p0.x, p0.y)
+
+            for (let i = 1; i < points.length; i++) {
+                const p = transform(points[i])
+                ctx.lineTo(p.x, p.y)
+            }
+
+            ctx.closePath()
+            ctx.stroke()
+
+            // Draw corners
+            points.forEach(p => {
+                const tp = transform(p)
+                ctx.beginPath()
+                ctx.arc(tp.x, tp.y, 4, 0, Math.PI * 2)
+                ctx.fill()
+            })
+        })
+    }
+
+    const startDetection = async (onDetectCallback) => {
+        error.value = ''
+        try {
+            await initDetector()
+            if (!barcodeDetector.value) {
+                if (!error.value) error.value = 'Barcode Detector failed to initialize'
+                return
+            }
+
+            isDetecting.value = true
+
+            const detectLoop = async () => {
+                if (!isDetecting.value || !videoRef.value || videoRef.value.paused || videoRef.value.ended) {
+                    scanRafId = requestAnimationFrame(detectLoop)
+                    return
+                }
+
+                try {
+                    const codes = await barcodeDetector.value.detect(videoRef.value)
+                    paintDetections(codes)
+                    if (codes.length > 0 && onDetectCallback) {
+                        onDetectCallback(codes)
+                    }
+                } catch (e) {
+                    // Silent catch for intermittent detection frames failing
+                }
+                if (isDetecting.value) {
+                    scanRafId = requestAnimationFrame(detectLoop)
+                }
+            }
+
+            detectLoop() // start loop
+
+        } catch (e) {
+            error.value = `Detection error: ${e.message}`
+        }
+    }
+
+    const stopDetection = () => {
+        isDetecting.value = false
+        if (scanRafId) cancelAnimationFrame(scanRafId)
+        // Clear canvas
+        if (overlayCanvasRef.value) {
+            const ctx = overlayCanvasRef.value.getContext('2d')
+            ctx.clearRect(0, 0, overlayCanvasRef.value.width, overlayCanvasRef.value.height)
+        }
+    }
+
+    onUnmounted(() => {
+        stopDetection()
+    })
+
+    return {
+        error,
+        isDetecting,
+        startDetection,
+        stopDetection
+    }
+}
--- a/src/composables/useUrlCleaner.js
+++ b/src/composables/useUrlCleaner.js
@@ -0,0 +1,115 @@
+import { useLocalStorage } from './useLocalStorage'
+
+export function useUrlCleaner() {
+    const cleanedHistory = useLocalStorage('url-cleaner-history', [])
+    const isWatchEnabled = useLocalStorage('url-cleaner-watch-enabled', false)
+
+    const defaultExceptions = [
+        { id: 'yt', domainPattern: '*.youtube.com', keepParams: ['v', 't'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true },
+        { id: 'yt-short', domainPattern: 'youtu.be', keepParams: ['t'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true }
+    ]
+    const exceptions = useLocalStorage('url-cleaner-exceptions', defaultExceptions)
+
+    const matchDomain = (pattern, domain) => {
+        // Escape regex chars except *
+        const regexString = '^' + pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*') + '$'
+        return new RegExp(regexString, 'i').test(domain)
+    }
+
+    const processUrl = (text, autoClipboard = false, writeClipboardFn = null) => {
+        try {
+            // Basic URL validation
+            if (!text.match(/^https?:\/\//i)) {
+                if (autoClipboard) return text
+            }
+
+            const originalLength = text.length
+            let cleanedUrl = text
+
+            try {
+                const urlObj = new URL(text)
+                const hostname = urlObj.hostname
+
+                const matchedRule = exceptions.value.find(rule =>
+                    rule.isEnabled && matchDomain(rule.domainPattern, hostname)
+                )
+
+                if (matchedRule) {
+                    if (!matchedRule.keepAllParams) {
+                        const params = new URLSearchParams(urlObj.search)
+                        const keys = Array.from(params.keys())
+
+                        for (const key of keys) {
+                            if (!matchedRule.keepParams.includes(key)) {
+                                params.delete(key)
+                            }
+                        }
+                        urlObj.search = params.toString()
+                    }
+
+                    if (!matchedRule.keepHash) {
+                        urlObj.hash = ''
+                    }
+                } else {
+                    if (urlObj.search || urlObj.hash) {
+                        urlObj.search = ''
+                        urlObj.hash = ''
+                    }
+                }
+
+                cleanedUrl = urlObj.toString()
+            } catch (e) {
+                return text
+            }
+
+            if (cleanedUrl === text && autoClipboard) {
+                return text
+            }
+
+            const newLength = cleanedUrl.length
+            const savedChars = originalLength - newLength
+            const savedPercent = originalLength > 0 ? Math.round((savedChars / originalLength) * 100) : 0
+
+            const entry = {
+                id: Date.now(),
+                original: text,
+                cleaned: cleanedUrl,
+                savedPercent,
+                timestamp: new Date().toLocaleTimeString()
+            }
+
+            cleanedHistory.value.unshift(entry)
+
+            if (cleanedHistory.value.length > 50) {
+                cleanedHistory.value.pop()
+            }
+
+            if (autoClipboard && savedChars > 0 && writeClipboardFn) {
+                writeClipboardFn(cleanedUrl)
+            }
+
+            return cleanedUrl
+        } catch (e) {
+            console.error('Error processing URL:', e)
+            return text
+        }
+    }
+
+    const removeEntry = (id) => {
+        cleanedHistory.value = cleanedHistory.value.filter(item => item.id !== id)
+    }
+
+    const clearHistory = () => {
+        cleanedHistory.value = []
+    }
+
+    return {
+        cleanedHistory,
+        isWatchEnabled,
+        exceptions,
+        defaultExceptions,
+        processUrl,
+        removeEntry,
+        clearHistory
+    }
+}
--- a/src/config/ui.js
+++ b/src/config/ui.js
@@ -0,0 +1,6 @@
+
+export const UI_CONFIG = {
+  headerHeight: 64,
+  footerHeight: 50,
+  pagePadding: 16 // Single side padding (1rem)
+}
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,27 @@ import './style.css'
 import App from './App.vue'
 import router from './router'
 import Ripple from './directives/ripple'
+import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'
+
+// Configure BarcodeDetector polyfill to use local WASM file
+try {
+  prepareZXingModule({
+    overrides: {
+      locateFile: (path, prefix) => {
+        if (path.endsWith('.wasm')) {
+          return '/wasm/zxing_reader.wasm'
+        }
+        return prefix + path
+      }
+    }
+  })
+
+  // Force usage of polyfill to avoid CSP issues and ensure consistent behavior
+  // Native implementation might fail or be missing in some browsers
+  window.BarcodeDetector = BarcodeDetector
+} catch (e) {
+  console.error('Failed to initialize BarcodeDetector polyfill', e)
+}

 const app = createApp(App)

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,9 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Main from '../components/Main.vue'
 import Passwords from '../components/tools/Passwords.vue'
 import ClipboardSniffer from '../components/tools/ClipboardSniffer.vue'
+import UrlCleaner from '../components/tools/UrlCleaner.vue'
+import QrScanner from '../components/tools/QrScanner.vue'
+import QrCode from '../components/tools/QrCode.vue'
 import PrivacyPolicy from '../views/PrivacyPolicy.vue'

 const routes = [
@@ -20,6 +23,21 @@ const routes = [
    name: 'ClipboardSniffer',
    component: ClipboardSniffer
  },
+  {
+    path: '/url-cleaner',
+    name: 'UrlCleaner',
+    component: UrlCleaner
+  },
+  {
+    path: '/qr-scanner',
+    name: 'QrScanner',
+    component: QrScanner
+  },
+  {
+    path: '/qr-code',
+    name: 'QrCode',
+    component: QrCode
+  },
  {
    path: '/extension-privacy-policy',
    name: 'PrivacyPolicy',
--- a/src/style.css
+++ b/src/style.css
@@ -1,9 +1,10 @@
 /* Box sizing reset */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
  box-sizing: border-box;
 }

-@import 'tailwindcss';
 :root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
@@ -42,9 +43,12 @@
  --title-gradient: linear-gradient(45deg, #00f2fe, #4facfe);
  --ripple-color: rgba(255, 255, 255, 0.3);
  --nav-item-weight: 400;
+  --list-hover-bg: rgba(255, 255, 255, 0.05);
+  --header-bg: rgba(0, 0, 0, 0.6);

  color: var(--text-color);
-  background-color: #242424; /* Fallback */
+  background-color: #242424;
+  /* Fallback */
  background: var(--bg-gradient);
  background-attachment: fixed;

@@ -55,35 +59,37 @@
 }

 :root[data-theme="light"] {
-  --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #e5e7eb 100%);
-  --glass-bg: rgba(255, 255, 255, 0.75);
-  --glass-border: rgba(15, 23, 42, 0.12);
-  --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.12);
-  --text-color: #000000;
-  --text-strong: #000000;
-  --text-secondary: #000000;
-  --text-muted: rgba(0, 0, 0, 0.7);
+  --bg-gradient: radial-gradient(circle at center, #f8fafc 0%, #e2e8f0 100%);
+  --glass-bg: rgba(255, 255, 255, 0.85);
+  --glass-border: rgba(255, 255, 255, 0.8);
+  --glass-shadow: 0 8px 32px 0 rgba(30, 41, 59, 0.15);
+  --text-color: #0f172a;
+  --text-strong: #020617;
+  --text-secondary: #334155;
+  --text-muted: #64748b;
  --accent-cyan: #0ea5e9;
  --accent-purple: #6366f1;
  --primary-accent: #0ea5e9;
  --title-glow: rgba(14, 165, 233, 0.35);
-  --toggle-bg: rgba(255, 255, 255, 0.85);
-  --toggle-border: rgba(15, 23, 42, 0.12);
-  --toggle-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
-  --toggle-btn-border: rgba(15, 23, 42, 0.18);
-  --toggle-hover-border: rgba(15, 23, 42, 0.5);
+  --toggle-bg: rgba(255, 255, 255, 1);
+  --toggle-border: rgba(15, 23, 42, 0.2);
+  --toggle-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
+  --toggle-btn-border: rgba(15, 23, 42, 0.15);
+  --toggle-hover-border: rgba(14, 165, 233, 0.6);
  --toggle-active-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
-  --panel-bg: rgba(255, 255, 255, 0.7);
+  --panel-bg: rgba(255, 255, 255, 0.9);
  --panel-border: rgba(15, 23, 42, 0.12);
  --panel-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
-  --button-bg: rgba(255, 255, 255, 0.85);
-  --button-border: rgba(15, 23, 42, 0.16);
+  --button-bg: rgba(255, 255, 255, 0.7);
+  --button-border: rgba(255, 255, 255, 0.9);
  --button-text: #0f172a;
-  --button-hover-bg: rgba(0, 0, 0, 0.05);
+  --button-hover-bg: rgba(15, 23, 42, 0.1);
  --button-hover-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  --button-active-shadow: 0 0 18px rgba(14, 165, 233, 0.25);
  --title-gradient: linear-gradient(45deg, #0ea5e9, #6366f1);
  --ripple-color: rgba(0, 0, 0, 0.1);
+  --list-hover-bg: rgba(255, 255, 255, 0.5);
+  --header-bg: rgba(255, 255, 255, 0.6);
 }

 body {
@@ -111,35 +117,38 @@ body {

@media (min-width: 768px) {
  body {
-    height: 100vh;
-    overflow: hidden;
+    min-height: 100vh;
+    overflow: auto;
  }

  #app {
-    height: 100vh;
-    overflow: hidden;
+    min-height: 100vh;
+    overflow: auto;
  }
 }

+/* Removed global front camera mirror to restore stability */
+
 /* --- Shared styles for all tools (moved from tools.css) --- */

 .tool-container {
  display: flex;
  justify-content: center;
  width: 100%;
-  max-width: 800px;
+  max-width: 100%;
  margin: 0 auto;
  height: 100%;
-  padding: 1rem;
+  padding: 0.5rem;
 }

 .tool-panel {
  width: 100%;
-  padding: 2rem;
+  padding: 1rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
+  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: var(--glass-bg);
@@ -170,7 +179,7 @@ body {

 .tool-title {
  margin: 0;
-  text-align: center;
+  text-align: left;
  font-size: 1.5rem;
  font-weight: 600;
  background: var(--title-gradient);
@@ -181,40 +190,45 @@ body {
  filter: drop-shadow(0 0 10px var(--title-glow));
 }

-:root[data-theme="light"] .tool-title {
-  /* background: none !important;
-  -webkit-background-clip: unset !important;
-  background-clip: unset !important;
-  color: #000000 !important;
-  -webkit-text-fill-color: #000000 !important;
-  filter: none !important; */
-}

-.tool-textarea {
+
+.tool-textarea,
+.select-input {
  width: 100%;
-  height: 100%;
-  padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.2) !important;
+  padding: 0.75rem 1rem;
+  background-color: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
-  border-radius: 12px;
-  color: #ffffff !important; /* Explicit white color for dark mode */
-  font-family: monospace;
-  font-size: 1rem;
-  line-height: 1.6;
-  resize: none;
+  border-radius: 8px;
+  color: var(--text-color);
+  font-family: inherit;
+  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
 }

-:root[data-theme="light"] .tool-textarea {
-  color: #000000 !important;
-  background-color: rgba(255, 255, 255, 0.5) !important;
+.tool-textarea {
+  font-family: monospace;
+  resize: none;
+  height: 100%;
 }

-.tool-textarea:focus {
+.select-input {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+  padding-right: 2.5rem;
+  height: 40px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.tool-textarea:focus,
+.select-input:focus {
  outline: none;
-  border-color: #00f2fe !important; /* Force cyan accent */
-  box-shadow: 0 0 0 1px #00f2fe !important;
+  border-color: var(--primary-accent) !important;
+  box-shadow: 0 0 0 1px var(--primary-accent) !important;
 }

 .result-area {
@@ -239,13 +253,24 @@ body {
  box-shadow: var(--glass-shadow);
 }

+@media (max-width: 640px) {
+  .glass-panel:not(.modal-content) {
+    background: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border: none;
+    box-shadow: none;
+  }
+}
+
 .btn-neon {
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  color: var(--button-text);
-  padding: 8px 16px;
+  padding: 0 1.25rem;
+  height: 40px;
  border-radius: 8px;
-  font-weight: 600;
+  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
@@ -253,7 +278,8 @@ body {
  align-items: center;
  justify-content: center;
  gap: 8px;
-  outline: none; /* Remove focus outline */
+  outline: none;
+  /* Remove focus outline */
 }

 /* Global button styles */
@@ -279,6 +305,22 @@ button:focus {
  box-shadow: var(--button-active-shadow);
 }

+.btn-neon.danger {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: rgba(239, 68, 68, 0.6);
+  color: #fee2e2;
+}
+
+.btn-neon.danger:hover {
+  background: rgba(239, 68, 68, 0.3);
+  border-color: rgba(239, 68, 68, 0.85);
+  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2);
+}
+
+:root[data-theme="light"] .btn-neon.danger {
+  color: #7f1d1d;
+}
+
 .icon-only {
  padding: 8px;
  border-radius: 50%;
@@ -307,3 +349,296 @@ span.ripple {
    opacity: 0;
  }
 }
+
+/* --- Global Input/Select Focus Styles --- */
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+  outline: none;
+}
+
+input:focus,
+select:focus,
+textarea:focus,
+.number-control:focus-within {
+  border-color: var(--primary-accent) !important;
+  box-shadow: 0 0 0 1px var(--primary-accent) !important;
+}
+
+/* --- Global Checkbox Styles --- */
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+  color: var(--text-secondary);
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color 0.2s;
+}
+
+.checkbox-label:hover {
+  color: var(--text-color);
+}
+
+.checkbox-label input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  background-color: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.checkbox-label:hover .checkmark {
+  border-color: var(--toggle-hover-border);
+}
+
+.checkbox-label input:checked~.checkmark {
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
+  box-shadow: 0 0 10px var(--primary-accent);
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.checkbox-label input:checked~.checkmark:after {
+  display: block;
+}
+
+.checkbox-label .checkmark:after {
+  left: 6px;
+  top: 2px;
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+:root[data-theme="light"] .checkmark:after {
+  border-color: white;
+  /* Keep checkmark white even in light mode if background is primary-accent */
+}
+
+/* --- Global Header/Action Patterns --- */
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+  min-height: 40px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+/* --- Global Icon Button Styles --- */
+.icon-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 8px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-btn:hover {
+  color: var(--text-color);
+  background: var(--button-hover-bg);
+}
+
+.icon-btn.delete-btn:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+:root[data-theme="light"] .icon-btn.delete-btn:hover {
+  color: #dc2626;
+  background: rgba(220, 38, 38, 0.05);
+}
+
+/* --- Component Specific Theme Overrides (Consolidated) --- */
+:root[data-theme="light"] .settings-btn {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+:root[data-theme="light"] .savings {
+  color: #16a34a;
+  font-weight: 500;
+}
+
+:root[data-theme="light"] .modal-overlay {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+:root[data-theme="light"] .add-rule-form,
+:root[data-theme="light"] .rule-item {
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+/* --- Global Number Control Styles --- */
+.number-control {
+  display: flex;
+  align-items: stretch;
+  background: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  border-radius: 8px;
+  overflow: hidden;
+  height: 40px;
+}
+
+.control-btn {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  font-size: 0.9rem;
+  min-width: 40px;
+  padding: 0 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+}
+
+.control-btn:hover {
+  background: var(--button-hover-bg);
+  color: var(--primary-accent);
+}
+
+.number-input {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  flex: 1;
+  min-width: 60px;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 400;
+  appearance: textfield;
+}
+
+.number-input::-webkit-outer-spin-button,
+.number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* --- Global List/History Styles --- */
+.results-section,
+.history-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+}
+
+.history-header,
+.results-header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.history-header h3,
+.results-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: var(--text-strong);
+}
+
+.history-list,
+.codes-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.history-item,
+.code-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  transition: background 0.2s;
+}
+
+.history-item:last-child,
+.code-item:last-child {
+  border-bottom: none;
+}
+
+.history-item:hover,
+.code-item:hover {
+  background: var(--list-hover-bg);
+}
+
+.item-info,
+.code-content {
+  flex: 1;
+  overflow: hidden;
+  padding-right: 1rem;
+}
+
+.item-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #4ade80;
+  box-shadow: 0 0 8px #4ade80;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
--- a/src/styles/tools.css
+++ b/src/styles/tools.css
@@ -1,107 +0,0 @@
-/* Shared styles for all tools */
-
-.tool-container {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-  height: 100%;
-  padding: 1rem;
-}
-
-.tool-panel {
-  width: 100%;
-  padding: 2rem;
-  border-radius: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  max-height: 100%;
-  overflow-y: auto;
-  background: var(--glass-bg);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-}
-
-/* Custom scrollbar for tool panel */
-.tool-panel::-webkit-scrollbar {
-  width: 8px;
-}
-
-.tool-panel::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-}
-
-.tool-panel::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-}
-
-.tool-panel::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.tool-title {
-  margin: 0;
-  text-align: center;
-  font-size: 1.5rem;
-  font-weight: 600;
-  background: var(--title-gradient);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  -webkit-text-fill-color: transparent;
-  filter: drop-shadow(0 0 10px var(--title-glow));
-}
-
-:root[data-theme="light"] .tool-title {
-  background: none;
-  -webkit-background-clip: unset;
-  background-clip: unset;
-  color: #000000;
-  -webkit-text-fill-color: #000000;
-  filter: none;
-}
-
-.tool-textarea {
-  width: 100%;
-  height: 100%;
-  padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.2);
-  border: 1px solid var(--toggle-border);
-  border-radius: 12px;
-  color: #ffffff; /* Explicit white color for dark mode */
-  font-family: monospace;
-  font-size: 1rem;
-  line-height: 1.6;
-  resize: none;
-  transition: all 0.3s ease;
-  box-sizing: border-box;
-}
-
-:root[data-theme="light"] .tool-textarea {
-  color: #000000;
-}
-
-.tool-textarea:focus {
-  outline: none;
-  border-color: #00f2fe; /* Force cyan accent */
-  box-shadow: 0 0 0 1px #00f2fe;
-}
-
-.result-area {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 200px;
-}
-
-.result-area label {
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
--- a/vite.config.js
+++ b/vite.config.js
@@ -43,5 +43,11 @@ export default defineConfig({
  ],
  define: {
    '__APP_VERSION__': JSON.stringify(packageJson.version)
+  },
+  server: {
+    host: true,
+    allowedHosts: [
+      '.trycloudflare.com'
+    ]
  }
 })
Author	SHA1	Message	Date
Grzegorz Kucmierz	6f95dce55a	0.6.18 All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-03-03 13:40:20 +00:00
Grzegorz Kucmierz	c5293ca9fe	style: standardize UI across tools, optimize QR layout, and configure Husky/ESLint	2026-03-03 13:39:56 +00:00
Grzegorz Kucmierz	b1cc8ab5a1	style: unify UI elements and improve light theme visibility	2026-03-03 12:33:06 +00:00
Grzegorz Kucmierz	dff8a2a0ab	refactor: extract logic from QrScanner and UrlCleaner to composables	2026-03-03 11:19:57 +00:00
Grzegorz Kucmierz	ee387d9637	feat: add extension packing script and update build script All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-03-03 11:03:43 +00:00
Grzegorz Kucmierz	f2203e896e	chore: bump version to 0.6.16 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-03-03 10:03:44 +00:00
Grzegorz Kucmierz	cb8d3d01ec	fix: update extension link to Chrome Web Store	2026-03-03 10:03:41 +00:00
Grzegorz Kucmierz	5b31171964	0.6.15 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-03-03 00:02:34 +00:00
Grzegorz Kucmierz	e98761a18e	feat: make header title a link to home page	2026-03-03 00:02:17 +00:00
Grzegorz Kucmierz	bc8168e724	0.6.14 All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-03-02 23:59:04 +00:00
Grzegorz Kucmierz	dcde3b0799	feat: add ESC key support to close all modals and fullscreen modes	2026-03-02 23:58:50 +00:00
Grzegorz Kucmierz	60fc774586	0.6.13 All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-03-02 23:37:12 +00:00
Grzegorz Kucmierz	d65c0d0357	docs: replace problematic emoji in README.md with safer alternative	2026-03-02 23:36:57 +00:00
Grzegorz Kucmierz	02736ecc70	0.6.12 All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-03-02 23:32:21 +00:00
Grzegorz Kucmierz	7b1d19ca7a	docs: fix corrupted emoji in README.md	2026-03-02 23:32:12 +00:00
Grzegorz Kucmierz	4846d0e61c	0.6.11 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-03-02 23:26:45 +00:00
Grzegorz Kucmierz	3155e12b84	feat: display README.md on home page using marked	2026-03-02 23:26:36 +00:00
Grzegorz Kucmierz	b8bbe84aa9	docs: add descriptions for all new tools (QR Gen, QR Scanner, URL Cleaner) to README	2026-03-02 23:24:03 +00:00
Grzegorz Kucmierz	74984caf9e	0.6.10 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-28 18:07:22 +00:00
Grzegorz Kucmierz	c8b799b078	fix: mirror background canvas for front camera in fullscreen mode	2026-02-28 18:07:10 +00:00
Grzegorz Kucmierz	f3a4c1af05	0.6.9 All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-02-28 18:05:14 +00:00
Grzegorz Kucmierz	616f615d7c	fix: improve front camera detection on macOS by checking video track label	2026-02-28 18:04:28 +00:00
Grzegorz Kucmierz	4d572b55ca	0.6.8 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-28 17:51:40 +00:00
Grzegorz Kucmierz	9822cab93e	feat: restore QR code detection overlay in custom QrScanner	2026-02-28 17:50:29 +00:00
Grzegorz Kucmierz	9409bd3e21	0.6.7 All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-02-28 17:46:21 +00:00
Grzegorz Kucmierz	346ded460a	chore: remove wasm file from repo and add to gitignore	2026-02-28 17:45:21 +00:00
Grzegorz Kucmierz	170539a62f	0.6.6 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-28 17:41:06 +00:00
Grzegorz Kucmierz	cfc1785863	chore: cleanup unused code in QrScanner and remove vue-qrcode-reader dependency	2026-02-28 17:40:42 +00:00
Grzegorz Kucmierz	712b1238a5	0.6.5 All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-02-28 17:34:35 +00:00
Grzegorz Kucmierz	3732d365dd	refactor: replace vue-qrcode-reader with custom native QR scanner using local BarcodeDetector polyfill	2026-02-28 17:31:04 +00:00
Grzegorz Kucmierz	34fd8bb2b3	0.6.4 All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-02-28 17:21:46 +00:00
Grzegorz Kucmierz	90dc663393	fix: use local zxing-wasm file to resolve CSP issues in QrScanner	2026-02-28 17:21:29 +00:00
Grzegorz Kucmierz	1c4bdeff0e	0.6.3 All checks were successful Deploy to Production / deploy (push) Successful in 15s Details	2026-02-28 17:10:17 +00:00
Grzegorz Kucmierz	35c5ff4c51	fix: ensure useFillHeight recalculates when element appears (v-if)	2026-02-28 17:09:42 +00:00
Grzegorz Kucmierz	c8f9dfb37e	0.6.2 All checks were successful Deploy to Production / deploy (push) Successful in 15s Details	2026-02-28 04:19:41 +00:00
Grzegorz Kucmierz	70d7c8873e	refactor: centralize UI config and inject CSS variables dynamically	2026-02-28 04:18:53 +00:00
Grzegorz Kucmierz	d5d3d37804	refactor: simplify useLocalStorage (remove APP_PREFIX) and finalize QR Code tool	2026-02-28 04:05:07 +00:00
Grzegorz Kucmierz	2a1897f68d	feat: enhance QR generator with responsive layout, custom focus styles, and download options	2026-02-28 03:50:47 +00:00
Grzegorz Kucmierz	b2e8f23d60	0.6.1 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-27 19:43:31 +00:00
Grzegorz Kucmierz	d2ea9e3fc7	chore: UI spacing tweaks, desktop scrolling fix, QR title alignment	2026-02-27 19:43:12 +00:00
Grzegorz Kucmierz	1765742574	0.6.0 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-27 19:03:09 +00:00
Grzegorz Kucmierz	5b1a50f148	chore: prepare release; reintroduce front camera CSS mirror, stabilize QR Scanner	2026-02-27 19:02:49 +00:00
Grzegorz Kucmierz	613604f3c4	feat(qr-scanner): remove frame, add shape detection overlay, improve fullscreen desktop layout	2026-02-27 17:52:36 +00:00
Grzegorz Kucmierz	a699b432d7	0.5.0 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-27 17:00:41 +00:00
Grzegorz Kucmierz	839a98a658	feat: add QR Scanner tool with history, export, persistence and fullscreen support	2026-02-27 17:00:11 +00:00
Grzegorz Kucmierz	fd23860bcf	0.4.6 All checks were successful Deploy to Production / deploy (push) Successful in 12s Details	2026-02-27 09:16:51 +00:00
Grzegorz Kucmierz	74c0251535	feat: improve url cleaner modal ui (light mode) and enable rule editing	2026-02-27 09:16:37 +00:00
Grzegorz Kucmierz	06b2815dd9	0.4.5 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-27 08:51:31 +00:00
Grzegorz Kucmierz	1346de684c	feat: url cleaner multiline support and ui tweaks	2026-02-27 08:51:05 +00:00
Grzegorz Kucmierz	cfc9ac73b2	0.4.4 All checks were successful Deploy to Production / deploy (push) Successful in 12s Details	2026-02-27 07:43:26 +00:00
Grzegorz Kucmierz	e095c0190b	style: restore danger styling for stop sniffing button	2026-02-27 07:43:12 +00:00
Grzegorz Kucmierz	45342d456a	0.4.3 All checks were successful Deploy to Production / deploy (push) Successful in 12s Details	2026-02-27 07:09:38 +00:00
Grzegorz Kucmierz	3ea7f63b83	style: remove panel borders and backgrounds on mobile for cleaner look	2026-02-27 07:09:27 +00:00
Grzegorz Kucmierz	8b5705c12f	0.4.2 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-27 07:03:14 +00:00
Grzegorz Kucmierz	a3bc069029	fix: responsive layout for url cleaner and sniffer icon alignment	2026-02-27 07:02:58 +00:00
Grzegorz Kucmierz	a5fc242a97	0.4.1 All checks were successful Deploy to Production / deploy (push) Successful in 12s Details	2026-02-27 06:49:01 +00:00
Grzegorz Kucmierz	a0346a64f0	feat: url cleaner exceptions keep-all and defaults reset	2026-02-27 06:48:39 +00:00
Grzegorz Kucmierz	4c2d423715	0.4.0 All checks were successful Deploy to Production / deploy (push) Successful in 12s Details	2026-02-27 06:14:51 +00:00
Grzegorz Kucmierz	204aeda00c	feat: implement url cleaner tool, local storage persistence and extension integration	2026-02-27 06:14:43 +00:00
Grzegorz Kucmierz	7d989be27f	feat: url cleaner tool and extension update	2026-02-27 06:11:12 +00:00