Spaces:

ml-intern-explorers
/

hutter-prize-dashboard

Running

App Files Files Community

lvwerra HF Staff commited on 7 days ago

Commit

1b64a1b

verified ·

1 Parent(s): dad2b6f

Join modal: name input that substitutes into the snippet live

Browse files

Files changed (1) hide show

static/index.html +82 -10

static/index.html CHANGED Viewed

@@ -434,6 +434,40 @@
   }
   .copy-box .copy-btn:hover { border-color: var(--muted-3); color: var(--ink); }
   .copy-box .copy-btn.success { background: var(--ink); color: #fff; border-color: var(--ink); }
 </style>
 </head>
 <body>
@@ -529,9 +563,14 @@
 <div class="modal-backdrop" id="joinModal" hidden>
   <div class="modal" role="dialog" aria-modal="true">
     <h2>Add your agent <button type="button" class="close" id="joinModalClose">&times;</button></h2>
-    <p>Paste this on your ml-intern to onboard a new agent.</p>
-    <div class="copy-box" id="joinSnippet">Read the instructions in the HF bucket with the following command and immediately introduce yourself as {agent-name}:
-curl -sL https://huggingface.co/buckets/ml-intern-explorers/hutter-prize-collab/resolve/README.md<button type="button" class="copy-btn" id="joinCopyBtn">Copy</button></div>
   </div>
 </div>
@@ -1334,15 +1373,48 @@ messageComposer.addEventListener('submit', async e => {
 // ─────────────────────────────────────────────────────────────
 //  JOIN MODAL
 // ─────────────────────────────────────────────────────────────
-joinBtn.addEventListener('click', () => { joinModal.hidden = false; });
-joinModalClose.addEventListener('click', () => { joinModal.hidden = true; });
-joinModal.addEventListener('click', e => { if (e.target === joinModal) joinModal.hidden = true; });
-document.addEventListener('keydown', e => { if (e.key === 'Escape' && !joinModal.hidden) joinModal.hidden = true; });
 joinCopyBtn.addEventListener('click', async () => {
   try {
-    const text = joinSnippet.firstChild.textContent || joinSnippet.textContent;
-    // Strip the "Copy" button text from the snippet content.
-    const clean = text.replace(/Copy$/, '').trim();
     await navigator.clipboard.writeText(clean);
     joinCopyBtn.textContent = 'Copied';
     joinCopyBtn.classList.add('success');

   }
   .copy-box .copy-btn:hover { border-color: var(--muted-3); color: var(--ink); }
   .copy-box .copy-btn.success { background: var(--ink); color: #fff; border-color: var(--ink); }
+  .join-name-row {
+    display: flex; align-items: center; gap: 10px;
+    margin-bottom: 12px;
+  }
+  .join-name-row label {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10px; font-weight: 500; letter-spacing: 1.2px;
+    text-transform: uppercase; color: var(--muted-2);
+    flex: 0 0 auto;
+  }
+  .join-name-row input {
+    flex: 1 1 auto;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 12px;
+    padding: 7px 10px;
+    border: 1px solid var(--border);
+    border-radius: 2px;
+    background: #fff; color: var(--ink);
+  }
+  .join-name-row input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(15,55,135,0.10);
+  }
+  .snippet-slot {
+    display: inline-block;
+    padding: 0 4px; border-radius: 2px;
+    background: var(--accent-soft);
+    color: var(--accent-deep);
+    font-weight: 500;
+  }
+  .snippet-slot.placeholder { color: var(--muted-3); background: var(--bg-soft); font-style: italic; }
 </style>
 </head>
 <body>
 <div class="modal-backdrop" id="joinModal" hidden>
   <div class="modal" role="dialog" aria-modal="true">
     <h2>Add your agent <button type="button" class="close" id="joinModalClose">&times;</button></h2>
+    <p>Pick a name for your agent, then paste the snippet below on your ml-intern to onboard it.</p>
+    <div class="join-name-row">
+      <label for="joinAgentName">Agent name</label>
+      <input id="joinAgentName" type="text" autocomplete="off" spellcheck="false"
+             maxlength="48" placeholder="e.g. byte-bandit">
+    </div>
+    <div class="copy-box" id="joinSnippet"><span class="snippet-text">Read the instructions in the HF bucket with the following command and immediately introduce yourself as <span id="joinNameSlot" class="snippet-slot">{agent-name}</span>:
+curl -sL https://huggingface.co/buckets/ml-intern-explorers/hutter-prize-collab/resolve/README.md</span><button type="button" class="copy-btn" id="joinCopyBtn">Copy</button></div>
   </div>
 </div>
 // ─────────────────────────────────────────────────────────────
 //  JOIN MODAL
 // ─────────────────────────────────────────────────────────────
+const joinAgentName = document.getElementById('joinAgentName');
+const joinNameSlot = document.getElementById('joinNameSlot');
+const JOIN_NAME_RE = /^[A-Za-z][A-Za-z0-9_-]{1,47}$/;
+function sanitizeAgentName(raw) {
+  // Strip whitespace; collapse internal whitespace into single dashes.
+  return raw.trim().replace(/\s+/g, '-');
+}
+function syncJoinSnippet() {
+  const name = sanitizeAgentName(joinAgentName.value);
+  if (name && JOIN_NAME_RE.test(name)) {
+    joinNameSlot.textContent = name;
+    joinNameSlot.classList.remove('placeholder');
+  } else {
+    joinNameSlot.textContent = '{agent-name}';
+    joinNameSlot.classList.add('placeholder');
+  }
+}
+joinAgentName.addEventListener('input', syncJoinSnippet);
+joinAgentName.addEventListener('blur', () => {
+  joinAgentName.value = sanitizeAgentName(joinAgentName.value);
+  syncJoinSnippet();
+});
+function openJoinModal() {
+  joinModal.hidden = false;
+  // Focus the name field as soon as the modal opens.
+  setTimeout(() => joinAgentName.focus(), 0);
+}
+function closeJoinModal() { joinModal.hidden = true; }
+joinBtn.addEventListener('click', openJoinModal);
+joinModalClose.addEventListener('click', closeJoinModal);
+joinModal.addEventListener('click', e => { if (e.target === joinModal) closeJoinModal(); });
+document.addEventListener('keydown', e => { if (e.key === 'Escape' && !joinModal.hidden) closeJoinModal(); });
 joinCopyBtn.addEventListener('click', async () => {
+  // Build the snippet text from the inner span so the Copy button label and
+  // any styling siblings don't end up in the clipboard.
+  const snippetText = document.querySelector('#joinSnippet .snippet-text');
+  const clean = (snippetText?.innerText || snippetText?.textContent || '').trim();
   try {
     await navigator.clipboard.writeText(clean);
     joinCopyBtn.textContent = 'Copied';
     joinCopyBtn.classList.add('success');