@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/join-group/join-group.tsx

@@ -1,30 +1,31 @@
 /**
  * Join Group screen - allows users to join a group by entering an invitation password.
- * 
+ *
  * Flow:
  * 1. User enters the invitation password
  * 2. System discovers all devices listening for that password
  * 3. User selects a group/device to join
  * 4. System sends join request and waits for approval
- * 
+ *
  * Communicates with device layer through pvars (not direct imports).
  */
 
-import React, { useState, useCallback, useEffect } from "react";
 import {
   getUserContext,
-  groupJoinStatus,
+  groupInviteDiscover,
   groupInviteDiscoveryResult,
   groupInviteJoinResult,
-  groupInviteDiscover,
   groupInviteSendRequest,
-  IGroupInviteListenerInfo,
+  groupJoinStatus,
+  type IGroupInviteListenerInfo,
   isValidInvitePassword,
 } from "@peers-app/peers-sdk";
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
 import { LoadingIndicator } from "../../components/loading-indicator";
-import { usePromise, useObservable } from "../../hooks";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 import { mainContentPath } from "../../globals";
+import { useObservable, usePromise } from "../../hooks";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
 export const JoinGroup = () => {
   const userContext = usePromise(() => getUserContext());
@@ -34,7 +35,9 @@ export const JoinGroup = () => {
   const [isSearching, setIsSearching] = useState(false);
   const [isJoining, setIsJoining] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [currentJoiningGroup, setCurrentJoiningGroup] = useState<IGroupInviteListenerInfo | null>(null);
+  const [_currentJoiningGroup, setCurrentJoiningGroup] = useState<IGroupInviteListenerInfo | null>(
+    null,
+  );
 
   // Observable state from device layer
   const [status] = useObservable(groupJoinStatus);
@@ -63,7 +66,7 @@ export const JoinGroup = () => {
 
     setError(null);
     setIsSearching(true);
-    
+
     // Clear previous results and trigger discovery
     groupInviteDiscoveryResult([]);
     groupInviteJoinResult(null);
@@ -71,15 +74,18 @@ export const JoinGroup = () => {
   }, [password]);
 
   // Join a group (set pvar, device layer reacts)
-  const handleJoin = useCallback((listener: IGroupInviteListenerInfo) => {
-    setIsJoining(true);
-    setError(null);
-    setCurrentJoiningGroup(listener);
-    
-    // Clear previous result and trigger join request
-    groupInviteJoinResult(null);
-    groupInviteSendRequest({ listener, password });
-  }, [password]);
+  const handleJoin = useCallback(
+    (listener: IGroupInviteListenerInfo) => {
+      setIsJoining(true);
+      setError(null);
+      setCurrentJoiningGroup(listener);
+
+      // Clear previous result and trigger join request
+      groupInviteJoinResult(null);
+      groupInviteSendRequest({ listener, password });
+    },
+    [password],
+  );
 
   // Reset state
   const handleReset = useCallback(() => {
@@ -94,11 +100,14 @@ export const JoinGroup = () => {
   }, []);
 
   // Handle Enter key
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && password && !isSearching) {
-      handleSearch();
-    }
-  }, [password, isSearching, handleSearch]);
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && password && !isSearching) {
+        handleSearch();
+      }
+    },
+    [password, isSearching, handleSearch],
+  );
 
   if (!userContext) {
     return <LoadingIndicator />;
@@ -111,9 +120,7 @@ export const JoinGroup = () => {
           <i className="bi-box-arrow-in-right me-2" />
           Join Group
         </h2>
-        <p className="text-muted">
-          Enter the invitation password to find and join a group
-        </p>
+        <p className="text-muted">Enter the invitation password to find and join a group</p>
       </div>
 
       {/* Success state */}
@@ -150,7 +157,6 @@ export const JoinGroup = () => {
                   onKeyDown={handleKeyDown}
                   placeholder="Enter password (e.g., apple-banana-cherry-date)"
                   disabled={isSearching || isJoining}
-                  autoFocus
                 />
                 <button
                   className="btn btn-primary"
@@ -170,9 +176,7 @@ export const JoinGroup = () => {
                   )}
                 </button>
               </div>
-              <small className="text-muted">
-                Ask the group admin for the invitation password
-              </small>
+              <small className="text-muted">Ask the group admin for the invitation password</small>
             </div>
           </div>
 
@@ -215,13 +219,13 @@ export const JoinGroup = () => {
                     <div className="d-flex justify-content-between align-items-center">
                       <div>
                         <div className="d-flex align-items-center mb-1">
-                          <i className={`${listener.group.iconClassName || "bi-people-fill"} me-2`} />
+                          <i
+                            className={`${listener.group.iconClassName || "bi-people-fill"} me-2`}
+                          />
                           <strong>{listener.group.name}</strong>
                         </div>
                         {listener.group.description && (
-                          <p className="text-muted mb-1 small">
-                            {listener.group.description}
-                          </p>
+                          <p className="text-muted mb-1 small">{listener.group.description}</p>
                         )}
                         <small className="text-muted">
                           <i className="bi-person me-1" />
@@ -269,9 +273,7 @@ export const JoinGroup = () => {
                 <span className="visually-hidden">Joining...</span>
               </div>
               <p className="text-muted">Waiting for approval...</p>
-              <small className="text-muted">
-                The group admin needs to approve your request
-              </small>
+              <small className="text-muted">The group admin needs to approve your request</small>
             </div>
           )}
         </>
@@ -286,7 +288,7 @@ registerInternalPeersUI({
   component: JoinGroup,
   routes: [
     {
-      isMatch: (props, context) => context.path === "join-group",
+      isMatch: (_props, context) => context.path === "join-group",
       uiCategory: "screen",
       priority: 2,
     },

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

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { emit } from '@peers-app/peers-sdk';
+import { emit } from "@peers-app/peers-sdk";
+import type React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getNetworkViewerApi } from "./network-viewer-ipc";
 
 export interface IDiagnosticCheck {
   id: string;
   label: string;
   layer: string;
-  status: 'pass' | 'fail' | 'warn' | 'skip' | 'running';
+  status: "pass" | "fail" | "warn" | "skip" | "running";
   detail: string;
   suggestion?: string;
 }
@@ -14,32 +16,36 @@ interface Props {
   onBack: () => void;
 }
 
-const STATUS_ICON: Record<IDiagnosticCheck['status'], React.ReactNode> = {
+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" />
+    <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 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',
+  "Local System",
+  "Cloud Relay",
+  "Local Network",
+  "Protocol Support",
+  "WebRTC / TURN",
+  "Peer State",
+  "Active Connections",
 ];
 
 function groupByLayer(checks: IDiagnosticCheck[]): Record<string, IDiagnosticCheck[]> {
@@ -51,17 +57,22 @@ function groupByLayer(checks: IDiagnosticCheck[]): Record<string, IDiagnosticChe
   return groups;
 }
 
-function getSummary(checks: IDiagnosticCheck[]): { issues: number; warnings: number; passes: number; skips: number } {
+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,
+    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 lines: string[] = ["Connection Troubleshooter Report", "================================"];
   const groups = groupByLayer(checks);
 
   for (const layer of LAYER_ORDER) {
@@ -80,7 +91,7 @@ function formatReportForAI(checks: IDiagnosticCheck[]): string {
   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");
 }
 
 export function ConnectionTroubleshooter({ onBack }: Props) {
@@ -90,21 +101,24 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
   const hasRun = useRef(false);
 
-  const runDiagnostics = async () => {
+  const runDiagnostics = useCallback(async () => {
     setRunning(true);
     setDone(false);
     setChecks([]);
     setExpanded(new Set());
 
-    const api = (window as any).electronAPI?.networkViewer;
+    const api = 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;
@@ -113,51 +127,52 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
     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 => ({
+      const placeholders: IDiagnosticCheck[] = LAYER_ORDER.map((layer) => ({
         id: `placeholder-${layer}`,
         label: `Checking ${layer}…`,
         layer,
-        status: 'running',
-        detail: '',
+        status: "running",
+        detail: "",
       }));
       setChecks(placeholders);
 
-      const results: IDiagnosticCheck[] = await api.runDiagnostics();
+      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) {
+        if ((r.status === "fail" || r.status === "warn") && r.suggestion) {
           toExpand.add(r.id);
         }
       }
       setExpanded(toExpand);
-    } catch (err: any) {
-      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.',
-      }]);
+    } 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;
-      runDiagnostics();
+      void runDiagnostics();
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [runDiagnostics]);
 
   const toggleExpand = (id: string) => {
-    setExpanded(prev => {
+    setExpanded((prev) => {
       const next = new Set(prev);
       if (next.has(id)) next.delete(id);
       else next.add(id);
@@ -166,32 +181,37 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
   };
 
   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}`;
-    emit({ name: 'chat:openWithMessage', data: { message } }).catch(() => {
+    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: IDiagnosticCheck['status'] = !done
-    ? 'running'
+  const overallStatus: IDiagnosticCheck["status"] = !done
+    ? "running"
     : summary.issues > 0
-    ? 'fail'
-    : summary.warnings > 0
-    ? 'warn'
-    : 'pass';
+      ? "fail"
+      : summary.warnings > 0
+        ? "warn"
+        : "pass";
 
   return (
     <div className="container-fluid p-4">
@@ -207,14 +227,14 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
             Connection Troubleshooter
           </h4>
         </div>
-        <button
-          className="btn btn-sm btn-primary"
-          onClick={runDiagnostics}
-          disabled={running}
-        >
+        <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" />
+              <span
+                className="spinner-border spinner-border-sm me-1"
+                role="status"
+                aria-hidden="true"
+              />
               Running…
             </>
           ) : (
@@ -231,9 +251,11 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
         <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>
+            <small className="text-muted">
+              {completedCount} / {totalCount}
+            </small>
           </div>
-          <div className="progress" style={{ height: '6px' }}>
+          <div className="progress" style={{ height: "6px" }}>
             <div
               className="progress-bar progress-bar-striped progress-bar-animated"
               style={{ width: `${progressPct}%` }}
@@ -244,22 +266,39 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
 
       {/* 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={`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" />}
+            {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>}
-              {' '}
+              {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
+                {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}>
+          <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>
@@ -270,7 +309,7 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
       {running && placeholders.length > 0 && (
         <div className="card mb-3">
           <div className="card-body p-2">
-            {placeholders.map(p => (
+            {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>
@@ -281,19 +320,19 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
       )}
 
       {/* Results grouped by layer */}
-      {LAYER_ORDER.map(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';
+        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}>
@@ -303,24 +342,26 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
                 <strong className="small">{layer}</strong>
               </div>
               <span className={`badge ${STATUS_BADGE_CLASS[layerStatus]}`}>
-                {layerStatus === 'running' ? 'running' : layerStatus}
+                {layerStatus === "running" ? "running" : layerStatus}
               </span>
             </div>
             <div className="list-group list-group-flush">
-              {layerChecks.map(check => (
+              {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' }}
+                    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}
+                    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`} />
+                          <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>