Polish lab service links as action pills

src/components/labs/LabContent.tsx

@@ -53,6 +53,14 @@ const lab1NetronToken = "<div data-lab1-netron-panel></div>";
 const tokenizerPlaygroundToken = "<div data-tokenizer-playground></div>";
 const serviceTokenPattern =
   /\{\{service-(url|address):([a-z0-9-]+)(?::([^}]+))?\}\}/g;
+const serviceLabels: Record<string, string> = {
+  "chunkviz": "ChunkViz",
+  "embedding-atlas": "Embedding Atlas",
+  "open-webui": "Open WebUI",
+  "promptfoo": "Promptfoo",
+  "ssh": "SSH",
+  "unsloth": "Unsloth",
+};
 
 function looksLikeCliCommand(commandText: string, className: string) {
   if (cliLanguagePattern.test(className)) return true;
@@ -380,10 +388,25 @@ function replaceServiceTokens(
 
       if (tokenType === "url") {
         const link = document.createElement("a");
+        const serviceLabel = serviceLabels[serviceId] ?? replacement;
+        let visibleLabel = serviceLabel;
+
+        try {
+          const resolvedUrl = new URL(replacement);
+          if (resolvedUrl.port) {
+            visibleLabel = `${serviceLabel} on port ${resolvedUrl.port}`;
+          }
+        } catch {
+          visibleLabel = serviceLabel;
+        }
+
+        link.className = "lab-service-pill";
+        link.dataset.serviceId = serviceId;
         link.href = replacement;
         link.rel = "noreferrer";
         link.target = "_blank";
-        link.textContent = replacement;
+        link.title = replacement;
+        link.textContent = visibleLabel;
         fragment.append(link);
       } else {
         fragment.append(replacement);