script.js

(() => {
  'use strict';

  const $ = (selector) => document.querySelector(selector);
  const ua = navigator.userAgent;
  const samples = { cpu: [], memory: [] };
  const historyLimit = 36;
  let lastFrame = performance.now();
  let diagnosisCount = 0;
  let observedBattery;

  const browserLabel = () => {
    if (/Edg\//.test(ua)) return 'Microsoft Edge';
    if (/OPR\//.test(ua)) return 'Opera';
    if (/Chrome\//.test(ua) && !/Chromium/.test(ua)) return 'Google Chrome';
    if (/Firefox\//.test(ua)) return 'Mozilla Firefox';
    if (/Safari\//.test(ua) && !/Chrome\//.test(ua)) return 'Safari';
    return 'Web browser';
  };

  const platformLabel = () => {
    const platform = navigator.userAgentData?.platform || navigator.platform || '';
    if (/win/i.test(platform)) return 'Windows';
    if (/mac/i.test(platform)) return 'macOS';
    if (/linux/i.test(platform)) return 'Linux';
    if (/android/i.test(ua)) return 'Android';
    if (/iphone|ipad/i.test(ua)) return 'iOS';
    return platform || 'Unknown platform';
  };

  const formatBytes = (bytes) => {
    if (!Number.isFinite(bytes) || bytes < 0) return 'Unavailable';
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    let value = bytes;
    let unit = 0;
    while (value >= 1024 && unit < units.length - 1) {
      value /= 1024;
      unit += 1;
    }
    return `${value.toFixed(unit > 1 ? 1 : 0)} ${units[unit]}`;
  };

  const drawChart = (canvas, values, color) => {
    const rect = canvas.getBoundingClientRect();
    if (!rect.width || !rect.height) return;
    const ratio = window.devicePixelRatio || 1;
    canvas.width = Math.round(rect.width * ratio);
    canvas.height = Math.round(rect.height * ratio);
    const context = canvas.getContext('2d');
    context.scale(ratio, ratio);
    const width = rect.width;
    const height = rect.height;
    const points = values.length > 1 ? values : [0, ...values];
    const max = Math.max(100, ...points);
    const coordinates = points.map((value, index) => ({
      x: (index / (points.length - 1)) * width,
      y: height - 4 - (Math.min(value, max) / max) * (height - 9)
    }));

    context.strokeStyle = '#2a2b33';
    context.lineWidth = 1;
    context.setLineDash([3, 4]);
    context.beginPath();
    context.moveTo(0, height - 1);
    context.lineTo(width, height - 1);
    context.stroke();
    context.setLineDash([]);

    const gradient = context.createLinearGradient(0, 0, 0, height);
    gradient.addColorStop(0, `${color}38`);
    gradient.addColorStop(1, `${color}00`);
    context.beginPath();
    coordinates.forEach(({ x, y }, index) => index ? context.lineTo(x, y) : context.moveTo(x, y));
    context.lineTo(width, height);
    context.lineTo(0, height);
    context.closePath();
    context.fillStyle = gradient;
    context.fill();

    context.beginPath();
    coordinates.forEach(({ x, y }, index) => index ? context.lineTo(x, y) : context.moveTo(x, y));
    context.strokeStyle = color;
    context.lineWidth = 1.8;
    context.lineJoin = 'round';
    context.lineCap = 'round';
    context.stroke();
  };

  const record = (key, value) => {
    samples[key].push(value);
    if (samples[key].length > historyLimit) samples[key].shift();
  };

  const updateResponsiveness = () => {
    const now = performance.now();
    const interval = now - lastFrame;
    lastFrame = now;
    const delay = Math.max(0, interval - 1000);
    const score = Math.min(100, Math.round((delay / 500) * 100));
    record('cpu', score);
    $('#cpu-value').textContent = delay < 15 ? 'Smooth' : delay < 80 ? 'Fair' : 'Delayed';
    $('#cpu-foot').textContent = 'Tab responsiveness, not system CPU usage';
    drawChart($('#cpu-chart'), samples.cpu, '#a28bff');
  };

  const updateMemory = () => {
    const memory = performance.memory;
    if (!memory || !Number.isFinite(memory.usedJSHeapSize)) {
      $('#memory-value').textContent = 'N/A';
      $('#memory-foot').textContent = 'This browser does not expose JavaScript heap usage';
      drawChart($('#memory-chart'), samples.memory, '#71a7ff');
      return;
    }
    const used = memory.usedJSHeapSize;
    const limit = memory.jsHeapSizeLimit;
    const percent = limit ? Math.round((used / limit) * 100) : 0;
    record('memory', percent);
    $('#memory-value').textContent = formatBytes(used);
    $('#memory-foot').textContent = limit ? `${percent}% of this tab’s heap limit` : 'JavaScript heap estimate for this tab';
    drawChart($('#memory-chart'), samples.memory, '#71a7ff');
  };

  const updateStorage = async () => {
    if (!navigator.storage?.estimate) {
      $('#storage-value').textContent = 'N/A';
      $('#storage-foot').textContent = 'Browser storage estimates are not available';
      return null;
    }
    try {
      const estimate = await navigator.storage.estimate();
      const usage = estimate.usage;
      const quota = estimate.quota;
      if (!Number.isFinite(usage) || !Number.isFinite(quota) || quota <= 0) {
        $('#storage-value').textContent = 'N/A';
        $('#storage-foot').textContent = 'This browser did not return a storage estimate';
        return null;
      }
      const percent = Math.min(100, Math.round((usage / quota) * 100));
      $('#storage-value').textContent = formatBytes(usage);
      $('#storage-foot').textContent = `${percent}% of this site’s estimated browser quota`;
      $('#storage-bar').style.width = `${percent}%`;
      $('#storage-bar').style.background = percent > 85 ? 'linear-gradient(90deg, #d99949, #f1bc6c)' : '';
      return { usage, quota, percent };
    } catch (error) {
      $('#storage-value').textContent = 'Unavailable';
      $('#storage-foot').textContent = 'Browser blocked access to its storage estimate';
      return null;
    }
  };

  const updateConnection = () => {
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    $('#network-value').textContent = navigator.onLine ? 'Online' : 'Offline';
    const cutoff = performance.now() - 60000;
    const recentResources = performance.getEntriesByType('resource').filter((entry) => entry.responseEnd >= cutoff);
    const measurableBytes = recentResources.reduce((total, entry) => (
      total + (Number.isFinite(entry.transferSize) ? entry.transferSize : 0)
    ), 0);
    const traffic = recentResources.length
      ? measurableBytes
        ? `${formatBytes(measurableBytes)} page resources / 60s`
        : `${recentResources.length} recent requests · sizes restricted`
      : 'No recent page resources';
    if (connection) {
      const type = connection.effectiveType ? connection.effectiveType.toUpperCase() : 'Connected';
      const downlink = Number.isFinite(connection.downlink) ? ` · ~${connection.downlink} Mbps` : '';
      $('#network-detail').textContent = `${traffic} · ${type}${downlink}${connection.saveData ? ' · data saver' : ''}`;
    } else {
      $('#network-detail').textContent = `${traffic} · connection type not shared`;
    }
  };

  const updateBattery = async () => {
    if (!navigator.getBattery) {
      $('#battery-value').textContent = 'N/A';
      $('#battery-detail').textContent = 'Battery details aren’t available in this browser';
      $('#access-battery').textContent = 'Limited';
      return null;
    }
    try {
      const battery = await navigator.getBattery();
      const render = () => {
        const percent = Math.round(battery.level * 100);
        const charging = battery.charging ? ' · charging' : '';
        $('#battery-value').textContent = `${percent}%${charging}`;
        $('#battery-detail').textContent = battery.charging ? 'Power connected' : 'On battery power';
      };
      render();
      if (observedBattery !== battery) {
        battery.addEventListener('levelchange', render);
        battery.addEventListener('chargingchange', render);
        observedBattery = battery;
      }
      $('#access-battery').textContent = 'Available';
      return battery;
    } catch (error) {
      $('#battery-value').textContent = 'Unavailable';
      $('#battery-detail').textContent = 'Browser denied access to battery status';
      $('#access-battery').textContent = 'Limited';
      return null;
    }
  };

  const signal = (severity, title, description) => ({ severity, title, description });

  const renderFindings = (items) => {
    const container = $('#finding-list');
    container.replaceChildren();
    if (!items.length) {
      container.innerHTML = '<div class="empty-state">No browser-visible issues found. System-wide checks are restricted.</div>';
      return;
    }
    items.forEach((item, index) => {
      const row = document.createElement('div');
      row.className = 'finding-item';
      row.style.animationDelay = `${index * 55}ms`;
      const icon = document.createElement('span');
      icon.className = `finding-severity ${item.severity}`;
      icon.textContent = item.severity === 'good' ? '✓' : item.severity === 'warning' ? '!' : 'i';
      const copy = document.createElement('div');
      const title = document.createElement('strong');
      title.textContent = item.title;
      const description = document.createElement('p');
      description.textContent = item.description;
      copy.append(title, description);
      row.append(icon, copy);
      container.append(row);
    });
    $('#finding-count').textContent = `${items.length} ${items.length === 1 ? 'item' : 'items'}`;
  };

  const renderRecommendations = (items) => {
    const container = $('#recommendation-list');
    container.replaceChildren();
    items.slice(0, 3).forEach((item, index) => {
      const row = document.createElement('div');
      row.className = 'recommendation-item';
      const number = document.createElement('span');
      number.className = 'recommendation-number';
      number.textContent = String(index + 1).padStart(2, '0');
      const copy = document.createElement('div');
      const title = document.createElement('strong');
      title.textContent = item.title;
      const description = document.createElement('p');
      description.textContent = item.description;
      copy.append(title, description);
      const arrow = document.createElement('span');
      arrow.className = 'recommendation-arrow';
      arrow.textContent = '↗';
      row.append(number, copy, arrow);
      container.append(row);
    });
  };

  const setHealth = (score, title, description, label, color) => {
    $('#health-score').textContent = score;
    $('#health-title').textContent = title;
    $('#health-description').textContent = description;
    $('#health-label').textContent = label;
    const ring = $('#health-ring');
    ring.style.strokeDashoffset = String(371 - (371 * score / 100));
    ring.style.stroke = color;
  };

  const diagnose = async () => {
    const button = $('#diagnose-button');
    button.disabled = true;
    button.classList.add('is-scanning');
    button.querySelector('.button-label').textContent = 'Checking your browser…';
    $('#device-status').textContent = 'Diagnosing';
    await new Promise((resolve) => setTimeout(resolve, 550));

    const [storage, battery] = await Promise.all([updateStorage(), updateBattery()]);
    updateConnection();
    updateMemory();
    const findings = [];
    const recommendations = [];
    let score = 100;

    if (!navigator.onLine) {
      findings.push(signal('warning', 'This device appears offline', 'Your browser reports no network connection. Check Wi-Fi or your network cable.'));
      recommendations.push({ title: 'Reconnect to your network', description: 'Check Wi-Fi or ethernet and retry any pages that are not loading.' });
      score -= 18;
    } else {
      findings.push(signal('good', 'Network connection is available', 'Your browser can reach the network. Other apps’ traffic and actual throughput are not visible here.'));
    }

    if (storage?.percent > 85) {
      findings.push(signal('warning', 'Browser storage is getting full', `This site is using about ${storage.percent}% of its estimated browser storage quota. This is not your device’s disk usage.`));
      recommendations.push({ title: 'Review this site’s stored data', description: 'Browser settings let you inspect and clear saved site data if it is no longer needed.' });
      score -= 12;
    } else if (storage) {
      findings.push(signal('good', 'Browser storage has room', `This site is using about ${storage.percent}% of its estimated browser quota; whole-disk free space is not available to web pages.`));
    } else {
      findings.push(signal('info', 'Storage estimate unavailable', 'The browser did not provide site storage usage. System disk capacity and free space are restricted.'));
      score -= 3;
    }

    if (performance.memory) {
      const ratio = performance.memory.usedJSHeapSize / performance.memory.jsHeapSizeLimit;
      if (ratio > 0.75) {
        findings.push(signal('warning', 'This tab is using a large JavaScript heap', 'A complex page can use more memory. This is only this tab’s JavaScript heap, not total system RAM.'));
        recommendations.push({ title: 'Refresh memory-heavy pages', description: 'Save your work, then reload tabs that have been open for a long time.' });
        score -= 10;
      } else {
        findings.push(signal('good', 'This tab’s JavaScript heap looks comfortable', 'This browser-specific estimate covers this tab only; total RAM use is hidden by browser security.'));
      }
    } else {
      findings.push(signal('info', 'System RAM cannot be measured here', 'This browser does not expose JavaScript heap metrics, and websites cannot read total RAM usage.'));
      score -= 3;
    }

    findings.push(signal('info', 'System CPU and running processes are private', 'Web pages cannot inspect processor load, background processes, startup apps, other tabs, or extensions.'));
    recommendations.push({ title: 'Use your system’s task manager', description: `Open ${platformLabel() === 'Windows' ? 'Task Manager' : platformLabel() === 'macOS' ? 'Activity Monitor' : 'your system monitor'} to see CPU, memory, processes, and startup apps.` });

    score = Math.max(0, score);
    if (score >= 85) {
      setHealth(score, 'Looking good so far', 'The signals available to this browser look healthy. System-wide usage remains private.', 'Healthy', '#6ed9a4');
    } else if (score >= 70) {
      setHealth(score, 'A couple of things to check', 'We found a browser-visible signal worth a closer look. This is not a full system scan.', 'Worth a look', '#f3bc6c');
    } else {
      setHealth(score, 'Some attention may help', 'One or more browser-visible signals may be affecting this session. Check the details below.', 'Needs attention', '#fb7d87');
    }

    renderFindings(findings);
    renderRecommendations(recommendations);
    $('#device-status').textContent = 'Monitoring';
    $('#last-check').textContent = new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
    $('#device-description').textContent = `Browser-only diagnostics · ${platformLabel()} · private to this device`;
    diagnosisCount += 1;
    button.disabled = false;
    button.classList.remove('is-scanning');
    button.querySelector('.button-label').textContent = diagnosisCount > 1 ? 'Run diagnosis again' : 'Diagnose my computer';
  };

  const init = () => {
    $('#browser-name').textContent = browserLabel();
    $('#platform-name').textContent = platformLabel();
    $('#device-name').textContent = `${platformLabel()} device`;
    $('#device-description').textContent = `Browser-only diagnostics · ${platformLabel()} · private to this device`;
    $('#top-date').textContent = new Date().toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });
    updateConnection();
    updateBattery();
    updateMemory();
    updateResponsiveness();
    window.setInterval(updateResponsiveness, 1000);
    window.setInterval(updateMemory, 5000);
    window.setInterval(updateConnection, 5000);
    (navigator.connection || navigator.mozConnection || navigator.webkitConnection)?.addEventListener('change', updateConnection);
    window.addEventListener('resize', () => {
      drawChart($('#cpu-chart'), samples.cpu, '#a28bff');
      drawChart($('#memory-chart'), samples.memory, '#71a7ff');
    });
    window.addEventListener('online', updateConnection);
    window.addEventListener('offline', updateConnection);
    $('#diagnose-button').addEventListener('click', diagnose);
    document.querySelectorAll('.nav-item').forEach((link) => {
      link.addEventListener('click', () => {
        document.querySelector('.nav-item.active')?.classList.remove('active');
        link.classList.add('active');
      });
    });
  };

  init();
})();