Add quote button

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("efficient-optimizer-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;
@@ -482,6 +510,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__actions {
     display: flex;
     align-items: center;
@@ -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">×</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>
@@ -1110,6 +1185,7 @@ let bestSteps = null;
 let initialLoaded = false;
 let lastDayRendered = null;
 let chart = null;
+let pendingRefFilename = null;
 
 // ─────────────────────────────────────────────────────────────
 //  DOM REFS
@@ -1130,6 +1206,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');
@@ -1367,11 +1447,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 = '';
@@ -1436,6 +1516,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);
@@ -1472,7 +1568,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}
@@ -1489,6 +1589,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;
 }
@@ -1941,6 +2042,7 @@ humanHandleInput.addEventListener('blur', () => {
   humanHandleInput.value = composerHandle();
   syncComposerState();
 });
+clearQuoteBtn.addEventListener('click', clearPendingQuote);
 humanMessageInput.addEventListener('input', syncComposerState);
 
 messageComposer.addEventListener('submit', async (e) => {
@@ -1957,9 +2059,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 });