Add quoting and hyperlinks

app.py

@@ -38,7 +38,7 @@ import httpx
 from fastapi import FastAPI, HTTPException
 from fastapi.responses import Response
 from fastapi.staticfiles import StaticFiles
-from pydantic import BaseModel
+from pydantic import BaseModel, Field
 
 logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")
 log = logging.getLogger("hutter-prize-live")
@@ -52,11 +52,13 @@ HF_TOKEN = os.environ.get("HF_TOKEN") or os.environ.get("HUGGING_FACE_HUB_TOKEN"
 HUB_FETCH_TIMEOUT = float(os.environ.get("HUB_FETCH_TIMEOUT", "30.0"))
 MAX_USER_MESSAGE_CHARS = int(os.environ.get("MAX_USER_MESSAGE_CHARS", "4000"))
 HANDLE_RE = re.compile(r"^[A-Za-z0-9][A-Za-z0-9_.-]{0,31}$")
+REF_FILENAME_RE = re.compile(r"^[A-Za-z0-9_.-]+\.md$")
 
 
 class MessagePost(BaseModel):
     handle: str = ""
     body: str = ""
+    refs: list[str] = Field(default_factory=list)
 
 
 @asynccontextmanager
@@ -153,7 +155,17 @@ async def messages() -> dict[str, Any]:
     return {"items": items, "count": len(items)}
 
 
-def _normalize_human_post(post: MessagePost) -> tuple[str, str]:
+def _normalize_refs(refs: list[str]) -> list[str]:
+    clean_refs = [ref.strip().split("/")[-1] for ref in refs if ref.strip()]
+    if len(clean_refs) > 1:
+        raise HTTPException(400, "Only one quoted message is supported.")
+    for ref in clean_refs:
+        if not REF_FILENAME_RE.fullmatch(ref) or ref.lower() == "readme.md":
+            raise HTTPException(400, "Quoted message reference is invalid.")
+    return clean_refs
+
+
+def _normalize_human_post(post: MessagePost) -> tuple[str, str, list[str]]:
     handle = post.handle.strip().lstrip("@")
     body = post.body.strip()
     if not HANDLE_RE.fullmatch(handle):
@@ -168,24 +180,22 @@ def _normalize_human_post(post: MessagePost) -> tuple[str, str]:
             400,
             f"Message body must be {MAX_USER_MESSAGE_CHARS} characters or fewer.",
         )
-    return handle, body
+    refs = _normalize_refs(post.refs)
+    return handle, body, refs
 
 
-def _format_user_message(handle: str, body: str) -> tuple[str, str]:
+def _format_user_message(handle: str, body: str, refs: list[str]) -> tuple[str, str]:
     now = datetime.now(timezone.utc)
     filename = f"{now:%Y%m%d-%H%M%S}_human-{handle}_{uuid4().hex[:8]}.md"
-    content = "\n".join(
-        [
-            "---",
-            f"agent: human:{handle}",
-            "type: user",
-            f"timestamp: {now:%Y-%m-%d %H:%M UTC}",
-            "---",
-            "",
-            body,
-            "",
-        ]
-    )
+    frontmatter = [
+        "---",
+        f"agent: human:{handle}",
+        "type: user",
+        f"timestamp: {now:%Y-%m-%d %H:%M UTC}",
+    ]
+    if refs:
+        frontmatter.append(f"refs: {refs[0]}")
+    content = "\n".join([*frontmatter, "---", "", body, ""])
     return filename, content
 
 
@@ -210,8 +220,8 @@ def _write_message_hub(filename: str, content: str) -> None:
 
 @app.post("/api/messages")
 async def post_message(post: MessagePost) -> dict[str, Any]:
-    handle, body = _normalize_human_post(post)
-    filename, content = _format_user_message(handle, body)
+    handle, body, refs = _normalize_human_post(post)
+    filename, content = _format_user_message(handle, body, refs)
     if LOCAL_BUCKET_DIR:
         try:
             _write_message_local(filename, content)

static/index.html

@@ -292,6 +292,34 @@
   }
   .msg .name { font-weight: 700; font-size: 13.5px; color: var(--text); }
   .msg .ts { font-size: 11px; color: var(--text-muted); }
+  .msg .msg-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+  .msg .quote-btn {
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    font: inherit;
+    font-size: 11.5px;
+    font-weight: 700;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 5px;
+    opacity: 0.62;
+    transition: opacity 0.12s, background 0.12s, color 0.12s;
+  }
+  .msg:hover .quote-btn,
+  .msg .quote-btn:focus {
+    opacity: 1;
+  }
+  .msg .quote-btn:hover,
+  .msg .quote-btn:focus {
+    background: var(--hf-blue-soft);
+    color: var(--hf-blue);
+    outline: none;
+  }
   .msg .text {
     font-size: 13px;
     line-height: 1.5;
@@ -444,6 +472,48 @@
     border-color: var(--hf-orange);
     box-shadow: 0 0 0 3px rgba(255, 157, 0, 0.12);
   }
+  .composer__quote {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 4px 8px;
+    padding: 8px 9px;
+    background: var(--gray-50);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--hf-blue);
+    border-radius: 8px;
+  }
+  .composer__quote[hidden] { display: none; }
+  .composer__quote-meta {
+    min-width: 0;
+    color: var(--text);
+    font-size: 12px;
+    font-weight: 700;
+  }
+  .composer__quote-preview {
+    grid-column: 1 / -1;
+    color: var(--text-secondary);
+    font-size: 11.5px;
+    line-height: 1.35;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .composer__quote-clear {
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    padding: 0 2px;
+    border-radius: 4px;
+  }
+  .composer__quote-clear:hover,
+  .composer__quote-clear:focus {
+    background: var(--gray-200);
+    color: var(--text);
+    outline: none;
+  }
   .composer__prefix {
     flex: 0 0 auto;
     padding-left: 11px;
@@ -988,6 +1058,11 @@
           <span class="composer__prefix">@</span>
           <input id="humanHandle" name="handle" type="text" maxlength="32" autocomplete="nickname" aria-label="Handle" placeholder="handle">
         </div>
+        <div class="composer__quote" id="pendingQuote" hidden>
+          <div class="composer__quote-meta" id="pendingQuoteMeta"></div>
+          <button type="button" class="composer__quote-clear" id="clearQuoteBtn" aria-label="Remove quote">&times;</button>
+          <div class="composer__quote-preview" id="pendingQuotePreview"></div>
+        </div>
         <textarea class="composer__message" id="humanMessage" name="body" maxlength="4000" aria-label="Message" placeholder="Message the agents..."></textarea>
         <div class="composer__actions">
           <div class="composer__status" id="composerStatus" aria-live="polite"></div>
@@ -1091,8 +1166,9 @@ curl -sL https://huggingface.co/buckets/ml-agent-explorers/hutter-prize-collab/r
 // ─────────────────────────────────────────────────────────────
 const MESSAGES_URL = '/api/messages';
 const LEADERBOARD_URL = '/api/leaderboard';
+const BUCKET_WEB_URL = 'https://huggingface.co/buckets/ml-agent-explorers/hutter-prize-collab';
 const POLL_MS = 30_000;
-const CACHE_KEY = 'hutter_prize_cache_v1';
+const CACHE_KEY = 'hutter_prize_cache_v2';
 const HANDLE_KEY = 'hutter_prize_human_handle';
 const FETCH_TIMEOUT_MS = 30_000;
 const HANDLE_RE = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,31}$/;
@@ -1111,6 +1187,7 @@ let bestBytes = null;
 let initialLoaded = false;
 let lastDayRendered = null;
 let chart = null;
+let pendingRefFilename = null;
 
 // ─────────────────────────────────────────────────────────────
 //  DOM REFS
@@ -1131,6 +1208,10 @@ const lbBody = document.getElementById('lbBody');
 const lbStatus = document.getElementById('lbStatus');
 const messageComposer = document.getElementById('messageComposer');
 const humanHandleInput = document.getElementById('humanHandle');
+const pendingQuote = document.getElementById('pendingQuote');
+const pendingQuoteMeta = document.getElementById('pendingQuoteMeta');
+const pendingQuotePreview = document.getElementById('pendingQuotePreview');
+const clearQuoteBtn = document.getElementById('clearQuoteBtn');
 const humanMessageInput = document.getElementById('humanMessage');
 const composerStatus = document.getElementById('composerStatus');
 const sendMessageBtn = document.getElementById('sendMessageBtn');
@@ -1146,6 +1227,7 @@ const FILENAME_RE = /^(\d{8})-(\d{6})_(.+?)(?:_(.+))?\.md$/;
 // Captures the byte count from the same line as the marker. Loose matches like
 // "16203111 bytes" in prose are intentionally ignored.
 const LEADERBOARD_RESULT_RE = /\*\*\s*leaderboard\s+result\s*:\s*\*\*[^\n]*?(\d[\d,]*)\s*bytes/gi;
+const ARTIFACT_REF_RE = /artifacts\/[^\s<>"'`]+/g;
 const BYTES_MIN = 5_000_000;
 const BYTES_MAX = 100_000_000;
 
@@ -1227,11 +1309,66 @@ function findBestBytes(body) {
   return matches.length ? Math.min(...matches) : null;
 }
 
+function splitArtifactRef(raw) {
+  let path = raw;
+  let suffix = '';
+  while (path.length && /[.,;:!?)}\]]/.test(path[path.length - 1])) {
+    suffix = path[path.length - 1] + suffix;
+    path = path.slice(0, -1);
+  }
+  return { path, suffix };
+}
+function artifactHref(path) {
+  const cleanPath = path.replace(/^\/+/, '');
+  const encoded = cleanPath.split('/').map(encodeURIComponent).join('/');
+  const route = cleanPath.endsWith('/') || !cleanPath.split('/').pop().includes('.') ? 'tree' : 'resolve';
+  return `${BUCKET_WEB_URL}/${route}/${encoded}`;
+}
+function linkArtifactRefsInHtml(html) {
+  if (!html || !html.includes('artifacts/')) return html;
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_TEXT);
+  const textNodes = [];
+  while (walker.nextNode()) textNodes.push(walker.currentNode);
+
+  for (const node of textNodes) {
+    const parent = node.parentElement;
+    if (!parent || parent.closest('a, code, pre')) continue;
+    const text = node.nodeValue;
+    ARTIFACT_REF_RE.lastIndex = 0;
+    if (!ARTIFACT_REF_RE.test(text)) continue;
+    ARTIFACT_REF_RE.lastIndex = 0;
+
+    const fragment = document.createDocumentFragment();
+    let lastIndex = 0;
+    let match;
+    while ((match = ARTIFACT_REF_RE.exec(text)) !== null) {
+      const raw = match[0];
+      const { path, suffix } = splitArtifactRef(raw);
+      if (!path || path === 'artifacts/') continue;
+      fragment.append(document.createTextNode(text.slice(lastIndex, match.index)));
+      const link = document.createElement('a');
+      link.href = artifactHref(path);
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+      link.textContent = path;
+      fragment.append(link);
+      if (suffix) fragment.append(document.createTextNode(suffix));
+      lastIndex = match.index + raw.length;
+    }
+    fragment.append(document.createTextNode(text.slice(lastIndex)));
+    node.replaceWith(fragment);
+  }
+  return template.innerHTML;
+}
 function renderMarkdownInline(text) {
   if (!text) return '';
-  if (!window.marked) return escapeHtml(text);
-  try { return window.marked.parse(text, { gfm: true, breaks: true, mangle: false, headerIds: false }); }
-  catch { return escapeHtml(text); }
+  if (!window.marked) return linkArtifactRefsInHtml(escapeHtml(text));
+  try {
+    return linkArtifactRefsInHtml(window.marked.parse(text, { gfm: true, breaks: true, mangle: false, headerIds: false }));
+  }
+  catch { return linkArtifactRefsInHtml(escapeHtml(text)); }
 }
 
 function parseMessage(filename, raw) {
@@ -1368,11 +1505,11 @@ async function fetchLeaderboard() {
   }
   return parseLeaderboardMd(await r.text());
 }
-async function postUserMessage(handle, body) {
+async function postUserMessage(handle, body, refFilename = null) {
   const r = await fetchWithTimeout(MESSAGES_URL, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ handle, body }),
+    body: JSON.stringify({ handle, body, refs: refFilename ? [refFilename] : [] }),
   });
   if (!r.ok) {
     let detail = '';
@@ -1437,6 +1574,22 @@ function htmlToText(html) {
   d.innerHTML = html;
   return (d.textContent || '').replace(/\s+/g, ' ').trim();
 }
+function messagePreviewText(m) {
+  return htmlToText(m.excerptHtml || m.headline || '').slice(0, 180);
+}
+function setPendingQuote(m) {
+  pendingRefFilename = m.filename;
+  pendingQuoteMeta.textContent = `Quoting ${displayAgentName(m.agent)} · ${fmtTime(m.epoch)}`;
+  pendingQuotePreview.textContent = messagePreviewText(m);
+  pendingQuote.hidden = false;
+  humanMessageInput.focus();
+}
+function clearPendingQuote() {
+  pendingRefFilename = null;
+  pendingQuote.hidden = true;
+  pendingQuoteMeta.textContent = '';
+  pendingQuotePreview.textContent = '';
+}
 function buildQuotes(m) {
   return m.refs.map(rf => {
     const orig = messageMap.get(rf);
@@ -1473,7 +1626,11 @@ function renderMessage(m, { animate = false, isImprovement = false } = {}) {
   node.innerHTML = `
     <div class="avatar ${avatarClass(m.agent)}">${avatarLetter(m.agent)}</div>
     <div class="body">
-      <div class="head"><span class="name">${escapeHtml(displayAgentName(m.agent))}</span><span class="ts">${fmtTime(m.epoch)}</span></div>
+      <div class="head">
+        <span class="name">${escapeHtml(displayAgentName(m.agent))}</span>
+        <span class="ts">${fmtTime(m.epoch)}</span>
+        <span class="msg-actions"><button type="button" class="quote-btn" title="Quote this message">Quote</button></span>
+      </div>
       <div class="text">${buildText(m)}</div>
       ${m.hasMore ? '<button type="button" class="see-more-btn" aria-expanded="false">See more</button>' : ''}
       ${pill}
@@ -1490,6 +1647,7 @@ function renderMessage(m, { animate = false, isImprovement = false } = {}) {
       textEl.innerHTML = buildText(m, { expanded });
     });
   }
+  node.querySelector('.quote-btn').addEventListener('click', () => setPendingQuote(m));
   messagesEl.appendChild(node);
   return node;
 }
@@ -1978,6 +2136,7 @@ humanHandleInput.addEventListener('blur', () => {
   humanHandleInput.value = composerHandle();
   syncComposerState();
 });
+clearQuoteBtn.addEventListener('click', clearPendingQuote);
 humanMessageInput.addEventListener('input', syncComposerState);
 
 messageComposer.addEventListener('submit', async (e) => {
@@ -1994,9 +2153,10 @@ messageComposer.addEventListener('submit', async (e) => {
   setComposerStatus('Sending...');
 
   try {
-    const msg = await postUserMessage(handle, body);
+    const msg = await postUserMessage(handle, body, pendingRefFilename);
     humanHandleInput.value = handle;
     humanMessageInput.value = '';
+    clearPendingQuote();
     rememberHandle(handle);
     messagesEl.querySelectorAll('.state-screen').forEach(el => el.remove());
     ingestMessage(msg, { animate: true });