@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/screens/network-viewer/connection-troubleshooter.tsx

@@ -1,395 +0,0 @@
-import type React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { getNetworkViewerPlatformApi } from "./network-viewer-ipc";
-
-export interface IDiagnosticCheck {
-  id: string;
-  label: string;
-  layer: string;
-  status: "pass" | "fail" | "warn" | "skip" | "running";
-  detail: string;
-  suggestion?: string;
-}
-
-interface Props {
-  onBack: () => void;
-}
-
-const STATUS_ICON: Record<IDiagnosticCheck["status"], React.ReactNode> = {
-  pass: <i className="bi bi-check-circle-fill text-success" />,
-  fail: <i className="bi bi-x-circle-fill text-danger" />,
-  warn: <i className="bi bi-exclamation-triangle-fill text-warning" />,
-  skip: <i className="bi bi-dash-circle text-muted" />,
-  running: (
-    <span
-      className="spinner-border spinner-border-sm text-primary"
-      role="status"
-      aria-hidden="true"
-    />
-  ),
-};
-
-const STATUS_BADGE_CLASS: Record<IDiagnosticCheck["status"], string> = {
-  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",
-];
-
-function groupByLayer(checks: IDiagnosticCheck[]): Record<string, IDiagnosticCheck[]> {
-  const groups: Record<string, IDiagnosticCheck[]> = {};
-  for (const check of checks) {
-    if (!groups[check.layer]) groups[check.layer] = [];
-    groups[check.layer].push(check);
-  }
-  return groups;
-}
-
-function getSummary(checks: IDiagnosticCheck[]): {
-  issues: number;
-  warnings: number;
-  passes: number;
-  skips: number;
-} {
-  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,
-  };
-}
-
-function formatReportForAI(checks: IDiagnosticCheck[]): string {
-  const lines: string[] = ["Connection Troubleshooter Report", "================================"];
-  const groups = groupByLayer(checks);
-
-  for (const layer of LAYER_ORDER) {
-    const layerChecks = groups[layer];
-    if (!layerChecks) continue;
-    lines.push(`\n[${layer}]`);
-    for (const check of layerChecks) {
-      const statusStr = check.status.toUpperCase().padEnd(7);
-      lines.push(`  ${statusStr} ${check.label}: ${check.detail}`);
-      if (check.suggestion) {
-        lines.push(`         Suggestion: ${check.suggestion}`);
-      }
-    }
-  }
-
-  const { issues, warnings, skips } = getSummary(checks);
-  lines.push(`\nSummary: ${issues} issue(s), ${warnings} warning(s), ${skips} skipped.`);
-
-  return lines.join("\n");
-}
-
-export function ConnectionTroubleshooter({ onBack }: Props) {
-  const [checks, setChecks] = useState<IDiagnosticCheck[]>([]);
-  const [running, setRunning] = useState(false);
-  const [done, setDone] = useState(false);
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-  const hasRun = useRef(false);
-
-  const runDiagnostics = useCallback(async () => {
-    setRunning(true);
-    setDone(false);
-    setChecks([]);
-    setExpanded(new Set());
-
-    const api = getNetworkViewerPlatformApi();
-    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.",
-        },
-      ]);
-      setRunning(false);
-      setDone(true);
-      return;
-    }
-
-    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: IDiagnosticCheck[] = LAYER_ORDER.map((layer) => ({
-        id: `placeholder-${layer}`,
-        label: `Checking ${layer}…`,
-        layer,
-        status: "running",
-        detail: "",
-      }));
-      setChecks(placeholders);
-
-      const results = (await api.runDiagnostics()) as IDiagnosticCheck[];
-      setChecks(results);
-
-      // Auto-expand all failed/warned checks so they're visible immediately
-      const toExpand = new Set<string>();
-      for (const r of results) {
-        if ((r.status === "fail" || r.status === "warn") && r.suggestion) {
-          toExpand.add(r.id);
-        }
-      }
-      setExpanded(toExpand);
-    } catch (err: unknown) {
-      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);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!hasRun.current) {
-      hasRun.current = true;
-      void runDiagnostics();
-    }
-  }, [runDiagnostics]);
-
-  const toggleExpand = (id: string) => {
-    setExpanded((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  const handleAskAssistant = () => {
-    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}`;
-    navigator.clipboard
-      .writeText(message)
-      .then(() => {
-        alert("Diagnostic report copied to clipboard. Paste it into the AI assistant chat.");
-      })
-      .catch(() => {
-        alert(
-          "Could not copy the diagnostic report. Please open the chat manually and describe the results.",
-        );
-      });
-  };
-
-  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 totalCount = checks.length;
-  const progressPct = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
-
-  const overallStatus: IDiagnosticCheck["status"] = !done
-    ? "running"
-    : summary.issues > 0
-      ? "fail"
-      : summary.warnings > 0
-        ? "warn"
-        : "pass";
-
-  return (
-    <div className="container-fluid p-4">
-      {/* Header */}
-      <div className="d-flex justify-content-between align-items-center mb-3">
-        <div className="d-flex align-items-center gap-3">
-          <button className="btn btn-sm btn-outline-secondary" onClick={onBack}>
-            <i className="bi bi-arrow-left me-1" />
-            Back
-          </button>
-          <h4 className="mb-0">
-            <i className="bi bi-stethoscope me-2 text-primary" />
-            Connection Troubleshooter
-          </h4>
-        </div>
-        <button className="btn btn-sm btn-primary" onClick={runDiagnostics} disabled={running}>
-          {running ? (
-            <>
-              <span
-                className="spinner-border spinner-border-sm me-1"
-                role="status"
-                aria-hidden="true"
-              />
-              Running…
-            </>
-          ) : (
-            <>
-              <i className="bi bi-arrow-clockwise me-1" />
-              Re-run
-            </>
-          )}
-        </button>
-      </div>
-
-      {/* Progress bar */}
-      {running && (
-        <div className="mb-4">
-          <div className="d-flex justify-content-between mb-1">
-            <small className="text-muted">Running diagnostics…</small>
-            <small className="text-muted">
-              {completedCount} / {totalCount}
-            </small>
-          </div>
-          <div className="progress" style={{ height: "6px" }}>
-            <div
-              className="progress-bar progress-bar-striped progress-bar-animated"
-              style={{ width: `${progressPct}%` }}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Summary card — shown when done */}
-      {done && checks.length > 0 && (
-        <div
-          className={`alert ${overallStatus === "pass" ? "alert-success" : overallStatus === "warn" ? "alert-warning" : "alert-danger"} d-flex justify-content-between align-items-center mb-4`}
-        >
-          <div className="d-flex align-items-center gap-2">
-            {overallStatus === "pass" && <i className="bi bi-check-circle-fill fs-5" />}
-            {overallStatus === "warn" && <i className="bi bi-exclamation-triangle-fill fs-5" />}
-            {overallStatus === "fail" && <i className="bi bi-x-circle-fill fs-5" />}
-            <div>
-              {overallStatus === "pass" && <strong>All checks passed.</strong>}
-              {overallStatus === "warn" && (
-                <strong>
-                  {summary.warnings} warning{summary.warnings > 1 ? "s" : ""} found.
-                </strong>
-              )}
-              {overallStatus === "fail" && (
-                <strong>
-                  {summary.issues} issue{summary.issues > 1 ? "s" : ""} found
-                  {summary.warnings > 0
-                    ? `, ${summary.warnings} warning${summary.warnings > 1 ? "s" : ""}`
-                    : ""}
-                  .
-                </strong>
-              )}{" "}
-              <span className="opacity-75">
-                {summary.passes} passed · {summary.issues} failed · {summary.warnings} warnings ·{" "}
-                {summary.skips} skipped
-              </span>
-            </div>
-          </div>
-          <button
-            className="btn btn-sm btn-dark d-flex align-items-center gap-1"
-            onClick={handleAskAssistant}
-          >
-            <i className="bi bi-chat-dots-fill" />
-            Ask AI Assistant
-          </button>
-        </div>
-      )}
-
-      {/* Placeholder rows while waiting for full results */}
-      {running && placeholders.length > 0 && (
-        <div className="card mb-3">
-          <div className="card-body p-2">
-            {placeholders.map((p) => (
-              <div key={p.id} className="d-flex align-items-center gap-2 p-2 border-bottom">
-                {STATUS_ICON[p.status]}
-                <span className="text-muted small">{p.label}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Results grouped by layer */}
-      {LAYER_ORDER.map((layer) => {
-        const layerChecks = groups[layer];
-        if (!layerChecks || layerChecks.length === 0) return null;
-
-        const layerStatus: IDiagnosticCheck["status"] = 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 (
-          <div className="card mb-3" key={layer}>
-            <div className="card-header d-flex align-items-center justify-content-between py-2">
-              <div className="d-flex align-items-center gap-2">
-                {STATUS_ICON[layerStatus]}
-                <strong className="small">{layer}</strong>
-              </div>
-              <span className={`badge ${STATUS_BADGE_CLASS[layerStatus]}`}>
-                {layerStatus === "running" ? "running" : layerStatus}
-              </span>
-            </div>
-            <div className="list-group list-group-flush">
-              {layerChecks.map((check) => (
-                <div key={check.id} className="list-group-item p-0">
-                  <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}
-                  >
-                    <div className="pt-1 flex-shrink-0">{STATUS_ICON[check.status]}</div>
-                    <div className="flex-grow-1 min-width-0">
-                      <div className="d-flex justify-content-between align-items-start">
-                        <span className="small fw-medium">{check.label}</span>
-                        {check.suggestion && (
-                          <i
-                            className={`bi bi-chevron-${expanded.has(check.id) ? "up" : "down"} text-muted ms-2 flex-shrink-0 small`}
-                          />
-                        )}
-                      </div>
-                      <div className="small text-muted mt-1">{check.detail}</div>
-                    </div>
-                  </div>
-                  {check.suggestion && expanded.has(check.id) && (
-                    <div className="px-3 pb-2 pt-0 ms-4">
-                      <div className="alert alert-info py-2 px-3 mb-0 small d-flex gap-2">
-                        <i className="bi bi-lightbulb-fill text-info flex-shrink-0 mt-1" />
-                        <span>{check.suggestion}</span>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-        );
-      })}
-
-      {/* Ask AI Assistant button at bottom (when done, as a secondary option) */}
-      {done && checks.length > 0 && (
-        <div className="text-center py-3">
-          <button className="btn btn-outline-primary" onClick={handleAskAssistant}>
-            <i className="bi bi-chat-dots-fill me-2" />
-            Ask AI Assistant for Help
-          </button>
-          <p className="text-muted small mt-2 mb-0">
-            Sends the full diagnostic report to the AI assistant for guided troubleshooting.
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/screens/network-viewer/cpu-usage-graph.tsx

@@ -1,294 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-interface ICpuDataPoint {
-  timestamp: number;
-  value: number;
-}
-
-interface ICpuUsageGraphProps {
-  /**
-   * Function to fetch current CPU usage percentage
-   */
-  fetchCpuUsage: () => Promise<number>;
-  /**
-   * Duration in minutes to display
-   */
-  durationMinutes?: number;
-  /**
-   * Update interval in milliseconds
-   */
-  updateInterval?: number;
-  /**
-   * Minimum height in pixels (optional, defaults to 80)
-   */
-  minHeight?: number;
-}
-
-export function CpuUsageGraph({
-  fetchCpuUsage,
-  durationMinutes = 5,
-  updateInterval = 5000,
-  minHeight = 80,
-}: ICpuUsageGraphProps) {
-  const [dataPoints, setDataPoints] = useState<ICpuDataPoint[]>([]);
-  const [currentCpu, setCurrentCpu] = useState<number>(0);
-  const [width, setWidth] = useState<number>(400);
-  const [height, setHeight] = useState<number>(minHeight);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-
-  const maxDataPoints = (durationMinutes * 60 * 1000) / updateInterval;
-
-  // Observe container size and update width and height
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const newWidth = entry.contentRect.width;
-        const newHeight = entry.contentRect.height;
-        if (newWidth > 0) {
-          setWidth(newWidth);
-        }
-        if (newHeight > 0) {
-          setHeight(Math.max(newHeight, minHeight));
-        }
-      }
-    });
-
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [minHeight]);
-
-  useEffect(() => {
-    const updateData = async () => {
-      try {
-        const cpuValue = await fetchCpuUsage();
-        setCurrentCpu(cpuValue);
-
-        setDataPoints((prev) => {
-          const newPoint: ICpuDataPoint = {
-            timestamp: Date.now(),
-            value: cpuValue,
-          };
-
-          const updated = [...prev, newPoint];
-
-          // Keep only last N data points
-          if (updated.length > maxDataPoints) {
-            return updated.slice(updated.length - maxDataPoints);
-          }
-
-          return updated;
-        });
-      } catch (error) {
-        console.error("Error fetching CPU usage:", error);
-      }
-    };
-
-    // Initial fetch
-    updateData();
-
-    // Set up interval
-    intervalRef.current = setInterval(updateData, updateInterval);
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [fetchCpuUsage, updateInterval, maxDataPoints]);
-
-  // Calculate SVG path
-  const getLinePath = (): string => {
-    if (dataPoints.length < 2) return "";
-
-    const paddingLeft = 25;
-    const paddingRight = 10;
-    const paddingTop = 10;
-    const paddingBottom = 10;
-    const chartWidth = width - paddingLeft - paddingRight;
-    const chartHeight = height - paddingTop - paddingBottom;
-
-    // Calculate time range
-    const now = Date.now();
-    const timeRange = durationMinutes * 60 * 1000;
-    const minTime = now - timeRange;
-
-    const points = dataPoints.map((point) => {
-      // X: Map timestamp to chart width
-      const x = paddingLeft + ((point.timestamp - minTime) / timeRange) * chartWidth;
-
-      // Y: Map value (0-100) to chart height (inverted because SVG Y grows downward)
-      const y = paddingTop + chartHeight - (point.value / 100) * chartHeight;
-
-      return { x, y };
-    });
-
-    // Create SVG path
-    const pathData = points
-      .map((point, idx) => {
-        if (idx === 0) {
-          return `M ${point.x} ${point.y}`;
-        }
-        return `L ${point.x} ${point.y}`;
-      })
-      .join(" ");
-
-    return pathData;
-  };
-
-  // Get gradient path for fill
-  const getGradientPath = (): string => {
-    const linePath = getLinePath();
-    if (!linePath) return "";
-
-    const paddingLeft = 25;
-    const paddingRight = 10;
-    const paddingBottom = 10;
-
-    // Close the path at the bottom
-    return `${linePath} L ${width - paddingRight} ${height - paddingBottom} L ${paddingLeft} ${height - paddingBottom} Z`;
-  };
-
-  const linePath = getLinePath();
-  const gradientPath = getGradientPath();
-
-  return (
-    <div
-      ref={containerRef}
-      className="cpu-usage-graph"
-      style={{
-        margin: 0,
-        padding: 0,
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        minHeight: `${minHeight}px`,
-      }}
-    >
-      <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",
-        }}
-      >
-        <defs>
-          <linearGradient id="cpuGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor="rgba(13, 110, 253, 0.3)" />
-            <stop offset="100%" stopColor="rgba(13, 110, 253, 0.05)" />
-          </linearGradient>
-        </defs>
-
-        {/* Grid lines */}
-        {[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 (
-            <g key={value}>
-              <line
-                x1={paddingLeft}
-                y1={y}
-                x2={width - paddingRight}
-                y2={y}
-                stroke="rgba(128, 128, 128, 0.1)"
-                strokeWidth="1"
-              />
-              <text
-                x={paddingLeft - 5}
-                y={y + 4}
-                fontSize="10"
-                fill="rgba(128, 128, 128, 0.6)"
-                textAnchor="end"
-              >
-                {value}
-              </text>
-            </g>
-          );
-        })}
-
-        {/* Fill area under the line */}
-        {gradientPath && <path d={gradientPath} fill="url(#cpuGradient)" />}
-
-        {/* Line */}
-        {linePath && (
-          <path
-            d={linePath}
-            stroke="#0d6efd"
-            strokeWidth="2"
-            fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        )}
-
-        {/* Data points */}
-        {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 (
-            <circle key={idx} cx={x} cy={y} r="3" fill="#0d6efd" stroke="white" strokeWidth="1.5" />
-          );
-        })}
-
-        {/* No data message */}
-        {dataPoints.length === 0 && (
-          <text
-            x={width / 2}
-            y={height / 2}
-            fontSize="12"
-            fill="rgba(128, 128, 128, 0.6)"
-            textAnchor="middle"
-          >
-            Collecting data...
-          </text>
-        )}
-      </svg>
-
-      {/* Centered CPU percentage overlay */}
-      <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 &nbsp;
-        {Math.round(currentCpu)}%
-      </div>
-    </div>
-  );
-}