@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/screens/network-viewer/connection-troubleshooter.js

@@ -1,63 +1,32 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectionTroubleshooter = ConnectionTroubleshooter;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+const network_viewer_ipc_1 = require("./network-viewer-ipc");
 const STATUS_ICON = {
-    pass: react_1.default.createElement("i", { className: "bi bi-check-circle-fill text-success" }),
-    fail: react_1.default.createElement("i", { className: "bi bi-x-circle-fill text-danger" }),
-    warn: react_1.default.createElement("i", { className: "bi bi-exclamation-triangle-fill text-warning" }),
-    skip: react_1.default.createElement("i", { className: "bi bi-dash-circle text-muted" }),
-    running: (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm text-primary", role: "status", "aria-hidden": "true" })),
+    pass: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle-fill text-success" }),
+    fail: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-x-circle-fill text-danger" }),
+    warn: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle-fill text-warning" }),
+    skip: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-dash-circle text-muted" }),
+    running: ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm text-primary", role: "status", "aria-hidden": "true" })),
 };
 const STATUS_BADGE_CLASS = {
-    pass: 'bg-success',
-    fail: 'bg-danger',
-    warn: 'bg-warning text-dark',
-    skip: 'bg-secondary',
-    running: 'bg-primary',
+    pass: "bg-success",
+    fail: "bg-danger",
+    warn: "bg-warning text-dark",
+    skip: "bg-secondary",
+    running: "bg-primary",
 };
 const LAYER_ORDER = [
-    'Local System',
-    'Cloud Relay',
-    'Local Network',
-    'Protocol Support',
-    'WebRTC / TURN',
-    'Peer State',
-    'Active Connections',
+    "Local System",
+    "Cloud Relay",
+    "Local Network",
+    "Protocol Support",
+    "WebRTC / TURN",
+    "Peer State",
+    "Active Connections",
 ];
 function groupByLayer(checks) {
     const groups = {};
@@ -70,14 +39,14 @@ function groupByLayer(checks) {
 }
 function getSummary(checks) {
     return {
-        issues: checks.filter(c => c.status === 'fail').length,
-        warnings: checks.filter(c => c.status === 'warn').length,
-        passes: checks.filter(c => c.status === 'pass').length,
-        skips: checks.filter(c => c.status === 'skip').length,
+        issues: checks.filter((c) => c.status === "fail").length,
+        warnings: checks.filter((c) => c.status === "warn").length,
+        passes: checks.filter((c) => c.status === "pass").length,
+        skips: checks.filter((c) => c.status === "skip").length,
     };
 }
 function formatReportForAI(checks) {
-    const lines = ['Connection Troubleshooter Report', '================================'];
+    const lines = ["Connection Troubleshooter Report", "================================"];
     const groups = groupByLayer(checks);
     for (const layer of LAYER_ORDER) {
         const layerChecks = groups[layer];
@@ -94,7 +63,7 @@ function formatReportForAI(checks) {
     }
     const { issues, warnings, skips } = getSummary(checks);
     lines.push(`\nSummary: ${issues} issue(s), ${warnings} warning(s), ${skips} skipped.`);
-    return lines.join('\n');
+    return lines.join("\n");
 }
 function ConnectionTroubleshooter({ onBack }) {
     const [checks, setChecks] = (0, react_1.useState)([]);
@@ -102,20 +71,22 @@ function ConnectionTroubleshooter({ onBack }) {
     const [done, setDone] = (0, react_1.useState)(false);
     const [expanded, setExpanded] = (0, react_1.useState)(new Set());
     const hasRun = (0, react_1.useRef)(false);
-    const runDiagnostics = async () => {
+    const runDiagnostics = (0, react_1.useCallback)(async () => {
         setRunning(true);
         setDone(false);
         setChecks([]);
         setExpanded(new Set());
-        const api = window.electronAPI?.networkViewer;
+        const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
         if (!api) {
-            setChecks([{
-                    id: 'no-api',
-                    label: 'Electron API unavailable',
-                    layer: 'Local System',
-                    status: 'fail',
-                    detail: 'The Electron network API is not available. This tool only works in the desktop app.',
-                }]);
+            setChecks([
+                {
+                    id: "no-api",
+                    label: "Electron API unavailable",
+                    layer: "Local System",
+                    status: "fail",
+                    detail: "The Electron network API is not available. This tool only works in the desktop app.",
+                },
+            ]);
             setRunning(false);
             setDone(true);
             return;
@@ -123,49 +94,50 @@ function ConnectionTroubleshooter({ onBack }) {
         try {
             // Stream results by running all checks on the backend and updating as they come in.
             // Show a placeholder "running" row immediately while the full batch executes.
-            const placeholders = LAYER_ORDER.map(layer => ({
+            const placeholders = LAYER_ORDER.map((layer) => ({
                 id: `placeholder-${layer}`,
                 label: `Checking ${layer}…`,
                 layer,
-                status: 'running',
-                detail: '',
+                status: "running",
+                detail: "",
             }));
             setChecks(placeholders);
-            const results = await api.runDiagnostics();
+            const results = (await api.runDiagnostics());
             setChecks(results);
             // Auto-expand all failed/warned checks so they're visible immediately
             const toExpand = new Set();
             for (const r of results) {
-                if ((r.status === 'fail' || r.status === 'warn') && r.suggestion) {
+                if ((r.status === "fail" || r.status === "warn") && r.suggestion) {
                     toExpand.add(r.id);
                 }
             }
             setExpanded(toExpand);
         }
         catch (err) {
-            setChecks([{
-                    id: 'run-error',
-                    label: 'Diagnostics failed to run',
-                    layer: 'Local System',
-                    status: 'fail',
-                    detail: `Error: ${err?.message || 'Unknown error'}`,
-                    suggestion: 'Restart the application and try again.',
-                }]);
+            setChecks([
+                {
+                    id: "run-error",
+                    label: "Diagnostics failed to run",
+                    layer: "Local System",
+                    status: "fail",
+                    detail: `Error: ${err instanceof Error ? err.message : "Unknown error"}`,
+                    suggestion: "Restart the application and try again.",
+                },
+            ]);
         }
         finally {
             setRunning(false);
             setDone(true);
         }
-    };
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!hasRun.current) {
             hasRun.current = true;
-            runDiagnostics();
+            void runDiagnostics();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [runDiagnostics]);
     const toggleExpand = (id) => {
-        setExpanded(prev => {
+        setExpanded((prev) => {
             const next = new Set(prev);
             if (next.has(id))
                 next.delete(id);
@@ -175,124 +147,48 @@ function ConnectionTroubleshooter({ onBack }) {
         });
     };
     const handleAskAssistant = () => {
-        const report = formatReportForAI(checks.filter(c => c.status !== 'running'));
+        const report = formatReportForAI(checks.filter((c) => c.status !== "running"));
         const message = `I ran the Peers connection troubleshooter and got the following results. Please help me understand what's wrong and how to fix it:\n\n${report}`;
-        (0, peers_sdk_1.emit)({ name: 'chat:openWithMessage', data: { message } }).catch(() => {
+        (0, peers_sdk_1.emit)({ name: "chat:openWithMessage", data: { message } }).catch(() => {
             // Fallback: copy to clipboard
-            navigator.clipboard.writeText(message).then(() => {
-                alert('Diagnostic report copied to clipboard. Paste it into the AI assistant chat.');
-            }).catch(() => {
-                alert('Could not open AI assistant. Please open the chat manually and paste the diagnostic report.');
+            navigator.clipboard
+                .writeText(message)
+                .then(() => {
+                alert("Diagnostic report copied to clipboard. Paste it into the AI assistant chat.");
+            })
+                .catch(() => {
+                alert("Could not open AI assistant. Please open the chat manually and paste the diagnostic report.");
             });
         });
     };
-    const groups = groupByLayer(checks.filter(c => !c.id.startsWith('placeholder-')));
-    const placeholders = checks.filter(c => c.id.startsWith('placeholder-'));
+    const groups = groupByLayer(checks.filter((c) => !c.id.startsWith("placeholder-")));
+    const placeholders = checks.filter((c) => c.id.startsWith("placeholder-"));
     const summary = getSummary(checks);
-    const completedCount = checks.filter(c => c.status !== 'running').length;
+    const completedCount = checks.filter((c) => c.status !== "running").length;
     const totalCount = checks.length;
     const progressPct = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
     const overallStatus = !done
-        ? 'running'
+        ? "running"
         : summary.issues > 0
-            ? 'fail'
+            ? "fail"
             : summary.warnings > 0
-                ? 'warn'
-                : 'pass';
-    return (react_1.default.createElement("div", { className: "container-fluid p-4" },
-        react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-3" },
-            react_1.default.createElement("div", { className: "d-flex align-items-center gap-3" },
-                react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary", onClick: onBack },
-                    react_1.default.createElement("i", { className: "bi bi-arrow-left me-1" }),
-                    "Back"),
-                react_1.default.createElement("h4", { className: "mb-0" },
-                    react_1.default.createElement("i", { className: "bi bi-stethoscope me-2 text-primary" }),
-                    "Connection Troubleshooter")),
-            react_1.default.createElement("button", { className: "btn btn-sm btn-primary", onClick: runDiagnostics, disabled: running }, running ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }),
-                "Running\u2026")) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("i", { className: "bi bi-arrow-clockwise me-1" }),
-                "Re-run")))),
-        running && (react_1.default.createElement("div", { className: "mb-4" },
-            react_1.default.createElement("div", { className: "d-flex justify-content-between mb-1" },
-                react_1.default.createElement("small", { className: "text-muted" }, "Running diagnostics\u2026"),
-                react_1.default.createElement("small", { className: "text-muted" },
-                    completedCount,
-                    " / ",
-                    totalCount)),
-            react_1.default.createElement("div", { className: "progress", style: { height: '6px' } },
-                react_1.default.createElement("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: `${progressPct}%` } })))),
-        done && checks.length > 0 && (react_1.default.createElement("div", { className: `alert ${overallStatus === 'pass' ? 'alert-success' : overallStatus === 'warn' ? 'alert-warning' : 'alert-danger'} d-flex justify-content-between align-items-center mb-4` },
-            react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" },
-                overallStatus === 'pass' && react_1.default.createElement("i", { className: "bi bi-check-circle-fill fs-5" }),
-                overallStatus === 'warn' && react_1.default.createElement("i", { className: "bi bi-exclamation-triangle-fill fs-5" }),
-                overallStatus === 'fail' && react_1.default.createElement("i", { className: "bi bi-x-circle-fill fs-5" }),
-                react_1.default.createElement("div", null,
-                    overallStatus === 'pass' && react_1.default.createElement("strong", null, "All checks passed."),
-                    overallStatus === 'warn' && react_1.default.createElement("strong", null,
-                        summary.warnings,
-                        " warning",
-                        summary.warnings > 1 ? 's' : '',
-                        " found."),
-                    overallStatus === 'fail' && react_1.default.createElement("strong", null,
-                        summary.issues,
-                        " issue",
-                        summary.issues > 1 ? 's' : '',
-                        " found",
-                        summary.warnings > 0 ? `, ${summary.warnings} warning${summary.warnings > 1 ? 's' : ''}` : '',
-                        "."),
-                    ' ',
-                    react_1.default.createElement("span", { className: "opacity-75" },
-                        summary.passes,
-                        " passed \u00B7 ",
-                        summary.issues,
-                        " failed \u00B7 ",
-                        summary.warnings,
-                        " warnings \u00B7 ",
-                        summary.skips,
-                        " skipped"))),
-            react_1.default.createElement("button", { className: "btn btn-sm btn-dark d-flex align-items-center gap-1", onClick: handleAskAssistant },
-                react_1.default.createElement("i", { className: "bi bi-chat-dots-fill" }),
-                "Ask AI Assistant"))),
-        running && placeholders.length > 0 && (react_1.default.createElement("div", { className: "card mb-3" },
-            react_1.default.createElement("div", { className: "card-body p-2" }, placeholders.map(p => (react_1.default.createElement("div", { key: p.id, className: "d-flex align-items-center gap-2 p-2 border-bottom" },
-                STATUS_ICON[p.status],
-                react_1.default.createElement("span", { className: "text-muted small" }, p.label))))))),
-        LAYER_ORDER.map(layer => {
-            const layerChecks = groups[layer];
-            if (!layerChecks || layerChecks.length === 0)
-                return null;
-            const layerStatus = layerChecks.some(c => c.status === 'fail')
-                ? 'fail'
-                : layerChecks.some(c => c.status === 'warn')
-                    ? 'warn'
-                    : layerChecks.some(c => c.status === 'running')
-                        ? 'running'
-                        : layerChecks.every(c => c.status === 'skip')
-                            ? 'skip'
-                            : 'pass';
-            return (react_1.default.createElement("div", { className: "card mb-3", key: layer },
-                react_1.default.createElement("div", { className: "card-header d-flex align-items-center justify-content-between py-2" },
-                    react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" },
-                        STATUS_ICON[layerStatus],
-                        react_1.default.createElement("strong", { className: "small" }, layer)),
-                    react_1.default.createElement("span", { className: `badge ${STATUS_BADGE_CLASS[layerStatus]}` }, layerStatus === 'running' ? 'running' : layerStatus)),
-                react_1.default.createElement("div", { className: "list-group list-group-flush" }, layerChecks.map(check => (react_1.default.createElement("div", { key: check.id, className: "list-group-item p-0" },
-                    react_1.default.createElement("div", { className: `d-flex align-items-start gap-2 px-3 py-2 ${check.suggestion ? 'cursor-pointer' : ''}`, style: { cursor: check.suggestion ? 'pointer' : 'default' }, onClick: () => check.suggestion && toggleExpand(check.id), role: check.suggestion ? 'button' : undefined },
-                        react_1.default.createElement("div", { className: "pt-1 flex-shrink-0" }, STATUS_ICON[check.status]),
-                        react_1.default.createElement("div", { className: "flex-grow-1 min-width-0" },
-                            react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-start" },
-                                react_1.default.createElement("span", { className: "small fw-medium" }, check.label),
-                                check.suggestion && (react_1.default.createElement("i", { className: `bi bi-chevron-${expanded.has(check.id) ? 'up' : 'down'} text-muted ms-2 flex-shrink-0 small` }))),
-                            react_1.default.createElement("div", { className: "small text-muted mt-1" }, check.detail))),
-                    check.suggestion && expanded.has(check.id) && (react_1.default.createElement("div", { className: "px-3 pb-2 pt-0 ms-4" },
-                        react_1.default.createElement("div", { className: "alert alert-info py-2 px-3 mb-0 small d-flex gap-2" },
-                            react_1.default.createElement("i", { className: "bi bi-lightbulb-fill text-info flex-shrink-0 mt-1" }),
-                            react_1.default.createElement("span", null, check.suggestion))))))))));
-        }),
-        done && checks.length > 0 && (react_1.default.createElement("div", { className: "text-center py-3" },
-            react_1.default.createElement("button", { className: "btn btn-outline-primary", onClick: handleAskAssistant },
-                react_1.default.createElement("i", { className: "bi bi-chat-dots-fill me-2" }),
-                "Ask AI Assistant for Help"),
-            react_1.default.createElement("p", { className: "text-muted small mt-2 mb-0" }, "Sends the full diagnostic report to the AI assistant for guided troubleshooting.")))));
+                ? "warn"
+                : "pass";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-secondary", onClick: onBack, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-left me-1" }), "Back"] }), (0, jsx_runtime_1.jsxs)("h4", { className: "mb-0", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-stethoscope me-2 text-primary" }), "Connection Troubleshooter"] })] }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-primary", onClick: runDiagnostics, disabled: running, children: running ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }), "Running\u2026"] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-clockwise me-1" }), "Re-run"] })) })] }), running && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between mb-1", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: "Running diagnostics\u2026" }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: [completedCount, " / ", totalCount] })] }), (0, jsx_runtime_1.jsx)("div", { className: "progress", style: { height: "6px" }, children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: `${progressPct}%` } }) })] })), done && checks.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `alert ${overallStatus === "pass" ? "alert-success" : overallStatus === "warn" ? "alert-warning" : "alert-danger"} d-flex justify-content-between align-items-center mb-4`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2", children: [overallStatus === "pass" && (0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle-fill fs-5" }), overallStatus === "warn" && (0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle-fill fs-5" }), overallStatus === "fail" && (0, jsx_runtime_1.jsx)("i", { className: "bi bi-x-circle-fill fs-5" }), (0, jsx_runtime_1.jsxs)("div", { children: [overallStatus === "pass" && (0, jsx_runtime_1.jsx)("strong", { children: "All checks passed." }), overallStatus === "warn" && ((0, jsx_runtime_1.jsxs)("strong", { children: [summary.warnings, " warning", summary.warnings > 1 ? "s" : "", " found."] })), overallStatus === "fail" && ((0, jsx_runtime_1.jsxs)("strong", { children: [summary.issues, " issue", summary.issues > 1 ? "s" : "", " found", summary.warnings > 0
+                                                ? `, ${summary.warnings} warning${summary.warnings > 1 ? "s" : ""}`
+                                                : "", "."] })), " ", (0, jsx_runtime_1.jsxs)("span", { className: "opacity-75", children: [summary.passes, " passed \u00B7 ", summary.issues, " failed \u00B7 ", summary.warnings, " warnings \u00B7", " ", summary.skips, " skipped"] })] })] }), (0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-dark d-flex align-items-center gap-1", onClick: handleAskAssistant, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-chat-dots-fill" }), "Ask AI Assistant"] })] })), running && placeholders.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-2", children: placeholders.map((p) => ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 p-2 border-bottom", children: [STATUS_ICON[p.status], (0, jsx_runtime_1.jsx)("span", { className: "text-muted small", children: p.label })] }, p.id))) }) })), LAYER_ORDER.map((layer) => {
+                const layerChecks = groups[layer];
+                if (!layerChecks || layerChecks.length === 0)
+                    return null;
+                const layerStatus = layerChecks.some((c) => c.status === "fail")
+                    ? "fail"
+                    : layerChecks.some((c) => c.status === "warn")
+                        ? "warn"
+                        : layerChecks.some((c) => c.status === "running")
+                            ? "running"
+                            : layerChecks.every((c) => c.status === "skip")
+                                ? "skip"
+                                : "pass";
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "card mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header d-flex align-items-center justify-content-between py-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2", children: [STATUS_ICON[layerStatus], (0, jsx_runtime_1.jsx)("strong", { className: "small", children: layer })] }), (0, jsx_runtime_1.jsx)("span", { className: `badge ${STATUS_BADGE_CLASS[layerStatus]}`, children: layerStatus === "running" ? "running" : layerStatus })] }), (0, jsx_runtime_1.jsx)("div", { className: "list-group list-group-flush", children: layerChecks.map((check) => ((0, jsx_runtime_1.jsxs)("div", { className: "list-group-item p-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: `d-flex align-items-start gap-2 px-3 py-2 ${check.suggestion ? "cursor-pointer" : ""}`, style: { cursor: check.suggestion ? "pointer" : "default" }, onClick: () => check.suggestion && toggleExpand(check.id), role: check.suggestion ? "button" : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: "pt-1 flex-shrink-0", children: STATUS_ICON[check.status] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1 min-width-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-start", children: [(0, jsx_runtime_1.jsx)("span", { className: "small fw-medium", children: check.label }), check.suggestion && ((0, jsx_runtime_1.jsx)("i", { className: `bi bi-chevron-${expanded.has(check.id) ? "up" : "down"} text-muted ms-2 flex-shrink-0 small` }))] }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted mt-1", children: check.detail })] })] }), check.suggestion && expanded.has(check.id) && ((0, jsx_runtime_1.jsx)("div", { className: "px-3 pb-2 pt-0 ms-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "alert alert-info py-2 px-3 mb-0 small d-flex gap-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-lightbulb-fill text-info flex-shrink-0 mt-1" }), (0, jsx_runtime_1.jsx)("span", { children: check.suggestion })] }) }))] }, check.id))) })] }, layer));
+            }), done && checks.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-3", children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-outline-primary", onClick: handleAskAssistant, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-chat-dots-fill me-2" }), "Ask AI Assistant for Help"] }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small mt-2 mb-0", children: "Sends the full diagnostic report to the AI assistant for guided troubleshooting." })] }))] }));
 }

package/dist/screens/network-viewer/cpu-usage-graph.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface ICpuUsageGraphProps {
     /**
      * Function to fetch current CPU usage percentage
@@ -17,5 +16,5 @@ interface ICpuUsageGraphProps {
      */
     minHeight?: number;
 }
-export declare function CpuUsageGraph({ fetchCpuUsage, durationMinutes, updateInterval, minHeight }: ICpuUsageGraphProps): React.JSX.Element;
+export declare function CpuUsageGraph({ fetchCpuUsage, durationMinutes, updateInterval, minHeight, }: ICpuUsageGraphProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/screens/network-viewer/cpu-usage-graph.js

@@ -1,41 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CpuUsageGraph = CpuUsageGraph;
-const react_1 = __importStar(require("react"));
-function CpuUsageGraph({ fetchCpuUsage, durationMinutes = 5, updateInterval = 5000, minHeight = 80 }) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function CpuUsageGraph({ fetchCpuUsage, durationMinutes = 5, updateInterval = 5000, minHeight = 80, }) {
     const [dataPoints, setDataPoints] = (0, react_1.useState)([]);
     const [currentCpu, setCurrentCpu] = (0, react_1.useState)(0);
     const [width, setWidth] = (0, react_1.useState)(400);
@@ -72,7 +40,7 @@ function CpuUsageGraph({ fetchCpuUsage, durationMinutes = 5, updateInterval = 50
                 setDataPoints((prev) => {
                     const newPoint = {
                         timestamp: Date.now(),
-                        value: cpuValue
+                        value: cpuValue,
                     };
                     const updated = [...prev, newPoint];
                     // Keep only last N data points
@@ -83,7 +51,7 @@ function CpuUsageGraph({ fetchCpuUsage, durationMinutes = 5, updateInterval = 50
                 });
             }
             catch (error) {
-                console.error('Error fetching CPU usage:', error);
+                console.error("Error fetching CPU usage:", error);
             }
         };
         // Initial fetch
@@ -99,7 +67,7 @@ function CpuUsageGraph({ fetchCpuUsage, durationMinutes = 5, updateInterval = 50
     // Calculate SVG path
     const getLinePath = () => {
         if (dataPoints.length < 2)
-            return '';
+            return "";
         const paddingLeft = 25;
         const paddingRight = 10;
         const paddingTop = 10;
@@ -118,19 +86,21 @@ function CpuUsageGraph({ fetchCpuUsage, durationMinutes = 5, updateInterval = 50
             return { x, y };
         });
         // Create SVG path
-        const pathData = points.map((point, idx) => {
+        const pathData = points
+            .map((point, idx) => {
             if (idx === 0) {
                 return `M ${point.x} ${point.y}`;
             }
             return `L ${point.x} ${point.y}`;
-        }).join(' ');
+        })
+            .join(" ");
         return pathData;
     };
     // Get gradient path for fill
     const getGradientPath = () => {
         const linePath = getLinePath();
         if (!linePath)
-            return '';
+            return "";
         const paddingLeft = 25;
         const paddingRight = 10;
         const paddingBottom = 10;
@@ -139,62 +109,53 @@ function CpuUsageGraph({ fetchCpuUsage, durationMinutes = 5, updateInterval = 50
     };
     const linePath = getLinePath();
     const gradientPath = getGradientPath();
-    return (react_1.default.createElement("div", { ref: containerRef, className: "cpu-usage-graph", style: { margin: 0, padding: 0, position: 'relative', width: '100%', height: '100%', minHeight: `${minHeight}px` } },
-        react_1.default.createElement("svg", { width: width, height: height, style: {
-                border: '1px solid rgba(128, 128, 128, 0.2)',
-                borderRadius: '4px',
-                backgroundColor: 'rgba(0, 0, 0, 0.02)',
-                display: 'block'
-            } },
-            react_1.default.createElement("defs", null,
-                react_1.default.createElement("linearGradient", { id: "cpuGradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
-                    react_1.default.createElement("stop", { offset: "0%", stopColor: "rgba(13, 110, 253, 0.3)" }),
-                    react_1.default.createElement("stop", { offset: "100%", stopColor: "rgba(13, 110, 253, 0.05)" }))),
-            [0, 25, 50, 75, 100].map((value) => {
-                const paddingLeft = 25;
-                const paddingRight = 10;
-                const paddingTop = 10;
-                const paddingBottom = 10;
-                const chartHeight = height - paddingTop - paddingBottom;
-                const y = paddingTop + chartHeight - (value / 100) * chartHeight;
-                return (react_1.default.createElement("g", { key: value },
-                    react_1.default.createElement("line", { x1: paddingLeft, y1: y, x2: width - paddingRight, y2: y, stroke: "rgba(128, 128, 128, 0.1)", strokeWidth: "1" }),
-                    react_1.default.createElement("text", { x: paddingLeft - 5, y: y + 4, fontSize: "10", fill: "rgba(128, 128, 128, 0.6)", textAnchor: "end" }, value)));
-            }),
-            gradientPath && (react_1.default.createElement("path", { d: gradientPath, fill: "url(#cpuGradient)" })),
-            linePath && (react_1.default.createElement("path", { d: linePath, stroke: "#0d6efd", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })),
-            dataPoints.map((point, idx) => {
-                const paddingLeft = 25;
-                const paddingRight = 10;
-                const paddingTop = 10;
-                const paddingBottom = 10;
-                const chartWidth = width - paddingLeft - paddingRight;
-                const chartHeight = height - paddingTop - paddingBottom;
-                const now = Date.now();
-                const timeRange = durationMinutes * 60 * 1000;
-                const minTime = now - timeRange;
-                const x = paddingLeft + ((point.timestamp - minTime) / timeRange) * chartWidth;
-                const y = paddingTop + chartHeight - (point.value / 100) * chartHeight;
-                // Only show the last point as a visible dot
-                if (idx !== dataPoints.length - 1)
-                    return null;
-                return (react_1.default.createElement("circle", { key: idx, cx: x, cy: y, r: "3", fill: "#0d6efd", stroke: "white", strokeWidth: "1.5" }));
-            }),
-            dataPoints.length === 0 && (react_1.default.createElement("text", { x: width / 2, y: height / 2, fontSize: "12", fill: "rgba(128, 128, 128, 0.6)", textAnchor: "middle" }, "Collecting data..."))),
-        react_1.default.createElement("div", { style: {
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                fontSize: '2rem',
-                fontWeight: 'bold',
-                color: 'rgba(255, 255, 255, 0.7)',
-                pointerEvents: 'none',
-                userSelect: 'none',
-                textAlign: 'center',
-                lineHeight: '1.2'
-            } },
-            "CPU \u00A0",
-            Math.round(currentCpu),
-            "%")));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: "cpu-usage-graph", style: {
+            margin: 0,
+            padding: 0,
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            minHeight: `${minHeight}px`,
+        }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: width, height: height, style: {
+                    border: "1px solid rgba(128, 128, 128, 0.2)",
+                    borderRadius: "4px",
+                    backgroundColor: "rgba(0, 0, 0, 0.02)",
+                    display: "block",
+                }, children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "cpuGradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "rgba(13, 110, 253, 0.3)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "rgba(13, 110, 253, 0.05)" })] }) }), [0, 25, 50, 75, 100].map((value) => {
+                        const paddingLeft = 25;
+                        const paddingRight = 10;
+                        const paddingTop = 10;
+                        const paddingBottom = 10;
+                        const chartHeight = height - paddingTop - paddingBottom;
+                        const y = paddingTop + chartHeight - (value / 100) * chartHeight;
+                        return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("line", { x1: paddingLeft, y1: y, x2: width - paddingRight, y2: y, stroke: "rgba(128, 128, 128, 0.1)", strokeWidth: "1" }), (0, jsx_runtime_1.jsx)("text", { x: paddingLeft - 5, y: y + 4, fontSize: "10", fill: "rgba(128, 128, 128, 0.6)", textAnchor: "end", children: value })] }, value));
+                    }), gradientPath && (0, jsx_runtime_1.jsx)("path", { d: gradientPath, fill: "url(#cpuGradient)" }), linePath && ((0, jsx_runtime_1.jsx)("path", { d: linePath, stroke: "#0d6efd", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })), dataPoints.map((point, idx) => {
+                        const paddingLeft = 25;
+                        const paddingRight = 10;
+                        const paddingTop = 10;
+                        const paddingBottom = 10;
+                        const chartWidth = width - paddingLeft - paddingRight;
+                        const chartHeight = height - paddingTop - paddingBottom;
+                        const now = Date.now();
+                        const timeRange = durationMinutes * 60 * 1000;
+                        const minTime = now - timeRange;
+                        const x = paddingLeft + ((point.timestamp - minTime) / timeRange) * chartWidth;
+                        const y = paddingTop + chartHeight - (point.value / 100) * chartHeight;
+                        // Only show the last point as a visible dot
+                        if (idx !== dataPoints.length - 1)
+                            return null;
+                        return ((0, jsx_runtime_1.jsx)("circle", { cx: x, cy: y, r: "3", fill: "#0d6efd", stroke: "white", strokeWidth: "1.5" }, idx));
+                    }), dataPoints.length === 0 && ((0, jsx_runtime_1.jsx)("text", { x: width / 2, y: height / 2, fontSize: "12", fill: "rgba(128, 128, 128, 0.6)", textAnchor: "middle", children: "Collecting data..." }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    fontSize: "2rem",
+                    fontWeight: "bold",
+                    color: "rgba(255, 255, 255, 0.7)",
+                    pointerEvents: "none",
+                    userSelect: "none",
+                    textAlign: "center",
+                    lineHeight: "1.2",
+                }, children: ["CPU \u00A0", Math.round(currentCpu), "%"] })] }));
 }