From 747e298cb22e257c3c3334741f2747bf6819ce7a Mon Sep 17 00:00:00 2001
From: LC mac <leochan@hkjin.com>
Date: Thu, 12 Feb 2026 23:22:02 +0800
Subject: [PATCH] refine: Update network button labels and tooltips with honest
 security messaging

- Change button labels: 'Extra secure' / 'Normal' (better reflects defense-in-depth)
- Update tooltips to acknowledge CSP already blocks connections:
  - 'Extra secure: Added manual blocking layer (CSP already blocks connections)'
  - 'Normal: Relying on CSP to block connections'
- Update comment: Clarify button adds extra manual layer, not primary control
- More transparent about how security actually works (CSP does the real work)
---
 src/components/Header.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ed0e283..041249d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -93,20 +93,20 @@ const Header: React.FC<HeaderProps> = ({
 
           {/* Right: Action Buttons */}
           <div className="flex items-center gap-2">
-            {/* Network availability toggle - Click to disable/enable internet access for maximum security */}
+            {/* Defense-in-depth toggle: Add extra manual blocking layer on top of CSP */}
             <button
               onClick={onToggleNetwork}
               className={`flex items-center gap-1 px-2.5 py-1.5 text-xs rounded-lg font-medium transition-all whitespace-nowrap ${isNetworkBlocked
-                  ? 'bg-[#16213e] border border-[#ff006e] text-[#ff006e] hover:bg-[#ff006e20]'
-                  : 'bg-[#16213e] border border-[#39ff14] text-[#39ff14] hover:bg-[#39ff1420]'
+                ? 'bg-[#16213e] border border-[#ff006e] text-[#ff006e] hover:bg-[#ff006e20]'
+                : 'bg-[#16213e] border border-[#39ff14] text-[#39ff14] hover:bg-[#39ff1420]'
                 }`}
-              title={isNetworkBlocked 
-                ? 'Internet disabled - Maximum security (no data can leave your device)' 
-                : 'Internet enabled - Normal operation (browser CSP blocks most connections)'}
+              title={isNetworkBlocked
+                ? 'Extra secure: Added manual blocking layer (CSP already blocks connections)'
+                : 'Normal: Relying on CSP to block connections'}
             >
               <span className="text-sm">{isNetworkBlocked ? '🚫' : '🌐'}</span>
               <span className="hidden sm:inline text-[10px]">
-                {isNetworkBlocked ? 'Internet OFF' : 'Internet ON'}
+                {isNetworkBlocked ? 'Extra secure' : 'Normal'}
               </span>
             </button>
           </div>
@@ -116,8 +116,8 @@ const Header: React.FC<HeaderProps> = ({
         <div className="grid grid-cols-4 gap-2">
           <button
             className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'create'
-                ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-                : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
               }`}
             style={activeTab === 'create' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
             onClick={() => onRequestTabChange('create')}
@@ -127,8 +127,8 @@ const Header: React.FC<HeaderProps> = ({
 
           <button
             className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'backup'
-                ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-                : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
               }`}
             style={activeTab === 'backup' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
             onClick={() => onRequestTabChange('backup')}
@@ -138,8 +138,8 @@ const Header: React.FC<HeaderProps> = ({
 
           <button
             className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'restore'
-                ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-                : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
               }`}
             style={activeTab === 'restore' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
             onClick={() => onRequestTabChange('restore')}
@@ -149,8 +149,8 @@ const Header: React.FC<HeaderProps> = ({
 
           <button
             className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'seedblender'
-                ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-                : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
               }`}
             style={activeTab === 'seedblender' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
             onClick={() => onRequestTabChange('seedblender')}