new: language auto-detect - /api/guess-language, refresh button, guess on paste

web/static/app.css

@@ -178,3 +178,5 @@ td a.slug:hover { color: var(--accent); }
 .center .btn { width: 100%; margin-top: 12px; }
 .err { display: none; margin-top: 12px; font-size: 12.5px; color: #ff8fa3; }
 .center .foot { font-size: 12px; color: var(--muted-fg); padding: 14px; border-top: 1px solid var(--border); }
+
+.btn-icon { padding: 6px 10px; font-size: 14px; line-height: 1; }

web/templates/new.html

@@ -11,6 +11,7 @@
         <option>bash</option><option>sql</option><option>yaml</option><option>json</option>
         <option>markdown</option><option>text</option>
       </select>
+      <button class="btn btn-icon" id="reguess" title="Re-detect language" type="button">⟳</button>
     </div>
     <div class="editor-wrap">
       <div class="gutter" id="gutter">1</div>
@@ -67,6 +68,30 @@ updateGutter();
 
 $('haspw').addEventListener('change', e => { $('password').style.display = e.target.checked ? 'block' : 'none'; });
 
+let guessed = ''; // last auto-detected language, '' = user override
+
+async function guessLang() {
+  if (!content.value.trim()) return;
+  try {
+    const res = await fetch('/api/guess-language', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({content: content.value}),
+    });
+    const data = await res.json();
+    if (res.ok && data.language) {
+      guessed = data.language;
+      $('language').value = data.language;
+    }
+  } catch(e) {}
+}
+
+// refresh button: always re-detect, even if user picked something
+$('reguess').addEventListener('click', guessLang);
+
+// auto-guess when pasting into the editor
+content.addEventListener('paste', () => setTimeout(guessLang, 0));
+
 async function create() {
   const body = {
     content: content.value,