a2acalling 0.6.57 → 0.6.58

package/src/dashboard/public/app.js

@@ -214,13 +214,13 @@ function formatUpdaterState(stateValue) {
   return state.replaceAll('_', ' ');
 }
 
-function updaterPillClass(stateValue) {
+function badgeVariant(stateValue) {
   const state = String(stateValue || '').trim();
-  if (state === 'failed') return 'err';
+  if (state === 'failed') return 'danger';
   if (state === 'waiting_for_safe_restart' || state === 'checking' || state === 'downloading' || state === 'applying' || state === 'restarting') {
-    return 'warn';
+    return 'warning';
   }
-  return 'ok';
+  return 'success';
 }
 
 async function copyText(value) {
@@ -250,36 +250,33 @@ async function copyText(value) {
 }
 
 function bindTabs() {
-  const activateTab = (tab, options = {}) => {
-    const target = String(tab || '').replace(/^#/, '').trim();
-    if (!target) return false;
-    const btn = Array.from(document.querySelectorAll('.tab')).find(b => b.dataset.tab === target);
-    const panel = document.getElementById(`tab-${target}`);
-    if (!btn || !panel) return false;
-
-    document.querySelectorAll('.tab').forEach(b => b.classList.remove('is-active'));
-    document.querySelectorAll('.panel').forEach(p => p.classList.remove('is-active'));
-    btn.classList.add('is-active');
-    panel.classList.add('is-active');
-
-    if (options.updateHash) {
-      try { window.location.hash = target; } catch (err) {}
-    }
-    return true;
-  };
+  const tabGroup = document.getElementById('main-tabs');
+  if (!tabGroup) return;
 
-  document.querySelectorAll('.tab').forEach(btn => {
-    btn.addEventListener('click', () => {
-      activateTab(btn.dataset.tab, { updateHash: true });
-    });
+  tabGroup.addEventListener('sl-tab-show', (e) => {
+    const tabName = e.detail.name;
+    try { window.location.hash = tabName; } catch (err) {}
+    if (typeof onTabSwitch === 'function') onTabSwitch(tabName);
   });
 
-  window.addEventListener('hashchange', () => {
-    activateTab(window.location.hash);
-  });
+  // Deep-link support: activate the tab matching the URL hash
+  const activateFromHash = () => {
+    const hash = window.location.hash.slice(1);
+    if (hash) {
+      // Use try/catch in case the tab group isn't fully ready
+      try { tabGroup.show(hash); } catch (err) {}
+    }
+  };
+
+  window.addEventListener('hashchange', activateFromHash);
 
-  // Deep-link into a tab with /dashboard/#logs, etc.
-  activateTab(window.location.hash);
+  // On initial load, activate from hash (wait for Shoelace to be ready)
+  if (tabGroup.updateComplete) {
+    tabGroup.updateComplete.then(activateFromHash);
+  } else {
+    // Fallback: try after a short delay
+    setTimeout(activateFromHash, 100);
+  }
 }
 
 function norm(value) {
@@ -307,6 +304,35 @@ function contactLabel(contact) {
   return String(contact?.name || '').trim() || String(contact?.host || '').trim() || '-';
 }
 
+function getPinnedContacts() {
+  try {
+    const raw = localStorage.getItem('a2a-pinned-contacts');
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch (err) {
+    return [];
+  }
+}
+
+function togglePin(contactId) {
+  const id = String(contactId || '');
+  if (!id) return;
+  const pinned = getPinnedContacts();
+  const index = pinned.indexOf(id);
+  if (index >= 0) {
+    pinned.splice(index, 1);
+  } else {
+    pinned.push(id);
+  }
+  try {
+    localStorage.setItem('a2a-pinned-contacts', JSON.stringify(pinned));
+  } catch (err) {
+    // localStorage may be unavailable
+  }
+  renderContacts();
+}
+
 function renderContacts() {
   const el = document.getElementById('contacts-sections');
   if (!el) return;
@@ -318,30 +344,18 @@ function renderContacts() {
     .filter(c => isMine(c))
     .sort((a, b) => contactLabel(a).localeCompare(contactLabel(b)));
 
+  const pinnedIds = getPinnedContacts();
   const lastCalled = contacts
-    .filter(c => c && c.last_call_at)
-    .sort((a, b) => String(b.last_call_at || '').localeCompare(String(a.last_call_at || '')))
+    .filter(c => c && c.last_call_at && !isMine(c))
+    .sort((a, b) => {
+      const aPinned = pinnedIds.includes(String(a.id));
+      const bPinned = pinnedIds.includes(String(b.id));
+      if (aPinned && !bPinned) return -1;
+      if (!aPinned && bPinned) return 1;
+      return String(b.last_call_at || '').localeCompare(String(a.last_call_at || ''));
+    })
     .slice(0, 12);
 
-  const groups = new Map();
-  for (const c of contacts) {
-    const owner = String(c?.owner || '').trim() || '(unknown owner)';
-    if (!groups.has(owner)) groups.set(owner, []);
-    groups.get(owner).push(c);
-  }
-
-  const owners = Array.from(groups.keys()).sort((a, b) => {
-    // Keep local owner group near the top (after the dedicated "My agents" section).
-    const local = norm(getLocalOwnerName());
-    const aIsLocal = local && norm(a) === local;
-    const bIsLocal = local && norm(b) === local;
-    if (aIsLocal && !bIsLocal) return -1;
-    if (!aIsLocal && bIsLocal) return 1;
-    if (a === '(unknown owner)' && b !== '(unknown owner)') return 1;
-    if (a !== '(unknown owner)' && b === '(unknown owner)') return -1;
-    return a.localeCompare(b);
-  });
-
   const rowHtml = (c, opts = {}) => {
     const canCall = Boolean(c?.can_call);
     const mine = Boolean(c?.is_mine);
@@ -350,13 +364,17 @@ function renderContacts() {
     const lastCallAt = c?.last_call_at ? fmtDate(c.last_call_at) : '-';
     const calls = Number.isFinite(c?.call_count) ? c.call_count : (c?.call_count || 0);
     const isSelected = selected && String(c?.id) === selected;
+    const isPinned = pinnedIds.includes(String(c?.id));
 
     const actionBits = [];
+    if (opts.showPin) {
+      actionBits.push(`<sl-icon-button name="${isPinned ? 'pin-fill' : 'pin'}" class="pin-btn${isPinned ? ' pinned' : ''}" data-pin-contact="${esc(c.id)}" title="${isPinned ? 'Unpin' : 'Pin to top'}"></sl-icon-button>`);
+    }
     if (c?.last_call_id) {
-      actionBits.push(`<button data-open-call="${esc(c.last_call_id)}" type="button">Transcript</button>`);
+      actionBits.push(`<sl-button size="small" data-open-call="${esc(c.last_call_id)}">Transcript</sl-button>`);
     }
-    actionBits.push(`<button data-toggle-mine="${esc(c.id)}" type="button">${mine ? 'Unmark mine' : 'Mark mine'}</button>`);
-    actionBits.push(`<button data-remove-contact="${esc(c.id)}" type="button">Remove</button>`);
+    actionBits.push(`<sl-button size="small" data-toggle-mine="${esc(c.id)}">${mine ? 'Unmark mine' : 'Mark mine'}</sl-button>`);
+    actionBits.push(`<sl-button size="small" variant="danger" data-remove-contact="${esc(c.id)}">Remove</sl-button>`);
 
     const locationCell = opts.showLocation ? `<td>${esc(formatLocation(c))}</td>` : '';
     const ownerCell = opts.showOwner ? `<td>${esc(c?.owner || '-')}</td>` : '';
@@ -366,8 +384,8 @@ function renderContacts() {
       <tr ${isSelected ? 'data-selected="1"' : ''}>
         <td>
           <div class="row" style="margin:0;">
-            <button class="btn-link" data-contact-select="${esc(c.id)}" type="button">${esc(contactLabel(c))}</button>
-            <button data-contact-call="${esc(c.id)}" type="button" ${canCall ? '' : 'disabled'}>Call</button>
+            <sl-button variant="text" size="small" data-contact-select="${esc(c.id)}">${esc(contactLabel(c))}</sl-button>
+            <sl-button size="small" variant="primary" data-contact-call="${esc(c.id)}" ${canCall ? '' : 'disabled'}>Call</sl-button>
           </div>
         </td>
         ${locationCell}
@@ -400,30 +418,48 @@ function renderContacts() {
   };
 
   const myAgentsSection = `
-    <div class="card">
+    <sl-card>
       <h3>My agents</h3>
       ${tableHtml(myAgents, { showLocation: true, showOwner: false, showSummary: false })}
-    </div>
+    </sl-card>
   `;
 
   const lastCalledSection = `
-    <div class="card">
+    <sl-card>
       <h3>Last called agents</h3>
-      ${tableHtml(lastCalled, { showLocation: false, showOwner: true, showSummary: false })}
-    </div>
+      ${tableHtml(lastCalled, { showLocation: false, showOwner: true, showSummary: false, showPin: true })}
+    </sl-card>
   `;
 
-  const groupedSections = owners.map(owner => {
-    const rows = (groups.get(owner) || []).slice().sort((a, b) => contactLabel(a).localeCompare(contactLabel(b)));
+  const otherContacts = contacts.filter(c => !isMine(c));
+  const otherGroups = new Map();
+  for (const c of otherContacts) {
+    const owner = String(c?.owner || '').trim() || '(unknown owner)';
+    if (!otherGroups.has(owner)) otherGroups.set(owner, []);
+    otherGroups.get(owner).push(c);
+  }
+
+  const otherOwners = Array.from(otherGroups.keys()).sort((a, b) => {
+    if (a === '(unknown owner)' && b !== '(unknown owner)') return 1;
+    if (a !== '(unknown owner)' && b === '(unknown owner)') return -1;
+    return a.localeCompare(b);
+  });
+
+  const groupedSections = otherOwners.map(owner => {
+    const rows = (otherGroups.get(owner) || []).slice().sort((a, b) => contactLabel(a).localeCompare(contactLabel(b)));
     return `
-      <div class="card">
+      <sl-card>
         <h3>${esc(owner)}</h3>
         ${tableHtml(rows, { showLocation: false, showOwner: false, showSummary: true })}
-      </div>
+      </sl-card>
     `;
   }).join('');
 
-  el.innerHTML = `${myAgentsSection}${lastCalledSection}${groupedSections}`;
+  const otherAgentsHeading = otherOwners.length
+    ? `<h3 style="margin-top:1rem;">Other Agents</h3>`
+    : '';
+
+  el.innerHTML = `${myAgentsSection}${lastCalledSection}${otherAgentsHeading}${groupedSections}`;
 }
 
 async function loadContacts() {
@@ -437,6 +473,15 @@ function bindContactsActions() {
   const form = document.getElementById('add-contact-form');
   if (!form) return;
 
+  // Cancel button collapses the sl-details
+  const cancelBtn = document.getElementById('add-contact-cancel');
+  const addDetails = document.getElementById('add-contact-details');
+  if (cancelBtn && addDetails) {
+    cancelBtn.addEventListener('click', () => {
+      addDetails.open = false;
+    });
+  }
+
   const urlEl = document.getElementById('add-contact-url');
   const mineEl = document.getElementById('add-contact-mine');
   const serverNameEl = document.getElementById('add-contact-server-name');
@@ -449,9 +494,9 @@ function bindContactsActions() {
       serverNameEl.value = match[1];
     }
   };
-  urlEl?.addEventListener('blur', defaultServerNameFromUrl);
-  urlEl?.addEventListener('change', defaultServerNameFromUrl);
-  mineEl?.addEventListener('change', () => {
+  urlEl?.addEventListener('sl-blur', defaultServerNameFromUrl);
+  urlEl?.addEventListener('sl-change', defaultServerNameFromUrl);
+  mineEl?.addEventListener('sl-change', () => {
     if (!serverNameEl) return;
     serverNameEl.disabled = !mineEl.checked;
     if (mineEl.checked) {
@@ -467,7 +512,7 @@ function bindContactsActions() {
     const url = document.getElementById('add-contact-url').value.trim();
     const name = document.getElementById('add-contact-name').value.trim();
     const owner = document.getElementById('add-contact-owner').value.trim();
-    const isMine = Boolean(document.getElementById('add-contact-mine')?.checked);
+    const isMineVal = Boolean(document.getElementById('add-contact-mine')?.checked);
     const serverName = document.getElementById('add-contact-server-name').value.trim();
     const tagsRaw = document.getElementById('add-contact-tags').value.trim();
     const notes = document.getElementById('add-contact-notes').value.trim();
@@ -497,7 +542,7 @@ function bindContactsActions() {
           invite_url: url,
           name: name || undefined,
           owner: owner || undefined,
-          is_mine: isMine,
+          is_mine: isMineVal,
           server_name: serverName || undefined,
           tags,
           notes: notes || undefined,
@@ -506,15 +551,26 @@ function bindContactsActions() {
       });
       showNotice('Contact added');
       form.reset();
+      // Collapse the sl-details after successful add
+      if (addDetails) addDetails.open = false;
       await loadContacts();
     } catch (err) {
       showNotice(err.message);
     }
   });
 
-  const panel = document.getElementById('tab-contacts');
+  // Event delegation on the contacts tab panel
+  const panel = document.querySelector('sl-tab-panel[name="contacts"]');
   panel?.addEventListener('click', async (e) => {
-    const selectBtn = e.target.closest('button[data-contact-select]');
+    const pinBtn = e.target.closest('[data-pin-contact]');
+    if (pinBtn) {
+      e.preventDefault();
+      const id = pinBtn.dataset.pinContact;
+      if (id) togglePin(id);
+      return;
+    }
+
+    const selectBtn = e.target.closest('[data-contact-select]');
     if (selectBtn) {
       e.preventDefault();
       const id = selectBtn.dataset.contactSelect;
@@ -524,14 +580,14 @@ function bindContactsActions() {
       return;
     }
 
-    const openBtn = e.target.closest('button[data-open-call]');
+    const openBtn = e.target.closest('[data-open-call]');
     if (openBtn) {
       e.preventDefault();
       openCallTranscript(openBtn.dataset.openCall);
       return;
     }
 
-    const mineBtn = e.target.closest('button[data-toggle-mine]');
+    const mineBtn = e.target.closest('[data-toggle-mine]');
     if (mineBtn) {
       e.preventDefault();
       const id = mineBtn.dataset.toggleMine;
@@ -558,7 +614,7 @@ function bindContactsActions() {
       return;
     }
 
-    const removeBtn = e.target.closest('button[data-remove-contact]');
+    const removeBtn = e.target.closest('[data-remove-contact]');
     if (removeBtn) {
       e.preventDefault();
       const id = removeBtn.dataset.removeContact;
@@ -580,7 +636,7 @@ function bindContactsActions() {
       return;
     }
 
-    const callBtn = e.target.closest('button[data-contact-call]');
+    const callBtn = e.target.closest('[data-contact-call]');
     if (callBtn) {
       e.preventDefault();
       const id = callBtn.dataset.contactCall;
@@ -645,15 +701,35 @@ async function loadCallDetail(conversationId) {
   const payload = await request(`/calls/${encodeURIComponent(conversationId)}?messages=40`);
   const call = payload.call;
   const el = document.getElementById('call-detail');
-  const messages = (call.recentMessages || [])
-    .map(msg => `[${fmtDate(msg.timestamp)}] ${msg.direction}: ${msg.content}`)
+
+  // Summary: prefer agent-generated summary, fall back to owner summary
+  const summaryText = call.summary || call.ownerContext?.summary || '';
+  const summaryHtml = summaryText
+    ? `<pre class="summary">${esc(summaryText)}</pre>`
+    : `<p class="summary-pending"><em>${call.status === 'active' ? 'Call in progress\u2026' : 'Summary pending\u2026'}</em></p>`;
+
+  // Full transcript in a collapsible section
+  const messages = (call.recentMessages || []);
+  const transcriptLines = messages
+    .map(msg => `[${esc(fmtDate(msg.timestamp))}] ${esc(msg.direction)}: ${esc(msg.content)}`)
     .join('\n\n');
+  const totalMessages = call.messageCount || messages.length;
+  const countLabel = messages.length < totalMessages
+    ? `${messages.length} of ${totalMessages} messages`
+    : `${messages.length} message${messages.length === 1 ? '' : 's'}`;
+  const transcriptHtml = messages.length
+    ? `<sl-details class="transcript-details" summary="Full Transcript (${countLabel})">
+        <pre class="transcript">${transcriptLines}</pre>
+      </sl-details>`
+    : '';
+
   el.innerHTML = `
-    <h3>Call Detail: ${call.id}</h3>
-    <p><strong>Contact:</strong> ${call.contact?.name || call.contact || '-'}</p>
-    <p><strong>Status:</strong> ${call.status || '-'}</p>
-    <p><strong>Summary:</strong> ${(call.summary || call.ownerContext?.summary || '-')}</p>
-    <pre class="summary">${messages || 'No messages recorded.'}</pre>
+    <h3>Call Detail: ${esc(call.id)}</h3>
+    <p><strong>Contact:</strong> ${esc(call.contact?.name || call.contact || '-')}</p>
+    <p><strong>Status:</strong> ${esc(call.status || '-')}</p>
+    <p><strong>Summary:</strong></p>
+    ${summaryHtml}
+    ${transcriptHtml}
   `;
 }
 
@@ -690,7 +766,7 @@ function renderContactDetail() {
   const resultHtml = result
     ? `<div style="margin-top:0.6rem;">
         <strong>Last call result:</strong> ${result.success ? 'success' : 'failed'}<br>
-        ${result.conversation_id ? `Conversation: <span class="mono">${esc(result.conversation_id)}</span> <button data-open-call="${esc(result.conversation_id)}" type="button">Transcript</button><br>` : ''}
+        ${result.conversation_id ? `Conversation: <span class="mono">${esc(result.conversation_id)}</span> <sl-button size="small" data-open-call="${esc(result.conversation_id)}">Transcript</sl-button><br>` : ''}
         ${result.error ? `<span class="mono">${esc(result.error)}</span><br>` : ''}
         ${result.response ? `<pre class="summary">${esc(String(result.response))}</pre>` : ''}
       </div>`
@@ -705,7 +781,7 @@ function renderContactDetail() {
         <td>${esc(call.status || '-')}</td>
         <td>${esc(fmtDate(call.last_message_at))}</td>
         <td title="${esc(summary)}">${esc(preview)}</td>
-        <td><button data-open-call="${esc(call.id)}" type="button">Transcript</button></td>
+        <td><sl-button size="small" data-open-call="${esc(call.id)}">Transcript</sl-button></td>
       </tr>
     `;
   }).join('');
@@ -713,16 +789,16 @@ function renderContactDetail() {
   el.innerHTML = `
     <div class="row">
       <h3 style="margin:0;">Contact: ${esc(contactLabel(contact))}</h3>
-      <button data-contact-call="${esc(contact.id)}" type="button" ${canCall ? '' : 'disabled'}>Call</button>
-      <button data-remove-contact="${esc(contact.id)}" type="button">Remove</button>
+      <sl-button size="small" variant="primary" data-contact-call="${esc(contact.id)}" ${canCall ? '' : 'disabled'}>Call</sl-button>
+      <sl-button size="small" variant="danger" data-remove-contact="${esc(contact.id)}">Remove</sl-button>
     </div>
 
-	    <div class="row" style="margin-bottom:0.4rem;">
-	      <div><strong>Mine:</strong> ${contact.is_mine ? 'yes' : 'no'}</div>
-	      <div><strong>Owner:</strong> ${esc(contact.owner || '-')}</div>
-	      <div><strong>Web address:</strong> <span class="mono">${esc(contact.web_address || contact.host || '-')}</span></div>
-	      <div><strong>Server name:</strong> ${esc(contact.server_name || '-')}</div>
-	    </div>
+    <div class="row" style="margin-bottom:0.4rem;">
+      <div><strong>Mine:</strong> ${contact.is_mine ? 'yes' : 'no'}</div>
+      <div><strong>Owner:</strong> ${esc(contact.owner || '-')}</div>
+      <div><strong>Web address:</strong> <span class="mono">${esc(contact.web_address || contact.host || '-')}</span></div>
+      <div><strong>Server name:</strong> ${esc(contact.server_name || '-')}</div>
+    </div>
     <div class="row">
       <div><strong>Status:</strong> ${esc(contact.status || '-')}</div>
       <div><strong>Total calls:</strong> ${esc(String(contact.call_count || 0))}</div>
@@ -731,48 +807,45 @@ function renderContactDetail() {
 
     ${resultHtml}
 
-    <details style="margin-top:0.8rem;" open>
-	      <summary><strong>Edit contact</strong></summary>
-	      <form id="contact-edit-form" data-contact-id="${esc(contact.id)}" style="margin-top:0.6rem;">
-	        <label>Agent name <input id="contact-edit-name" type="text" value="${esc(contact.name || '')}"></label>
-	        <label>Owner name <input id="contact-edit-owner" type="text" value="${esc(contact.owner || '')}"></label>
-	        <label><input id="contact-edit-mine" type="checkbox" ${contact.is_mine ? 'checked' : ''}> Mark as mine (personal agent)</label>
-	        <label>Server name (my agents only) <input id="contact-edit-server-name" type="text" value="${esc(contact.server_name || '')}" ${contact.is_mine ? '' : 'disabled'}></label>
-	        <label>Tags <input id="contact-edit-tags" type="text" value="${esc(tagsText)}" placeholder="comma,separated"></label>
-	        <label>Notes <textarea id="contact-edit-notes" rows="3">${esc(contact.notes || '')}</textarea></label>
-	        <label>Fields (JSON) <textarea id="contact-edit-fields" rows="5">${esc(fieldsText)}</textarea></label>
-	        <div class="row">
-	          <button type="submit">Save</button>
-	        </div>
-	      </form>
-	    </details>
-
-    <details style="margin-top:0.8rem;" open>
-      <summary><strong>Call</strong></summary>
+    <sl-details summary="Edit contact" open style="margin-top:0.8rem;">
+      <form id="contact-edit-form" data-contact-id="${esc(contact.id)}" style="margin-top:0.6rem;">
+        <sl-input id="contact-edit-name" label="Agent name" value="${esc(contact.name || '')}"></sl-input>
+        <sl-input id="contact-edit-owner" label="Owner name" value="${esc(contact.owner || '')}"></sl-input>
+        <sl-checkbox id="contact-edit-mine" ${contact.is_mine ? 'checked' : ''}>Mark as mine (personal agent)</sl-checkbox>
+        <sl-input id="contact-edit-server-name" label="Server name (my agents only)" value="${esc(contact.server_name || '')}" ${contact.is_mine ? '' : 'disabled'}></sl-input>
+        <sl-input id="contact-edit-tags" label="Tags" value="${esc(tagsText)}" placeholder="comma,separated"></sl-input>
+        <sl-textarea id="contact-edit-notes" label="Notes" rows="3" value="${esc(contact.notes || '')}"></sl-textarea>
+        <sl-textarea id="contact-edit-fields" label="Fields (JSON)" rows="5" value="${esc(fieldsText)}"></sl-textarea>
+        <div class="row">
+          <sl-button type="submit" variant="primary" size="small">Save</sl-button>
+        </div>
+      </form>
+    </sl-details>
+
+    <sl-details summary="Call" open style="margin-top:0.8rem;">
       <form id="contact-call-form" data-contact-id="${esc(contact.id)}" style="margin-top:0.6rem;">
-        <label>Message <textarea id="contact-call-message" rows="4" placeholder="Message to send"></textarea></label>
+        <sl-textarea id="contact-call-message" label="Message" rows="4" placeholder="Message to send"></sl-textarea>
         <div class="row">
-          <button type="submit" ${canCall ? '' : 'disabled'}>Call</button>
+          <sl-button type="submit" variant="primary" size="small" ${canCall ? '' : 'disabled'}>Call</sl-button>
         </div>
       </form>
-    </details>
+    </sl-details>
 
-    <details style="margin-top:0.8rem;">
-      <summary><strong>Call history</strong></summary>
+    <sl-details summary="Call history" style="margin-top:0.8rem;">
       <div style="margin-top:0.6rem;">
         <table>
           <thead><tr><th>ID</th><th>Status</th><th>Updated</th><th>Summary</th><th>Action</th></tr></thead>
           <tbody>${callRows || '<tr><td colspan="5">No calls found.</td></tr>'}</tbody>
         </table>
       </div>
-    </details>
+    </sl-details>
   `;
 
   const editForm = document.getElementById('contact-edit-form');
   if (editForm) {
     const mineEl = document.getElementById('contact-edit-mine');
     const serverNameEl = document.getElementById('contact-edit-server-name');
-    mineEl?.addEventListener('change', () => {
+    mineEl?.addEventListener('sl-change', () => {
       if (!serverNameEl) return;
       serverNameEl.disabled = !mineEl.checked;
     });
@@ -802,19 +875,19 @@ function renderContactDetail() {
         }
       }
 
-	      try {
-	        await request(`/contacts/${encodeURIComponent(id)}`, {
-	          method: 'PUT',
-	          body: JSON.stringify({
-	            name: document.getElementById('contact-edit-name').value,
-	            owner: document.getElementById('contact-edit-owner').value,
-	            is_mine: Boolean(document.getElementById('contact-edit-mine')?.checked),
-	            server_name: document.getElementById('contact-edit-server-name').value,
-	            notes: document.getElementById('contact-edit-notes').value,
-	            tags,
-	            fields
-	          })
-	        });
+      try {
+        await request(`/contacts/${encodeURIComponent(id)}`, {
+          method: 'PUT',
+          body: JSON.stringify({
+            name: document.getElementById('contact-edit-name').value,
+            owner: document.getElementById('contact-edit-owner').value,
+            is_mine: Boolean(document.getElementById('contact-edit-mine')?.checked),
+            server_name: document.getElementById('contact-edit-server-name').value,
+            notes: document.getElementById('contact-edit-notes').value,
+            tags,
+            fields
+          })
+        });
         showNotice('Contact saved');
         await loadContacts();
         await loadCallsForContact(id);
@@ -933,10 +1006,10 @@ function renderLogStats() {
       <strong>Total:</strong> ${stats.total || 0}
     </div>
     <div class="row">
-      <strong>By level:</strong> ${levels.map(([k, v]) => `${esc(k)}=${v}`).join(' · ') || '(none)'}
+      <strong>By level:</strong> ${levels.map(([k, v]) => `${esc(k)}=${v}`).join(' \u00b7 ') || '(none)'}
     </div>
     <div class="row">
-      <strong>Top components:</strong> ${components.map(([k, v]) => `${esc(k)}=${v}`).join(' · ') || '(none)'}
+      <strong>Top components:</strong> ${components.map(([k, v]) => `${esc(k)}=${v}`).join(' \u00b7 ') || '(none)'}
     </div>
   `;
 }
@@ -964,7 +1037,7 @@ function renderTraceDetail() {
   el.innerHTML = `
     <div class="row">
       <h3 style="margin:0;">Trace: <span class="mono">${esc(state.trace.trace_id || '')}</span></h3>
-      <button id="clear-trace">Clear</button>
+      <sl-button id="clear-trace" size="small">Clear</sl-button>
     </div>
     <pre class="summary mono">${esc(lines || 'No trace logs.')}</pre>
   `;
@@ -990,8 +1063,8 @@ function renderLogs() {
       <td>${esc(row.component || '-')}</td>
       <td>${esc(row.event || '-')}</td>
       <td title="${esc(row.message || '')}">${esc(String(row.message || '').slice(0, 120) || '-')}</td>
-      <td class="mono">${esc(trace ? trace.slice(0, 14) + '…' : '-')}</td>
-      <td class="mono">${esc(row.conversation_id ? row.conversation_id.slice(0, 14) + '…' : '-')}</td>
+      <td class="mono">${esc(trace ? trace.slice(0, 14) + '\u2026' : '-')}</td>
+      <td class="mono">${esc(row.conversation_id ? row.conversation_id.slice(0, 14) + '\u2026' : '-')}</td>
       <td class="mono">${esc(row.token_id || '-')}</td>
       <td>${esc(row.error_code || '-')}</td>
       <td>${esc(row.status_code ?? '-')}</td>
@@ -1029,16 +1102,15 @@ function fillTierSelects() {
   const newTierCopy = document.getElementById('new-tier-copy-from');
   const inviteTier = document.getElementById('invite-tier');
 
-  [tierSelect, copyFrom, inviteTier].forEach(el => { el.innerHTML = ''; });
-  newTierCopy.innerHTML = '<option value="">None</option>';
+  // Build options HTML for sl-select elements
+  const optionsHtml = tiers.map(tier =>
+    `<sl-option value="${esc(tier.id)}">${esc(tier.id)} (${esc(tier.name || tier.id)})</sl-option>`
+  ).join('');
 
-  tiers.forEach(tier => {
-    const option = new Option(`${tier.id} (${tier.name || tier.id})`, tier.id);
-    tierSelect.add(option.cloneNode(true));
-    copyFrom.add(option.cloneNode(true));
-    inviteTier.add(option.cloneNode(true));
-    newTierCopy.add(option.cloneNode(true));
-  });
+  tierSelect.innerHTML = optionsHtml;
+  copyFrom.innerHTML = optionsHtml;
+  inviteTier.innerHTML = optionsHtml;
+  newTierCopy.innerHTML = `<sl-option value="">None</sl-option>${optionsHtml}`;
 
   if (tiers.length > 0) {
     tierSelect.value = tiers[0].id;
@@ -1062,7 +1134,7 @@ function renderTierEditor(tierId) {
 }
 
 function bindSettingsActions() {
-  document.getElementById('tier-select').addEventListener('change', (e) => {
+  document.getElementById('tier-select').addEventListener('sl-change', (e) => {
     renderTierEditor(e.target.value);
   });
 
@@ -1150,7 +1222,7 @@ function renderCallbookStatus() {
 
   const s = state.dashboardStatus;
   if (!s) {
-    el.textContent = 'Loading…';
+    el.textContent = 'Loading\u2026';
     return;
   }
 
@@ -1171,8 +1243,7 @@ function renderCallbookStatus() {
   const extMetaText = extMeta.length ? ` <span class="mono">(${esc(extMeta.join(', '))})</span>` : '';
   const extErrorText = ext && ext.error ? esc(ext.error) : '';
   const extAttemptsHtml = extAttempts.length
-    ? `<details style="margin-top:0.5rem;">
-        <summary>External IP probe</summary>
+    ? `<sl-details summary="External IP probe" style="margin-top:0.5rem;">
         <div class="mono" style="margin-top:0.35rem;">
           ${extAttempts.map(a => {
             const service = a && a.service ? String(a.service) : '-';
@@ -1182,7 +1253,7 @@ function renderCallbookStatus() {
             return esc(`${service}: ${ok ? 'ok' + status : 'failed' + err}`);
           }).join('<br>')}
         </div>
-      </details>`
+      </sl-details>`
     : '';
 
   el.innerHTML = `
@@ -1204,18 +1275,18 @@ function renderAutoUpdateStatus() {
 
   const au = state.autoUpdate;
   if (!au) {
-    el.textContent = 'Loading…';
+    el.textContent = 'Loading\u2026';
     if (toggleBtn) toggleBtn.disabled = true;
     return;
   }
 
   const stateText = formatUpdaterState(au.state);
-  const pillClass = updaterPillClass(au.state);
+  const variant = badgeVariant(au.state);
   const enabled = Boolean(au.enabled);
   const intervalSec = Number.isFinite(au.interval_ms) ? Math.floor(au.interval_ms / 1000) : null;
 
   el.innerHTML = `
-    <div><strong>Status:</strong> <span class="status-pill ${pillClass}">${esc(stateText)}</span></div>
+    <div><strong>Status:</strong> <sl-badge variant="${variant}">${esc(stateText)}</sl-badge></div>
     <div><strong>Enabled:</strong> ${enabled ? 'yes' : 'no'}</div>
     <div><strong>Current version:</strong> <span class="mono">${esc(au.current_version || '-')}</span></div>
     <div><strong>Latest version:</strong> <span class="mono">${esc(au.latest_version || '-')}</span></div>
@@ -1274,13 +1345,13 @@ function renderCallbookDevices() {
       <td>${esc(String(sessions))}</td>
       <td>${revoked ? esc(fmtDate(dev.revoked_at)) : '-'}</td>
       <td>
-        <button data-revoke="${esc(dev.id)}" ${revoked ? 'disabled' : ''}>Revoke</button>
+        <sl-button size="small" variant="danger" data-revoke="${esc(dev.id)}" ${revoked ? 'disabled' : ''}>Revoke</sl-button>
       </td>
     `;
     tbody.appendChild(tr);
   });
 
-  tbody.querySelectorAll('button[data-revoke]').forEach(btn => {
+  tbody.querySelectorAll('[data-revoke]').forEach(btn => {
     btn.addEventListener('click', async () => {
       const deviceId = btn.dataset.revoke;
       if (!deviceId) return;
@@ -1311,14 +1382,6 @@ function bindCallbookActions() {
   const labelEl = document.getElementById('callbook-label');
   const warningsEl = document.getElementById('callbook-warnings');
 
-  document.getElementById('callbook-refresh')?.addEventListener('click', () => {
-    Promise.all([loadDashboardStatus(true), loadCallbookDevices()]).catch(err => showNotice(err.message));
-  });
-
-  document.getElementById('callbook-refresh-devices')?.addEventListener('click', () => {
-    loadCallbookDevices().catch(err => showNotice(err.message));
-  });
-
   document.getElementById('callbook-logout')?.addEventListener('click', async () => {
     try {
       await request('/callbook/logout', { method: 'POST' });
@@ -1362,10 +1425,6 @@ function bindCallbookActions() {
 }
 
 function bindAutoUpdateActions() {
-  document.getElementById('auto-update-refresh')?.addEventListener('click', () => {
-    loadAutoUpdateStatus().catch(err => showNotice(err.message));
-  });
-
   document.getElementById('auto-update-check')?.addEventListener('click', async () => {
     try {
       await request('/update/check', { method: 'POST', body: JSON.stringify({}) });
@@ -1413,13 +1472,13 @@ function renderInvites() {
       <td>${invite.tier || '-'}</td>
       <td>${invite.calls_made || 0}${invite.max_calls ? `/${invite.max_calls}` : ''}</td>
       <td>${fmtDate(invite.expires_at)}</td>
-      <td>${invite.revoked ? 'revoked' : 'active'}</td>
-      <td><button data-revoke="${invite.id}" ${invite.revoked ? 'disabled' : ''}>Revoke</button></td>
+      <td><sl-badge variant="${invite.revoked ? 'danger' : 'success'}">${invite.revoked ? 'revoked' : 'active'}</sl-badge></td>
+      <td><sl-button size="small" variant="danger" data-revoke="${invite.id}" ${invite.revoked ? 'disabled' : ''}>Revoke</sl-button></td>
     `;
     tbody.appendChild(tr);
   });
 
-  tbody.querySelectorAll('button[data-revoke]').forEach(btn => {
+  tbody.querySelectorAll('[data-revoke]').forEach(btn => {
     btn.addEventListener('click', async () => {
       const tokenId = btn.dataset.revoke;
       await request(`/invites/${encodeURIComponent(tokenId)}/revoke`, { method: 'POST' });
@@ -1436,6 +1495,18 @@ async function loadInvites() {
 }
 
 function bindInviteActions() {
+  const cancelBtn = document.getElementById('generate-invite-cancel');
+  const inviteDetails = document.getElementById('generate-invite-details');
+  const inviteMessageWrap = document.getElementById('invite-message-wrap');
+  const inviteMessage = document.getElementById('invite-message');
+
+  // Cancel button collapses the sl-details
+  if (cancelBtn && inviteDetails) {
+    cancelBtn.addEventListener('click', () => {
+      inviteDetails.open = false;
+    });
+  }
+
   document.getElementById('invite-form').addEventListener('submit', async (e) => {
     e.preventDefault();
     const body = {
@@ -1450,7 +1521,13 @@ function bindInviteActions() {
       method: 'POST',
       body: JSON.stringify(body)
     });
-    document.getElementById('invite-message').value = result.invite_message || result.invite_url;
+    // Show the invite message textarea with the result
+    if (inviteMessage) {
+      inviteMessage.value = result.invite_message || result.invite_url;
+      if (inviteMessageWrap) inviteMessageWrap.style.display = 'block';
+    }
+    // Collapse the details after successful creation
+    if (inviteDetails) inviteDetails.open = false;
     if (result.warnings && result.warnings.length) {
       showNotice(result.warnings[0]);
     } else {
@@ -1460,13 +1537,7 @@ function bindInviteActions() {
   });
 }
 
-function bindRefreshButtons() {
-  document.getElementById('refresh-contacts').addEventListener('click', () => loadContacts().catch(err => showNotice(err.message)));
-  document.getElementById('refresh-calls').addEventListener('click', () => loadCalls().catch(err => showNotice(err.message)));
-  document.getElementById('refresh-invites').addEventListener('click', () => loadInvites().catch(err => showNotice(err.message)));
-  document.getElementById('refresh-logs').addEventListener('click', () => loadLogs().catch(err => showNotice(err.message)));
-  document.getElementById('refresh-log-stats').addEventListener('click', () => loadLogStats().catch(err => showNotice(err.message)));
-
+function bindLogFilterRefresh() {
   // Auto-refresh logs as filters change (debounced).
   let debounce = null;
   const schedule = () => {
@@ -1485,11 +1556,55 @@ function bindRefreshButtons() {
   ].forEach(id => {
     const el = document.getElementById(id);
     if (!el) return;
+    // Shoelace components fire sl-input and sl-change events
+    el.addEventListener('sl-input', schedule);
+    el.addEventListener('sl-change', schedule);
+    // Also listen for native events as fallback
     el.addEventListener('input', schedule);
     el.addEventListener('change', schedule);
   });
 }
 
+// --- Smart tab polling ---
+
+let pollTimer = null;
+
+function getActiveTab() {
+  const tabGroup = document.getElementById('main-tabs');
+  if (!tabGroup) return 'contacts';
+  // Shoelace tab group: find the active tab by checking which tab has the active attribute
+  const activeTab = tabGroup.querySelector('sl-tab[active]');
+  return activeTab ? activeTab.getAttribute('panel') : 'contacts';
+}
+
+const tabLoaders = {
+  contacts: loadContacts,
+  calls: loadCalls,
+  logs: () => { loadLogs(); loadLogStats(); },
+  settings: () => {},
+  invites: loadInvites,
+};
+
+function startPolling() {
+  stopPolling();
+  pollTimer = setInterval(() => {
+    const loader = tabLoaders[getActiveTab()];
+    if (loader) loader().catch(() => {});
+  }, 5000);
+}
+
+function stopPolling() {
+  if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+}
+
+function onTabSwitch(tabName) {
+  const loader = tabLoaders[tabName];
+  if (loader) {
+    try { loader().catch(() => {}); } catch (_) {}
+  }
+  startPolling(); // reset the 5s timer
+}
+
 async function bootstrap() {
   bindTabs();
   bindContactsActions();
@@ -1497,7 +1612,7 @@ async function bootstrap() {
   bindCallbookActions();
   bindAutoUpdateActions();
   bindInviteActions();
-  bindRefreshButtons();
+  bindLogFilterRefresh();
 
   try {
     await Promise.all([
@@ -1513,6 +1628,7 @@ async function bootstrap() {
     ]);
     showNotice('Dashboard loaded');
     connectRealtimeEvents();
+    startPolling();
 
     setInterval(() => {
       loadAutoUpdateStatus().catch(() => {});