add comment

src/components/atbrowser.ts

@@ -1,33 +1,38 @@
-import { describeRepo, listRecordsRaw, getRecordRaw, fetchLexicon, resolveHandle, getServiceInfo } from '../lib/api.js'
+import { describeRepo, listRecordsRaw, getRecordRaw, fetchLexicon, resolveHandle, getServiceInfo, resolvePds, getPlc } from '../lib/api.js'
 import { deleteRecord } from '../lib/auth.js'
+import { escapeHtml } from '../lib/utils.js'
 
 function extractRkey(uri: string): string {
   const parts = uri.split('/')
   return parts[parts.length - 1]
 }
 
-function formatDate(dateStr: string): string {
-  const date = new Date(dateStr)
-  return date.toLocaleDateString('ja-JP', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  })
-}
-
-function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-}
-
 async function renderServices(did: string, handle: string): Promise<string> {
-  const collections = await describeRepo(did)
+  const [collections, pds] = await Promise.all([
+    describeRepo(did),
+    resolvePds(did)
+  ])
+
+  // Server info section
+  const plcUrl = `${getPlc()}/${did}/log`
+  const serverHtml = `
+    <div class="server-info">
+      <h3>Server</h3>
+      <dl class="server-details">
+        <div class="server-row">
+          <dt>DID</dt>
+          <dd class="did-value"><a href="${plcUrl}" target="_blank" rel="noopener">${escapeHtml(did)}</a></dd>
+        </div>
+        <div class="server-row">
+          <dt>PDS</dt>
+          <dd class="pds-value"><a href="${escapeHtml(pds)}" target="_blank" rel="noopener">${escapeHtml(pds)}</a></dd>
+        </div>
+      </dl>
+    </div>
+  `
 
   if (collections.length === 0) {
-    return '<p class="no-data">No collections found</p>'
+    return serverHtml + '<p class="no-data">No collections found</p>'
   }
 
   // Group by service domain
@@ -57,6 +62,7 @@ async function renderServices(did: string, handle: string): Promise<string> {
   }).join('')
 
   return `
+    ${serverHtml}
     <div class="services-list">
       <h3>Services</h3>
       <ul class="service-list">${items}</ul>