API tokens a person makes for scripts and agents to act as them (#123)

The API took a session cookie, a proxy's word or the shared admin token, so a script or an
agent working for one person had to sign in with their password and carry the cookie, or be
given the admin token. Settings now makes named tokens, ipx_ and 256 random bits, sent as
Authorization: Bearer. A token is its owner and no more. Only its SHA-256 is kept, in the
new api_tokens table, with when it was made and last used; it is shown once and revoked from
the same list. An unknown or revoked one gets a 401 rather than falling through to a cookie.

Cloudflare Access still stands in front of the tunnel, so from outside a token needs an
Access service token beside it; docs/sso.md says how.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/dialogs.ts

@@ -256,12 +256,35 @@ async function prefsModal(){
       <span class="hint">Comma separated words or phrases, in every feed you read. An item with
       one in its title or text is hidden from you and not downloaded for you. Each feed's
       settings can add more.</span></div>
+    <div class="field"><label for="tokname">API tokens</label>
+      <div id="tokens"></div>
+      <div class="inline"><input type="text" id="tokname" placeholder="What it is for">
+        <button class="btn" id="tokadd" title="Make an API token" aria-label="Make an API token">${ICON.plus} Make</button></div>
+      <span class="hint">A token lets a script or an agent use iPX as you, adding and removing
+      your feeds and reading your items: it sends <code>Authorization: Bearer</code> and the token.
+      Anyone holding one is you here, so revoke one you no longer use.</span></div>
     <div class="field"><label>Feeds are checked every</label>
       <span class="hint">${everyText(g.every_mins)}, for every feed that does not set its own.
       ${admin?'This and the rest of the server\'s settings are on the <a href="/admin">admin page</a>.':'Only an admin changes this.'}</span></div>`);
   $('#stheme').onchange=e=>setTheme(e.target.value,undefined,true);
   $('#smode').onchange=e=>setTheme(undefined,e.target.value,true);
   $('#gopml').onclick=opmlModal;
+  drawTokens();
+  $('#tokadd').onclick=async()=>{
+    const name=$('#tokname').value.trim(); if(!name){ $('#tokname').focus(); return; }
+    try{
+      const t=await api('/api/tokens',{method:'POST',body:JSON.stringify({name})});
+      $('#tokname').value='';
+      await drawTokens();
+      // Shown this once: only its hash is kept, so a lost token is revoked and made again.
+      $('#tokens').insertAdjacentHTML('afterbegin',`<div class="field" id="toknew"><span class="hint">Your new token,
+        ${esc(t.name)}. Copy it now: it is not shown again.</span>
+        <div class="inline"><input type="text" id="tokval" readonly value="${esc(t.token)}">
+        <button class="btn ico" id="tokcopy" title="Copy" aria-label="Copy">${ICON.copy}</button></div></div>`);
+      $('#tokcopy').onclick=()=>copyText(t.token,$('#tokcopy'));
+      $('#tokval').select();
+    }catch(err){ toast(err.message,true); }
+  };
   $('#sblock').onchange=async e=>{
     const blocked=splitWords(e.target.value);
     try{
@@ -272,6 +295,19 @@ async function prefsModal(){
   };
 }
 
+/// Your API tokens, each with when it was made and last used, and a button to revoke it.
+async function drawTokens(){
+  const box=$('#tokens'); if(!box) return;
+  const list=await api('/api/tokens').catch(()=>[]);
+  box.innerHTML=list.map(t=>`<div class="tokrow"><span><b>${esc(t.name)}</b>
+    <span class="hint">made ${dateOf(t.created)}, last used ${ago(t.last_used)}</span></span>
+    <button class="btn ico" data-tok="${t.id}" title="Revoke ${esc(t.name)}" aria-label="Revoke ${esc(t.name)}">${ICON.trash}</button></div>`).join('');
+  for(const b of $$('[data-tok]',box)) b.onclick=async()=>{
+    try{ await api(`/api/tokens/${b.dataset.tok}`,{method:'DELETE'}); toast('Revoked'); drawTokens(); }
+    catch(err){ toast(err.message,true); }
+  };
+}
+
 const splitWords=(s: string)=>s.split(',').map(w=>w.trim()).filter(Boolean);
 
 function settingsModal(f, newUrl?: string){