SPB Git
spboucher.ai

spb/trawls

Public

feat(ui): thème clair par défaut + bascule sombre, refonte responsive smartphone (barre d'onglets, options repliables, tailles tactiles, safe-area)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Simon-Pierre Boucher committed (Sep 5, 2026) parent 62aa5ae Browse files

3 changed files +262 −109

3 changed files
Unified Split
modified trawls/web/static/app.js +11 −1
@@ -33,6 +33,8 @@
33 return `<span class="${cls}">${m}</span>`; 33 return `<span class="${cls}">${m}</span>`;
34 }); 34 });
35 const md = (s) => (window.marked ? marked.parse(s || '', { mangle: false, headerIds: false }) : `<pre>${esc(s)}</pre>`); 35 const md = (s) => (window.marked ? marked.parse(s || '', { mangle: false, headerIds: false }) : `<pre>${esc(s)}</pre>`);
36+ const isMobile = () => window.matchMedia('(max-width: 900px)').matches;
37+ const scrollToEl = (sel) => { if (!isMobile()) return; const el = $(sel); if (el) setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50); };
36 38
37 // ---- routeur ------------------------------------------------------------------------- 39 // ---- routeur -------------------------------------------------------------------------
38 const routes = { playground: renderPlayground, crawls: renderCrawls, map: renderMap, extract: renderExtract, keys: renderKeys, agent: renderAgent }; 40 const routes = { playground: renderPlayground, crawls: renderCrawls, map: renderMap, extract: renderExtract, keys: renderKeys, agent: renderAgent };
@@ -41,7 +43,8 @@
41 if (push) history.pushState({}, '', path); 43 if (push) history.pushState({}, '', path);
42 const seg = path.split('/').filter(Boolean); 44 const seg = path.split('/').filter(Boolean);
43 const name = routes[seg[0]] ? seg[0] : 'playground'; 45 const name = routes[seg[0]] ? seg[0] : 'playground';
44− $$('#nav a').forEach((a) => a.classList.toggle('on', a.dataset.route === name)); 46+ $$('#nav a, #tabbar a').forEach((a) => a.classList.toggle('on', a.dataset.route === name));
47+ window.scrollTo(0, 0);
45 if (cleanup) { try { cleanup(); } catch {} cleanup = null; } 48 if (cleanup) { try { cleanup(); } catch {} cleanup = null; }
46 view.innerHTML = ''; 49 view.innerHTML = '';
47 view.appendChild($(`#tpl-${name}`).content.cloneNode(true)); 50 view.appendChild($(`#tpl-${name}`).content.cloneNode(true));
@@ -61,6 +64,9 @@
61 } catch { el.className = 'status err'; el.lastElementChild.textContent = 'offline'; } 64 } catch { el.className = 'status err'; el.lastElementChild.textContent = 'offline'; }
62 } 65 }
63 $('#btn-key').onclick = () => { $('#key-input').value = getKey(); $('#dlg-key').showModal(); }; 66 $('#btn-key').onclick = () => { $('#key-input').value = getKey(); $('#dlg-key').showModal(); };
67+ // thème : clair par défaut, bascule persistée
68+ const applyTheme = (t) => { document.documentElement.setAttribute('data-theme', t); try { localStorage.setItem('trawls.theme', t); } catch {} const m = document.querySelector('meta[name=theme-color]:not([media])') || Object.assign(document.head.appendChild(document.createElement('meta')), { name: 'theme-color' }); m.content = t === 'dark' ? '#111317' : '#ffffff'; };
69+ $('#btn-theme').onclick = () => applyTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
64 $('#key-save').onclick = () => { setKey($('#key-input').value.trim()); toast('Clé enregistrée'); }; 70 $('#key-save').onclick = () => { setKey($('#key-input').value.trim()); toast('Clé enregistrée'); };
65 71
66 // ---- snippets ----------------------------------------------------------------------------- 72 // ---- snippets -----------------------------------------------------------------------------
@@ -82,6 +88,7 @@
82 $('#pg-hist').onclick = (e) => { const li = e.target.closest('li[data-i]'); if (!li) return; const h = hist()[+li.dataset.i]; $('#pg-url').value = h.url; run(); }; 88 $('#pg-hist').onclick = (e) => { const li = e.target.closest('li[data-i]'); if (!li) return; const h = hist()[+li.dataset.i]; $('#pg-url').value = h.url; run(); };
83 $('#pg-hist-clear').onclick = () => { localStorage.removeItem(HIST); drawHist(); }; 89 $('#pg-hist-clear').onclick = () => { localStorage.removeItem(HIST); drawHist(); };
84 drawHist(); 90 drawHist();
91+ if (isMobile()) $('#pg-opts').open = false;
85 92
86 const buildBody = () => { 93 const buildBody = () => {
87 const formats = $$('#pg-formats input:checked').map((i) => i.value); 94 const formats = $$('#pg-formats input:checked').map((i) => i.value);
@@ -131,6 +138,7 @@
131 if (p.status === 'ok' && body.extract && tab === 'md') tab = 'json'; 138 if (p.status === 'ok' && body.extract && tab === 'md') tab = 'json';
132 $$('#pg-tabs button[data-tab]').forEach((x) => x.classList.toggle('on', x.dataset.tab === tab)); 139 $$('#pg-tabs button[data-tab]').forEach((x) => x.classList.toggle('on', x.dataset.tab === tab));
133 draw(); 140 draw();
141+ scrollToEl('#pg-tabs');
134 const h = hist().filter((x) => x.url !== body.url); h.unshift({ url: body.url, status: p.status, at: new Date().toISOString() }); localStorage.setItem(HIST, JSON.stringify(h.slice(0, 20))); drawHist(); 142 const h = hist().filter((x) => x.url !== body.url); h.unshift({ url: body.url, status: p.status, at: new Date().toISOString() }); localStorage.setItem(HIST, JSON.stringify(h.slice(0, 20))); drawHist();
135 } catch (e) { 143 } catch (e) {
136 $('#pg-bar').innerHTML = `<span class="err">✕ ${esc(e.code || 'ERREUR')}: ${esc(e.message)}</span>`; $('#pg-result').innerHTML = `<pre class="code mono">${hl({ error: { code: e.code, message: e.message, details: e.details } })}</pre>`; 144 $('#pg-bar').innerHTML = `<span class="err">✕ ${esc(e.code || 'ERREUR')}: ${esc(e.message)}</span>`; $('#pg-result').innerHTML = `<pre class="code mono">${hl({ error: { code: e.code, message: e.message, details: e.details } })}</pre>`;
@@ -156,6 +164,7 @@
156 }; 164 };
157 $('#cr-jobs').onclick = (e) => { const d = e.target.closest('[data-del]'); if (d) { api(`/v1/jobs/${d.dataset.del}`, { method: 'DELETE' }).then(list); return; } const tr = e.target.closest('tr[data-id]'); if (tr) open(tr.dataset.id); }; 165 $('#cr-jobs').onclick = (e) => { const d = e.target.closest('[data-del]'); if (d) { api(`/v1/jobs/${d.dataset.del}`, { method: 'DELETE' }).then(list); return; } const tr = e.target.closest('tr[data-id]'); if (tr) open(tr.dataset.id); };
158 $('#cr-refresh').onclick = list; 166 $('#cr-refresh').onclick = list;
167+ if (isMobile()) $('#cr-opts').open = false;
159 $('#cr-form').onsubmit = async (e) => { 168 $('#cr-form').onsubmit = async (e) => {
160 e.preventDefault(); 169 e.preventDefault();
161 let body; 170 let body;
@@ -178,6 +187,7 @@
178 async function open(id) { 187 async function open(id) {
179 current = id; $$('#cr-jobs tr').forEach((tr) => tr.classList.toggle('sel', tr.dataset.id === id)); 188 current = id; $$('#cr-jobs tr').forEach((tr) => tr.classList.toggle('sel', tr.dataset.id === id));
180 history.replaceState({}, '', `/crawls/${id}`); 189 history.replaceState({}, '', `/crawls/${id}`);
190+ scrollToEl('#cr-detail');
181 if (es) { es.close(); es = null; } 191 if (es) { es.close(); es = null; }
182 const d = $('#cr-detail'); 192 const d = $('#cr-detail');
183 d.innerHTML = `<div class="result-bar mono" id="cd-bar">chargement…</div><div class="progress"><i id="cd-prog" style="width:0%"></i></div> 193 d.innerHTML = `<div class="result-bar mono" id="cd-bar">chargement…</div><div class="progress"><i id="cd-prog" style="width:0%"></i></div>
modified trawls/web/static/index.html +52 −22
@@ -1,23 +1,40 @@
1 <!doctype html> 1 <!doctype html>
2−<html lang="fr" data-theme="dark"> 2+<html lang="fr" data-theme="light">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6 <title>Trawls — crawl, extract, navigate</title> 6 <title>Trawls — crawl, extract, navigate</title>
7 <meta name="description" content="Trawls : moteur de crawling, d'extraction et de navigation web, sortie Markdown LLM-ready. Self-host first."> 7 <meta name="description" content="Trawls : moteur de crawling, d'extraction et de navigation web, sortie Markdown LLM-ready. Self-host first.">
8+<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
9+<meta name="theme-color" content="#111317" media="(prefers-color-scheme: dark)">
10+<meta name="apple-mobile-web-app-capable" content="yes">
11+<meta name="apple-mobile-web-app-status-bar-style" content="default">
12+<meta name="apple-mobile-web-app-title" content="Trawls">
8 <meta property="og:title" content="Trawls — crawl, extract, navigate"> 13 <meta property="og:title" content="Trawls — crawl, extract, navigate">
9 <meta property="og:description" content="Un chalut ratisse le fond et remonte tout : on cartographie et on extrait n'importe quel site. Markdown propre, escalade http → navigateur → stealth, API OpenAPI."> 14 <meta property="og:description" content="Un chalut ratisse le fond et remonte tout : on cartographie et on extrait n'importe quel site. Markdown propre, escalade http → navigateur → stealth, API OpenAPI.">
10 <meta property="og:image" content="https://www.trawls.dev/static/og.svg"> 15 <meta property="og:image" content="https://www.trawls.dev/static/og.svg">
11 <meta property="og:url" content="https://www.trawls.dev/"> 16 <meta property="og:url" content="https://www.trawls.dev/">
12 <link rel="icon" href="/static/favicon.svg" type="image/svg+xml"> 17 <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
18+<link rel="apple-touch-icon" href="/static/favicon.svg">
19+<script>(function(){try{var t=localStorage.getItem('trawls.theme');if(t==='dark'||t==='light'){document.documentElement.setAttribute('data-theme',t);}}catch(e){}})();</script>
13 <link rel="preconnect" href="https://fonts.googleapis.com"> 20 <link rel="preconnect" href="https://fonts.googleapis.com">
14 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> 21 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
15 <link rel="stylesheet" href="/static/style.css"> 22 <link rel="stylesheet" href="/static/style.css">
16 </head> 23 </head>
17 <body> 24 <body>
25+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
26+ <symbol id="i-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="currentColor"/></symbol>
27+ <symbol id="i-crawl" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M3 7c4 0 5 5 9 5s5-5 9-5M3 13c4 0 5 5 9 5s5-5 9-5"/></symbol>
28+ <symbol id="i-map" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2zM9 4v14M15 6v14"/></symbol>
29+ <symbol id="i-extract" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 5h16M4 12h10M4 19h16M18 9v6M15 12h6"/></symbol>
30+ <symbol id="i-key" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M15 5l3 3M18 8l2-2"/></symbol>
31+ <symbol id="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></symbol>
32+ <symbol id="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></symbol>
33+</svg>
34+
18 <header class="top"> 35 <header class="top">
19 <a class="brand" href="/playground" data-link> 36 <a class="brand" href="/playground" data-link>
20− <svg width="22" height="22" viewBox="0 0 32 32" aria-hidden="true"><path d="M3 9c6 0 8 6 13 6s7-6 13-6" fill="none" stroke="var(--accent)" stroke-width="2.4" stroke-linecap="round"/><path d="M3 16c6 0 8 6 13 6s7-6 13-6" fill="none" stroke="var(--accent)" stroke-width="2.4" stroke-linecap="round" opacity=".65"/><path d="M3 23c6 0 8 6 13 6s7-6 13-6" fill="none" stroke="var(--accent)" stroke-width="2.4" stroke-linecap="round" opacity=".35"/></svg> 37+ <svg width="24" height="24" viewBox="0 0 32 32" aria-hidden="true"><path d="M3 9c6 0 8 6 13 6s7-6 13-6" fill="none" stroke="var(--accent)" stroke-width="2.6" stroke-linecap="round"/><path d="M3 16c6 0 8 6 13 6s7-6 13-6" fill="none" stroke="var(--accent)" stroke-width="2.6" stroke-linecap="round" opacity=".65"/><path d="M3 23c6 0 8 6 13 6s7-6 13-6" fill="none" stroke="var(--accent)" stroke-width="2.6" stroke-linecap="round" opacity=".35"/></svg>
21 <span>Trawls</span><span class="ver" id="ver"></span> 38 <span>Trawls</span><span class="ver" id="ver"></span>
22 </a> 39 </a>
23 <nav class="nav" id="nav"> 40 <nav class="nav" id="nav">
@@ -30,7 +47,8 @@
30 </nav> 47 </nav>
31 <div class="top-right"> 48 <div class="top-right">
32 <span class="status" id="status"><i></i><span>…</span></span> 49 <span class="status" id="status"><i></i><span>…</span></span>
33− <button class="btn ghost sm" id="btn-key" title="Clé API">🔑</button> 50+ <button class="icon-btn" id="btn-theme" title="Thème clair / sombre" aria-label="Changer de thème"><svg class="sun"><use href="#i-sun"/></svg><svg class="moon"><use href="#i-moon"/></svg></button>
51+ <button class="icon-btn" id="btn-key" title="Clé API" aria-label="Clé API"><svg><use href="#i-key"/></svg></button>
34 </div> 52 </div>
35 </header> 53 </header>
36 54
@@ -41,10 +59,18 @@
41 <span class="mono" id="foot-info"></span> 59 <span class="mono" id="foot-info"></span>
42 </footer> 60 </footer>
43 61
62+<nav class="tabbar" id="tabbar" aria-label="Navigation">
63+ <a href="/playground" data-link data-route="playground"><svg><use href="#i-play"/></svg>Playground</a>
64+ <a href="/crawls" data-link data-route="crawls"><svg><use href="#i-crawl"/></svg>Crawls</a>
65+ <a href="/map" data-link data-route="map"><svg><use href="#i-map"/></svg>Map</a>
66+ <a href="/extract" data-link data-route="extract"><svg><use href="#i-extract"/></svg>Extract</a>
67+ <a href="/keys" data-link data-route="keys"><svg><use href="#i-key"/></svg>Keys</a>
68+</nav>
69+
44 <dialog id="dlg-key" class="dlg"> 70 <dialog id="dlg-key" class="dlg">
45 <form method="dialog"> 71 <form method="dialog">
46 <h3>Clé API</h3> 72 <h3>Clé API</h3>
47− <p class="muted">Stockée localement dans ce navigateur (chiffrée légèrement). Laisser vide en self-host sans auth.</p> 73+ <p class="muted">Stockée localement dans ce navigateur (obfusquée). Laisser vide en self-host sans auth.</p>
48 <input id="key-input" class="input mono" placeholder="trw_… ou clé admin" autocomplete="off"> 74 <input id="key-input" class="input mono" placeholder="trw_… ou clé admin" autocomplete="off">
49 <div class="row end gap"> 75 <div class="row end gap">
50 <button class="btn ghost" value="cancel">Annuler</button> 76 <button class="btn ghost" value="cancel">Annuler</button>
@@ -60,10 +86,11 @@
60 <label class="field"> 86 <label class="field">
61 <span>URL</span> 87 <span>URL</span>
62 <div class="row gap"> 88 <div class="row gap">
63− <input class="input mono grow" id="pg-url" placeholder="https://exemple.com/article" required autocomplete="off" spellcheck="false"> 89+ <input class="input mono grow" id="pg-url" type="url" inputmode="url" placeholder="https://exemple.com/article" required autocomplete="off" autocapitalize="off" spellcheck="false">
64 <button class="btn" id="pg-run" type="submit">Run <kbd>⌘↵</kbd></button> 90 <button class="btn" id="pg-run" type="submit">Run <kbd>⌘↵</kbd></button>
65 </div> 91 </div>
66 </label> 92 </label>
93+ <details class="opts" id="pg-opts" open><summary>Options</summary><div class="stack">
67 <div class="grid2"> 94 <div class="grid2">
68 <label class="field"><span>Formats</span> 95 <label class="field"><span>Formats</span>
69 <div class="chips" id="pg-formats"> 96 <div class="chips" id="pg-formats">
@@ -80,7 +107,7 @@
80 <select class="input" id="pg-mode"><option value="auto">auto (http → browser → stealth)</option><option value="http">http</option><option value="browser">browser</option><option value="stealth">stealth</option></select> 107 <select class="input" id="pg-mode"><option value="auto">auto (http → browser → stealth)</option><option value="http">http</option><option value="browser">browser</option><option value="stealth">stealth</option></select>
81 </label> 108 </label>
82 <label class="field"><span>wait_for (sélecteur ou ms)</span><input class="input mono" id="pg-wait" placeholder=".article-body ou 2000"></label> 109 <label class="field"><span>wait_for (sélecteur ou ms)</span><input class="input mono" id="pg-wait" placeholder=".article-body ou 2000"></label>
83− <label class="field"><span>timeout_ms</span><input class="input mono" id="pg-timeout" type="number" value="30000" min="1000" step="1000"></label> 110+ <label class="field"><span>timeout_ms</span><input class="input mono" id="pg-timeout" type="number" inputmode="numeric" value="30000" min="1000" step="1000"></label>
84 <label class="field"><span>exclude_tags (CSS, virgules)</span><input class="input mono" id="pg-exclude" placeholder=".ads, #comments"></label> 111 <label class="field"><span>exclude_tags (CSS, virgules)</span><input class="input mono" id="pg-exclude" placeholder=".ads, #comments"></label>
85 <label class="field"><span>include_tags</span><input class="input mono" id="pg-include" placeholder="article"></label> 112 <label class="field"><span>include_tags</span><input class="input mono" id="pg-include" placeholder="article"></label>
86 </div> 113 </div>
@@ -102,6 +129,7 @@
102 llm: {"type":"object","properties":{"title":{"type":"string"},"price":{"type":"number"}}}'></textarea> 129 llm: {"type":"object","properties":{"title":{"type":"string"},"price":{"type":"number"}}}'></textarea>
103 <input class="input" id="pg-ex-prompt" placeholder="prompt optionnel (llm)"> 130 <input class="input" id="pg-ex-prompt" placeholder="prompt optionnel (llm)">
104 </details> 131 </details>
132+ </div></details>
105 </form> 133 </form>
106 <div class="hist"> 134 <div class="hist">
107 <div class="row between"><h4>Historique</h4><button class="btn ghost sm" id="pg-hist-clear">vider</button></div> 135 <div class="row between"><h4>Historique</h4><button class="btn ghost sm" id="pg-hist-clear">vider</button></div>
@@ -123,10 +151,10 @@ llm: {"type":"object","properties":{"title":{"type":"string"},"price":{"type":"n
123 <button class="btn ghost sm" data-copy="curl">cURL</button> 151 <button class="btn ghost sm" data-copy="curl">cURL</button>
124 <button class="btn ghost sm" data-copy="python">Python</button> 152 <button class="btn ghost sm" data-copy="python">Python</button>
125 <button class="btn ghost sm" data-copy="ts">TS</button> 153 <button class="btn ghost sm" data-copy="ts">TS</button>
126− <button class="btn ghost sm" data-copy="out">Copier sortie</button> 154+ <button class="btn ghost sm" data-copy="out">Copier</button>
127 </div> 155 </div>
128 </div> 156 </div>
129− <div class="result-bar mono" id="pg-bar">Prêt. Entrez une URL.</div> 157+ <div class="result-bar" id="pg-bar">Prêt. Entrez une URL.</div>
130 <div class="result" id="pg-result"><div class="empty">Le résultat s'affiche ici.</div></div> 158 <div class="result" id="pg-result"><div class="empty">Le résultat s'affiche ici.</div></div>
131 </div> 159 </div>
132 </section> 160 </section>
@@ -136,16 +164,17 @@ llm: {"type":"object","properties":{"title":{"type":"string"},"price":{"type":"n
136 <section class="page crawls"> 164 <section class="page crawls">
137 <div class="panel left"> 165 <div class="panel left">
138 <form id="cr-form" class="stack"> 166 <form id="cr-form" class="stack">
139− <label class="field"><span>URL racine</span><input class="input mono" id="cr-url" placeholder="https://docs.exemple.com" required></label> 167+ <label class="field"><span>URL racine</span><input class="input mono" id="cr-url" type="url" inputmode="url" placeholder="https://docs.exemple.com" required autocapitalize="off"></label>
168+ <details class="opts" id="cr-opts" open><summary>Options</summary><div class="stack">
140 <div class="grid2"> 169 <div class="grid2">
141− <label class="field"><span>max_pages</span><input class="input mono" id="cr-pages" type="number" value="50" min="1" max="20000"></label> 170+ <label class="field"><span>max_pages</span><input class="input mono" id="cr-pages" type="number" inputmode="numeric" value="50" min="1" max="20000"></label>
142− <label class="field"><span>max_depth</span><input class="input mono" id="cr-depth" type="number" value="3" min="0" max="20"></label> 171+ <label class="field"><span>max_depth</span><input class="input mono" id="cr-depth" type="number" inputmode="numeric" value="3" min="0" max="20"></label>
143− <label class="field"><span>concurrency</span><input class="input mono" id="cr-conc" type="number" value="5" min="1" max="32"></label> 172+ <label class="field"><span>concurrency</span><input class="input mono" id="cr-conc" type="number" inputmode="numeric" value="5" min="1" max="32"></label>
144 <label class="field"><span>strategy</span><select class="input" id="cr-strat"><option>bfs</option><option>dfs</option><option>best_first</option></select></label> 173 <label class="field"><span>strategy</span><select class="input" id="cr-strat"><option>bfs</option><option>dfs</option><option>best_first</option></select></label>
145 <label class="field"><span>include_paths (globs, virgules)</span><input class="input mono" id="cr-inc" placeholder="/docs/*, /blog/*"></label> 174 <label class="field"><span>include_paths (globs, virgules)</span><input class="input mono" id="cr-inc" placeholder="/docs/*, /blog/*"></label>
146 <label class="field"><span>exclude_paths</span><input class="input mono" id="cr-exc" placeholder="/tag/*, *.pdf"></label> 175 <label class="field"><span>exclude_paths</span><input class="input mono" id="cr-exc" placeholder="/tag/*, *.pdf"></label>
147 <label class="field"><span>search (best_first)</span><input class="input" id="cr-search" placeholder="pricing api"></label> 176 <label class="field"><span>search (best_first)</span><input class="input" id="cr-search" placeholder="pricing api"></label>
148− <label class="field"><span>delay_ms</span><input class="input mono" id="cr-delay" type="number" value="0" min="0"></label> 177+ <label class="field"><span>delay_ms</span><input class="input mono" id="cr-delay" type="number" inputmode="numeric" value="0" min="0"></label>
149 </div> 178 </div>
150 <div class="row gap wrap"> 179 <div class="row gap wrap">
151 <label class="check"><input type="checkbox" id="cr-sub"> allow_subdomains</label> 180 <label class="check"><input type="checkbox" id="cr-sub"> allow_subdomains</label>
@@ -155,10 +184,11 @@ llm: {"type":"object","properties":{"title":{"type":"string"},"price":{"type":"n
155 <label class="check"><input type="checkbox" id="cr-links"> links dans la sortie</label> 184 <label class="check"><input type="checkbox" id="cr-links"> links dans la sortie</label>
156 </div> 185 </div>
157 <details class="adv"><summary>Requête JSON brute (écrase le formulaire)</summary><textarea class="input mono" id="cr-json" rows="6" placeholder='{"url":"https://…","crawl":{"max_pages":100},"scrape":{"formats":["markdown"]}}'></textarea></details> 186 <details class="adv"><summary>Requête JSON brute (écrase le formulaire)</summary><textarea class="input mono" id="cr-json" rows="6" placeholder='{"url":"https://…","crawl":{"max_pages":100},"scrape":{"formats":["markdown"]}}'></textarea></details>
187+ </div></details>
158 <div class="row gap"><button class="btn" type="submit">Lancer le crawl</button></div> 188 <div class="row gap"><button class="btn" type="submit">Lancer le crawl</button></div>
159 </form> 189 </form>
160 <div class="row between"><h4>Jobs</h4><button class="btn ghost sm" id="cr-refresh">↻</button></div> 190 <div class="row between"><h4>Jobs</h4><button class="btn ghost sm" id="cr-refresh">↻</button></div>
161− <table class="tbl" id="cr-jobs"><thead><tr><th>id</th><th>type</th><th>statut</th><th>pages</th><th>durée</th><th></th></tr></thead><tbody></tbody></table> 191+ <div class="tbl-wrap"><table class="tbl" id="cr-jobs"><thead><tr><th>id</th><th>type</th><th>statut</th><th>pages</th><th>durée</th><th></th></tr></thead><tbody></tbody></table></div>
162 </div> 192 </div>
163 <div class="panel right" id="cr-detail"> 193 <div class="panel right" id="cr-detail">
164 <div class="empty">Sélectionnez un job ou lancez un crawl.</div> 194 <div class="empty">Sélectionnez un job ou lancez un crawl.</div>
@@ -169,14 +199,14 @@ llm: {"type":"object","properties":{"title":{"type":"string"},"price":{"type":"n
169 <template id="tpl-map"> 199 <template id="tpl-map">
170 <section class="page mapp"> 200 <section class="page mapp">
171 <form id="mp-form" class="row gap wrap top-form"> 201 <form id="mp-form" class="row gap wrap top-form">
172− <input class="input mono grow" id="mp-url" placeholder="https://exemple.com" required> 202+ <input class="input mono grow" id="mp-url" type="url" inputmode="url" placeholder="https://exemple.com" required autocapitalize="off">
173 <input class="input" id="mp-search" placeholder="search (BM25, optionnel)"> 203 <input class="input" id="mp-search" placeholder="search (BM25, optionnel)">
174− <input class="input mono" id="mp-limit" type="number" value="2000" min="1" max="20000" style="width:8rem" title="limit"> 204+ <input class="input mono" id="mp-limit" type="number" inputmode="numeric" value="2000" min="1" max="20000" style="width:8rem" title="limit">
175 <label class="check"><input type="checkbox" id="mp-sub"> sous-domaines</label> 205 <label class="check"><input type="checkbox" id="mp-sub"> sous-domaines</label>
176 <label class="check"><input type="checkbox" id="mp-titles"> titres</label> 206 <label class="check"><input type="checkbox" id="mp-titles"> titres</label>
177 <button class="btn" type="submit">Map</button> 207 <button class="btn" type="submit">Map</button>
178 </form> 208 </form>
179− <div class="result-bar mono" id="mp-bar">—</div> 209+ <div class="result-bar" id="mp-bar">—</div>
180 <div class="row gap wrap tools"> 210 <div class="row gap wrap tools">
181 <input class="input mono grow" id="mp-filter" placeholder="filtre instantané…"> 211 <input class="input mono grow" id="mp-filter" placeholder="filtre instantané…">
182 <label class="check"><input type="checkbox" id="mp-group"> grouper par path</label> 212 <label class="check"><input type="checkbox" id="mp-group"> grouper par path</label>
@@ -193,7 +223,7 @@ llm: {"type":"object","properties":{"title":{"type":"string"},"price":{"type":"n
193 <section class="page extract"> 223 <section class="page extract">
194 <div class="panel left"> 224 <div class="panel left">
195 <form id="ex-form" class="stack"> 225 <form id="ex-form" class="stack">
196− <label class="field"><span>URLs (une par ligne) ou pattern (https://site.com/produits/*)</span><textarea class="input mono" id="ex-urls" rows="4" required></textarea></label> 226+ <label class="field"><span>URLs (une par ligne) ou pattern (https://site.com/produits/*)</span><textarea class="input mono" id="ex-urls" rows="4" required autocapitalize="off"></textarea></label>
197 <div class="row gap wrap"> 227 <div class="row gap wrap">
198 <label class="check"><input type="radio" name="ex-mode" value="css" checked> CSS (déterministe)</label> 228 <label class="check"><input type="radio" name="ex-mode" value="css" checked> CSS (déterministe)</label>
199 <label class="check"><input type="radio" name="ex-mode" value="llm"> LLM (schéma JSON)</label> 229 <label class="check"><input type="radio" name="ex-mode" value="llm"> LLM (schéma JSON)</label>
@@ -207,7 +237,7 @@ llm: {"type":"object","properties":{"title":{"type":"string"},"price":{"type":"n
207 </form> 237 </form>
208 </div> 238 </div>
209 <div class="panel right"> 239 <div class="panel right">
210− <div class="result-bar mono" id="ex-bar">—</div> 240+ <div class="result-bar" id="ex-bar">—</div>
211 <div class="result" id="ex-result"><div class="empty">Résultat par URL et fusion.</div></div> 241 <div class="result" id="ex-result"><div class="empty">Résultat par URL et fusion.</div></div>
212 </div> 242 </div>
213 </section> 243 </section>
@@ -223,12 +253,12 @@ llm: {"type":"object","properties":{"title":{"type":"string"},"price":{"type":"n
223 </div> 253 </div>
224 <div class="panel right"> 254 <div class="panel right">
225 <div class="row between"><h4>Clés API</h4> 255 <div class="row between"><h4>Clés API</h4>
226− <form id="ky-form" class="row gap"><input class="input" id="ky-name" placeholder="nom" required><input class="input mono" id="ky-quota" type="number" placeholder="quota/jour" style="width:8rem"><button class="btn sm" type="submit">Créer</button></form> 256+ <form id="ky-form" class="row gap"><input class="input" id="ky-name" placeholder="nom" required><input class="input mono" id="ky-quota" type="number" inputmode="numeric" placeholder="quota/jour" style="width:8rem"><button class="btn sm" type="submit">Créer</button></form>
227 </div> 257 </div>
228 <div id="ky-new" class="callout hidden"></div> 258 <div id="ky-new" class="callout hidden"></div>
229− <table class="tbl" id="ky-table"><thead><tr><th>id</th><th>nom</th><th>préfixe</th><th>quota</th><th>dernier usage</th><th></th></tr></thead><tbody></tbody></table> 259+ <div class="tbl-wrap"><table class="tbl" id="ky-table"><thead><tr><th>id</th><th>nom</th><th>préfixe</th><th>quota</th><th>dernier usage</th><th></th></tr></thead><tbody></tbody></table></div>
230 <h4>Dernières requêtes</h4> 260 <h4>Dernières requêtes</h4>
231− <table class="tbl mono sm" id="ky-req"><thead><tr><th>quand</th><th>méthode</th><th>path</th><th>statut</th><th>ms</th></tr></thead><tbody></tbody></table> 261+ <div class="tbl-wrap"><table class="tbl mono sm" id="ky-req"><thead><tr><th>quand</th><th>méthode</th><th>path</th><th>statut</th><th>ms</th></tr></thead><tbody></tbody></table></div>
232 </div> 262 </div>
233 </section> 263 </section>
234 </template> 264 </template>
modified trawls/web/static/style.css +199 −86
@@ -1,125 +1,238 @@
1+/* Trawls UI — thème clair par défaut, sombre en option ; mobile-first. */
1 :root{ 2 :root{
2− --bg:#0b0c0e;--bg2:#111317;--bg3:#171a1f;--line:#23272e;--line2:#2e333b; 3+ --bg:#f6f7f9;--bg2:#ffffff;--bg3:#eef0f3;--bg4:#e4e7eb;--line:#e3e6ea;--line2:#cfd4da;
4+ --fg:#111418;--fg2:#4b5563;--fg3:#8a929c;
5+ --accent:#d97706;--accent2:#b45309;--accent-soft:rgba(217,119,6,.10);--accent-fg:#ffffff;
6+ --ok:#15803d;--warn:#b45309;--err:#dc2626;--info:#2563eb;
7+ --ok-soft:rgba(21,128,61,.10);--err-soft:rgba(220,38,38,.10);--warn-soft:rgba(180,83,9,.10);--info-soft:rgba(37,99,235,.10);
8+ --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);--shadow-lg:0 10px 30px rgba(16,24,40,.14);
9+ --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
10+ --r:8px;--r-lg:12px;--top:52px;--foot:30px;--tabbar:58px;
11+ --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
12+ --json-k:#1d4ed8;--json-s:#047857;--json-n:#b45309;--json-b:#be123c;
13+ color-scheme:light;
14+}
15+html[data-theme="dark"]{
16+ --bg:#0b0c0e;--bg2:#111317;--bg3:#171a1f;--bg4:#1f242b;--line:#23272e;--line2:#2e333b;
3 --fg:#e6e8eb;--fg2:#a2a8b3;--fg3:#6b7280; 17 --fg:#e6e8eb;--fg2:#a2a8b3;--fg3:#6b7280;
4− --accent:#f5a524;--accent2:#c98416;--ok:#3fb950;--warn:#d29922;--err:#f85149;--info:#58a6ff; 18+ --accent:#f5a524;--accent2:#c98416;--accent-soft:rgba(245,165,36,.12);--accent-fg:#161000;
5− --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--sans:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; 19+ --ok:#3fb950;--warn:#d29922;--err:#f85149;--info:#58a6ff;
6− --r:6px;--top:44px;--foot:28px; 20+ --ok-soft:rgba(63,185,80,.14);--err-soft:rgba(248,81,73,.14);--warn-soft:rgba(210,153,34,.14);--info-soft:rgba(88,166,255,.14);
21+ --shadow:none;--shadow-lg:0 10px 30px rgba(0,0,0,.5);
22+ --json-k:#79c0ff;--json-s:#a5d6ff;--json-n:#f5a524;--json-b:#ff7b72;
23+ color-scheme:dark;
7 } 24 }
8 *{box-sizing:border-box} 25 *{box-sizing:border-box}
26+html{-webkit-text-size-adjust:100%}
9 html,body{height:100%} 27 html,body{height:100%}
10−body{margin:0;background:var(--bg);color:var(--fg);font:13px/1.45 var(--sans);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100dvh} 28+body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100dvh;padding-top:var(--sat)}
11−a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline} 29+a{color:var(--accent2);text-decoration:none}a:hover{text-decoration:underline}
12−.mono,code,pre,kbd,.input.mono,textarea.mono{font-family:var(--mono);font-size:12px} 30+html[data-theme="dark"] a{color:var(--accent)}
31+.mono,code,pre,kbd,.input.mono,textarea.mono{font-family:var(--mono);font-size:13px}
13 .muted{color:var(--fg2)}.hidden{display:none!important}.grow{flex:1;min-width:0} 32 .muted{color:var(--fg2)}.hidden{display:none!important}.grow{flex:1;min-width:0}
14 .row{display:flex;align-items:center}.row.gap{gap:8px}.row.between{justify-content:space-between}.row.end{justify-content:flex-end}.row.wrap{flex-wrap:wrap} 33 .row{display:flex;align-items:center}.row.gap{gap:8px}.row.between{justify-content:space-between}.row.end{justify-content:flex-end}.row.wrap{flex-wrap:wrap}
15−.stack{display:flex;flex-direction:column;gap:10px}.stack.sm{gap:6px} 34+.stack{display:flex;flex-direction:column;gap:12px}.stack.sm{gap:8px}
16−.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px} 35+.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
17−h3,h4{margin:6px 0;font-weight:600}h4{font-size:12px;color:var(--fg2);text-transform:uppercase;letter-spacing:.04em} 36+h3,h4{margin:8px 0;font-weight:600}h3{font-size:16px}h4{font-size:11px;color:var(--fg2);text-transform:uppercase;letter-spacing:.06em}
18−kbd{background:var(--bg3);border:1px solid var(--line2);border-radius:3px;padding:0 4px;font-size:10px;color:var(--fg2);margin-left:6px} 37+kbd{background:var(--bg3);border:1px solid var(--line2);border-radius:4px;padding:0 5px;font-size:10px;color:var(--fg2);margin-left:6px}
38+button,input,select,textarea{font-family:inherit}
39+:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
19 40
20−.top{position:sticky;top:0;z-index:10;height:var(--top);display:flex;align-items:center;gap:18px;padding:0 14px;background:var(--bg2);border-bottom:1px solid var(--line)} 41+/* ---- top bar ---- */
21−.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--fg)}.brand:hover{text-decoration:none} 42+.top{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:16px;padding:0 max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right));background:color-mix(in srgb,var(--bg2) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
43+.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--fg);letter-spacing:-.01em}.brand:hover{text-decoration:none}
22 .brand .ver{font-family:var(--mono);font-size:10px;color:var(--fg3);font-weight:400} 44 .brand .ver{font-family:var(--mono);font-size:10px;color:var(--fg3);font-weight:400}
23 .nav{display:flex;gap:2px;flex:1} 45 .nav{display:flex;gap:2px;flex:1}
24−.nav a{padding:5px 10px;border-radius:var(--r);color:var(--fg2);font-weight:500} 46+.nav a{padding:6px 11px;border-radius:var(--r);color:var(--fg2);font-weight:500;font-size:13px;display:inline-flex;align-items:center;gap:6px}
25−.nav a:hover{background:var(--bg3);text-decoration:none;color:var(--fg)}.nav a.on{color:var(--accent);background:rgba(245,165,36,.08)} 47+.nav a svg{width:15px;height:15px;display:none}
48+.nav a:hover{background:var(--bg3);text-decoration:none;color:var(--fg)}.nav a.on{color:var(--accent2);background:var(--accent-soft)}
49+html[data-theme="dark"] .nav a.on{color:var(--accent)}
26 .top-right{display:flex;align-items:center;gap:8px} 50 .top-right{display:flex;align-items:center;gap:8px}
27 .status{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--fg2)} 51 .status{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--fg2)}
28−.status i{width:8px;height:8px;border-radius:50%;background:var(--fg3);display:inline-block} 52+.status i{width:8px;height:8px;border-radius:50%;background:var(--fg3);display:inline-block;box-shadow:0 0 0 3px var(--bg3)}
29 .status.ok i{background:var(--ok)}.status.err i{background:var(--err)}.status.warn i{background:var(--warn)} 53 .status.ok i{background:var(--ok)}.status.err i{background:var(--err)}.status.warn i{background:var(--warn)}
54+.icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);background:var(--bg2);color:var(--fg2);border-radius:var(--r);cursor:pointer;padding:0}
55+.icon-btn:hover{color:var(--fg);background:var(--bg3)}.icon-btn svg{width:16px;height:16px}
56+.icon-btn .sun{display:none}.icon-btn .moon{display:block}
57+html[data-theme="dark"] .icon-btn .sun{display:block}html[data-theme="dark"] .icon-btn .moon{display:none}
30 58
59+/* ---- layout ---- */
31 .view{flex:1;display:flex;min-height:0} 60 .view{flex:1;display:flex;min-height:0}
32−.page{flex:1;display:grid;grid-template-columns:minmax(340px,420px) 1fr;min-height:calc(100dvh - var(--top) - var(--foot))} 61+.page{flex:1;min-width:0;display:grid;grid-template-columns:minmax(340px,420px) 1fr;min-height:calc(100dvh - var(--top) - var(--foot) - var(--sat))}
33−.page.mapp,.page.keys{grid-template-columns:1fr} 62+details.opts{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--bg)}
63+details.opts>summary{cursor:pointer;color:var(--fg2);font-size:13px;font-weight:500;min-height:28px;display:flex;align-items:center;list-style:none}
64+details.opts>summary::-webkit-details-marker{display:none}
65+details.opts>summary::before{content:"▸";margin-right:8px;color:var(--fg3);transition:transform .15s}
66+details.opts[open]>summary::before{transform:rotate(90deg)}
67+details.opts[open]>summary{margin-bottom:10px}
68+details.opts>.stack{gap:12px}
69+.page.mapp{grid-template-columns:1fr;display:flex;flex-direction:column}
34 .page.keys{grid-template-columns:minmax(320px,400px) 1fr} 70 .page.keys{grid-template-columns:minmax(320px,400px) 1fr}
35−.panel{padding:14px;overflow:auto;min-width:0} 71+.panel{padding:16px;overflow:auto;min-width:0;-webkit-overflow-scrolling:touch}
36 .panel.left{border-right:1px solid var(--line);background:var(--bg2)} 72 .panel.left{border-right:1px solid var(--line);background:var(--bg2)}
37 .panel.right{display:flex;flex-direction:column;min-height:0} 73 .panel.right{display:flex;flex-direction:column;min-height:0}
38 74
39−.field{display:flex;flex-direction:column;gap:4px} 75+/* ---- forms ---- */
40−.field>span{font-size:11px;color:var(--fg2);font-weight:500} 76+.field{display:flex;flex-direction:column;gap:5px}
41−.input{background:var(--bg);border:1px solid var(--line2);color:var(--fg);border-radius:var(--r);padding:6px 8px;font:inherit;outline:none;min-width:0;width:100%} 77+.field>span{font-size:12px;color:var(--fg2);font-weight:500}
42−.input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(245,165,36,.18)} 78+.input{background:var(--bg2);border:1px solid var(--line2);color:var(--fg);border-radius:var(--r);padding:9px 11px;font:inherit;font-size:14px;outline:none;min-width:0;width:100%;min-height:40px;box-shadow:var(--shadow)}
43−textarea.input{resize:vertical;line-height:1.4} 79+html[data-theme="dark"] .input{background:var(--bg)}
44−select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg2) 50%),linear-gradient(135deg,var(--fg2) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px} 80+.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
45−.btn{background:var(--accent);color:#161000;border:1px solid var(--accent2);border-radius:var(--r);padding:6px 12px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap} 81+textarea.input{resize:vertical;line-height:1.45;min-height:64px}
46−.btn:hover{background:#ffb640}.btn:disabled{opacity:.5;cursor:progress} 82+select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg2) 50%),linear-gradient(135deg,var(--fg2) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
47−.btn.ghost{background:transparent;color:var(--fg2);border-color:var(--line2)}.btn.ghost:hover{color:var(--fg);background:var(--bg3)} 83+.btn{background:var(--accent);color:var(--accent-fg);border:1px solid var(--accent2);border-radius:var(--r);padding:9px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:var(--shadow)}
48−.btn.sm{padding:3px 8px;font-size:11px} 84+.btn:hover{filter:brightness(1.06)}.btn:disabled{opacity:.55;cursor:progress}
49−.btn.danger{background:transparent;color:var(--err);border-color:var(--line2)} 85+.btn.ghost{background:var(--bg2);color:var(--fg2);border-color:var(--line2)}.btn.ghost:hover{color:var(--fg);background:var(--bg3);filter:none}
50−.check{display:flex;align-items:center;gap:5px;color:var(--fg2);font-size:12px;cursor:pointer;user-select:none} 86+html[data-theme="dark"] .btn.ghost{background:transparent}
51−.check input{accent-color:var(--accent)} 87+.btn.sm{padding:5px 10px;font-size:12px;min-height:32px}
52−.chips{display:flex;flex-wrap:wrap;gap:4px} 88+.btn.danger{background:var(--bg2);color:var(--err);border-color:var(--line2)}
53−.chips label{display:flex;align-items:center;gap:4px;border:1px solid var(--line2);border-radius:999px;padding:2px 8px;font-size:11px;color:var(--fg2);cursor:pointer;font-family:var(--mono)} 89+.check{display:flex;align-items:center;gap:6px;color:var(--fg2);font-size:13px;cursor:pointer;user-select:none;min-height:32px}
54−.chips label:has(input:checked){border-color:var(--accent);color:var(--accent);background:rgba(245,165,36,.08)} 90+.check input{accent-color:var(--accent);width:16px;height:16px}
91+.chips{display:flex;flex-wrap:wrap;gap:6px}
92+.chips label{display:flex;align-items:center;gap:4px;border:1px solid var(--line2);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--fg2);cursor:pointer;font-family:var(--mono);background:var(--bg2);min-height:30px}
93+.chips label:has(input:checked){border-color:var(--accent);color:var(--accent2);background:var(--accent-soft)}
94+html[data-theme="dark"] .chips label:has(input:checked){color:var(--accent)}
55 .chips input{display:none} 95 .chips input{display:none}
56−details.adv{border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;background:var(--bg)} 96+details.adv{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--bg)}
57−details.adv summary{cursor:pointer;color:var(--fg2);font-size:12px;font-weight:500} 97+html[data-theme="dark"] details.adv{background:var(--bg)}
98+details.adv summary{cursor:pointer;color:var(--fg2);font-size:13px;font-weight:500;min-height:28px;display:flex;align-items:center}
58 details.adv[open] summary{margin-bottom:8px} 99 details.adv[open] summary{margin-bottom:8px}
59 details.adv .input{margin-top:6px} 100 details.adv .input{margin-top:6px}
60 101
61−.tabs{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line);padding:0 0 6px;flex-wrap:wrap} 102+/* ---- tabs & results ---- */
62−.tabs>button{background:none;border:0;color:var(--fg2);padding:5px 10px;border-radius:var(--r);cursor:pointer;font:inherit;font-weight:500} 103+.tabs{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line);padding:0 0 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
63−.tabs>button:hover{color:var(--fg);background:var(--bg3)}.tabs>button.on{color:var(--accent);background:rgba(245,165,36,.08)} 104+.tabs::-webkit-scrollbar{display:none}
64−.copy-group{display:flex;gap:4px} 105+.tabs>button{background:none;border:0;color:var(--fg2);padding:7px 11px;border-radius:var(--r);cursor:pointer;font:inherit;font-size:13px;font-weight:500;white-space:nowrap;flex:0 0 auto}
65−.result-bar{padding:6px 0;color:var(--fg2);font-size:11px;border-bottom:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap} 106+.tabs>button:hover{color:var(--fg);background:var(--bg3)}.tabs>button.on{color:var(--accent2);background:var(--accent-soft)}
107+html[data-theme="dark"] .tabs>button.on{color:var(--accent)}
108+.copy-group{display:flex;gap:4px;flex:0 0 auto}
109+.result-bar{padding:8px 0;color:var(--fg2);font-size:12px;border-bottom:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap;font-family:var(--mono)}
66 .result-bar .ok{color:var(--ok)}.result-bar .err{color:var(--err)}.result-bar .warn{color:var(--warn)}.result-bar b{color:var(--fg)} 110 .result-bar .ok{color:var(--ok)}.result-bar .err{color:var(--err)}.result-bar .warn{color:var(--warn)}.result-bar b{color:var(--fg)}
67−.result{flex:1;overflow:auto;padding:12px 4px;min-height:0} 111+.result{flex:1;overflow:auto;padding:14px 4px;min-height:0;-webkit-overflow-scrolling:touch}
68−.empty{color:var(--fg3);padding:40px;text-align:center} 112+.empty{color:var(--fg3);padding:48px 20px;text-align:center}
69−.prose{max-width:860px;line-height:1.6;font-size:14px} 113+.prose{max-width:860px;line-height:1.65;font-size:15px;overflow-wrap:anywhere}
70−.prose h1{font-size:22px;margin:.6em 0 .4em}.prose h2{font-size:18px;margin:1em 0 .4em;border-bottom:1px solid var(--line);padding-bottom:4px}.prose h3{font-size:15px} 114+.prose h1{font-size:24px;margin:.5em 0 .4em;letter-spacing:-.01em}.prose h2{font-size:19px;margin:1em 0 .4em;border-bottom:1px solid var(--line);padding-bottom:4px}.prose h3{font-size:16px}
71−.prose pre{background:var(--bg2);border:1px solid var(--line);padding:10px;border-radius:var(--r);overflow:auto}.prose code{background:var(--bg3);padding:1px 4px;border-radius:3px}.prose pre code{background:none;padding:0} 115+.prose pre{background:var(--bg3);border:1px solid var(--line);padding:12px;border-radius:var(--r);overflow:auto}.prose code{background:var(--bg3);padding:1px 5px;border-radius:4px}.prose pre code{background:none;padding:0}
72−.prose table{border-collapse:collapse;font-size:13px}.prose td,.prose th{border:1px solid var(--line2);padding:4px 8px}.prose th{background:var(--bg3)} 116+.prose table{border-collapse:collapse;font-size:13px;display:block;overflow-x:auto;max-width:100%}.prose td,.prose th{border:1px solid var(--line2);padding:5px 9px}.prose th{background:var(--bg3)}
73−.prose img{max-width:100%;border-radius:var(--r)}.prose blockquote{border-left:3px solid var(--accent);margin:0;padding:2px 12px;color:var(--fg2)} 117+.prose img{max-width:100%;border-radius:var(--r)}.prose blockquote{border-left:3px solid var(--accent);margin:0;padding:2px 14px;color:var(--fg2)}
74−pre.code{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:10px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:0;font-size:12px;line-height:1.45} 118+pre.code{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:12px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:0;font-size:12.5px;line-height:1.5}
75−.json-k{color:#79c0ff}.json-s{color:#a5d6ff}.json-n{color:#f5a524}.json-b{color:#ff7b72}.json-null{color:var(--fg3)} 119+.json-k{color:var(--json-k)}.json-s{color:var(--json-s)}.json-n{color:var(--json-n)}.json-b{color:var(--json-b)}.json-null{color:var(--fg3)}
76 120
77−.tbl{width:100%;border-collapse:collapse;font-size:12px} 121+/* ---- tables ---- */
78−.tbl th{text-align:left;color:var(--fg2);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.03em} 122+.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
79−.tbl td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top} 123+.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
80−.tbl tr:hover td{background:var(--bg3)}.tbl tr.sel td{background:rgba(245,165,36,.07)} 124+.tbl th{text-align:left;color:var(--fg2);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:var(--bg3);position:sticky;top:0}
81−.tbl.sm td,.tbl.sm th{padding:3px 6px;font-size:11px} 125+.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
82−.badge{display:inline-block;padding:1px 6px;border-radius:999px;font-size:10px;font-family:var(--mono);border:1px solid var(--line2);color:var(--fg2)} 126+.tbl tr:last-child td{border-bottom:0}
83−.badge.ok{color:var(--ok);border-color:rgba(63,185,80,.4)}.badge.failed,.badge.err{color:var(--err);border-color:rgba(248,81,73,.4)} 127+.tbl tbody tr{cursor:pointer}.tbl tr:hover td{background:var(--bg3)}.tbl tr.sel td{background:var(--accent-soft)}
84−.badge.running,.badge.queued{color:var(--accent);border-color:rgba(245,165,36,.4)}.badge.skipped{color:var(--warn)}.badge.completed{color:var(--info);border-color:rgba(88,166,255,.4)}.badge.cancelled{color:var(--fg3)} 128+.tbl.sm td,.tbl.sm th{padding:5px 8px;font-size:12px}
85−.link-btn{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:0} 129+.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-family:var(--mono);border:1px solid var(--line2);color:var(--fg2);background:var(--bg2);line-height:1.4}
130+.badge.ok{color:var(--ok);border-color:transparent;background:var(--ok-soft)}.badge.failed,.badge.err{color:var(--err);border-color:transparent;background:var(--err-soft)}
131+.badge.running,.badge.queued{color:var(--accent2);border-color:transparent;background:var(--accent-soft)}.badge.skipped{color:var(--warn);border-color:transparent;background:var(--warn-soft)}.badge.completed{color:var(--info);border-color:transparent;background:var(--info-soft)}.badge.cancelled{color:var(--fg3)}
132+html[data-theme="dark"] .badge.running,html[data-theme="dark"] .badge.queued{color:var(--accent)}
133+.link-btn{background:none;border:0;color:var(--accent2);cursor:pointer;font:inherit;padding:6px;min-width:32px;min-height:32px}
134+html[data-theme="dark"] .link-btn{color:var(--accent)}
86 135
87 .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} 136 .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
88−.list li{display:flex;gap:8px;align-items:center;padding:4px 6px;border-radius:var(--r);cursor:pointer;color:var(--fg2);font-family:var(--mono);font-size:11px;overflow:hidden} 137+.list li{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:var(--r);cursor:pointer;color:var(--fg2);font-family:var(--mono);font-size:12px;overflow:hidden;min-height:36px}
89 .list li:hover{background:var(--bg3);color:var(--fg)}.list li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} 138 .list li:hover{background:var(--bg3);color:var(--fg)}.list li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
90−.hist{margin-top:16px} 139+.hist{margin-top:18px}
91 140
92−.progress{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin:6px 0} 141+.progress{height:6px;background:var(--bg4);border-radius:3px;overflow:hidden;margin:8px 0}
93 .progress>i{display:block;height:100%;background:var(--accent);transition:width .3s} 142 .progress>i{display:block;height:100%;background:var(--accent);transition:width .3s}
94−.tree{font-family:var(--mono);font-size:11px;line-height:1.7} 143+.tree{font-family:var(--mono);font-size:12px;line-height:1.9}
95 .tree details{margin-left:10px}.tree summary{cursor:pointer;color:var(--fg2)}.tree summary:hover{color:var(--fg)} 144 .tree details{margin-left:10px}.tree summary{cursor:pointer;color:var(--fg2)}.tree summary:hover{color:var(--fg)}
96−.tree .leaf{margin-left:24px;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer} 145+.tree .leaf{margin-left:24px;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-height:30px}
97−.tree .leaf:hover{color:var(--accent)} 146+.tree .leaf:hover{color:var(--accent2)}
98−.split{display:grid;grid-template-columns:minmax(260px,38%) 1fr;gap:12px;flex:1;min-height:0} 147+.split{display:grid;grid-template-columns:minmax(260px,38%) 1fr;gap:14px;flex:1;min-height:0}
99 .split>div{min-height:0;overflow:auto} 148 .split>div{min-height:0;overflow:auto}
100−.log{font-family:var(--mono);font-size:11px;line-height:1.6;white-space:pre-wrap} 149+.log{font-family:var(--mono);font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
101 .log .ok{color:var(--ok)}.log .failed{color:var(--err)}.log .skipped{color:var(--warn)} 150 .log .ok{color:var(--ok)}.log .failed{color:var(--err)}.log .skipped{color:var(--warn)}
102 151
103−.top-form{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg2)} 152+/* ---- map ---- */
104−.tools{padding:8px 14px;border-bottom:1px solid var(--line)} 153+.top-form{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg2)}
105−.mapp .result-bar{padding:6px 14px} 154+.tools{padding:10px 16px;border-bottom:1px solid var(--line)}
106−.vlist{flex:1;overflow:auto;font-family:var(--mono);font-size:11px;padding:4px 14px} 155+.mapp .result-bar{padding:8px 16px}
107−.vrow{display:grid;grid-template-columns:20px 1fr 90px 70px;gap:8px;align-items:center;padding:3px 4px;border-bottom:1px solid var(--line);height:26px;white-space:nowrap;overflow:hidden} 156+.vlist{flex:1;overflow:auto;font-family:var(--mono);font-size:12px;padding:4px 16px;-webkit-overflow-scrolling:touch}
157+.vrow{display:grid;grid-template-columns:22px 1fr 90px 70px;gap:8px;align-items:center;padding:4px;border-bottom:1px solid var(--line);min-height:34px;white-space:nowrap;overflow:hidden}
108 .vrow:hover{background:var(--bg3)}.vrow span{overflow:hidden;text-overflow:ellipsis}.vrow .src{color:var(--fg3)} 158 .vrow:hover{background:var(--bg3)}.vrow span{overflow:hidden;text-overflow:ellipsis}.vrow .src{color:var(--fg3)}
109−.vgroup{padding:6px 4px 2px;color:var(--accent);font-weight:600;border-bottom:1px solid var(--line2)} 159+.vrow input{width:16px;height:16px;accent-color:var(--accent)}
160+.vgroup{padding:8px 4px 3px;color:var(--accent2);font-weight:600;border-bottom:1px solid var(--line2)}
161+html[data-theme="dark"] .vgroup{color:var(--accent)}
110 162
111−.ex-field{display:grid;grid-template-columns:1fr 1.4fr 90px 24px;gap:6px;align-items:center} 163+/* ---- extract / keys ---- */
112−.ex-field.llm{grid-template-columns:1fr 100px 1.4fr 24px} 164+.ex-field{display:grid;grid-template-columns:1fr 1.4fr 90px 32px;gap:6px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
113−.callout{background:rgba(245,165,36,.08);border:1px solid var(--accent2);border-radius:var(--r);padding:10px;margin:8px 0;font-family:var(--mono);font-size:12px;word-break:break-all} 165+.ex-field.llm{grid-template-columns:1fr 100px 1.4fr 32px}
166+.callout{background:var(--accent-soft);border:1px solid var(--accent2);border-radius:var(--r);padding:12px;margin:10px 0;font-family:var(--mono);font-size:12px;word-break:break-all}
114 .bars{display:flex;align-items:flex-end;gap:2px;height:80px;border-bottom:1px solid var(--line);padding:0 2px} 167 .bars{display:flex;align-items:flex-end;gap:2px;height:80px;border-bottom:1px solid var(--line);padding:0 2px}
115−.bars>i{flex:1;background:var(--accent);opacity:.8;border-radius:2px 2px 0 0;min-height:1px} 168+.bars>i{flex:1;background:var(--accent);opacity:.85;border-radius:2px 2px 0 0;min-height:1px}
116 .bars>i:hover{opacity:1} 169 .bars>i:hover{opacity:1}
117−.foot{height:var(--foot);display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-top:1px solid var(--line);color:var(--fg3);font-size:11px;background:var(--bg2)} 170+.foot{height:var(--foot);display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-top:1px solid var(--line);color:var(--fg3);font-size:11px;background:var(--bg2)}
118−.dlg{background:var(--bg2);color:var(--fg);border:1px solid var(--line2);border-radius:8px;padding:16px;width:min(460px,92vw)} 171+.dlg{background:var(--bg2);color:var(--fg);border:1px solid var(--line2);border-radius:var(--r-lg);padding:18px;width:min(460px,92vw);box-shadow:var(--shadow-lg)}
119−.dlg::backdrop{background:rgba(0,0,0,.6)}.dlg form{display:flex;flex-direction:column;gap:10px} 172+.dlg::backdrop{background:rgba(0,0,0,.45)}.dlg form{display:flex;flex-direction:column;gap:12px}
120 .shot{max-width:100%;border:1px solid var(--line2);border-radius:var(--r)} 173 .shot{max-width:100%;border:1px solid var(--line2);border-radius:var(--r)}
121−.chunk{border:1px solid var(--line);border-radius:var(--r);padding:8px;margin-bottom:8px;background:var(--bg2)} 174+.chunk{border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:10px;background:var(--bg2)}
122−.chunk .h{font-family:var(--mono);font-size:10px;color:var(--fg3);margin-bottom:4px;display:flex;gap:10px} 175+.chunk .h{font-family:var(--mono);font-size:11px;color:var(--fg3);margin-bottom:6px;display:flex;gap:10px;flex-wrap:wrap}
123−.toast{position:fixed;bottom:40px;right:14px;background:var(--bg3);border:1px solid var(--line2);padding:8px 12px;border-radius:var(--r);font-size:12px;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.4)} 176+.toast{position:fixed;bottom:calc(var(--foot) + var(--sab) + 12px);right:14px;left:auto;background:var(--fg);color:var(--bg2);border:0;padding:10px 14px;border-radius:var(--r);font-size:13px;z-index:40;box-shadow:var(--shadow-lg);max-width:min(92vw,420px)}
124−.toast.err{border-color:var(--err)} 177+.toast.err{background:var(--err);color:#fff}
125−@media (max-width:900px){.page{grid-template-columns:1fr;min-height:auto}.panel.left{border-right:0;border-bottom:1px solid var(--line)}.split{grid-template-columns:1fr}.nav a{padding:5px 7px}.grid2{grid-template-columns:1fr}.top{gap:10px;overflow-x:auto}.page.keys{grid-template-columns:1fr}} 178+
179+/* ---- mobile tab bar ---- */
180+.tabbar{display:none}
181+
182+/* ---- responsive ---- */
183+@media (max-width:1100px){.page{grid-template-columns:minmax(300px,360px) 1fr}.grid2{grid-template-columns:1fr 1fr}}
184+@media (max-width:900px){
185+ :root{--top:50px}
186+ body{padding-bottom:calc(var(--tabbar) + var(--sab))}
187+ .nav{display:none}
188+ .top{gap:10px}
189+ .status span{display:none}
190+ .view{display:block;min-height:0;overflow-x:hidden}
191+ .page{display:flex;flex-direction:column;min-height:auto;min-width:0;width:100%}
192+ .panel{padding:14px;overflow:visible;width:100%}
193+ .panel.left{border-right:0;border-bottom:1px solid var(--line)}
194+ .panel.right{min-height:auto;display:block}
195+ .result{overflow:visible;min-height:0}
196+ .tabs{position:sticky;top:var(--top);z-index:5;background:var(--bg);padding-top:6px}
197+ .prose{max-width:100%}
198+ .prose table{display:block;overflow-x:auto}
199+ pre.code,.prose pre{max-width:100%}
200+ details.opts>summary{font-weight:600;color:var(--fg)}
201+ .tabs,#cr-detail,.panel.right{scroll-margin-top:calc(var(--top) + 4px)}
202+ .split{grid-template-columns:1fr;gap:10px}
203+ .split>div{max-height:45dvh}
204+ .grid2{grid-template-columns:1fr}
205+ .input,select.input,textarea.input{font-size:16px}
206+ .btn{min-height:44px}.icon-btn{width:38px;height:38px}
207+ .check{min-height:36px}
208+ .tabs{gap:0;margin:0 -14px;padding:0 14px 8px;flex-wrap:nowrap}
209+ .copy-group{padding-left:8px;border-left:1px solid var(--line);margin-left:6px}
210+ .result{padding:12px 0}
211+ .foot{display:none}
212+ .toast{left:14px;right:14px;max-width:none;bottom:calc(var(--tabbar) + var(--sab) + 12px)}
213+ .tbl{min-width:0}
214+ .tbl th:nth-child(5),.tbl td:nth-child(5){display:none}
215+ .vrow{grid-template-columns:22px 1fr 60px}
216+ .vrow .src:last-child{display:none}
217+ .ex-field,.ex-field.llm{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
218+ .ex-field .link-btn{justify-self:end}
219+ .top-form .input{flex:1 1 100%}
220+ .top-form .btn{flex:1 1 100%}
221+ .tools .grow{flex:1 1 100%}
222+ .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tabbar) + var(--sab));padding-bottom:var(--sab);background:color-mix(in srgb,var(--bg2) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
223+ .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--fg3);font-size:10.5px;font-weight:500;text-decoration:none;-webkit-tap-highlight-color:transparent}
224+ .tabbar a svg{width:22px;height:22px}
225+ .tabbar a.on{color:var(--accent2)}
226+ html[data-theme="dark"] .tabbar a.on{color:var(--accent)}
227+ .hist{margin-top:14px}
228+ .sticky-run{position:sticky;bottom:0;background:var(--bg2);padding-top:8px}
229+}
230+@media (max-width:480px){
231+ .brand span:not(.ver){display:inline}.brand .ver{display:none}
232+ .result-bar{gap:8px;font-size:11px}
233+ .prose{font-size:15px}.prose h1{font-size:21px}
234+ .panel{padding:12px}
235+ .page.keys .row.between{flex-direction:column;align-items:stretch;gap:8px}
236+ #ky-form{flex-wrap:wrap}#ky-form .input{flex:1 1 40%}
237+}
238+@media (prefers-reduced-motion:reduce){*{transition:none!important}}
126 239
Menu

Theme
↑↓ navigate ↵ open esc close / or ⌘K anywhere