a2acalling 0.6.63 → 0.6.65

package/src/dashboard/public/app.js

@@ -15,7 +15,12 @@ const state = {
   realtime: {
     connected: false,
     lastEventId: null
-  }
+  },
+  // A2A-47: Track active panel for sidebar navigation (replaces sl-tab-group)
+  activeTab: 'contacts',
+  // A2A-48: Track currently selected tier for the permissions panel.
+  // Replaces the old #tier-select dropdown value.
+  activeTierId: 'public'
 };
 
 let dashboardEventSource = null;
@@ -249,37 +254,78 @@ async function copyText(value) {
   }
 }
 
-function bindTabs() {
-  const tabGroup = document.getElementById('main-tabs');
-  if (!tabGroup) return;
+// A2A-47: Panel name → section title mapping for the content header
+// A2A-50: Added 'settings' panel for relocated admin settings
+const panelTitles = {
+  contacts: 'Contacts',
+  calls: 'Calls',
+  permissions: 'Permissions',
+  invites: 'Invites',
+  logs: 'Logs',
+  health: 'Health',
+  settings: 'Settings'
+};
 
-  tabGroup.addEventListener('sl-tab-show', (e) => {
-    const tabName = e.detail.name;
-    try { window.location.hash = tabName; } catch (err) {}
-    if (typeof onTabSwitch === 'function') onTabSwitch(tabName);
+// A2A-47: Show a specific panel and update sidebar + header state.
+// Replaces the old sl-tab-group navigation.
+function showPanel(name) {
+  const validPanels = Object.keys(panelTitles);
+  if (!validPanels.includes(name)) name = 'contacts';
+
+  // Hide all panels, show the target
+  document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
+  const target = document.getElementById('panel-' + name);
+  if (target) target.classList.add('active');
+
+  // Update sidebar active state
+  document.querySelectorAll('.nav-item').forEach(item => {
+    if (item.dataset.panel === name) {
+      item.classList.add('active');
+    } else {
+      item.classList.remove('active');
+    }
   });
 
-  // Deep-link support: activate the tab matching the URL hash
+  // Update header title
+  const titleEl = document.getElementById('section-title');
+  if (titleEl) titleEl.textContent = panelTitles[name] || name;
+
+  // Update state and hash
+  state.activeTab = name;
+  try {
+    if (window.location.hash.slice(1) !== name) {
+      window.location.hash = name;
+    }
+  } catch (err) {}
+
+  // Trigger data loading for the active tab
+  if (typeof onTabSwitch === 'function') onTabSwitch(name);
+}
+
+function bindTabs() {
+  // A2A-47: Sidebar nav click handler
+  document.querySelectorAll('.nav-item').forEach(item => {
+    item.addEventListener('click', (e) => {
+      e.preventDefault();
+      const panel = item.dataset.panel;
+      if (panel) showPanel(panel);
+    });
+  });
+
+  // Deep-link support: activate the panel 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';
+    // A2A-50: #settings now points to the real Settings panel (moved from
+    // being a backward-compat alias for #permissions in A2A-41).
     if (hash) {
-      // Use try/catch in case the tab group isn't fully ready
-      try { tabGroup.show(hash); } catch (err) {}
+      showPanel(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);
-  }
+  // On initial load, activate from hash
+  activateFromHash();
 }
 
 function norm(value) {
@@ -393,7 +439,7 @@ function renderContacts() {
         </td>
         ${locationCell}
         ${ownerCell}
-        <td>${esc(c?.status || '-')}</td>
+        <td><span class="contact-status" data-status="${esc(c?.status || 'unknown')}">${esc(c?.status || '-')}</span></td>
         <td>${esc(String(calls))}</td>
         <td>${esc(lastCallAt)}</td>
         ${summaryCell}
@@ -562,8 +608,8 @@ function bindContactsActions() {
     }
   });
 
-  // Event delegation on the contacts tab panel
-  const panel = document.querySelector('sl-tab-panel[name="contacts"]');
+  // A2A-47: Event delegation on the contacts panel (was sl-tab-panel, now div#panel-contacts)
+  const panel = document.querySelector('#panel-contacts');
   panel?.addEventListener('click', async (e) => {
     const pinBtn = e.target.closest('[data-pin-contact]');
     if (pinBtn) {
@@ -1062,7 +1108,7 @@ function renderLogs() {
     const trace = row.trace_id || '';
     tr.innerHTML = `
       <td>${esc(fmtDate(row.timestamp))}</td>
-      <td>${esc(row.level || '-')}</td>
+      <td><span class="log-level" data-level="${esc(row.level || '')}">${esc(row.level || '-')}</span></td>
       <td>${esc(row.component || '-')}</td>
       <td>${esc(row.event || '-')}</td>
       <td title="${esc(row.message || '')}">${esc(String(row.message || '').slice(0, 120) || '-')}</td>
@@ -1117,53 +1163,113 @@ const TOOL_DESCRIPTIONS = {
 // 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');
+// A2A-48: Material icon mapping for tier cards. Standard tiers get recognizable
+// icons; custom tiers get a wrench icon. Used by renderTierCards().
+const TIER_ICONS = { public: 'public', friends: 'group', family: 'family_restroom' };
+
+// A2A-48: Color mapping for tool icons in toggle cards. Gives each tool a
+// distinct color matching the concept mock's visual differentiation.
+const TOOL_ICON_MAP = {
+  'Bash': { icon: 'terminal', bg: 'rgba(99,102,241,0.2)', color: '#818CF8', border: 'rgba(99,102,241,0.2)' },
+  'Bash(readonly)': { icon: 'terminal', bg: 'rgba(99,102,241,0.15)', color: '#A5B4FC', border: 'rgba(99,102,241,0.15)' },
+  'Read': { icon: 'visibility', bg: 'rgba(59,130,246,0.2)', color: '#60A5FA', border: 'rgba(59,130,246,0.2)' },
+  'Grep': { icon: 'search', bg: 'rgba(139,92,246,0.2)', color: '#A78BFA', border: 'rgba(139,92,246,0.2)' },
+  'Glob': { icon: 'folder_open', bg: 'rgba(16,185,129,0.2)', color: '#34D399', border: 'rgba(16,185,129,0.2)' },
+  'WebSearch': { icon: 'public', bg: 'rgba(245,158,11,0.2)', color: '#FBBF24', border: 'rgba(245,158,11,0.2)' },
+  'WebFetch': { icon: 'language', bg: 'rgba(236,72,153,0.2)', color: '#F472B6', border: 'rgba(236,72,153,0.2)' }
+};
+
+// A2A-48: Renders tier cards grid. Active card gets .active class with glow.
+function renderTierCards() {
+  const container = document.getElementById('tier-cards');
+  if (!container) return;
+  const tiers = (state.settings?.tiers || []).slice().sort((a, b) => {
+    const aIdx = TIER_ORDER.indexOf(a.id);
+    const bIdx = TIER_ORDER.indexOf(b.id);
+    if (aIdx >= 0 && bIdx >= 0) return aIdx - bIdx;
+    if (aIdx >= 0) return -1;
+    if (bIdx >= 0) return 1;
+    return a.id.localeCompare(b.id);
+  });
+
+  container.innerHTML = tiers.map(tier => {
+    const isActive = tier.id === state.activeTierId;
+    const icon = TIER_ICONS[tier.id] || 'build';
+    const iconColor = isActive ? '#60A5FA' : '#6B7280';
+    return `
+      <div class="tier-card${isActive ? ' active' : ''}" data-tier-id="${esc(tier.id)}">
+        <span class="material-symbols-outlined tier-card-icon" style="color:${iconColor};">${icon}</span>
+        <span class="tier-card-name">${esc(tier.name || tier.id)}</span>
+        ${isActive ? '<div class="status-dot status-dot--green"></div>' : ''}
+      </div>
+    `;
+  }).join('');
+}
+
+// A2A-48: Renders tool toggle cards (replaces checkboxes). Each tool is a
+// glass-panel card with icon, name, description, and a toggle switch.
+// Toggle change triggers autoSaveTier() for immediate persistence.
+function renderToolToggles(allowedTools) {
+  const container = document.getElementById('tool-toggles');
+  if (!container) return;
   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>`;
+    const checked = (allowedTools || []).includes(tool);
+    const iconInfo = TOOL_ICON_MAP[tool] || { icon: 'extension', bg: 'rgba(100,116,139,0.2)', color: '#94A3B8', border: 'rgba(100,116,139,0.2)' };
+    return `
+      <div class="tool-toggle-card${checked ? ' enabled' : ''}">
+        <div class="tool-toggle-info">
+          <div class="tool-icon" style="background:${iconInfo.bg};color:${iconInfo.color};border:1px solid ${iconInfo.border};">
+            <span class="material-symbols-outlined">${iconInfo.icon}</span>
+          </div>
+          <div>
+            <h3>${esc(tool)}</h3>
+            <p>${esc(desc)}</p>
+          </div>
+        </div>
+        <label class="toggle-switch">
+          <input type="checkbox" data-tool="${esc(tool)}" ${checked ? 'checked' : ''}>
+          <span class="slider"></span>
+        </label>
+      </div>
+    `;
   }).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');
+// A2A-48: Renders active topics in the drop zone as teal-accented cards.
+// Each card has a close button for removal. Updates #topic-count badge.
+function renderActiveTopics(tier) {
+  const container = document.getElementById('active-topics-zone');
+  if (!container) return;
   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>
+  const cardsHtml = allTopics.map(t => `
+    <div class="active-item-card active-item-card--teal" data-topic="${esc(t.label)}" data-description="${esc(t.desc)}">
+      <div>
+        <div class="item-name">${esc(t.label)}</div>
+        <div class="item-type-label">Topic</div>
       </div>
+      <button class="item-close-btn" data-remove-topic="${esc(t.label)}">
+        <span class="material-symbols-outlined" style="font-size:16px;">close</span>
+      </button>
     </div>
   `).join('');
 
-  container.innerHTML = rowsHtml + `<button class="add-item-btn" data-type="topic">+ Add topic</button>`;
+  container.innerHTML = cardsHtml + '<div class="drop-placeholder"><span>+ Drop Topic</span></div>';
+
+  const badge = document.getElementById('topic-count');
+  if (badge) badge.textContent = `${allTopics.length} Active`;
 }
 
-// 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');
+// A2A-48: Renders active goals in the drop zone as yellow-accented cards.
+// Same pattern as topics but with yellow color variant.
+function renderActiveGoals(tier) {
+  const container = document.getElementById('active-goals-zone');
+  if (!container) return;
   const manifestGoals = tier.manifest?.objectives || [];
   const flatGoals = tier.goals || [];
 
@@ -1171,302 +1277,310 @@ function renderGoalList(tier) {
     ? 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>
+  const cardsHtml = allGoals.map(g => `
+    <div class="active-item-card active-item-card--yellow" data-topic="${esc(g.label)}" data-description="${esc(g.desc)}">
+      <div>
+        <div class="item-name">${esc(g.label)}</div>
+        <div class="item-type-label">Goal</div>
       </div>
+      <button class="item-close-btn" data-remove-goal="${esc(g.label)}">
+        <span class="material-symbols-outlined" style="font-size:16px;">close</span>
+      </button>
     </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;
-      }
-    });
+  container.innerHTML = cardsHtml + '<div class="drop-placeholder"><span>+ Drop Goal</span></div>';
 
-    // 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 || '';
-      }
-    });
-  });
+  const badge = document.getElementById('goal-count');
+  if (badge) badge.textContent = `${allGoals.length} Active`;
 }
 
-function fillTierSelects() {
-  const tiers = (state.settings?.tiers || []).slice().sort((a, b) => a.id.localeCompare(b.id));
-  const tierSelect = document.getElementById('tier-select');
-  const copyFrom = document.getElementById('copy-from-tier');
-  const newTierCopy = document.getElementById('new-tier-copy-from');
-  const inviteTier = document.getElementById('invite-tier');
-
-  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('');
-
-  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);
-  }
-}
-
-function renderTierEditor(tierId) {
-  const tier = (state.settings?.tiers || []).find(t => t.id === tierId);
+// A2A-48: Orchestrator that renders the entire permissions panel.
+// Uses state.activeTierId instead of reading a dropdown value.
+function renderPermissions() {
+  const tier = (state.settings?.tiers || []).find(t => t.id === state.activeTierId);
   if (!tier) return;
-
-  document.getElementById('tier-name').value = tier.name || tier.id;
-  document.getElementById('tier-description').value = tier.description || '';
-  renderToolCheckboxes(tier.allowed_tools);
-  renderTopicList(tier);
-  renderGoalList(tier);
+  renderTierCards();
+  renderActiveTopics(tier);
+  renderActiveGoals(tier);
+  renderToolToggles(tier.allowed_tools);
   renderTierWarnings(tier);
-  renderTierColumns();
+  renderSidebarPreview(state.activeTierId);
+  renderSidebarLists(tier);
+  bindSidebarDrag();
 }
 
-// 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');
+// A2A-48: Renders the inline "Preview as Caller" card in the right sidebar.
+// Reuses getPreviewData() to show merged topics, goals, and tool count.
+function renderSidebarPreview(tierId) {
+  const container = document.getElementById('perm-preview');
   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>`;
-      });
+  const data = getPreviewData(tierId);
+  const tierName = (state.settings?.tiers || []).find(t => t.id === tierId)?.name || tierId;
+  const topicNames = data.topics.map(t => t.topic).filter(Boolean);
+  const goalNames = data.objectives.map(g => g.objective || g.topic).filter(Boolean);
+  const toolCount = data.tools.size;
+
+  const topicText = topicNames.length > 0 ? `<strong style="color:#2DD4BF;">${esc(topicNames.join(', '))}</strong>` : '<em>no topics</em>';
+  const goalText = goalNames.length > 0 ? `<strong style="color:#FBBF24;">${esc(goalNames.join(', '))}</strong>` : '<em>no goals</em>';
+
+  container.innerHTML = `
+    <div class="preview-card-inner">
+      <div class="sidebar-list-header">Preview as Caller</div>
+      <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;">
+        <span class="material-symbols-outlined" style="color:#60A5FA;">smart_toy</span>
+        <div>
+          <div style="font-weight:600;font-size:0.85rem;color:var(--ink);">Agent Permission</div>
+          <span class="preview-tier-badge">${esc(tierName)} Tier</span>
+        </div>
+      </div>
+      <div class="preview-summary">
+        This agent can discuss ${topicText} to help ${goalText} using <strong>${toolCount} tool${toolCount !== 1 ? 's' : ''}</strong>.
+      </div>
+      <div class="preview-footer">
+        <span style="display:flex;align-items:center;gap:0.3rem;">
+          <span class="status-dot status-dot--green"></span> Active
+        </span>
+        <span style="font-family:monospace;opacity:0.7;">JSON Valid</span>
+      </div>
+    </div>
+  `;
+}
+
+// A2A-48: Renders all topics and goals in the right sidebar as draggable items.
+// Items active in the current tier are dimmed with an "(Active)" label.
+function renderSidebarLists(tier) {
+  const topicContainer = document.getElementById('sidebar-topics');
+  const goalContainer = document.getElementById('sidebar-goals');
+  if (!topicContainer || !goalContainer) return;
+
+  // Collect ALL topics across ALL tiers for the sidebar
+  const allTiers = state.settings?.tiers || [];
+  const allTopicMap = new Map();
+  const allGoalMap = new Map();
+  for (const t of allTiers) {
+    const mTopics = t.manifest?.topics || [];
+    const fTopics = t.topics || [];
+    const topics = mTopics.length > 0 ? mTopics : fTopics.map(x => ({ topic: x, description: '' }));
+    for (const item of topics) {
+      if (item.topic && !allTopicMap.has(item.topic)) {
+        allTopicMap.set(item.topic, item.description || '');
+      }
+    }
+    const mGoals = t.manifest?.objectives || [];
+    const fGoals = t.goals || [];
+    const goals = mGoals.length > 0 ? mGoals : fGoals.map(x => ({ topic: x, description: '' }));
+    for (const item of goals) {
+      const label = item.objective || item.topic;
+      if (label && !allGoalMap.has(label)) {
+        allGoalMap.set(label, item.description || '');
+      }
     }
+  }
 
-    // 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>
+  // Determine which are active in the current tier
+  const activeTopicSet = new Set((tier.topics || []).concat(
+    (tier.manifest?.topics || []).map(t => t.topic)
+  ).filter(Boolean));
+  const activeGoalSet = new Set((tier.goals || []).concat(
+    (tier.manifest?.objectives || []).map(g => g.objective || g.topic)
+  ).filter(Boolean));
+
+  // Render topics sidebar
+  const topicItems = Array.from(allTopicMap.entries()).map(([name, desc]) => {
+    const isActive = activeTopicSet.has(name);
+    return `
+      <div class="sidebar-item${isActive ? ' active-in-zone' : ''}" draggable="${isActive ? 'false' : 'true'}" data-sidebar-topic="${esc(name)}" data-description="${esc(desc)}" data-item-type="topic">
+        <div style="display:flex;align-items:center;gap:0.4rem;">
+          ${isActive ? '' : '<span class="material-symbols-outlined" style="color:#4B5563;font-size:1rem;cursor:grab;">drag_indicator</span>'}
+          <span class="sidebar-item-name">${esc(name)}${isActive ? ' <span class="sidebar-item-active-label">(Active)</span>' : ''}</span>
         </div>
       </div>
-    `).join('');
+    `;
+  }).join('');
+
+  topicContainer.innerHTML = `
+    <div class="sidebar-list-header">Topics</div>
+    ${topicItems}
+    <button class="sidebar-add-btn" data-add-type="topic">
+      <span class="material-symbols-outlined" style="font-size:14px;">add</span> Add Topic
+    </button>
+  `;
 
+  // Render goals sidebar
+  const goalItems = Array.from(allGoalMap.entries()).map(([name, desc]) => {
+    const isActive = activeGoalSet.has(name);
     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 class="sidebar-item${isActive ? ' active-in-zone' : ''}" draggable="${isActive ? 'false' : 'true'}" data-sidebar-goal="${esc(name)}" data-description="${esc(desc)}" data-item-type="goal">
+        <div style="display:flex;align-items:center;gap:0.4rem;">
+          ${isActive ? '' : '<span class="material-symbols-outlined" style="color:#4B5563;font-size:1rem;cursor:grab;">drag_indicator</span>'}
+          <span class="sidebar-item-name">${esc(name)}${isActive ? ' <span class="sidebar-item-active-label">(Active)</span>' : ''}</span>
         </div>
-      </div>`;
+      </div>
+    `;
   }).join('');
 
-  container.innerHTML = html;
-  bindDragEvents();
+  goalContainer.innerHTML = `
+    <div class="sidebar-list-header">Goals &amp; Objectives</div>
+    ${goalItems}
+    <button class="sidebar-add-btn" data-add-type="goal">
+      <span class="material-symbols-outlined" style="font-size:14px;">add</span> Add Goal
+    </button>
+  `;
 }
 
-// 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');
+// A2A-48: Debounced auto-save replaces explicit Save Tier button.
+// 250ms delay prevents excessive API calls during rapid changes.
+let _autoSaveTimer = null;
+function autoSaveTier() {
+  clearTimeout(_autoSaveTimer);
+  _autoSaveTimer = setTimeout(async () => {
+    const tierId = state.activeTierId;
+    if (!tierId) return;
+
+    // Collect tools from toggle states
+    const toggles = document.querySelectorAll('#tool-toggles .toggle-switch input');
+    const allowed_tools = Array.from(toggles).filter(t => t.checked).map(t => t.dataset.tool);
+
+    // Collect topics from active zone
+    const topicCards = document.querySelectorAll('#active-topics-zone .active-item-card');
+    // A2A-48: uses dataset.topic for BOTH topics and goals (NOT dataset.objective)
+    // because parseTopicObjects() in dashboard.js:160 only reads entry.topic.
+    // The semantic distinction (objective vs topic) is UI-only; storage layer
+    // uses {topic, description} uniformly for both types.
+    const topics = Array.from(topicCards).map(c => c.dataset.topic).filter(Boolean);
+    const manifestTopics = Array.from(topicCards).map(c => ({
+      topic: c.dataset.topic,
+      description: c.dataset.description || ''
+    })).filter(t => t.topic);
+
+    // Collect goals from active zone
+    const goalCards = document.querySelectorAll('#active-goals-zone .active-item-card');
+    const goals = Array.from(goalCards).map(c => c.dataset.topic).filter(Boolean);
+    const manifestObjectives = Array.from(goalCards).map(c => ({
+      topic: c.dataset.topic,
+      description: c.dataset.description || ''
+    })).filter(g => g.topic);
+
+    const body = { allowed_tools, topics, goals, manifest: { topics: manifestTopics, objectives: manifestObjectives } };
+    // A2A-48: Refresh state inside try block so that a failed PUT does not
+    // trigger an unhandled rejection from the subsequent GET.
+    try {
+      await request(`/settings/tiers/${encodeURIComponent(tierId)}`, {
+        method: 'PUT', body: JSON.stringify(body)
+      });
+      showNotice('Saved');
+      // Refresh state from server to stay in sync after auto-save
+      const payload = await request('/settings');
+      state.settings = payload;
+    } catch (err) {
+      showNotice(`Save failed: ${err.message}`);
+    }
+  }, 250);
+}
 
-  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');
+// A2A-48: Binds dragstart/dragend on sidebar items (re-created each render).
+// Zone listeners (dragover/dragleave/drop) are bound ONCE in
+// bindPermissionsActions() to avoid listener accumulation — the zone
+// containers persist across renders while only their innerHTML changes.
+function bindSidebarDrag() {
+  document.querySelectorAll('.sidebar-item[draggable="true"]').forEach(item => {
+    item.addEventListener('dragstart', (e) => {
+      const itemType = item.dataset.itemType || 'topic';
+      const name = item.dataset.sidebarTopic || item.dataset.sidebarGoal || '';
+      const desc = item.dataset.description || '';
+      e.dataTransfer.setData('application/json', JSON.stringify({ name, description: desc, type: itemType }));
+      item.style.opacity = '0.5';
     });
-    row.addEventListener('dragend', () => row.classList.remove('dragging'));
+    item.addEventListener('dragend', () => { item.style.opacity = ''; });
   });
+}
 
-  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');
+// A2A-50: Drop handler for active topic/goal zones. Routes items to the
+// CORRECT zone based on data.type (not the zone they were dropped on).
+// This fixes the bug where dragging a topic onto the goals zone would
+// incorrectly add it as a goal and vice versa.
+function handleZoneDrop(zone, e) {
+  e.preventDefault();
+  zone.classList.remove('drag-over');
+  let data;
+  try { data = JSON.parse(e.dataTransfer.getData('application/json')); } catch { return; }
+  if (!data.name) return;
+
+  // A2A-50: Route to correct zone by data.type, NOT by which zone received
+  // the drop. Falls back to zone.id routing if data.type is missing (defensive).
+  const itemType = data.type || (zone.id === 'active-topics-zone' ? 'topic' : 'goal');
+  const targetZoneId = itemType === 'topic' ? 'active-topics-zone' : 'active-goals-zone';
+  const targetZone = document.getElementById(targetZoneId);
+  if (!targetZone) return;
+
+  const accentClass = itemType === 'topic' ? 'active-item-card--teal' : 'active-item-card--yellow';
+  const typeLabel = itemType === 'topic' ? 'Topic' : 'Goal';
+  const removeAttr = itemType === 'topic' ? 'data-remove-topic' : 'data-remove-goal';
+
+  // Check if already in target zone
+  const existing = targetZone.querySelectorAll('.active-item-card');
+  for (const card of existing) {
+    if (card.dataset.topic === data.name) return; // already active
+  }
 
-      let data;
-      try { data = JSON.parse(e.dataTransfer.getData('application/json')); } catch { return; }
-      const { topic, sourceTier } = data;
-      const targetTier = zone.dataset.tier;
+  // A2A-50: Shared helper builds the card HTML to avoid duplication with
+  // the create-item-submit handler. Both paths now use buildItemCard().
+  const card = buildItemCard(data.name, data.description || '', accentClass, typeLabel, removeAttr);
+  const placeholder = targetZone.querySelector('.drop-placeholder');
+  targetZone.insertBefore(card, placeholder);
+  autoSaveTier();
 
-      if (!topic || !sourceTier || !targetTier || sourceTier === targetTier) return;
+  // A2A-48: Re-fetch tier from state instead of using captured reference,
+  // since autoSaveTier() may refresh state.settings asynchronously.
+  setTimeout(() => {
+    const freshTier = (state.settings?.tiers || []).find(t => t.id === state.activeTierId);
+    if (freshTier) renderSidebarLists(freshTier);
+  }, 300);
+}
+
+// A2A-50: Shared helper to build an active-item card DOM element.
+// Used by both handleZoneDrop() and the create-item-submit handler
+// to avoid duplicating card HTML in two places.
+function buildItemCard(name, description, accentClass, typeLabel, removeAttr) {
+  const card = document.createElement('div');
+  card.className = `active-item-card ${accentClass}`;
+  card.dataset.topic = name;
+  card.dataset.description = description;
+  card.innerHTML = `
+    <div>
+      <div class="item-name">${esc(name)}</div>
+      <div class="item-type-label">${typeLabel}</div>
+    </div>
+    <button class="item-close-btn" ${removeAttr}="${esc(name)}">
+      <span class="material-symbols-outlined" style="font-size:16px;">close</span>
+    </button>
+  `;
+  return card;
+}
 
-      const sourceTierData = (state.settings?.tiers || []).find(t => t.id === sourceTier);
-      const targetTierData = (state.settings?.tiers || []).find(t => t.id === targetTier);
-      if (!sourceTierData || !targetTierData) return;
+// A2A-50: Populates tier select dropdowns: #invite-tier (Invites tab),
+// #new-tier-copy-from (Settings tab), and #new-tier-dialog-copy-from
+// (new tier modal in Permissions tab).
+function populateInviteTierSelect() {
+  const tiers = (state.settings?.tiers || []).slice().sort((a, b) => a.id.localeCompare(b.id));
+  const newTierCopy = document.getElementById('new-tier-copy-from');
+  const newTierDialogCopy = document.getElementById('new-tier-dialog-copy-from');
+  const inviteTier = document.getElementById('invite-tier');
 
-      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: '' }];
+  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('');
 
-      // 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();
-    });
-  });
+  if (inviteTier) inviteTier.innerHTML = optionsHtml;
+  if (newTierCopy) newTierCopy.innerHTML = `<sl-option value="">None</sl-option>${optionsHtml}`;
+  // A2A-50: Also populate the Copy From select inside the new-tier-dialog modal
+  if (newTierDialogCopy) newTierDialogCopy.innerHTML = `<sl-option value="">None</sl-option>${optionsHtml}`;
+
+  // A2A-48: Default invite tier to 'public'
+  const defaultTier = tiers.find(t => t.id === 'public') ? 'public' : tiers[0]?.id;
+  if (defaultTier && inviteTier) inviteTier.value = defaultTier;
 }
 
 // A2A-41: contextual validation warnings for the currently selected tier.
@@ -1543,10 +1657,10 @@ function getPreviewData(tierId) {
   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.
+// A2A-48: opens the caller preview dialog showing the merged effective view
+// for the selected tier. Uses state.activeTierId instead of removed #tier-select.
 function openCallerPreview() {
-  const tierId = document.getElementById('tier-select').value;
+  const tierId = state.activeTierId;
   const data = getPreviewData(tierId);
   const emoji = TIER_EMOJIS[tierId] || '\u{1F527}';
   const tierName = (state.settings?.tiers || []).find(t => t.id === tierId)?.name || tierId;
@@ -1590,125 +1704,235 @@ function openCallerPreview() {
   dialog.show();
 }
 
-function bindSettingsActions() {
-  document.getElementById('tier-select').addEventListener('sl-change', (e) => {
-    renderTierEditor(e.target.value);
-  });
+// A2A-50: Shows the delete confirmation dialog for a topic/goal card.
+// Uses a unique marker attribute on the card so the confirm handler can
+// find and remove it. This avoids storing DOM references in closure state.
+let _deleteIdCounter = 0;
+function showDeleteConfirm(itemName, itemType, cardElement) {
+  const dialog = document.getElementById('delete-confirm-dialog');
+  if (!dialog) return;
+  const label = itemType === 'topic' ? 'Topic' : 'Goal';
+  const msgEl = document.getElementById('delete-confirm-message');
+  if (msgEl) msgEl.textContent = `Remove ${label} "${itemName}" from this tier?`;
+  // Tag the card with a unique ID so the confirm handler can find it
+  const deleteId = `del-${++_deleteIdCounter}`;
+  cardElement.setAttribute('data-delete-id', deleteId);
+  dialog.dataset.deleteCardId = deleteId;
+  dialog.show();
+}
 
-  document.getElementById('tier-form').addEventListener('submit', async (e) => {
-    e.preventDefault();
-    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-48: Binds all event handlers for the permissions panel. Replaces old
+// bindSettingsActions() — removes handlers for deleted elements (tier-form,
+// tier-select, copy-tier-btn, show-drag-columns, preview-caller-btn) and
+// adds handlers for tier cards, tool toggles, close buttons, and sidebar.
+function bindPermissionsActions() {
+  const panel = document.getElementById('panel-permissions');
+  if (!panel) return;
+
+  // A2A-48: Tier card click — switch active tier and re-render.
+  // No autoSaveTier() here: switching tiers is a read operation, not a write.
+  panel.addEventListener('click', (e) => {
+    const card = e.target.closest('.tier-card[data-tier-id]');
+    if (card) {
+      state.activeTierId = card.dataset.tierId;
+      renderPermissions();
+      return;
+    }
 
-    // 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);
+    // A2A-50: Close button on active topic cards opens delete confirmation dialog
+    const removeTopic = e.target.closest('[data-remove-topic]');
+    if (removeTopic) {
+      const card = removeTopic.closest('.active-item-card');
+      if (card) {
+        const itemName = card.dataset.topic || '';
+        showDeleteConfirm(itemName, 'topic', card);
+      }
+      return;
+    }
 
-    const body = {
-      name: document.getElementById('tier-name').value,
-      description: document.getElementById('tier-description').value,
-      allowed_tools,
-      topics,
-      goals,
-      manifest: {
-        topics: manifestTopics,
-        objectives: manifestObjectives
+    // A2A-50: Close button on active goal cards opens delete confirmation dialog
+    const removeGoal = e.target.closest('[data-remove-goal]');
+    if (removeGoal) {
+      const card = removeGoal.closest('.active-item-card');
+      if (card) {
+        const itemName = card.dataset.topic || '';
+        showDeleteConfirm(itemName, 'goal', card);
       }
-    };
-    await request(`/settings/tiers/${encodeURIComponent(tierId)}`, {
-      method: 'PUT',
-      body: JSON.stringify(body)
-    });
-    showNotice(`Saved tier "${tierId}"`);
-    await loadSettings();
+      return;
+    }
+
+    // A2A-50: "+ New Tier" button opens glass-styled sl-dialog instead of
+    // scrolling to inline form. Keeps focus trap and accessibility from Shoelace.
+    const newTierBtn = e.target.closest('#perm-new-tier-btn');
+    if (newTierBtn) {
+      const dialog = document.getElementById('new-tier-dialog');
+      if (dialog) {
+        const idInput = document.getElementById('new-tier-dialog-id');
+        const nameInput = document.getElementById('new-tier-dialog-name');
+        if (idInput) idInput.value = '';
+        if (nameInput) nameInput.value = '';
+        dialog.show();
+      }
+      return;
+    }
+
+    // A2A-48: Sidebar "Add Topic" / "Add Goal" buttons open create dialog
+    const addBtn = e.target.closest('.sidebar-add-btn[data-add-type]');
+    if (addBtn) {
+      const type = addBtn.dataset.addType;
+      const dialog = document.getElementById('create-item-dialog');
+      if (dialog) {
+        dialog.label = `Create New ${type === 'topic' ? 'Topic' : 'Goal'}`;
+        dialog.dataset.createType = type;
+        const titleInput = document.getElementById('create-item-title');
+        const descInput = document.getElementById('create-item-desc');
+        if (titleInput) titleInput.value = '';
+        if (descInput) descInput.value = '';
+        dialog.show();
+      }
+      return;
+    }
   });
 
-  document.getElementById('copy-tier-btn').addEventListener('click', async () => {
-    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)}`, {
-      method: 'POST'
-    });
-    showNotice(`Copied "${fromTier}" -> "${toTier}"`);
-    await loadSettings();
-    renderTierEditor(toTier);
+  // A2A-48: Drop zone listeners — bound ONCE here because the zone containers
+  // (#active-topics-zone, #active-goals-zone) persist across renders. Only
+  // their innerHTML is replaced by renderActiveTopics/renderActiveGoals.
+  // Binding in bindSidebarDrag() would cause listener accumulation.
+  const topicZone = document.getElementById('active-topics-zone');
+  const goalZone = document.getElementById('active-goals-zone');
+  [topicZone, goalZone].forEach(zone => {
+    if (!zone) return;
+    zone.addEventListener('dragover', (e) => { e.preventDefault(); zone.classList.add('drag-over'); });
+    zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
+    zone.addEventListener('drop', (e) => handleZoneDrop(zone, e));
   });
 
-  document.getElementById('defaults-form').addEventListener('submit', async (e) => {
-    e.preventDefault();
-    await request('/settings/defaults', {
-      method: 'PUT',
-      body: JSON.stringify({
-        expiration: document.getElementById('defaults-expiration').value,
-        maxCalls: Number.parseInt(document.getElementById('defaults-max-calls').value, 10) || 100
-      })
-    });
-    showNotice('Saved defaults');
-    await loadSettings();
+  // A2A-48: Tool toggle change — auto-save and update card styling
+  panel.addEventListener('change', (e) => {
+    const toggle = e.target.closest('#tool-toggles .toggle-switch input');
+    if (toggle) {
+      const card = toggle.closest('.tool-toggle-card');
+      if (card) {
+        card.classList.toggle('enabled', toggle.checked);
+      }
+      autoSaveTier();
+      return;
+    }
   });
 
-  document.getElementById('new-tier-btn').addEventListener('click', () => {
-    document.getElementById('new-tier-id').focus();
+  // A2A-50: Create Item dialog — submit handler. Uses shared buildItemCard()
+  // helper to avoid duplicating card HTML with handleZoneDrop().
+  document.getElementById('create-item-submit')?.addEventListener('click', () => {
+    const dialog = document.getElementById('create-item-dialog');
+    const titleInput = document.getElementById('create-item-title');
+    const descInput = document.getElementById('create-item-desc');
+    if (!dialog || !titleInput) return;
+
+    const title = titleInput.value.trim();
+    if (!title) { titleInput.focus(); return; }
+    const desc = descInput?.value?.trim() || '';
+    const type = dialog.dataset.createType || 'topic';
+
+    const zoneId = type === 'topic' ? 'active-topics-zone' : 'active-goals-zone';
+    const zone = document.getElementById(zoneId);
+    if (!zone) return;
+
+    const accentClass = type === 'topic' ? 'active-item-card--teal' : 'active-item-card--yellow';
+    const typeLabel = type === 'topic' ? 'Topic' : 'Goal';
+    const removeAttr = type === 'topic' ? 'data-remove-topic' : 'data-remove-goal';
+
+    const card = buildItemCard(title, desc, accentClass, typeLabel, removeAttr);
+    const placeholder = zone.querySelector('.drop-placeholder');
+    if (placeholder) zone.insertBefore(card, placeholder);
+    else zone.appendChild(card);
+
+    dialog.hide();
+    autoSaveTier();
   });
 
-  document.getElementById('new-tier-form').addEventListener('submit', async (e) => {
-    e.preventDefault();
-    const tierId = document.getElementById('new-tier-id').value.trim();
-    const name = document.getElementById('new-tier-name').value.trim();
-    const copyFrom = document.getElementById('new-tier-copy-from').value;
-    if (!tierId) return;
-    await request('/settings/tiers', {
-      method: 'POST',
-      body: JSON.stringify({
-        id: tierId,
-        name: name || tierId,
-        copy_from: copyFrom || undefined
-      })
-    });
-    showNotice(`Created tier "${tierId}"`);
-    document.getElementById('new-tier-form').reset();
-    await loadSettings();
-    document.getElementById('tier-select').value = tierId;
-    renderTierEditor(tierId);
+  // A2A-48: Create Item dialog — cancel handler
+  document.getElementById('create-item-cancel')?.addEventListener('click', () => {
+    document.getElementById('create-item-dialog')?.hide();
   });
 
-  // A2A-41: toggle for three-column tier view
-  document.getElementById('show-drag-columns')?.addEventListener('sl-change', () => {
-    renderTierColumns();
+  // A2A-50: New Tier dialog — submit handler (replaces inline form handler).
+  // Creates tier via POST and switches to it.
+  document.getElementById('new-tier-dialog-submit')?.addEventListener('click', async () => {
+    const tierId = document.getElementById('new-tier-dialog-id')?.value?.trim();
+    const name = document.getElementById('new-tier-dialog-name')?.value?.trim();
+    const copyFrom = document.getElementById('new-tier-dialog-copy-from')?.value;
+    if (!tierId) {
+      document.getElementById('new-tier-dialog-id')?.focus();
+      return;
+    }
+    try {
+      await request('/settings/tiers', {
+        method: 'POST',
+        body: JSON.stringify({
+          id: tierId,
+          name: name || tierId,
+          copy_from: copyFrom || undefined
+        })
+      });
+      showNotice(`Created tier "${tierId}"`);
+      document.getElementById('new-tier-dialog')?.hide();
+      await loadSettings();
+      state.activeTierId = tierId;
+      renderPermissions();
+    } catch (err) {
+      showNotice(err.message);
+    }
+  });
+
+  // A2A-50: New Tier dialog — cancel handler
+  document.getElementById('new-tier-dialog-cancel')?.addEventListener('click', () => {
+    document.getElementById('new-tier-dialog')?.hide();
   });
 
-  document.getElementById('preview-caller-btn')?.addEventListener('click', openCallerPreview);
+  // A2A-50: Delete confirm dialog — confirm handler. Removes the card that
+  // was stored in dataset and triggers auto-save.
+  document.getElementById('delete-confirm-yes')?.addEventListener('click', () => {
+    const dialog = document.getElementById('delete-confirm-dialog');
+    if (!dialog) return;
+    const cardId = dialog.dataset.deleteCardId;
+    if (cardId) {
+      const card = document.querySelector(`.active-item-card[data-delete-id="${cardId}"]`);
+      if (card) {
+        card.removeAttribute('data-delete-id');
+        card.remove();
+      }
+    }
+    dialog.hide();
+    autoSaveTier();
+  });
+
+  // A2A-50: Delete confirm dialog — cancel handler
+  document.getElementById('delete-confirm-no')?.addEventListener('click', () => {
+    const dialog = document.getElementById('delete-confirm-dialog');
+    if (dialog) {
+      // Clean up the marker attribute from the card
+      const cardId = dialog.dataset.deleteCardId;
+      if (cardId) {
+        const card = document.querySelector(`.active-item-card[data-delete-id="${cardId}"]`);
+        if (card) card.removeAttribute('data-delete-id');
+      }
+      dialog.hide();
+    }
+  });
+
+  // Preview dialog close — unchanged
   document.getElementById('preview-close-btn')?.addEventListener('click', () => {
     document.getElementById('preview-dialog').hide();
   });
 }
 
+// A2A-48: Load settings and render permissions. Replaces fillTierSelects() and
+// renderTierColumns() calls with populateInviteTierSelect() + renderPermissions().
 async function loadSettings() {
   const payload = await request('/settings');
   state.settings = payload;
-  fillTierSelects();
-  renderTierColumns();
+  populateInviteTierSelect();
+  renderPermissions();
   document.getElementById('defaults-expiration').value = payload.defaults?.expiration || '7d';
   document.getElementById('defaults-max-calls').value = payload.defaults?.maxCalls || 100;
 }
@@ -2066,21 +2290,22 @@ function bindLogFilterRefresh() {
 
 let pollTimer = null;
 
+// A2A-47: Simply return tracked state instead of querying sl-tab-group
 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';
+  return state.activeTab || 'contacts';
 }
 
 const tabLoaders = {
   contacts: loadContacts,
   calls: loadCalls,
   logs: () => { loadLogs(); loadLogStats(); },
-  permissions: () => {},
+  // A2A-48: Load fresh settings data when switching to Permissions tab.
+  // Previously a no-op — now ensures data is current on tab switch.
+  permissions: loadSettings,
   invites: loadInvites,
   health: loadHealth,
+  // A2A-50: Settings tab loads dashboard status, auto-update, and callbook data
+  settings: () => { loadDashboardStatus(); loadAutoUpdateStatus(); loadCallbookDevices(); },
 };
 
 function startPolling() {
@@ -2199,11 +2424,64 @@ function renderHealthHistory(history) {
   }).join('');
 }
 
+// A2A-50: Binds handlers for the Settings panel (defaults form, new-tier form).
+// These were previously inside bindPermissionsActions() but are now in the
+// separate #panel-settings panel.
+function bindSettingsActions() {
+  // Defaults form
+  document.getElementById('defaults-form')?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+      await request('/settings/defaults', {
+        method: 'PUT',
+        body: JSON.stringify({
+          expiration: document.getElementById('defaults-expiration').value,
+          maxCalls: Number.parseInt(document.getElementById('defaults-max-calls').value, 10) || 100
+        })
+      });
+      showNotice('Saved defaults');
+      await loadSettings();
+    } catch (err) {
+      showNotice(err.message);
+    }
+  });
+
+  // New Tier form (inline form in Settings tab, kept for non-modal access)
+  document.getElementById('new-tier-form')?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const tierId = document.getElementById('new-tier-id')?.value?.trim();
+    const name = document.getElementById('new-tier-name')?.value?.trim();
+    const copyFrom = document.getElementById('new-tier-copy-from')?.value;
+    if (!tierId) return;
+    try {
+      await request('/settings/tiers', {
+        method: 'POST',
+        body: JSON.stringify({
+          id: tierId,
+          name: name || tierId,
+          copy_from: copyFrom || undefined
+        })
+      });
+      showNotice(`Created tier "${tierId}"`);
+      document.getElementById('new-tier-form')?.reset();
+      await loadSettings();
+      state.activeTierId = tierId;
+      renderPermissions();
+    } catch (err) {
+      showNotice(err.message);
+    }
+  });
+}
+
 async function bootstrap() {
   bindTabs();
   bindContactsActions();
+  // A2A-48: bindPermissionsActions() replaces old bindSettingsActions() +
+  // bindItemListDelegation(). All tier/tool/topic/goal handlers are now
+  // inside bindPermissionsActions() using event delegation on #panel-permissions.
+  bindPermissionsActions();
+  // A2A-50: Settings panel handlers (defaults, new-tier inline form)
   bindSettingsActions();
-  bindItemListDelegation();
   bindCallbookActions();
   bindAutoUpdateActions();
   bindInviteActions();