Refactor ServerInfo and add icon and tab fallbacks

components/Error.tsx

@@ -7,13 +7,6 @@ export default function Error({ error }: { error: string }) {
         <ExclamationTriangleIcon className="w-6 h-6 text-red-600 dark:text-red-400" />
       </div>
       <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-1">Unable to Load</h3>
-      <p className="text-xs text-gray-500 dark:text-gray-400 mb-6 max-w-50 leading-relaxed">{error}</p>
-      <button
-        onClick={() => window.location.reload()}
-        className="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 text-xs font-medium text-gray-700 dark:text-gray-300 rounded-md transition-colors shadow-sm"
-      >
-        Try Again
-      </button>
     </div>
   );
 }

components/ServerInfo.tsx

@@ -4,13 +4,13 @@ import {
   MapPinIcon,
   GlobeAltIcon,
   BuildingOfficeIcon,
-  CpuChipIcon,
   ClipboardDocumentIcon,
   CheckIcon,
-  ArrowTopRightOnSquareIcon
+  CpuChipIcon
 } from '@heroicons/react/24/outline';
 import type { HostInfo } from '@/utils/types';
 import { browser } from 'wxt/browser';
+import Error from './Error';
 
 const CopyButton = ({ text }: { text: string }) => {
   const [copied, setCopied] = useState(false);
@@ -26,7 +26,7 @@ const CopyButton = ({ text }: { text: string }) => {
   return (
     <button
       onClick={handleCopy}
-      className="ml-2 p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-800 transition-all"
+      className="ml-2 p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-800 transition-all opacity-0 group-hover:opacity-100 focus:opacity-100 cursor-pointer"
       title="Copy to clipboard"
     >
       {copied ? <CheckIcon className="w-3.5 h-3.5 text-green-500" /> : <ClipboardDocumentIcon className="w-3.5 h-3.5" />}
@@ -39,19 +39,21 @@ const InfoRow = ({
   label,
   value,
   href,
-  canCopy
+  canCopy,
+  iconColor = "text-gray-400 dark:text-gray-500"
 }: {
   icon: any,
   label: string,
   value: string | null,
   href?: string,
-  canCopy?: boolean
+  canCopy?: boolean,
+  iconColor?: string
 }) => {
   if (!value) return null;
 
   return (
-    <div className="flex items-start py-2.5 border-b border-gray-100 dark:border-gray-800 last:border-0">
-      <div className="mt-0.5 mr-3 text-gray-400 dark:text-gray-500">
+    <div className="group flex items-start py-3 border-b border-gray-100 dark:border-gray-800 last:border-0">
+      <div className={`mt-0.5 mr-3 ${iconColor}`}>
         <Icon className="w-4 h-4" />
       </div>
       <div className="flex-1 min-w-0">
@@ -62,13 +64,12 @@ const InfoRow = ({
               href={href}
               target="_blank"
               rel="noreferrer"
-              className="text-sm text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 truncate transition-colors flex items-center gap-1"
+              className="text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 truncate transition-colors flex items-center gap-1.5"
             >
               <span className="truncate">{value}</span>
-              <ArrowTopRightOnSquareIcon className="w-3 h-3 opacity-50" />
             </a>
           ) : (
-            <span className="text-sm text-gray-900 dark:text-gray-100 truncate select-all">{value}</span>
+            <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate select-all">{value}</span>
           )}
           {canCopy && <CopyButton text={value} />}
         </div>
@@ -80,14 +81,33 @@ const InfoRow = ({
 export default function ServerInfo({ data }: { data: HostInfo }) {
   const { network, location, domain, isBrowserResource } = data;
 
+  // URL generation for flags
+  const getFlagUrl = (code?: string | null) => {
+    if (!code) return '';
+    try {
+      const path = `/${code.toLowerCase()}.webp`;
+      return browser.runtime.getURL(path as any);
+    } catch {
+      return '';
+    }
+  };
+
   // Header Component
-  const Header = ({ title, subtitle, icon: Icon }: { title: string, subtitle?: string, icon?: any }) => (
-    <div className="px-5 py-4 bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-800 flex items-center gap-3">
-      {Icon && <Icon className="w-6 h-6 text-gray-500" />}
-      <div>
-        <h2 className="text-base font-semibold text-gray-900 dark:text-white leading-tight">{title}</h2>
-        {subtitle && <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{subtitle}</p>}
+  const Header = ({ title, flagCode }: { title: string, flagCode?: string | null }) => (
+    <div className="px-5 py-4 bg-gray-50/50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
+      <div className="min-w-0 pr-3">
+        <h1 className="text-base font-bold text-gray-900 dark:text-white truncate" title={title}>
+          {title}
+        </h1>
       </div>
+      {flagCode && (
+        <img
+          src={getFlagUrl(flagCode)}
+          alt={flagCode}
+          className="w-8 h-auto rounded shadow-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"
+          onError={(e) => (e.currentTarget.style.display = 'none')}
+        />
+      )}
     </div>
   );
 
@@ -97,46 +117,55 @@ export default function ServerInfo({ data }: { data: HostInfo }) {
       <div className="w-80 bg-white dark:bg-gray-950 font-sans">
         <Header
           title="System Resource"
-          subtitle="Local browser page"
-          icon={CpuChipIcon}
+          flagCode="unknown"
+        />
+        <div className="p-5">
+          <InfoRow
+            icon={CpuChipIcon}
+            label="Type"
+            value="Local Browser Page"
+            iconColor="text-orange-500"
+          />
+          <InfoRow
+            icon={GlobeAltIcon}
+            label="URL"
+            value={data.url}
+            iconColor="text-gray-400"
           />
-        <div className="p-6 flex flex-col items-center justify-center text-center">
-          <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-3">
-            <CpuChipIcon className="w-6 h-6 text-gray-400" />
         </div>
-          <p className="text-sm text-gray-500">No network information available for this page.</p>
+        <div className="px-5 pb-5 text-xs text-gray-400 text-center">
+          This page is generated locally by your browser.
         </div>
       </div>
     );
   }
 
-  if (!network) return null;
-
-  const flagUrl = location?.countryCode
-    ? `/${location.countryCode.toLowerCase()}.webp`
-    : '';
+  // Fallback if network data is missing
+  if (!network) {
+    return <Error error="Host information unavailable." />;
+  }
 
   // Local Network View
   if (network.isLocal) {
     return (
       <div className="w-80 bg-white dark:bg-gray-950 font-sans">
         <Header
-          title="Private Network"
-          subtitle="Local or internal resource"
-          icon={ServerIcon}
+          title={domain}
+          flagCode="unknown"
         />
         <div className="p-5">
+          <InfoRow
+            icon={CpuChipIcon}
+            label="Type"
+            value="Local / Private Network"
+            iconColor="text-orange-500"
+          />
           <InfoRow
             icon={ServerIcon}
             label="IP Address"
             value={network.ip}
             canCopy
-          />
-          <InfoRow
-            icon={GlobeAltIcon}
-            label="Hostname"
-            value={network.hostname || 'Localhost'}
-            canCopy
+            iconColor="text-blue-500"
           />
         </div>
       </div>
@@ -146,64 +175,50 @@ export default function ServerInfo({ data }: { data: HostInfo }) {
   // Public Internet View
   return (
     <div className="w-80 bg-white dark:bg-gray-950 font-sans text-gray-900 dark:text-gray-100">
-      <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between bg-gray-50 dark:bg-gray-900/50">
-        <div className="min-w-0 pr-2">
-          <h1 className="text-base font-bold text-gray-900 dark:text-white truncate" title={domain}>
-            {domain}
-          </h1>
-          <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 flex items-center gap-1">
-            <span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
-            Publicly Accessible
-          </p>
-        </div>
-        {location?.countryCode && (
-          <img
-            src={flagUrl}
-            alt={location.countryCode}
-            className="w-8 h-auto rounded shadow-sm border border-gray-200 dark:border-gray-700"
-            onError={(e) => (e.currentTarget.style.display = 'none')}
+      <Header
+        title="Host Information"
+        flagCode={location?.countryCode || 'unknown'}
       />
-        )}
-      </div>
 
-      <div className="p-5 space-y-1">
+      <div className="p-5 space-y-0.5">
         <InfoRow
           icon={ServerIcon}
           label="IP Address"
           value={network.ip}
           href={`https://ip.albert.lol/${network.ip}`}
           canCopy
+          iconColor="text-blue-500"
         />
-
         <InfoRow
           icon={GlobeAltIcon}
           label="Hostname"
           value={network.hostname}
           canCopy
+          iconColor="text-indigo-500"
         />
-
         <InfoRow
           icon={MapPinIcon}
           label="Location"
-          value={location?.countryName || 'Unknown'}
+          value={location?.countryName || 'Unknown Location'}
+          iconColor="text-emerald-500"
         />
-
         <InfoRow
           icon={BuildingOfficeIcon}
           label="Organization / ASN"
           value={network.org}
           href={network.asn ? `https://bgp.he.net/${network.asn}` : undefined}
+          iconColor="text-violet-500"
         />
       </div>
 
-      <div className="px-5 pb-5 pt-1">
+      <div className="px-5 pb-5 pt-2">
         <a
           href={`https://platform.censys.io/search?q=${network.hostname || domain}`}
           target="_blank"
           rel="noreferrer"
-          className="flex items-center justify-center w-full py-2 px-4 bg-gray-900 dark:bg-gray-100 hover:bg-gray-800 dark:hover:bg-gray-200 text-white dark:text-gray-900 rounded-md transition-colors text-xs font-medium shadow-sm"
+          className="flex items-center justify-center w-full py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-md transition-all text-xs font-medium shadow-sm hover:shadow cursor-pointer"
         >
-          <GlobeAltIcon className="w-3.5 h-3.5 mr-2" />
+          <GlobeAltIcon className="w-3.5 h-3.5 mr-2 text-gray-400" />
           Analyze on Censys
         </a>
       </div>

entrypoints/background.ts

@@ -4,7 +4,7 @@ import { StorageService } from '@/utils/storage';
 
 export default defineBackground({
   main() {
-    // Listen for Network Responses (Source of Truth for IPs)
+    // Listen for Network Responses
     browser.webRequest.onResponseStarted.addListener(
       async (details) => {
         if (details.tabId === -1 || details.type !== 'main_frame' || !details.ip) return;
@@ -27,7 +27,7 @@ export default defineBackground({
       }
     });
 
-    // 3. Cleanup
+    // Cleanup
     browser.tabs.onRemoved.addListener(async (tabId) => {
       await StorageService.remove(tabId);
     });

services/icon.ts

@@ -5,15 +5,9 @@ const ICON_CACHE = new Map<string, Record<string, ImageData>>();
 export const IconService = {
   async update(tabId: number, countryCode: string | null, isLocal: boolean) {
     try {
-      if (isLocal) {
-        const path = '/icon/128.png' as string;
-        await browser.action.setIcon({ tabId, path });
-        return;
-      }
+      const code = isLocal ? 'unknown' : (countryCode ? countryCode.toLowerCase() : 'unknown');
 
-      const code = countryCode ? countryCode.toLowerCase() : 'unknown';
       const imageData = await this.getIconData(code);
-
       await browser.action.setIcon({ tabId, imageData });
     } catch (e) {
       console.warn('Failed to update icon', e);
@@ -37,7 +31,6 @@ export const IconService = {
       ICON_CACHE.set(code, data);
       return data;
     } catch {
-      // Fallback to unknown if specific flag fails
       if (code !== 'unknown') return this.getIconData('unknown');
       throw new Error('Failed to load fallback icon');
     }
@@ -52,6 +45,7 @@ export const IconService = {
     const offsetX = (canvas.width - bitmap.width * ratio) / 2;
     const offsetY = (canvas.height - bitmap.height * ratio) / 2;
 
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height, offsetX, offsetY, bitmap.width * ratio, bitmap.height * ratio);
 
     const sizes = [16, 32, 48, 128];

services/tab.ts

@@ -32,7 +32,7 @@ export const Tab = {
       return;
     }
 
-    // Handle Local/Private IPs
+    // Handle Local/Private IPs (Bogons)
     if (IpUtils.isLocalOrBogon(ip)) {
       const localInfo: HostInfo = {
         ...initialState,
@@ -55,8 +55,30 @@ export const Tab = {
     // Fetch Public Data
     const geoData = await GeoService.resolve(ip);
 
+    // If Geo lookup fails (e.g. LAN domain with public IP, or API down),
+    // we still want to show the IP we captured.
     if (!geoData) {
-      await StorageService.set(tabId, { ...initialState, loading: false, error: 'Failed to fetch host info' });
+      const fallbackInfo: HostInfo = {
+        ...initialState,
+        loading: false,
+        network: {
+          ip,
+          hostname: null,
+          asn: null,
+          org: 'Unknown',
+          isLocal: false,
+          isBogon: false
+        },
+        location: {
+          countryCode: null,
+          countryName: 'Unknown Location',
+          city: null,
+          region: null,
+          timezone: null
+        }
+      };
+      await StorageService.set(tabId, fallbackInfo);
+      await IconService.update(tabId, 'unknown', false);
       return;
     }