a2acalling 0.6.57 → 0.6.59

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,36 @@ 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 = () => {
+    let hash = window.location.hash.slice(1);
+    // A2A-41: backward-compat alias — old bookmarks/links using #settings
+    // still work after rename to #permissions
+    if (hash === 'settings') hash = 'permissions';
+    if (hash) {
+      // Use try/catch in case the tab group isn't fully ready
+      try { tabGroup.show(hash); } catch (err) {}
+    }
+  };
 
-  // Deep-link into a tab with /dashboard/#logs, etc.
-  activateTab(window.location.hash);
+  window.addEventListener('hashchange', activateFromHash);
+
+  // 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 +307,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 +347,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 +367,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 +387,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 +421,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 +476,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 +497,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 +515,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 +545,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 +554,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 +583,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 +617,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 +639,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 +704,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 +769,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 +784,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 +792,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 +810,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 +878,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 +1009,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 +1040,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 +1066,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>
@@ -1022,6 +1098,198 @@ async function loadTrace(traceId) {
   renderTraceDetail();
 }
 
+// A2A-41: emoji map for visual tier differentiation. Standard tiers get
+// recognizable icons; custom/user-created tiers get a wrench.
+const TIER_EMOJIS = { public: '\u{1F310}', friends: '\u{1F46B}', family: '\u{1F468}\u200D\u{1F469}\u200D\u{1F467}\u200D\u{1F466}' };
+
+// A2A-41: tool descriptions for the checkbox UI. These match the tools
+// available in Claude Code that an agent owner might want to expose to callers.
+const TOOL_DESCRIPTIONS = {
+  'Bash': 'Execute shell commands \u2014 full access, can run anything',
+  'Bash(readonly)': 'Execute read-only shell commands \u2014 no writes, no installs',
+  'Read': 'Read files from the workspace',
+  'Grep': 'Search file contents with regex patterns',
+  'Glob': 'Find files by name patterns',
+  'WebSearch': 'Search the web for information',
+  'WebFetch': 'Fetch and read web page content'
+};
+
+// A2A-41: standard tier order for inheritance. Custom tiers are not in this list.
+const TIER_ORDER = ['public', 'friends', 'family'];
+
+// A2A-41: renders tool checkboxes instead of a textarea. Each tool gets
+// a checkbox with its description. Checked state comes from tier.allowed_tools.
+function renderToolCheckboxes(allowedTools) {
+  const container = document.getElementById('tier-tools-list');
+  container.innerHTML = Object.entries(TOOL_DESCRIPTIONS).map(([tool, desc]) => {
+    const checked = (allowedTools || []).includes(tool) ? 'checked' : '';
+    return `<sl-checkbox value="${esc(tool)}" ${checked}><strong>${esc(tool)}</strong> \u2014 <span class="tool-desc">${esc(desc)}</span></sl-checkbox>`;
+  }).join('');
+}
+
+// A2A-41: renders topics as expandable card rows with descriptions.
+// Data comes from tier.manifest.topics (array of {topic, description} objects).
+// Falls back to tier.topics (flat string array) for topics without manifest data.
+function renderTopicList(tier) {
+  const container = document.getElementById('tier-topics-list');
+  const manifestTopics = tier.manifest?.topics || [];
+  const flatTopics = tier.topics || [];
+
+  // A2A-41: prefer manifest data (has descriptions), fall back to flat array
+  const allTopics = manifestTopics.length > 0
+    ? manifestTopics.map(t => ({ label: t.topic, desc: t.description || '' }))
+    : flatTopics.map(t => ({ label: t, desc: '' }));
+
+  const rowsHtml = allTopics.map(t => `
+    <div class="topic-row" data-topic="${esc(t.label)}" data-type="topic">
+      <span class="drag-handle">\u2807</span>
+      <div class="topic-content">
+        <div class="topic-header">
+          <strong class="topic-label">${esc(t.label)}</strong>
+          <sl-icon-button name="chevron-down" class="topic-expand-btn" label="Expand"></sl-icon-button>
+          <sl-icon-button name="trash" class="topic-delete-btn" label="Delete"></sl-icon-button>
+        </div>
+        <div class="topic-description" style="display:none;">
+          <p class="topic-desc-text">${esc(t.desc) || '<em>No description</em>'}</p>
+          <sl-input class="topic-desc-edit" size="small" placeholder="Add description..." value="${esc(t.desc)}"></sl-input>
+        </div>
+      </div>
+    </div>
+  `).join('');
+
+  container.innerHTML = rowsHtml + `<button class="add-item-btn" data-type="topic">+ Add topic</button>`;
+}
+
+// A2A-41: renders goals as expandable card rows, identical pattern to topics.
+// Data from tier.manifest.objectives (array of {objective, description}).
+function renderGoalList(tier) {
+  const container = document.getElementById('tier-goals-list');
+  const manifestGoals = tier.manifest?.objectives || [];
+  const flatGoals = tier.goals || [];
+
+  const allGoals = manifestGoals.length > 0
+    ? manifestGoals.map(g => ({ label: g.objective || g.topic, desc: g.description || '' }))
+    : flatGoals.map(g => ({ label: g, desc: '' }));
+
+  const rowsHtml = allGoals.map(g => `
+    <div class="topic-row" data-topic="${esc(g.label)}" data-type="goal">
+      <span class="drag-handle">\u2807</span>
+      <div class="topic-content">
+        <div class="topic-header">
+          <strong class="topic-label">${esc(g.label)}</strong>
+          <sl-icon-button name="chevron-down" class="topic-expand-btn" label="Expand"></sl-icon-button>
+          <sl-icon-button name="trash" class="topic-delete-btn" label="Delete"></sl-icon-button>
+        </div>
+        <div class="topic-description" style="display:none;">
+          <p class="topic-desc-text">${esc(g.desc) || '<em>No description</em>'}</p>
+          <sl-input class="topic-desc-edit" size="small" placeholder="Add description..." value="${esc(g.desc)}"></sl-input>
+        </div>
+      </div>
+    </div>
+  `).join('');
+
+  container.innerHTML = rowsHtml + `<button class="add-item-btn" data-type="goal">+ Add goal</button>`;
+}
+
+// A2A-41: event delegation for topic and goal list interactions.
+// Uses a single click handler on each container instead of per-row binding,
+// preventing listener accumulation when topics are added dynamically.
+function bindItemListDelegation() {
+  ['tier-topics-list', 'tier-goals-list'].forEach(containerId => {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    container.addEventListener('click', (e) => {
+      // Expand/collapse
+      const expandBtn = e.target.closest('.topic-expand-btn');
+      if (expandBtn) {
+        const row = expandBtn.closest('.topic-row');
+        const desc = row.querySelector('.topic-description');
+        if (desc) {
+          const isHidden = desc.style.display === 'none';
+          desc.style.display = isHidden ? '' : 'none';
+          expandBtn.name = isHidden ? 'chevron-up' : 'chevron-down';
+        }
+        return;
+      }
+
+      // Delete
+      const deleteBtn = e.target.closest('.topic-delete-btn');
+      if (deleteBtn) {
+        deleteBtn.closest('.topic-row').remove();
+        return;
+      }
+
+      // Add new item
+      const addBtn = e.target.closest('.add-item-btn');
+      if (addBtn) {
+        const type = addBtn.dataset.type;
+        const label = type === 'topic' ? 'Topic name' : 'Goal name';
+        const newRow = document.createElement('div');
+        newRow.className = 'topic-row';
+        newRow.dataset.type = type;
+        newRow.innerHTML = `
+          <span class="drag-handle">\u2807</span>
+          <div class="topic-content">
+            <sl-input class="new-item-label" size="small" placeholder="${label}" autofocus></sl-input>
+            <sl-input class="new-item-desc" size="small" placeholder="Description (optional)"></sl-input>
+            <div class="row" style="margin-top:0.3rem;">
+              <sl-button size="small" variant="primary" class="confirm-add-btn">Add</sl-button>
+              <sl-button size="small" class="cancel-add-btn">Cancel</sl-button>
+            </div>
+          </div>
+        `;
+        container.insertBefore(newRow, addBtn);
+        return;
+      }
+
+      // Confirm add
+      const confirmBtn = e.target.closest('.confirm-add-btn');
+      if (confirmBtn) {
+        const row = confirmBtn.closest('.topic-row');
+        const nameInput = row.querySelector('.new-item-label');
+        const descInput = row.querySelector('.new-item-desc');
+        const name = nameInput.value.trim();
+        if (!name) { nameInput.focus(); return; }
+
+        row.dataset.topic = name;
+        row.innerHTML = `
+          <span class="drag-handle">\u2807</span>
+          <div class="topic-content">
+            <div class="topic-header">
+              <strong class="topic-label">${esc(name)}</strong>
+              <sl-icon-button name="chevron-down" class="topic-expand-btn" label="Expand"></sl-icon-button>
+              <sl-icon-button name="trash" class="topic-delete-btn" label="Delete"></sl-icon-button>
+            </div>
+            <div class="topic-description" style="display:none;">
+              <p class="topic-desc-text">${esc(descInput.value)}</p>
+              <sl-input class="topic-desc-edit" size="small" placeholder="Add description..." value="${esc(descInput.value)}"></sl-input>
+            </div>
+          </div>
+        `;
+        return;
+      }
+
+      // Cancel add
+      const cancelBtn = e.target.closest('.cancel-add-btn');
+      if (cancelBtn) {
+        cancelBtn.closest('.topic-row').remove();
+        return;
+      }
+    });
+
+    // Description edit via sl-change (Shoelace event, delegated)
+    container.addEventListener('sl-change', (e) => {
+      const input = e.target.closest('.topic-desc-edit');
+      if (input) {
+        const row = input.closest('.topic-row');
+        const textEl = row.querySelector('.topic-desc-text');
+        if (textEl) textEl.textContent = input.value || '';
+      }
+    });
+  });
+}
+
 function fillTierSelects() {
   const tiers = (state.settings?.tiers || []).slice().sort((a, b) => a.id.localeCompare(b.id));
   const tierSelect = document.getElementById('tier-select');
@@ -1029,22 +1297,23 @@ 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>';
-
-  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));
-  });
+  const optionsHtml = tiers.map(tier => {
+    const emoji = TIER_EMOJIS[tier.id] || '\u{1F527}';
+    return `<sl-option value="${esc(tier.id)}">${emoji} ${esc(tier.name || tier.id)}</sl-option>`;
+  }).join('');
 
-  if (tiers.length > 0) {
-    tierSelect.value = tiers[0].id;
-    copyFrom.value = tiers[0].id;
-    inviteTier.value = tiers[0].id;
-    renderTierEditor(tiers[0].id);
+  tierSelect.innerHTML = optionsHtml;
+  copyFrom.innerHTML = optionsHtml;
+  inviteTier.innerHTML = optionsHtml;
+  newTierCopy.innerHTML = `<sl-option value="">None</sl-option>${optionsHtml}`;
+
+  // A2A-41: default to 'public' — it's the base tier and most commonly edited
+  const defaultTier = tiers.find(t => t.id === 'public') ? 'public' : tiers[0]?.id;
+  if (defaultTier) {
+    tierSelect.value = defaultTier;
+    copyFrom.value = defaultTier;
+    inviteTier.value = defaultTier;
+    renderTierEditor(defaultTier);
   }
 }
 
@@ -1052,30 +1321,319 @@ function renderTierEditor(tierId) {
   const tier = (state.settings?.tiers || []).find(t => t.id === tierId);
   if (!tier) return;
 
-  document.getElementById('tier-id').value = tier.id;
   document.getElementById('tier-name').value = tier.name || tier.id;
   document.getElementById('tier-description').value = tier.description || '';
-  document.getElementById('tier-disclosure').value = tier.disclosure || 'minimal';
-  document.getElementById('tier-tools').value = toLines(tier.allowed_tools || []);
-  document.getElementById('tier-topics').value = toLines(tier.topics || []);
-  document.getElementById('tier-goals').value = toLines(tier.goals || []);
+  renderToolCheckboxes(tier.allowed_tools);
+  renderTopicList(tier);
+  renderGoalList(tier);
+  renderTierWarnings(tier);
+  renderTierColumns();
+}
+
+// A2A-41: renders the three-column drag zone showing all standard tiers
+// side-by-side. Inherited topics shown as grayed-out non-draggable rows.
+// Custom tiers are not shown here — they don't have a defined inheritance
+// hierarchy. HTML5 drag-and-drop does NOT work on touch devices (mobile).
+function renderTierColumns() {
+  const container = document.getElementById('tier-columns');
+  if (!container) return;
+  const tiers = state.settings?.tiers || [];
+  const toggle = document.getElementById('show-drag-columns');
+  container.style.display = toggle?.checked ? '' : 'none';
+
+  const html = TIER_ORDER.map(tierId => {
+    const tier = tiers.find(t => t.id === tierId);
+    if (!tier) return '';
+
+    const emoji = TIER_EMOJIS[tierId] || '\u{1F527}';
+    const tierIdx = TIER_ORDER.indexOf(tierId);
+
+    // Inherited topics from lower tiers
+    let inheritedRows = '';
+    for (let i = 0; i < tierIdx; i++) {
+      const lowerTier = tiers.find(t => t.id === TIER_ORDER[i]);
+      if (!lowerTier) continue;
+      const lowerTopics = lowerTier.manifest?.topics?.length
+        ? lowerTier.manifest.topics
+        : (lowerTier.topics || []).map(t => ({ topic: t, description: '' }));
+      lowerTopics.forEach(t => {
+        inheritedRows += `
+          <div class="topic-row inherited" data-topic="${esc(t.topic)}" data-tier="${esc(TIER_ORDER[i])}">
+            <div class="topic-content">
+              <div class="topic-header">
+                <strong class="topic-label">${esc(t.topic)}</strong>
+                <span class="inherited-badge">from ${esc(TIER_ORDER[i])}</span>
+              </div>
+            </div>
+          </div>`;
+      });
+    }
+
+    // Own topics — draggable
+    const ownTopics = tier.manifest?.topics?.length
+      ? tier.manifest.topics
+      : (tier.topics || []).map(t => ({ topic: t, description: '' }));
+    const ownRows = ownTopics.map(t => `
+      <div class="topic-row" draggable="true" data-topic="${esc(t.topic)}" data-tier="${esc(tierId)}">
+        <span class="drag-handle">\u2807</span>
+        <div class="topic-content">
+          <div class="topic-header">
+            <strong class="topic-label">${esc(t.topic)}</strong>
+          </div>
+        </div>
+      </div>
+    `).join('');
+
+    return `
+      <div class="tier-column" data-tier="${esc(tierId)}">
+        <h4>${emoji} ${esc(tier.name || tierId)}</h4>
+        <div class="tier-drop-zone" data-tier="${esc(tierId)}">
+          ${inheritedRows}${ownRows}
+        </div>
+      </div>`;
+  }).join('');
+
+  container.innerHTML = html;
+  bindDragEvents();
+}
+
+// A2A-41: HTML5 drag-and-drop handlers for moving topics between tier columns.
+// On drop, both tiers are saved via Promise.all() to prevent data loss if one
+// request fails. On error, state is reloaded from server to reset UI.
+function bindDragEvents() {
+  const zones = document.querySelectorAll('.tier-drop-zone');
+
+  document.querySelectorAll('.tier-columns .topic-row[draggable="true"]').forEach(row => {
+    row.addEventListener('dragstart', (e) => {
+      e.dataTransfer.setData('application/json', JSON.stringify({
+        topic: row.dataset.topic,
+        sourceTier: row.dataset.tier
+      }));
+      row.classList.add('dragging');
+    });
+    row.addEventListener('dragend', () => row.classList.remove('dragging'));
+  });
+
+  zones.forEach(zone => {
+    zone.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      zone.classList.add('drag-over');
+    });
+    zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
+    zone.addEventListener('drop', async (e) => {
+      e.preventDefault();
+      zone.classList.remove('drag-over');
+
+      let data;
+      try { data = JSON.parse(e.dataTransfer.getData('application/json')); } catch { return; }
+      const { topic, sourceTier } = data;
+      const targetTier = zone.dataset.tier;
+
+      if (!topic || !sourceTier || !targetTier || sourceTier === targetTier) return;
+
+      const sourceTierData = (state.settings?.tiers || []).find(t => t.id === sourceTier);
+      const targetTierData = (state.settings?.tiers || []).find(t => t.id === targetTier);
+      if (!sourceTierData || !targetTierData) return;
+
+      const sourceTopics = (sourceTierData.topics || []).filter(t => t !== topic);
+      const sourceManifestTopics = (sourceTierData.manifest?.topics || []).filter(t => t.topic !== topic);
+      const movedManifest = (sourceTierData.manifest?.topics || []).find(t => t.topic === topic);
+      const targetTopics = [...(targetTierData.topics || []), topic];
+      const targetManifestTopics = [...(targetTierData.manifest?.topics || []), movedManifest || { topic, description: '' }];
+
+      // A2A-41: save both tiers atomically with Promise.all to prevent
+      // data loss if one request fails. On error, reload from server.
+      try {
+        await Promise.all([
+          request(`/settings/tiers/${encodeURIComponent(sourceTier)}`, {
+            method: 'PUT',
+            body: JSON.stringify({
+              topics: sourceTopics,
+              manifest: { topics: sourceManifestTopics, objectives: sourceTierData.manifest?.objectives || [] }
+            })
+          }),
+          request(`/settings/tiers/${encodeURIComponent(targetTier)}`, {
+            method: 'PUT',
+            body: JSON.stringify({
+              topics: targetTopics,
+              manifest: { topics: targetManifestTopics, objectives: targetTierData.manifest?.objectives || [] }
+            })
+          })
+        ]);
+        showNotice(`Moved "${topic}" from ${sourceTier} to ${targetTier}`);
+      } catch (err) {
+        showNotice(`Move failed: ${err.message}. Reloading...`);
+      }
+      await loadSettings();
+    });
+  });
+}
+
+// A2A-41: contextual validation warnings for the currently selected tier.
+// Warns about empty tiers, dangerous tool grants, and inverted tier sizes.
+function renderTierWarnings(tier) {
+  const container = document.getElementById('tier-warnings');
+  if (!container) return;
+  const warnings = [];
+
+  // A2A-41: use manifest OR flat topics (not both) to avoid double-counting.
+  // Manifest is preferred when non-empty; flat array is the fallback.
+  // NOTE: can't use || for this because empty arrays are truthy in JS.
+  const mTopics = tier.manifest?.topics;
+  const topicCount = (mTopics && mTopics.length > 0 ? mTopics : (tier.topics || [])).length;
+  if (topicCount === 0) {
+    warnings.push({ level: 'warn', text: "This tier has no topics \u2014 callers won't have conversation context." });
+  }
+
+  if (tier.id === 'public' && (tier.allowed_tools || []).includes('Bash')) {
+    warnings.push({ level: 'danger', text: 'Bash (full access) is granted to the public tier \u2014 any caller can execute commands.' });
+  }
+
+  if (tier.id === 'family') {
+    const allTiers = state.settings?.tiers || [];
+    const friends = allTiers.find(t => t.id === 'friends');
+    if (friends) {
+      const mFam = tier.manifest?.topics;
+      const familyOwn = (mFam && mFam.length > 0 ? mFam : (tier.topics || [])).length;
+      const mFri = friends.manifest?.topics;
+      const friendsOwn = (mFri && mFri.length > 0 ? mFri : (friends.topics || [])).length;
+      if (familyOwn < friendsOwn) {
+        warnings.push({ level: 'info', text: 'Family tier has fewer topics than Friends \u2014 usually Family is the most open tier.' });
+      }
+    }
+  }
+
+  container.innerHTML = warnings.map(w =>
+    `<div class="tier-warning ${w.level}">${esc(w.text)}</div>`
+  ).join('');
+}
+
+// A2A-41: merges topics/goals/tools from the selected tier and all lower tiers,
+// mirroring the backend's getTopicsForTier() inheritance. Used by the preview dialog.
+function getPreviewData(tierId) {
+  const selectedIndex = TIER_ORDER.indexOf(tierId);
+  const tiers = state.settings?.tiers || [];
+  const merged = { topics: [], objectives: [], tools: new Set(), do_not_discuss: [], never_disclose: [] };
+
+  // A2A-41: for custom tiers not in TIER_ORDER, show only own data.
+  // No inheritance is applied because custom tiers have no defined hierarchy.
+  if (selectedIndex < 0) {
+    const t = tiers.find(t => t.id === tierId);
+    if (t) {
+      (t.manifest?.topics || []).forEach(item => merged.topics.push({ ...item, source: tierId }));
+      (t.manifest?.objectives || []).forEach(item => merged.objectives.push({ ...item, source: tierId }));
+      (t.allowed_tools || []).forEach(tool => merged.tools.add(tool));
+    }
+    merged.never_disclose = state.settings?.manifest?.never_disclose || [];
+    return merged;
+  }
+
+  for (let i = 0; i <= selectedIndex; i++) {
+    const t = tiers.find(t => t.id === TIER_ORDER[i]);
+    if (!t) continue;
+    (t.manifest?.topics || []).forEach(item => merged.topics.push({ ...item, source: TIER_ORDER[i] }));
+    (t.manifest?.objectives || []).forEach(item => merged.objectives.push({ ...item, source: TIER_ORDER[i] }));
+    (t.manifest?.do_not_discuss || []).forEach(item => {
+      if (!merged.do_not_discuss.includes(item)) merged.do_not_discuss.push(item);
+    });
+    (t.allowed_tools || []).forEach(tool => merged.tools.add(tool));
+  }
+
+  merged.never_disclose = state.settings?.manifest?.never_disclose || [];
+  return merged;
+}
+
+// A2A-41: opens the caller preview dialog showing the merged effective view
+// for the selected tier. Helps the agent owner understand what a caller sees.
+function openCallerPreview() {
+  const tierId = document.getElementById('tier-select').value;
+  const data = getPreviewData(tierId);
+  const emoji = TIER_EMOJIS[tierId] || '\u{1F527}';
+  const tierName = (state.settings?.tiers || []).find(t => t.id === tierId)?.name || tierId;
+
+  const dialog = document.getElementById('preview-dialog');
+  dialog.label = `\u{1F441} Caller Preview \u2014 ${emoji} ${tierName}`;
+
+  const topicsList = data.topics.length > 0
+    ? data.topics.map(t => `<li><strong>${esc(t.topic)}</strong>${t.description ? ` \u2014 ${esc(t.description)}` : ''}</li>`).join('')
+    : '<li><em>None configured</em></li>';
+
+  const goalsList = data.objectives.length > 0
+    ? data.objectives.map(g => `<li><strong>${esc(g.objective || g.topic)}</strong>${g.description ? ` \u2014 ${esc(g.description)}` : ''}</li>`).join('')
+    : '<li><em>None configured</em></li>';
+
+  const toolsList = data.tools.size > 0
+    ? Array.from(data.tools).map(t => `<li><strong>${esc(t)}</strong>${TOOL_DESCRIPTIONS[t] ? ` \u2014 ${esc(TOOL_DESCRIPTIONS[t])}` : ''}</li>`).join('')
+    : '<li><em>None configured</em></li>';
+
+  const dndList = data.do_not_discuss.length > 0
+    ? data.do_not_discuss.map(d => `<li>${esc(typeof d === 'string' ? d : d.topic || '')}</li>`).join('')
+    : '<li><em>None configured</em></li>';
+
+  const neverList = data.never_disclose.length > 0
+    ? data.never_disclose.map(n => `<li>${esc(n)}</li>`).join('')
+    : '<li><em>None configured</em></li>';
+
+  document.getElementById('preview-content').innerHTML = `
+    <h4>Topics this caller can discuss:</h4>
+    <ul>${topicsList}</ul>
+    <h4>Goals:</h4>
+    <ul>${goalsList}</ul>
+    <h4>Tools available:</h4>
+    <ul>${toolsList}</ul>
+    <h4>Will not discuss:</h4>
+    <ul>${dndList}</ul>
+    <h4>Never disclosed (any tier):</h4>
+    <ul>${neverList}</ul>
+  `;
+
+  dialog.show();
 }
 
 function bindSettingsActions() {
-  document.getElementById('tier-select').addEventListener('change', (e) => {
+  document.getElementById('tier-select').addEventListener('sl-change', (e) => {
     renderTierEditor(e.target.value);
   });
 
   document.getElementById('tier-form').addEventListener('submit', async (e) => {
     e.preventDefault();
-    const tierId = document.getElementById('tier-id').value;
+    const tierId = document.getElementById('tier-select').value;
+
+    // A2A-41: collect tools from checkboxes
+    const toolCheckboxes = document.querySelectorAll('#tier-tools-list sl-checkbox');
+    const allowed_tools = Array.from(toolCheckboxes)
+      .filter(cb => cb.checked)
+      .map(cb => cb.value);
+
+    // A2A-41: collect topics from row elements
+    const topicRows = document.querySelectorAll('#tier-topics-list .topic-row[data-topic]');
+    const topics = Array.from(topicRows).map(row => row.dataset.topic).filter(Boolean);
+    const manifestTopics = Array.from(topicRows).map(row => ({
+      topic: row.dataset.topic,
+      description: (row.querySelector('.topic-desc-edit')?.value || row.querySelector('.topic-desc-text')?.textContent || '').trim()
+    })).filter(t => t.topic);
+
+    // A2A-41: collect goals from row elements. IMPORTANT: use 'topic' key (NOT
+    // 'objective') because parseTopicObjects() in dashboard.js:160 only reads
+    // entry.topic. The semantic distinction 'objective' vs 'topic' is UI-only;
+    // the storage layer uses {topic, description} uniformly for both.
+    const goalRows = document.querySelectorAll('#tier-goals-list .topic-row[data-topic]');
+    const goals = Array.from(goalRows).map(row => row.dataset.topic).filter(Boolean);
+    const manifestObjectives = Array.from(goalRows).map(row => ({
+      topic: row.dataset.topic,
+      description: (row.querySelector('.topic-desc-edit')?.value || row.querySelector('.topic-desc-text')?.textContent || '').trim()
+    })).filter(g => g.topic);
+
     const body = {
       name: document.getElementById('tier-name').value,
       description: document.getElementById('tier-description').value,
-      disclosure: document.getElementById('tier-disclosure').value,
-      allowed_tools: fromLines(document.getElementById('tier-tools').value),
-      topics: fromLines(document.getElementById('tier-topics').value),
-      goals: fromLines(document.getElementById('tier-goals').value)
+      allowed_tools,
+      topics,
+      goals,
+      manifest: {
+        topics: manifestTopics,
+        objectives: manifestObjectives
+      }
     };
     await request(`/settings/tiers/${encodeURIComponent(tierId)}`, {
       method: 'PUT',
@@ -1086,7 +1644,7 @@ function bindSettingsActions() {
   });
 
   document.getElementById('copy-tier-btn').addEventListener('click', async () => {
-    const toTier = document.getElementById('tier-id').value;
+    const toTier = document.getElementById('tier-select').value;
     const fromTier = document.getElementById('copy-from-tier').value;
     if (!toTier || !fromTier || toTier === fromTier) return;
     await request(`/settings/tiers/${encodeURIComponent(toTier)}/copy-from/${encodeURIComponent(fromTier)}`, {
@@ -1134,12 +1692,23 @@ function bindSettingsActions() {
     document.getElementById('tier-select').value = tierId;
     renderTierEditor(tierId);
   });
+
+  // A2A-41: toggle for three-column tier view
+  document.getElementById('show-drag-columns')?.addEventListener('sl-change', () => {
+    renderTierColumns();
+  });
+
+  document.getElementById('preview-caller-btn')?.addEventListener('click', openCallerPreview);
+  document.getElementById('preview-close-btn')?.addEventListener('click', () => {
+    document.getElementById('preview-dialog').hide();
+  });
 }
 
 async function loadSettings() {
   const payload = await request('/settings');
   state.settings = payload;
   fillTierSelects();
+  renderTierColumns();
   document.getElementById('defaults-expiration').value = payload.defaults?.expiration || '7d';
   document.getElementById('defaults-max-calls').value = payload.defaults?.maxCalls || 100;
 }
@@ -1150,7 +1719,7 @@ function renderCallbookStatus() {
 
   const s = state.dashboardStatus;
   if (!s) {
-    el.textContent = 'Loading…';
+    el.textContent = 'Loading\u2026';
     return;
   }
 
@@ -1171,8 +1740,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 +1750,7 @@ function renderCallbookStatus() {
             return esc(`${service}: ${ok ? 'ok' + status : 'failed' + err}`);
           }).join('<br>')}
         </div>
-      </details>`
+      </sl-details>`
     : '';
 
   el.innerHTML = `
@@ -1204,18 +1772,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 +1842,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 +1879,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 +1922,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 +1969,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 +1992,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 +2018,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 +2034,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,19 +2053,64 @@ 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(); },
+  permissions: () => {},
+  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();
   bindSettingsActions();
+  bindItemListDelegation();
   bindCallbookActions();
   bindAutoUpdateActions();
   bindInviteActions();
-  bindRefreshButtons();
+  bindLogFilterRefresh();
 
   try {
     await Promise.all([
@@ -1513,6 +2126,7 @@ async function bootstrap() {
     ]);
     showNotice('Dashboard loaded');
     connectRealtimeEvents();
+    startPolling();
 
     setInterval(() => {
       loadAutoUpdateStatus().catch(() => {});