a2acalling 0.6.58 → 0.6.59

package/docs/plans/2026-02-18-a2a-41-permissions-tab.md

@@ -0,0 +1,1273 @@
+# A2A-41: Dashboard Permissions Tab Overhaul — Implementation Plan (Revision 1)
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Rename the Settings tab to Permissions, remove the dead disclosure field (frontend + backend), replace plain textareas with rich interactive UI (expandable topic/goal rows, tool checkboxes, three-column drag-and-drop, validation warnings, caller preview dialog).
+
+**Architecture:** All changes are in the existing dashboard SPA (vanilla JS + Shoelace v2.19 CDN) and the Express backend routes. No new dependencies, no build step. Frontend changes in 3 files (index.html, app.js, style.css), backend changes in 5 files (config.js, tokens.js, a2a.js, dashboard.js, cli.js). The dashboard reads tier data from `GET /api/a2a/dashboard/settings` which already returns both flat config arrays AND manifest objects with descriptions — we leverage the manifest data for rich topic/goal display.
+
+**Tech Stack:** Vanilla JS, Shoelace v2.19 web components (CDN), HTML5 Drag and Drop API, Express 4
+
+**Revision Notes (from reviewer cycles 1+2):**
+- Split into single branch but builder monitors diff size per-commit and flags if approaching 500 lines
+- Use event delegation for topic/goal list events (not per-row binding) to prevent listener leaks
+- Use `Promise.all()` for drag-and-drop saves with rollback on failure
+- Fix topic count warning to avoid double-counting (use `manifest || flat`, not `manifest + flat`)
+- Use `topic` key (NOT `objective`) for manifest objectives in save handler — `parseTopicObjects()` only reads `entry.topic`
+- Fix renderTierWarnings empty-array truthiness: use `.length > 0` gate instead of `||` (empty arrays are truthy in JS)
+- Add responsive CSS for three-column layout under 720px
+- Document that HTML5 DnD does not work on touch devices
+
+---
+
+## Reuse Map
+
+These existing code elements MUST be used — do NOT recreate them:
+
+| What | Where | Why |
+|------|-------|-----|
+| `esc()` | `app.js:203` | HTML escaping in template literals |
+| `request(path, opts)` | `app.js:171` | All dashboard API calls |
+| `showNotice(msg)` | `app.js:25` | User feedback messages |
+| `toLines(arr)` / `fromLines(str)` | `app.js:183-190` | Array↔textarea conversion (keep for fallback) |
+| `parseTopicObjects(values)` | `dashboard.js:145` | Backend already parses `{topic, description}` objects |
+| `sanitizeString()` | `dashboard.js:91` | Input sanitization |
+| `sanitizeStringArray()` | `dashboard.js:129` | Array sanitization |
+| `loadManifest()` / `saveManifest()` | imported from `disclosure.js` in `dashboard.js:18` | Manifest persistence |
+| `state.settings` | `app.js:2` | Client-side settings cache (tiers, manifest, defaults) |
+| `fillTierSelects()` | `app.js:1098` | Populates all tier dropdowns |
+| `renderTierEditor(tierId)` | `app.js:1123` | Renders the tier edit form |
+| `bindSettingsActions()` | `app.js:1136` | Event binding for settings tab |
+| `loadSettings()` | `app.js:1211` | Fetches settings from API |
+
+## Anti-Patterns (Do NOT)
+
+- Do NOT use `console.log` in app.js — use `showNotice()` for user feedback
+- Do NOT add npm dependencies — Shoelace is CDN-loaded, drag-and-drop is native
+- Do NOT modify `src/lib/disclosure.js` — the disclosure SYSTEM stays; only the per-tier `disclosure` field is removed
+- Do NOT touch `src/server.js` — route mounting is automatic
+- Do NOT break the `a2a create --disclosure` CLI flag in the onboarding flow (`bin/cli.js:680-697`) — that code patches tiers during quickstart and still uses `disclosure` as a tier config field. Since we're removing the field from `validateTierPatch()`, the `config.setTier()` calls will simply ignore `disclosure` gracefully
+- Do NOT bind per-row event listeners — use event delegation on container elements (same pattern as contacts panel at `app.js:564`)
+
+## File Change Map
+
+| Action | File | What changes |
+|--------|------|-------------|
+| Modify | `src/dashboard/public/index.html` | Rename tab/panel `settings`→`permissions`, remove tier-id + disclosure inputs, replace textareas with container divs, add warnings div, preview button + dialog, tier-columns layout, toggle checkbox |
+| Modify | `src/dashboard/public/app.js` | Rewrite `fillTierSelects()` (emojis, default public), rewrite `renderTierEditor()` (no disclosure/tier-id, call new render functions), add `renderTopicList()`, `renderGoalList()`, `renderToolCheckboxes()`, `renderTierColumns()`, `renderTierWarnings()`, `openCallerPreview()`, `getPreviewData()`, drag handlers via event delegation, update `bindSettingsActions()`, update `tabLoaders` key, update `bindTabs()` hash alias |
+| Modify | `src/dashboard/public/style.css` | Add topic-row, drag-handle, tier-columns, tier-drop-zone, tools-checklist, tier-warnings, preview-dialog styles, responsive breakpoint |
+| Modify | `src/lib/config.js` | Remove `disclosure` from 4 tier defaults (lines 194, 204, 214, 224), remove disclosure validation block (lines 109-118) |
+| Modify | `src/lib/tokens.js` | Remove `disclosure` param from `create()` (line 197), remove from record (line 276), remove from `validate()` return (line 362) |
+| Modify | `src/routes/a2a.js` | Remove `disclosure: validation.disclosure` (line 353) |
+| Modify | `src/routes/dashboard.js` | Remove `disclosure` from GET /settings tier response (line 1279), remove from PUT handler (line 1313), remove from POST handler (line 1378) |
+| Modify | `bin/cli.js` | Remove `disclosure` from `create()` call (line 880), remove disclosure console.log (line 925), add `permissions` alias in gui `--tab` (line 1690), remove `--disclosure` from help text (line 2990) |
+
+---
+
+## Task 1: Branch Setup + Backend Disclosure Removal
+
+**Files:**
+- Modify: `src/lib/config.js:109-118,194,204,214,224`
+- Modify: `src/lib/tokens.js:197,276,362`
+- Modify: `src/routes/a2a.js:353`
+- Modify: `src/routes/dashboard.js:1279,1313,1378`
+- Modify: `bin/cli.js:680-697,880,925,2990`
+
+**Step 1: Create feature branch**
+
+```bash
+git fetch origin main
+git checkout origin/main
+git checkout -b feature/a2a-41
+```
+
+**Step 2: Remove disclosure from config.js tier defaults**
+
+In `src/lib/config.js`, remove the `disclosure` key from all 4 tier objects in `DEFAULT_CONFIG.tiers` (lines 194, 204, 214, 224). Add a comment at the top of the tiers block:
+
+```javascript
+// A2A-41: disclosure field removed from tiers. It was intended to control
+// HOW info is shared (freely/minimally/none) but was never consumed by
+// prompt templates. The disclosure SYSTEM (disclosure.js, manifest) remains.
+```
+
+Remove the disclosure validation block (lines 109-118) from `validateTierPatch()`. Replace with:
+
+```javascript
+// A2A-41: disclosure field intentionally removed. If present in input,
+// it is silently ignored for backward compatibility with older clients.
+```
+
+**Step 3: Remove disclosure from tokens.js**
+
+In `src/lib/tokens.js`:
+- Line 197: Remove `disclosure = 'minimal',` from destructuring in `create()`
+- Line 276: Remove `disclosure,` from the record object
+- Line 362: Remove `disclosure: record.disclosure,` from validate() return
+
+Add comment near top of `create()`:
+
+```javascript
+// A2A-41: disclosure field removed from tokens. Was never used by
+// prompt generation. Existing tokens with disclosure field are harmless
+// — the field is simply not read.
+```
+
+**Step 4: Remove disclosure from a2a.js**
+
+In `src/routes/a2a.js` line 353: Remove `disclosure: validation.disclosure,` from the `a2aContext` object.
+
+**Step 5: Remove disclosure from dashboard.js**
+
+In `src/routes/dashboard.js`:
+- Line 1279: Remove `disclosure: configTier.disclosure || 'minimal',` from GET /settings response
+- Line 1313: Remove `if (body.disclosure !== undefined) update.disclosure = sanitizeString(body.disclosure, 40) || 'minimal';` from PUT handler
+- Line 1378: Remove `disclosure: sanitizeString(body.disclosure || 'minimal', 40),` from POST handler
+
+**Step 6: Remove disclosure from CLI**
+
+In `bin/cli.js`:
+- Lines 685, 691, 697: Remove `disclosure: 'minimal'`, `disclosure: 'standard'`, `disclosure: 'full'` from the tier patches
+- Line 880: Remove `disclosure: args.flags.disclosure || args.flags.d || 'minimal',` from `store.create()` call
+- Line 925: Remove `console.log(\`Disclosure: ${record.disclosure}\`);`
+- Line 2990: Remove `--disclosure, -d  Disclosure level (public, minimal, none)` from help text
+
+**Step 7: Run tests**
+
+```bash
+npm test
+```
+
+Expected: 328 passing, 2 failing (pre-existing). No NEW failures.
+
+**Step 8: Commit**
+
+```bash
+git add src/lib/config.js src/lib/tokens.js src/routes/a2a.js src/routes/dashboard.js bin/cli.js
+git commit -m "feat(a2a-41): remove disclosure field from tiers, tokens, and routes"
+```
+
+---
+
+## Task 2: Rename Settings → Permissions + Tier Dropdown Polish
+
+Combines the rename and dropdown polish into one task since they both touch the same files.
+
+**Files:**
+- Modify: `src/dashboard/public/index.html:21,67-68,76,79`
+- Modify: `src/dashboard/public/app.js:252-278,1098-1134,1136-1161,1584`
+- Modify: `bin/cli.js:1689-1691,3034`
+
+**Step 1: Rename tab, panel, heading in index.html**
+
+- Line 21: `<sl-tab slot="nav" panel="settings">Settings</sl-tab>` → `<sl-tab slot="nav" panel="permissions">Permissions</sl-tab>`
+- Line 67: `<sl-tab-panel name="settings">` → `<sl-tab-panel name="permissions">`
+- Line 68: `<h2>Tier Settings</h2>` → `<h2>Permission Tiers</h2>`
+
+**Step 2: Remove tier-id and disclosure inputs from index.html**
+
+- Delete line 76: `<sl-input id="tier-id" label="Tier ID" readonly></sl-input>`
+- Delete line 79: `<sl-input id="tier-disclosure" label="Disclosure" placeholder="minimal"></sl-input>`
+
+**Step 3: Update tabLoaders and hash alias in app.js**
+
+Line 1584: Change `settings: () => {},` to `permissions: () => {},`
+
+In `bindTabs()` (app.js ~line 263), update `activateFromHash()`:
+
+```javascript
+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) {
+    try { tabGroup.show(hash); } catch (err) {}
+  }
+};
+```
+
+**Step 4: Rewrite fillTierSelects() with emojis and default-to-public**
+
+Replace the existing function (lines 1098-1121) with:
+
+```javascript
+// 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}' };
+
+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);
+  }
+}
+```
+
+**Step 5: Update renderTierEditor() — remove disclosure/tier-id lines**
+
+Remove:
+- `document.getElementById('tier-id').value = tier.id;` (line 1127)
+- `document.getElementById('tier-disclosure').value = tier.disclosure || 'minimal';` (line 1130)
+
+**Step 6: Update save handler — remove disclosure, use tier-select for ID**
+
+In the tier-form submit handler (line 1143): Change `document.getElementById('tier-id').value` to `document.getElementById('tier-select').value`
+
+Remove `disclosure: document.getElementById('tier-disclosure').value,` (line 1147)
+
+Update copy-tier handler (line 1161): Change `document.getElementById('tier-id').value` to `document.getElementById('tier-select').value`
+
+**Step 7: Update CLI gui --tab**
+
+In `bin/cli.js` line 1689-1691:
+
+```javascript
+const tab = (args.flags.tab || args.flags.t || '').trim().toLowerCase();
+// A2A-41: 'settings' remains as backward-compat alias for 'permissions'
+const tabAliases = { settings: 'permissions' };
+const resolvedTab = tabAliases[tab] || tab;
+const allowedTabs = new Set(['contacts', 'calls', 'logs', 'permissions', 'invites']);
+const hash = allowedTabs.has(resolvedTab) ? `#${resolvedTab}` : '';
+```
+
+Update help text (line 3034) to say `contacts|calls|logs|permissions|invites`
+
+**Step 8: Run tests**
+
+```bash
+npm test
+```
+
+**Step 9: Commit**
+
+```bash
+git add src/dashboard/public/index.html src/dashboard/public/app.js bin/cli.js
+git commit -m "feat(a2a-41): rename Settings to Permissions, tier emojis, default public, remove dead fields"
+```
+
+---
+
+## Task 3: CSS Styles + Rich Topic/Goal/Tool UI
+
+**Files:**
+- Modify: `src/dashboard/public/style.css`
+- Modify: `src/dashboard/public/index.html:80-82`
+- Modify: `src/dashboard/public/app.js` — add constants, render functions, event delegation, update save handler
+
+**Step 1: Add all new CSS to style.css**
+
+Insert before the existing `@media (max-width: 720px)` block at line 204:
+
+```css
+/* ── A2A-41: Topic/Goal list rows ──────────────────────────── */
+.topic-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.5rem 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  margin-bottom: 0.4rem;
+  background: var(--panel);
+  cursor: grab;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.topic-row:hover {
+  border-color: var(--accent);
+  box-shadow: 0 1px 4px rgba(20, 102, 193, 0.1);
+}
+
+.topic-row.dragging {
+  opacity: 0.5;
+  border-style: dashed;
+}
+
+.topic-row.inherited {
+  opacity: 0.55;
+  background: #f8fafc;
+  cursor: default;
+  border-style: dashed;
+  border-color: #c5cfd9;
+}
+
+.topic-row.inherited .drag-handle,
+.topic-row.inherited .topic-delete-btn {
+  display: none;
+}
+
+.drag-handle {
+  color: #9ca8b5;
+  cursor: grab;
+  user-select: none;
+  font-size: 1.1rem;
+  line-height: 1;
+  padding-top: 2px;
+}
+
+.topic-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.topic-header {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.topic-label {
+  flex: 1;
+  font-size: 0.9rem;
+}
+
+.topic-description {
+  margin-top: 0.35rem;
+  padding-left: 0.1rem;
+}
+
+.topic-desc-text {
+  font-size: 0.82rem;
+  color: #4b5d73;
+  margin: 0 0 0.3rem;
+  line-height: 1.4;
+}
+
+.inherited-badge {
+  font-size: 0.72rem;
+  color: #7a8da0;
+  font-style: italic;
+  margin-left: auto;
+}
+
+.add-item-btn {
+  width: 100%;
+  margin-top: 0.3rem;
+  border: 1px dashed var(--line);
+  border-radius: 6px;
+  padding: 0.4rem;
+  background: transparent;
+  color: #7a8da0;
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.add-item-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ── A2A-41: Tools checklist ───────────────────────────────── */
+.tools-checklist {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.tools-checklist sl-checkbox {
+  margin-bottom: 0;
+}
+
+.tools-checklist sl-checkbox::part(label) {
+  font-size: 0.88rem;
+}
+
+.tool-desc {
+  color: #4b5d73;
+  font-weight: normal;
+}
+
+/* ── A2A-41: Three-column tier layout ──────────────────────── */
+.tier-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.8rem;
+  margin-bottom: 1.2rem;
+}
+
+.tier-column {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.6rem;
+  background: #fbfdff;
+  min-height: 120px;
+}
+
+.tier-column h4 {
+  margin: 0 0 0.5rem;
+  font-size: 0.9rem;
+  color: var(--ink);
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid var(--line);
+}
+
+.tier-drop-zone {
+  min-height: 60px;
+  transition: background 0.15s ease;
+  border-radius: 4px;
+  padding: 0.2rem;
+}
+
+.tier-drop-zone.drag-over {
+  background: rgba(20, 102, 193, 0.06);
+  outline: 2px dashed var(--accent);
+  outline-offset: -2px;
+}
+
+/* ── A2A-41: Validation warnings ───────────────────────────── */
+.tier-warnings {
+  margin-bottom: 0.8rem;
+}
+
+.tier-warning {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.7rem;
+  border-radius: 6px;
+  font-size: 0.82rem;
+  margin-bottom: 0.3rem;
+}
+
+.tier-warning.warn {
+  background: #fef3c7;
+  border: 1px solid #f59e0b;
+  color: #92400e;
+}
+
+.tier-warning.danger {
+  background: #fee2e2;
+  border: 1px solid #ef4444;
+  color: #991b1b;
+}
+
+.tier-warning.info {
+  background: #dbeafe;
+  border: 1px solid #3b82f6;
+  color: #1e40af;
+}
+
+/* ── A2A-41: Preview dialog ────────────────────────────────── */
+#preview-content h4 {
+  font-size: 0.88rem;
+  margin: 0.8rem 0 0.3rem;
+  color: var(--ink);
+}
+
+#preview-content h4:first-child {
+  margin-top: 0;
+}
+
+#preview-content ul {
+  margin: 0;
+  padding-left: 1.2rem;
+}
+
+#preview-content li {
+  font-size: 0.85rem;
+  margin-bottom: 0.25rem;
+  line-height: 1.4;
+}
+
+#preview-content li strong {
+  color: var(--ink);
+}
+```
+
+Then update the existing `@media (max-width: 720px)` block to include responsive collapse:
+
+```css
+@media (max-width: 720px) {
+  sl-tab-group::part(nav) {
+    overflow-x: auto;
+  }
+  /* A2A-41: collapse three-column layout to single column on narrow screens */
+  .tier-columns {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+**Step 2: Replace textareas in index.html**
+
+Replace the 3 textarea lines (80-82):
+```html
+<sl-textarea id="tier-tools" label="Allowed Tools (one per line)" rows="5" placeholder="Read&#10;Grep&#10;Glob"></sl-textarea>
+<sl-textarea id="tier-topics" label="Topics (one per line)" rows="6"></sl-textarea>
+<sl-textarea id="tier-goals" label="Goals (one per line)" rows="6"></sl-textarea>
+```
+
+With:
+```html
+<label>Allowed Tools</label>
+<div id="tier-tools-list" class="tools-checklist"></div>
+<label>Topics</label>
+<div id="tier-topics-list"></div>
+<label>Goals</label>
+<div id="tier-goals-list"></div>
+```
+
+**Step 3: Add constants to app.js**
+
+Near the top (after `state` declaration):
+
+```javascript
+// 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'];
+```
+
+**Step 4: Add renderToolCheckboxes()**
+
+```javascript
+// 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('');
+}
+```
+
+**Step 5: Add renderTopicList() — uses event delegation**
+
+```javascript
+// 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>`;
+}
+```
+
+**Step 6: Add renderGoalList()**
+
+```javascript
+// 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>`;
+}
+```
+
+**Step 7: Add event delegation for topic/goal lists**
+
+CRITICAL: Use event delegation on the containers, NOT per-row binding. This prevents the listener leak the reviewer flagged.
+
+```javascript
+// 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 || '';
+      }
+    });
+  });
+}
+```
+
+**Step 8: Update renderTierEditor()**
+
+```javascript
+function renderTierEditor(tierId) {
+  const tier = (state.settings?.tiers || []).find(t => t.id === tierId);
+  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);
+  renderTierWarnings(tier);
+  renderTierColumns();
+}
+```
+
+**Step 9: Update save handler — collect from new UI**
+
+Replace the tier-form submit handler body:
+
+```javascript
+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-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,
+    allowed_tools,
+    topics,
+    goals,
+    manifest: {
+      topics: manifestTopics,
+      objectives: manifestObjectives
+    }
+  };
+  await request(`/settings/tiers/${encodeURIComponent(tierId)}`, {
+    method: 'PUT',
+    body: JSON.stringify(body)
+  });
+  showNotice(`Saved tier "${tierId}"`);
+  await loadSettings();
+});
+```
+
+**Step 10: Wire event delegation in bootstrap**
+
+In `bindSettingsActions()` (or in `bootstrap()` after `bindSettingsActions()`), add:
+
+```javascript
+bindItemListDelegation();
+```
+
+**Step 11: Run tests**
+
+```bash
+npm test
+```
+
+**Step 12: Commit**
+
+```bash
+git add src/dashboard/public/style.css src/dashboard/public/index.html src/dashboard/public/app.js
+git commit -m "feat(a2a-41): rich topic/goal lists, tool checkboxes, and all CSS styles"
+```
+
+---
+
+## Task 4: Three-Column Drag-and-Drop + Validation Warnings + Caller Preview
+
+**Files:**
+- Modify: `src/dashboard/public/index.html` — add tier-columns, toggle, warnings, preview button + dialog
+- Modify: `src/dashboard/public/app.js` — add `renderTierColumns()`, `bindDragEvents()`, `renderTierWarnings()`, `getPreviewData()`, `openCallerPreview()`
+
+**Step 1: Add HTML elements to index.html permissions panel**
+
+After the tier dropdown `.row` div and before `<form id="tier-form">`, add:
+
+```html
+<div class="row">
+  <label for="tier-select">Tier</label>
+  <sl-select id="tier-select" size="small" style="min-width:200px;"></sl-select>
+  <sl-button id="new-tier-btn" size="small">New Tier</sl-button>
+  <sl-button id="preview-caller-btn" size="small" variant="neutral">\u{1F441} Preview as Caller</sl-button>
+</div>
+
+<div id="tier-warnings" class="tier-warnings"></div>
+
+<sl-checkbox id="show-drag-columns">Show all tiers side-by-side</sl-checkbox>
+<div id="tier-columns" class="tier-columns"></div>
+```
+
+Note: the `.row` div already exists — just add the preview button into it and add the new elements below it.
+
+At the end of the permissions panel (before `</sl-tab-panel>`), add:
+
+```html
+<sl-dialog id="preview-dialog" label="Caller Preview" style="--width: 540px;">
+  <div id="preview-content"></div>
+  <sl-button slot="footer" variant="primary" id="preview-close-btn">Close</sl-button>
+</sl-dialog>
+```
+
+**Step 2: Add renderTierColumns() to app.js**
+
+```javascript
+// 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();
+}
+```
+
+**Step 3: Add bindDragEvents() with Promise.all and error recovery**
+
+```javascript
+// 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();
+    });
+  });
+}
+```
+
+**Step 4: Add renderTierWarnings() — fixed topic count logic**
+
+```javascript
+// 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('');
+}
+```
+
+**Step 5: Add getPreviewData() and openCallerPreview()**
+
+```javascript
+// 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();
+}
+```
+
+**Step 6: Wire toggle, preview, and initial render in bindSettingsActions()**
+
+Add to `bindSettingsActions()`:
+
+```javascript
+// 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();
+});
+```
+
+Update `loadSettings()` to call `renderTierColumns()` after `fillTierSelects()`.
+
+**Step 7: Run tests**
+
+```bash
+npm test
+```
+
+**Step 8: Check diff size**
+
+```bash
+git diff --stat origin/main..HEAD
+git diff origin/main..HEAD | wc -l
+```
+
+If approaching 500 lines, note it but continue — the ticket is one coherent feature.
+
+**Step 9: Commit**
+
+```bash
+git add src/dashboard/public/index.html src/dashboard/public/app.js
+git commit -m "feat(a2a-41): tier columns, drag-and-drop, validation warnings, caller preview"
+```
+
+---
+
+## Task 5: Final Verification + Push + PR
+
+**Step 1: Run full test suite**
+
+```bash
+npm test
+```
+
+Expected: 328 passing, 2 failing (pre-existing only).
+
+**Step 2: Push and open PR**
+
+```bash
+git push origin feature/a2a-41
+```
+
+Open PR via `gh pr create` with the required template:
+
+```markdown
+## Summary
+Overhaul the dashboard Settings tab: rename to Permissions, remove dead disclosure field from frontend and all backend paths, replace textareas with rich interactive topic/goal rows and tool checkboxes, add three-column drag-and-drop tier layout, validation warnings, and caller preview dialog.
+
+## Ticket
+A2A-41
+
+## Reused Code
+- `esc()` (app.js:203) for HTML escaping
+- `request()` (app.js:171) for all API calls
+- `showNotice()` (app.js:25) for user feedback
+- `parseTopicObjects()` (dashboard.js:145) for backend manifest parsing
+- `loadManifest()/saveManifest()` (disclosure.js) for manifest persistence
+- `sanitizeString()/sanitizeStringArray()` (dashboard.js) for input validation
+
+## New Abstractions
+- `renderTopicList()`, `renderGoalList()` — render expandable card rows from manifest data
+- `renderToolCheckboxes()` — renders Shoelace checkboxes from TOOL_DESCRIPTIONS map
+- `renderTierColumns()` — three-column drag zone with inheritance display
+- `bindDragEvents()` — HTML5 DnD with Promise.all save and error recovery
+- `bindItemListDelegation()` — event delegation for topic/goal list interactions
+- `renderTierWarnings()` — contextual validation warnings
+- `getPreviewData()`, `openCallerPreview()` — merged effective view dialog
+
+## Alternatives Considered
+- Per-row event binding: rejected due to listener accumulation on dynamic adds
+- Sequential drag-and-drop saves: rejected due to data loss risk on partial failure
+- Framework (React/Lit): rejected to maintain zero-build-step vanilla JS approach
+
+## Test Coverage
+- Backend tests (328 passing) verify disclosure removal does not break token/config flows
+- Frontend changes are visual — verified via browser inspection
+```
+
+**Step 3: Update Linear**
+
+Update ticket to "In Review".
+
+---
+
+## Acceptance Criteria Mapping
+
+| Criterion | Task |
+|-----------|------|
+| Tab renamed Settings → Permissions | Task 2 |
+| Heading renamed | Task 2 |
+| Public tier pre-selected | Task 2 |
+| Tier dropdown emojis | Task 2 |
+| Tier ID field removed | Task 2 |
+| Disclosure field removed (frontend + backend) | Tasks 1, 2 |
+| Topics as expandable rows | Task 3 |
+| Goals as expandable rows | Task 3 |
+| Add topic/goal inline forms | Task 3 |
+| Tools as checkbox list | Task 3 |
+| Three-column tier layout | Task 4 |
+| Drag-and-drop topics between tiers | Task 4 |
+| Inherited items grayed out with badge | Task 4 |
+| Validation warnings | Task 4 |
+| Preview as Caller dialog | Task 4 |
+| All code has inline comments | All tasks |
+| Backward-compat --tab settings alias | Task 2 |
+
+## Scope Exclusions
+
+The ticket mentions "Native macOS app rebuilt and published to GitHub releases" — this is a release concern, NOT an implementation concern. The native app wraps the dashboard SPA, so dashboard changes are automatically visible in the app. Rebuilding and publishing the app is handled by the release process.