agent-wiki-ui/ui.html

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LlmRun</title>
<style>
/* Token di design: vedi docs/MVP.md → "Design (UI/UX)" */
:root {
  color-scheme: light dark;
  --bg: #FFFFFF; --surface: #FFFFFF; --fg: #0F172A; --muted: #F1F5F9; --muted-fg: #475569;
  --border: #CBD5E1; --accent: #15803D; --on-accent: #FFFFFF; --accent-soft: #DCFCE7; --err: #B91C1C;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08);
  --font: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Cascadia Code', Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0F172A; --surface: #1E293B; --fg: #F8FAFC; --muted: #1E293B; --muted-fg: #94A3B8;
          --border: #334155; --accent: #22C55E; --on-accent: #0F172A; --accent-soft: #14301F; --err: #F87171;
          --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; font: 15.5px/1.65 var(--font); background: var(--bg); color: var(--fg); overflow: hidden; }
button, select, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* barra laterale */
#side { width: 272px; flex: none; display: flex; flex-direction: column; background: var(--muted); border-right: 1px solid var(--border); transition: margin-left .2s; }
#side.closed { margin-left: -272px; }
.side-top { padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; padding: 0 4px; }
.logo { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.logo svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.ghost { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: transparent; transition: background .15s, border-color .15s; }
.ghost:hover { background: var(--bg); }
#reset { justify-content: center; background: var(--bg); }
#reset:hover { border-color: var(--accent); }
.side-h { padding: 8px 18px 4px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-fg); }
#list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.item { position: relative; border-radius: 10px; padding: 8px 38px 8px 12px; transition: background .15s; }
.item:hover { background: var(--bg); }
.item.active { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
.item .open { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; border-radius: 10px; }
.item .t, .item .d { position: relative; display: block; pointer-events: none; }
.item .t { font-size: 14px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .d { font-size: 12px; color: var(--muted-fg); }
.item .x { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted-fg); opacity: 0; }
.item:hover .x, .item:focus-within .x { opacity: 1; }
.item .x:hover { background: var(--muted); color: var(--err); }
.item .x svg { width: 14px; height: 14px; }
.none { padding: 10px 14px; font-size: 13px; color: var(--muted-fg); }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
#toggle { position: absolute; top: 12px; left: 12px; z-index: 2; width: 36px; height: 36px; padding: 0; justify-content: center; }

/* conversazione */
#scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
#chat { max-width: 780px; margin: 0 auto; padding: 28px 20px 12px; }
.msg { display: flex; gap: 14px; margin-bottom: 26px; animation: in .18s ease-out; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }
.msg.user { justify-content: flex-end; }
.bubble { max-width: 85%; padding: 10px 16px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--muted); border: 1px solid var(--border); border-radius: 18px 18px 4px 18px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; margin-top: 2px; }
.avatar svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.body { min-width: 0; flex: 1; position: relative; }
.who { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 2px; }
.content > :first-child { margin-top: 0; } .content > :last-child { margin-bottom: 0; }
.content a { color: var(--accent); }
.content h1, .content h2, .content h3 { line-height: 1.3; margin: 1.4em 0 .5em; }
.content p, .content ul, .content ol { margin: .7em 0; }
.content code { font-family: var(--mono); font-size: 13.5px; font-variant-ligatures: none; }
.content :not(pre) > code { background: var(--muted); border: 1px solid var(--border); padding: 1px 6px; border-radius: 6px; }
.content pre { position: relative; margin: 1em 0; padding: 16px; background: var(--muted); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.content table { border-collapse: collapse; display: block; overflow-x: auto; margin: 1em 0; }
.content th, .content td { border: 1px solid var(--border); padding: 7px 14px; text-align: left; }
.content th { background: var(--muted); font-weight: 600; }
.content blockquote { margin: 1em 0; padding: 2px 16px; border-left: 3px solid var(--accent); color: var(--muted-fg); }
.content hr { border: 0; border-top: 1px solid var(--border); margin: 1.5em 0; }
.mini { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); opacity: 0; transition: opacity .15s; }
pre:hover > .mini, .mini:focus-visible { opacity: 1; }
.actions { margin-top: 8px; opacity: 0; transition: opacity .15s; }
.msg:hover .actions, .actions:focus-within { opacity: 1; }
.actions .ghost { height: 30px; padding: 0 10px; font-size: 13px; color: var(--muted-fg); border-color: transparent; }
.actions .ghost svg { width: 15px; height: 15px; }
.err .content { color: var(--err); border: 1px solid var(--err); border-radius: 12px; padding: 10px 14px; white-space: pre-wrap; background: color-mix(in srgb, var(--err) 8%, var(--bg)); }
.wait { color: var(--muted-fg); align-items: center; }
.dots i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }

/* schermata iniziale */
#empty { max-width: 640px; margin: 0 auto; padding: 12vh 20px 0; text-align: center; }
#empty .logo { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 18px; }
#empty .logo svg { width: 28px; height: 28px; }
#empty h1 { font-size: 30px; letter-spacing: -.02em; margin: 0 0 6px; }
#empty p { color: var(--muted-fg); margin: 0 0 28px; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chip { text-align: left; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, transform .15s, background .15s; }
.chip:hover { border-color: var(--accent); background: var(--muted); transform: translateY(-1px); }
.chip small { display: block; color: var(--muted-fg); font-size: 12.5px; }

/* composer */
footer { flex: none; padding: 8px 20px 12px; }
.composer { max-width: 780px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); padding: 12px 12px 10px 18px; transition: border-color .15s; }
.composer:focus-within { border-color: var(--accent); }
textarea { display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent; padding: 4px 0; max-height: 200px; line-height: 1.55; }
textarea:focus-visible { outline: 0; } /* il focus è mostrato dal bordo del .composer */
textarea::placeholder { color: var(--muted-fg); }
.bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted-fg); }
.field select, .field input { height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); padding: 0 8px; font-size: 13px; color: var(--fg); }
.field input { width: 190px; }
.spacer { flex: 1; }
#send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; transition: transform .15s, opacity .15s; }
#send:hover:not(:disabled) { transform: scale(1.06); }
#send:disabled { opacity: .35; cursor: default; }
#send svg { width: 20px; height: 20px; stroke-width: 2.4; }
.hint { max-width: 780px; margin: 8px auto 0; text-align: center; font-size: 12px; color: var(--muted-fg); }
kbd { font: 11.5px var(--mono); padding: 1px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--muted); }

::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid var(--bg); }
@media (max-width: 720px) { .chips { grid-template-columns: 1fr; } .field input { width: 120px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .dots i { opacity: .7; } }
</style>
</head>
<body>
<aside id="side" aria-label="Chat salvate">
  <div class="side-top">
    <div class="brand"><span class="logo"><svg viewBox="0 0 24 24"><path d="M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z"/></svg></span>LlmRun</div>
    <button class="ghost" id="reset" aria-label="Nuova chat"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>Nuova chat</button>
  </div>
  <div class="side-h">Chat</div>
  <div id="list"></div>
</aside>
<main id="main">
<button class="ghost" id="toggle" aria-label="Mostra o nascondi le chat" aria-expanded="true"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button>

<div id="scroll">
  <div id="empty">
    <span class="logo"><svg viewBox="0 0 24 24"><path d="M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z"/></svg></span>
    <h1>Come posso aiutarti?</h1>
    <p>Scrivi un messaggio oppure parti da uno di questi spunti.</p>
    <div class="chips">
      <button class="chip" data-p="Spiega cosa fa questo progetto e come è organizzato.">Spiega il progetto<small>Panoramica e struttura</small></button>
      <button class="chip" data-p="Scrivi uno script PowerShell che ">Scrivi uno script<small>PowerShell, Python, C#…</small></button>
      <button class="chip" data-p="Rivedi questo codice e suggerisci miglioramenti:&#10;&#10;">Rivedi del codice<small>Bug, leggibilità, prestazioni</small></button>
      <button class="chip" data-p="Riassumi in modo chiaro questo testo:&#10;&#10;">Riassumi un testo<small>Punti chiave in breve</small></button>
    </div>
  </div>
  <div id="chat" role="log" aria-live="polite" aria-label="Conversazione" hidden></div>
</div>

<footer>
  <div class="composer">
    <textarea id="input" rows="1" placeholder="Scrivi un messaggio a Claude…" aria-label="Messaggio"></textarea>
    <div class="bar">
      <label class="field">Modello
        <select id="model" aria-label="Modello">{{MODELS}}<option value="__custom">Altro ID…</option></select>
        <input id="custom" placeholder="es. claude-opus-5-5" aria-label="ID modello personalizzato" hidden>
      </label>
      <label class="field">Effort
        <select id="effort" aria-label="Effort di ragionamento">
          <option value="">Predefinito</option><option>low</option><option>medium</option><option>high</option><option>xhigh</option><option>max</option>
        </select>
      </label>
      <span class="spacer"></span>
      <button id="send" aria-label="Invia messaggio" disabled><svg viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
    </div>
  </div>
  <div class="hint"><kbd>Invio</kbd> per inviare · <kbd>Maiusc</kbd>+<kbd>Invio</kbd> per andare a capo</div>
</footer>
</main>

<script>
const $ = s => document.querySelector(s);
const chat = $('#chat'), empty = $('#empty'), input = $('#input'), send = $('#send'), scroller = $('#scroll');
const host = window.chrome && window.chrome.webview;
let busy = false;
const ICON_COPY = '<svg viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg>';
const STAR = '<svg viewBox="0 0 24 24"><path d="M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z"/></svg>';

function post(m) { host && host.postMessage(m); }
function copy(text) {
  const t = document.createElement('textarea'); t.value = text; document.body.appendChild(t); t.select();
  document.execCommand('copy'); t.remove();
}
function flash(btn, label) { const old = btn.innerHTML; btn.textContent = label; setTimeout(() => btn.innerHTML = old, 1400); }
function bottom() { scroller.scrollTop = scroller.scrollHeight; }
function el(html) { const d = document.createElement('div'); d.innerHTML = html.trim(); return d.firstChild; }
function esc(s) { return s.replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c])); }

function show(node) {
  empty.hidden = true; chat.hidden = false;
  chat.appendChild(node); bottom();
}
function addUser(text) { show(el(`<div class="msg user"><div class="bubble">${esc(text)}</div></div>`)); }
function addErr(text) { show(el(`<div class="msg err"><div class="body"><div class="content">${esc(text)}</div></div></div>`)); }
function addAi(html, md) {
  const m = el(`<div class="msg ai"><span class="avatar">${STAR}</span><div class="body"><div class="who">Claude</div><div class="content">${html}</div>
    <div class="actions"><button class="ghost" aria-label="Copia la risposta">${ICON_COPY}Copia</button></div></div></div>`);
  m.querySelectorAll('pre').forEach(p => {
    const b = el('<button class="mini" aria-label="Copia il codice">Copia</button>');
    b.onclick = () => { copy(p.querySelector('code').innerText); flash(b, 'Copiato'); };
    p.appendChild(b);
  });
  const a = m.querySelector('.actions button'); a.onclick = () => { copy(md); flash(a, 'Copiato'); };
  show(m);
}
function setBusy(v) {
  busy = v; refresh();
  if (v) show(el(`<div class="msg wait" id="typing" role="status"><span class="avatar">${STAR}</span><span class="dots"><i></i><i></i><i></i></span>Claude sta scrivendo…</div>`));
  else { const t = $('#typing'); t && t.remove(); input.focus(); }
}
function refresh() { send.disabled = busy || !input.value.trim(); }
function grow() { input.style.height = 'auto'; input.style.height = Math.min(input.scrollHeight, 200) + 'px'; refresh(); }

function submit() {
  const text = input.value.trim();
  if (!text || busy) return;
  const sel = $('#model').value;
  const model = sel === '__custom' ? $('#custom').value.trim() : sel;
  addUser(text); input.value = ''; grow(); setBusy(true);
  post({ type: 'send', text, model, effort: $('#effort').value });
}

input.addEventListener('input', grow);
input.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); submit(); } });
send.onclick = submit;
$('#model').onchange = e => { const c = $('#custom'); c.hidden = e.target.value !== '__custom'; if (!c.hidden) c.focus(); };
function clearView() { chat.replaceChildren(); chat.hidden = true; empty.hidden = false; }
$('#reset').onclick = () => { if (busy) return; clearView(); refresh(); post({ type: 'reset' }); input.focus(); };
$('#toggle').onclick = () => { const c = $('#side').classList.toggle('closed'); $('#toggle').setAttribute('aria-expanded', String(!c)); };

const ICON_X = '<svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>';
function renderList(items, current) {
  const list = $('#list');
  list.replaceChildren();
  if (!items.length) { list.append(el('<div class="none">Nessuna chat salvata</div>')); return; }
  for (const c of items) {
    const when = new Date(c.updated).toLocaleString('it-IT', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
    const row = el(`<div class="item${c.id === current ? ' active' : ''}"><button class="open" aria-label="Apri chat: ${esc(c.title)}"></button><span class="t">${esc(c.title)}</span><span class="d">${esc(when)}</span><button class="x" aria-label="Elimina chat">${ICON_X}</button></div>`);
    row.querySelector('.open').onclick = () => { if (!busy && c.id !== current) post({ type: 'open', id: c.id }); };
    row.querySelector('.x').onclick = () => { if (!busy && confirm('Eliminare questa chat?')) post({ type: 'delete', id: c.id }); };
    list.append(row);
  }
}
function load(messages) {
  clearView();
  for (const m of messages) {
    if (m.role === 'user') addUser(m.text);
    else if (m.role === 'ai') addAi(m.html, m.text);
    else addErr(m.text);
  }
  bottom();
}
document.querySelectorAll('.chip').forEach(c => c.onclick = () => { input.value = c.dataset.p; grow(); input.focus(); input.setSelectionRange(input.value.length, input.value.length); });

host && host.addEventListener('message', e => {
  const m = e.data;
  if (m.type === 'ai') addAi(m.html, m.md);
  else if (m.type === 'err') addErr(m.text);
  else if (m.type === 'done') setBusy(false);
  else if (m.type === 'chats') renderList(m.items, m.current);
  else if (m.type === 'load') load(m.messages);
});
input.focus();
post({ type: 'list' });
</script>
</body>
</html>