commit 820fc8a354aa71e7f25382fd69559ed106757a07 · indexx.dev/plc-bench

+67 -44

src/components/BenchmarkTable.tsx

···

       26
       26
        
         const allSuccessfulAttempts = sortedResults.flatMap((r) =>

     

       27
       27
        
           r.attempts.filter((a) => a.status === "success")

     

       28
       28
        
         );

     

       29
       29
       -
         const overallAvg =

     

       30
       30
       -
           allSuccessfulAttempts.length > 0

     

       31
       31
       -
             ? allSuccessfulAttempts.reduce((sum, a) => sum + a.responseTime, 0) /

     

       32
       32
       -
               allSuccessfulAttempts.length

     

       33
       33
       -
             : 0;

     

       29
       29
       +
         const overallAvg = allSuccessfulAttempts.length > 0

     

       30
       30
       +
           ? allSuccessfulAttempts.reduce((sum, a) => sum + a.responseTime, 0) /

     

       31
       31
       +
             allSuccessfulAttempts.length

     

       32
       32
       +
           : 0;

     

       34
       33
        
       

     

       35
       34
        
         return (

     

       36
       35
        
           <div className="space-y-4">

     
···

       53
       52
        
                   <TableRow className="bg-muted/50">

     

       54
       53
        
                     <TableHead className="font-semibold">URL</TableHead>

     

       55
       54
        
                     <TableHead className="font-semibold">Implementation</TableHead>

     

       56
       56
       -
                     <TableHead className="font-semibold text-center">Attempt 1</TableHead>

     

       57
       57
       -
                     <TableHead className="font-semibold text-center">Attempt 2</TableHead>

     

       58
       58
       -
                     <TableHead className="font-semibold text-center">Attempt 3</TableHead>

     

       59
       59
       -
                     <TableHead className="font-semibold text-center">Average</TableHead>

     

       55
       55
       +
                     <TableHead className="font-semibold text-center">

     

       56
       56
       +
                       #1

     

       57
       57
       +
                     </TableHead>

     

       58
       58
       +
                     <TableHead className="font-semibold text-center">

     

       59
       59
       +
                       #2

     

       60
       60
       +
                     </TableHead>

     

       61
       61
       +
                     <TableHead className="font-semibold text-center">

     

       62
       62
       +
                       #3

     

       63
       63
       +
                     </TableHead>

     

       64
       64
       +
                     <TableHead className="font-semibold text-center">

     

       65
       65
       +
                       #4

     

       66
       66
       +
                     </TableHead>

     

       67
       67
       +
                     <TableHead className="font-semibold text-center">

     

       68
       68
       +
                       #5

     

       69
       69
       +
                     </TableHead>

     

       70
       70
       +
                     <TableHead className="font-semibold text-center">

     

       71
       71
       +
                       Average

     

       72
       72
       +
                     </TableHead>

     

       60
       73
        
                     <TableHead className="font-semibold">Status</TableHead>

     

       61
       74
        
                   </TableRow>

     

       62
       75
        
                 </TableHeader>

     

       63
       76
        
                 <TableBody>

     

       64
       77
        
                   {sortedResults.map((result, index) => (

     

       65
       65
       -
                     <TableRow key={index} className="hover:bg-muted/30 transition-colors">

     

       78
       78
       +
                     <TableRow

     

       79
       79
       +
                       key={index}

     

       80
       80
       +
                       className="hover:bg-muted/30 transition-colors"

     

       81
       81
       +
                     >

     

       66
       82
        
                       <TableCell className="font-mono text-sm text-muted-foreground">

     

       67
       83
        
                         {result.mirrorUrl}

     

       68
       84
        
                       </TableCell>

     
···

       70
       86
        
                         {result.implementation}

     

       71
       87
        
                       </TableCell>

     

       72
       88
        
                       {result.attempts.map((attempt, attemptIndex) => (

     

       73
       73
       -
                         <TableCell key={attemptIndex} className="text-center font-mono text-sm">

     

       74
       74
       -
                           {attempt.status === "success" ? (

     

       75
       75
       -
                             <span className="text-foreground">

     

       76
       76
       -
                               {attempt.responseTime.toFixed(0)}ms

     

       77
       77
       -
                             </span>

     

       78
       78
       -
                           ) : (

     

       79
       79
       -
                             <span className="text-destructive">

     

       80
       80
       -
                               <XCircle className="w-4 h-4 inline" />

     

       81
       81
       -
                             </span>

     

       82
       82
       -
                           )}

     

       89
       89
       +
                         <TableCell

     

       90
       90
       +
                           key={attemptIndex}

     

       91
       91
       +
                           className="text-center font-mono text-sm"

     

       92
       92
       +
                         >

     

       93
       93
       +
                           {attempt.status === "success"

     

       94
       94
       +
                             ? (

     

       95
       95
       +
                               <span className="text-foreground">

     

       96
       96
       +
                                 {attempt.responseTime.toFixed(0)}ms

     

       97
       97
       +
                               </span>

     

       98
       98
       +
                             )

     

       99
       99
       +
                             : (

     

       100
       100
       +
                               <span className="text-destructive">

     

       101
       101
       +
                                 <XCircle className="w-4 h-4 inline" />

     

       102
       102
       +
                               </span>

     

       103
       103
       +
                             )}

     

       83
       104
        
                         </TableCell>

     

       84
       105
        
                       ))}

     

       85
       106
        
                       <TableCell className="text-center font-mono text-sm">

     

       86
       86
       -
                         {result.status === "success" ? (

     

       87
       87
       -
                           <span className="font-bold text-primary text-base">

     

       88
       88
       -
                             {result.avgResponseTime.toFixed(0)}ms

     

       89
       89
       -
                           </span>

     

       90
       90
       -
                         ) : (

     

       91
       91
       -
                           <span className="text-muted-foreground">—</span>

     

       92
       92
       -
                         )}

     

       107
       107
       +
                         {result.status === "success"

     

       108
       108
       +
                           ? (

     

       109
       109
       +
                             <span className="font-bold text-primary text-base">

     

       110
       110
       +
                               {result.avgResponseTime.toFixed(0)}ms

     

       111
       111
       +
                             </span>

     

       112
       112
       +
                           )

     

       113
       113
       +
                           : <span className="text-muted-foreground">—</span>}

     

       93
       114
        
                       </TableCell>

     

       94
       115
        
                       <TableCell>

     

       95
       95
       -
                         {result.status === "success" ? (

     

       96
       96
       -
                           <Badge

     

       97
       97
       -
                             variant="outline"

     

       98
       98
       -
                             className="bg-success/10 text-success border-success/20 gap-1"

     

       99
       99
       -
                           >

     

       100
       100
       -
                             <CheckCircle2 className="w-3 h-3" />

     

       101
       101
       -
                             Success

     

       102
       102
       -
                           </Badge>

     

       103
       103
       -
                         ) : (

     

       104
       104
       -
                           <Badge

     

       105
       105
       -
                             variant="outline"

     

       106
       106
       -
                             className="bg-destructive/10 text-destructive border-destructive/20 gap-1"

     

       107
       107
       -
                           >

     

       108
       108
       -
                             <XCircle className="w-3 h-3" />

     

       109
       109
       -
                             Error

     

       110
       110
       -
                           </Badge>

     

       111
       111
       -
                         )}

     

       116
       116
       +
                         {result.status === "success"

     

       117
       117
       +
                           ? (

     

       118
       118
       +
                             <Badge

     

       119
       119
       +
                               variant="outline"

     

       120
       120
       +
                               className="bg-success/10 text-success border-success/20 gap-1"

     

       121
       121
       +
                             >

     

       122
       122
       +
                               <CheckCircle2 className="w-3 h-3" />

     

       123
       123
       +
                               Success

     

       124
       124
       +
                             </Badge>

     

       125
       125
       +
                           )

     

       126
       126
       +
                           : (

     

       127
       127
       +
                             <Badge

     

       128
       128
       +
                               variant="outline"

     

       129
       129
       +
                               className="bg-destructive/10 text-destructive border-destructive/20 gap-1"

     

       130
       130
       +
                             >

     

       131
       131
       +
                               <XCircle className="w-3 h-3" />

     

       132
       132
       +
                               Error

     

       133
       133
       +
                             </Badge>

     

       134
       134
       +
                           )}

     

       112
       135
        
                       </TableCell>

     

       113
       136
        
                     </TableRow>

     

       114
       137
        
                   ))}

+42 -21

src/pages/Index.tsx

···

       16
       16
        
         const resolveHandle = async (handle: string): Promise<string | null> => {

     

       17
       17
        
           try {

     

       18
       18
        
             const response = await fetch(

     

       19
       19
       -
               `https://quickdid.smokesignal.tools/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handle)}`

     

       19
       19
       +
               `https://quickdid.smokesignal.tools/xrpc/com.atproto.identity.resolveHandle?handle=${

     

       20
       20
       +
                 encodeURIComponent(handle)

     

       21
       21
       +
               }`,

     

       20
       22
        
             );

     

       21
       23
        
             const data = await response.json();

     

       22
       22
       -
             

     

       24
       24
       +
       

     

       23
       25
        
             if (data.error) {

     

       24
       24
       -
               toast.error(`Unable to resolve handle: ${data.message || "Invalid handle"}`);

     

       26
       26
       +
               toast.error(

     

       27
       27
       +
                 `Unable to resolve handle: ${data.message || "Invalid handle"}`,

     

       28
       28
       +
               );

     

       25
       29
        
               return null;

     

       26
       30
        
             }

     

       27
       27
       -
             

     

       31
       31
       +
       

     

       28
       32
        
             return data.did;

     

       29
       33
        
           } catch (error) {

     

       30
       34
        
             toast.error("Failed to resolve handle");

     
···

       44
       48
        
       

     

       45
       49
        
           try {

     

       46
       50
        
             let resolvedDid = did.trim();

     

       47
       47
       -
             

     

       51
       51
       +
       

     

       48
       52
        
             // If input doesn't start with "did:plc", treat it as a handle

     

       49
       53
        
             if (!resolvedDid.startsWith("did:plc")) {

     

       50
       54
        
               const resolved = await resolveHandle(resolvedDid);

     
···

       58
       62
        
       

     

       59
       63
        
             const benchmarkResults = await benchmarkAllMirrors(mirrors, resolvedDid);

     

       60
       64
        
             setResults(benchmarkResults);

     

       61
       61
       -
             

     

       62
       62
       -
             const successCount = benchmarkResults.filter(r => r.status === "success").length;

     

       63
       63
       -
             toast.success(`Benchmark complete! ${successCount}/${benchmarkResults.length} mirrors responded`);

     

       65
       65
       +
       

     

       66
       66
       +
             const successCount = benchmarkResults.filter((r) =>

     

       67
       67
       +
               r.status === "success"

     

       68
       68
       +
             ).length;

     

       69
       69
       +
             toast.success(

     

       70
       70
       +
               `Benchmark complete! ${successCount}/${benchmarkResults.length} mirrors responded`,

     

       71
       71
       +
             );

     

       64
       72
        
           } catch (error) {

     

       65
       73
        
             toast.error("Failed to run benchmark");

     

       66
       74
        
             console.error(error);

     
···

       85
       93
        
                   <h1 className="text-4xl font-bold">PLC Mirror Benchmark</h1>

     

       86
       94
        
                 </div>

     

       87
       95
        
                 <p className="text-muted-foreground text-lg max-w-2xl mx-auto">

     

       88
       88
       -
                   Test and compare response times across different PLC.directory mirrors

     

       96
       96
       +
                   Test and compare response times across different PLC.directory

     

       97
       97
       +
                   mirrors

     

       89
       98
        
                 </p>

     

       90
       99
        
               </header>

     

       91
       100
        
       

     
···

       93
       102
        
               <div className="bg-card border border-border rounded-lg p-6 shadow-sm">

     

       94
       103
        
                 <div className="space-y-4">

     

       95
       104
        
                   <div>

     

       96
       96
       -
                     <label htmlFor="did-input" className="block text-sm font-medium mb-2">

     

       105
       105
       +
                     <label

     

       106
       106
       +
                       htmlFor="did-input"

     

       107
       107
       +
                       className="block text-sm font-medium mb-2"

     

       108
       108
       +
                     >

     

       97
       109
        
                       ATProto DID or Handle

     

       98
       110
        
                     </label>

     

       99
       111
        
                     <div className="flex gap-3">

     
···

       118
       130
        
                     </div>

     

       119
       131
        
                   </div>

     

       120
       132
        
                   <div className="text-sm text-muted-foreground">

     

       121
       121
       -
                     Testing {mirrors.length} mirrors with 3 attempts each

     

       133
       133
       +
                     Testing {mirrors.length} mirrors with 5 attempts each

     

       122
       134
        
                   </div>

     

       123
       135
        
                 </div>

     

       124
       136
        
               </div>

     
···

       127
       139
        
               {(results.length > 0 || loading) && (

     

       128
       140
        
                 <div className="space-y-4">

     

       129
       141
        
                   <h2 className="text-2xl font-semibold">Results</h2>

     

       130
       130
       -
                   {loading ? (

     

       131
       131
       -
                     <div className="bg-card border border-border rounded-lg p-12 text-center">

     

       132
       132
       -
                       <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-4"></div>

     

       133
       133
       -
                       <p className="text-muted-foreground">Benchmarking mirrors...</p>

     

       134
       134
       -
                     </div>

     

       135
       135
       -
                   ) : (

     

       136
       136
       -
                     <BenchmarkTable results={results} />

     

       137
       137
       -
                   )}

     

       142
       142
       +
                   {loading

     

       143
       143
       +
                     ? (

     

       144
       144
       +
                       <div className="bg-card border border-border rounded-lg p-12 text-center">

     

       145
       145
       +
                         <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-4">

     

       146
       146
       +
                         </div>

     

       147
       147
       +
                         <p className="text-muted-foreground">

     

       148
       148
       +
                           Benchmarking mirrors...

     

       149
       149
       +
                         </p>

     

       150
       150
       +
                       </div>

     

       151
       151
       +
                     )

     

       152
       152
       +
                     : <BenchmarkTable results={results} />}

     

       138
       153
        
                 </div>

     

       139
       154
        
               )}

     

       140
       155
        
       

     
···

       143
       158
        
                 <div className="bg-muted/30 border border-border rounded-lg p-6">

     

       144
       159
        
                   <h3 className="font-semibold mb-2">How to use:</h3>

     

       145
       160
        
                   <ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground">

     

       146
       146
       -
                     <li>Enter an ATProto DID or handle (e.g., did:plc:z72i7hdynmk6r22z27h6tvur or handle.bsky.social)</li>

     

       161
       161
       +
                     <li>

     

       162
       162
       +
                       Enter an ATProto DID or handle (e.g.,

     

       163
       163
       +
                       did:plc:z72i7hdynmk6r22z27h6tvur or handle.bsky.social)

     

       164
       164
       +
                     </li>

     

       147
       165
        
                     <li>Click "Run Benchmark" or press Enter</li>

     

       148
       166
        
                     <li>View response times and status for each mirror</li>

     

       149
       167
        
                   </ol>

     

       150
       168
        
                   <div className="mt-4 pt-4 border-t border-border">

     

       151
       169
        
                     <p className="text-sm text-muted-foreground">

     

       152
       152
       -
                       Mirrors can be configured in <code className="bg-background px-2 py-1 rounded text-mono">src/config/mirrors.ts</code>

     

       170
       170
       +
                       Mirrors can be configured in{" "}

     

       171
       171
       +
                       <code className="bg-background px-2 py-1 rounded text-mono">

     

       172
       172
       +
                         src/config/mirrors.ts

     

       173
       173
       +
                       </code>

     

       153
       174
        
                     </p>

     

       154
       175
        
                   </div>

     

       155
       176
        
                 </div>

+82 -37

src/utils/benchmark.ts

···

       1
       1
        
       import { Mirror } from "@/config/mirrors";

     

       2
       2
       -
       import { BenchmarkResult, BenchmarkAttempt } from "@/types/benchmark";

     

       2
       2
       +
       import { BenchmarkAttempt, BenchmarkResult } from "@/types/benchmark";

     

       3
       3
        
       

     

       4
       4
       -
       const ATTEMPTS_PER_MIRROR = 3;

     

       4
       4
       +
       const ATTEMPTS_PER_MIRROR = 5;

     

       5
       5
        
       

     

       6
       6
        
       const singleAttempt = async (

     

       7
       7
        
         url: string,

     

       8
       8
       -
         did: string

     

       8
       8
       +
         did: string,

     

       9
       9
        
       ): Promise<BenchmarkAttempt> => {

     

       10
       10
        
         const fullUrl = `${url}/${did}`;

     

       11
       11
       -
         const startTime = performance.now();

     

       11
       11
       +
         const uniqueUrl = `${fullUrl}?i=${Date.now()}`;

     

       12
       12
        
       

     

       13
       13
       -
         try {

     

       14
       14
       -
           const response = await fetch(fullUrl);

     

       15
       15
       -
           const endTime = performance.now();

     

       16
       16
       -
           const responseTime = endTime - startTime;

     

       13
       13
       +
         return new Promise((resolve) => {

     

       14
       14
       +
           const observer = new PerformanceObserver((list) => {

     

       15
       15
       +
             const entries = list.getEntries();

     

       16
       16
       +
             const entry = entries.find(

     

       17
       17
       +
               (e) => e.entryType === "resource" && e.name === uniqueUrl,

     

       18
       18
       +
             ) as PerformanceResourceTiming | undefined;

     

       17
       19
        
       

     

       18
       18
       -
           if (!response.ok) {

     

       19
       19
       -
             return {

     

       20
       20
       -
               responseTime,

     

       21
       21
       -
               status: "error",

     

       22
       22
       -
               statusCode: response.status,

     

       23
       23
       -
               error: `HTTP ${response.status}`,

     

       24
       24
       -
             };

     

       25
       25
       -
           }

     

       20
       20
       +
             if (entry) {

     

       21
       21
       +
               observer.disconnect();

     

       26
       22
        
       

     

       27
       27
       -
           await response.json(); // Consume the response

     

       23
       23
       +
               // Use duration for total time, or calculate from start/response

     

       24
       24
       +
               const responseTime = entry.duration ||

     

       25
       25
       +
                 (entry.responseEnd - entry.startTime);

     

       26
       26
       +
       

     

       27
       27
       +
               resolve({

     

       28
       28
       +
                 responseTime,

     

       29
       29
       +
                 status: "success",

     

       30
       30
       +
                 statusCode: 200, // PerformanceResourceTiming doesn't provide status code

     

       31
       31
       +
               });

     

       32
       32
       +
             }

     

       33
       33
       +
           });

     

       34
       34
       +
       

     

       35
       35
       +
           observer.observe({ entryTypes: ["resource"] });

     

       36
       36
       +
       

     

       37
       37
       +
           // Start the fetch

     

       38
       38
       +
           fetch(uniqueUrl, {

     

       39
       39
       +
             cache: "no-store",

     

       40
       40
       +
           })

     

       41
       41
       +
             .then(async (response) => {

     

       42
       42
       +
               if (!response.ok) {

     

       43
       43
       +
                 observer.disconnect();

     

       44
       44
       +
                 resolve({

     

       45
       45
       +
                   responseTime: 0,

     

       46
       46
       +
                   status: "error",

     

       47
       47
       +
                   statusCode: response.status,

     

       48
       48
       +
                   error: `HTTP ${response.status}`,

     

       49
       49
       +
                 });

     

       50
       50
       +
                 return;

     

       51
       51
       +
               }

     

       52
       52
       +
       

     

       53
       53
       +
               await response.json(); // Consume the response

     

       28
       54
        
       

     

       29
       29
       -
           return {

     

       30
       30
       -
             responseTime,

     

       31
       31
       -
             status: "success",

     

       32
       32
       -
             statusCode: response.status,

     

       33
       33
       -
           };

     

       34
       34
       -
         } catch (error) {

     

       35
       35
       -
           const endTime = performance.now();

     

       36
       36
       -
           return {

     

       37
       37
       -
             responseTime: endTime - startTime,

     

       38
       38
       -
             status: "error",

     

       39
       39
       -
             error: error instanceof Error ? error.message : "Unknown error",

     

       40
       40
       -
           };

     

       41
       41
       -
         }

     

       55
       55
       +
               // Wait briefly for PerformanceObserver to capture the entry

     

       56
       56
       +
               setTimeout(() => {

     

       57
       57
       +
                 const entries = performance.getEntriesByName(uniqueUrl, "resource");

     

       58
       58
       +
                 if (entries.length > 0) {

     

       59
       59
       +
                   const entry = entries[0] as PerformanceResourceTiming;

     

       60
       60
       +
                   const responseTime = entry.duration ||

     

       61
       61
       +
                     (entry.responseEnd - entry.startTime);

     

       62
       62
       +
                   observer.disconnect();

     

       63
       63
       +
                   resolve({

     

       64
       64
       +
                     responseTime,

     

       65
       65
       +
                     status: "success",

     

       66
       66
       +
                     statusCode: response.status,

     

       67
       67
       +
                   });

     

       68
       68
       +
                 } else {

     

       69
       69
       +
                   // Fallback if entry not found

     

       70
       70
       +
                   observer.disconnect();

     

       71
       71
       +
                   resolve({

     

       72
       72
       +
                     responseTime: 0,

     

       73
       73
       +
                     status: "error",

     

       74
       74
       +
                     error: "Performance entry not found",

     

       75
       75
       +
                   });

     

       76
       76
       +
                 }

     

       77
       77
       +
               }, 100);

     

       78
       78
       +
             })

     

       79
       79
       +
             .catch((error) => {

     

       80
       80
       +
               observer.disconnect();

     

       81
       81
       +
               resolve({

     

       82
       82
       +
                 responseTime: 0,

     

       83
       83
       +
                 status: "error",

     

       84
       84
       +
                 error: error instanceof Error ? error.message : "Unknown error",

     

       85
       85
       +
               });

     

       86
       86
       +
             });

     

       87
       87
       +
         });

     

       42
       88
        
       };

     

       43
       89
        
       

     

       44
       90
        
       export const benchmarkMirror = async (

     

       45
       91
        
         mirror: Mirror,

     

       46
       46
       -
         did: string

     

       92
       92
       +
         did: string,

     

       47
       93
        
       ): Promise<BenchmarkResult> => {

     

       48
       94
        
         const attempts: BenchmarkAttempt[] = [];

     

       49
       95
        
       

     
···

       53
       99
        
         }

     

       54
       100
        
       

     

       55
       101
        
         const successfulAttempts = attempts.filter((a) => a.status === "success");

     

       56
       56
       -
         const avgResponseTime =

     

       57
       57
       -
           successfulAttempts.length > 0

     

       58
       58
       -
             ? successfulAttempts.reduce((sum, a) => sum + a.responseTime, 0) /

     

       59
       59
       -
               successfulAttempts.length

     

       60
       60
       -
             : 0;

     

       102
       102
       +
         const avgResponseTime = successfulAttempts.length > 0

     

       103
       103
       +
           ? successfulAttempts.reduce((sum, a) => sum + a.responseTime, 0) /

     

       104
       104
       +
             successfulAttempts.length

     

       105
       105
       +
           : 0;

     

       61
       106
        
       

     

       62
       107
        
         return {

     

       63
       108
        
           mirrorUrl: mirror.url,

     
···

       70
       115
        
       

     

       71
       116
        
       export const benchmarkAllMirrors = async (

     

       72
       117
        
         mirrors: Mirror[],

     

       73
       73
       -
         did: string

     

       118
       118
       +
         did: string,

     

       74
       119
        
       ): Promise<BenchmarkResult[]> => {

     

       75
       120
        
         const promises = mirrors.map((mirror) => benchmarkMirror(mirror, did));

     

       76
       121
        
         return Promise.all(promises);