a2acalling 0.6.63 → 0.6.65

package/.a2a-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.6.63",
-  "installed_at": "2026-02-21T06:11:14.272Z",
+  "version": "0.6.65",
+  "installed_at": "2026-02-25T07:27:45.973Z",
   "files": [
     {
       "path": "CLAUDE.md",

package/.maestro/inbox/release-workflow-spam.md

@@ -0,0 +1,25 @@
+# Ticket: Reduce Release Workflow Email Spam
+
+## Summary
+Consolidate or batch release workflows to reduce GitHub notification email volume
+
+## Problem
+Every commit/merge triggers a separate "Release (npm + GitHub) workflow run" notification email. During active development (like the current A2A-47/48/49 sprint), this floods the inbox.
+
+## Proposed Solution
+1. **Batch releases**: Only trigger release workflow once per PM run completion, not per-merge
+2. **Conditional triggers**: Skip release workflow for WIP branches, only run on main after all tickets in a batch are merged
+3. **Consolidate notifications**: Use GitHub's workflow_run event to chain workflows and send a single summary notification
+
+## Acceptance Criteria
+- [ ] Release workflow runs maximum once per maestro PM batch
+- [ ] No release emails for intermediate merges during a sprint
+- [ ] Single "Release complete" notification at end of batch
+
+## Labels
+- chore
+- dx
+- priority: medium
+
+## Team
+a2a calling

package/CONVENTIONS.md

@@ -63,6 +63,9 @@ All modules use CommonJS (`require`/`module.exports`). Each lib file exports a f
 - Uses Shoelace web components (`<sl-*>` elements)
 - Communicates via fetch to `/dashboard/api/*` endpoints
 - SSE for real-time updates via `src/lib/dashboard-events.js`
+- Dark theme is the default; uses CSS custom properties for theming
+- Sidebar navigation with tab switching (Contacts, Calls, Invites, Logs, Settings, Permissions, Health)
+- Permissions tab uses tier cards with tool toggles and auto-save
 
 ## Permission Tiers
 

package/docs/plans/2026-02-21-a2a-48-permissions-redesign.md

@@ -0,0 +1,359 @@
+# A2A-48: Permissions Tab Redesign — Implementation Plan
+
+## Ticket
+A2A-48: Permissions tab redesign with tier cards, tool toggles, and auto-save
+
+## Approach Summary
+Replace the current form-based permissions UI (dropdown tier selector, checkboxes, Save button) with a card-based, auto-saving interface matching the A2A-46 concept mock. Three files change: index.html, style.css, app.js.
+
+---
+
+## HTML Changes (index.html)
+
+### Remove (lines 101-206 of #panel-permissions)
+- `#tier-select` sl-select dropdown and row
+- `#new-tier-btn` (moves to tier cards header)
+- `#preview-caller-btn` (preview moves to right sidebar)
+- `#show-drag-columns` checkbox and `#tier-columns` div
+- `#tier-form` (name, description, tools checklist, topics list, goals list, Save Tier button)
+- `#copy-from-tier` / `#copy-tier-btn` row — **REMOVED entirely** (copy-from functionality is retained only in the New Tier form's "Copy from" dropdown inside Settings details)
+- Keep `#preview-dialog` (unchanged)
+
+### Add (new #panel-permissions structure)
+```
+#panel-permissions
+  .perm-layout (flex row: main + sidebar)
+    .perm-main (flex:1, overflow-y:auto)
+      section: Active Tier
+        header with "Active Tier" + "+ New Tier" button
+        #tier-cards .tier-cards-grid (JS-rendered tier cards)
+
+      section: Active Configuration
+        header with "Active Configuration" + hint text
+        .config-columns (2-col grid)
+          .config-col: Active Topics (teal accent)
+            #active-topics-zone .drop-zone
+          .config-col: Active Goals (yellow accent)
+            #active-goals-zone .drop-zone
+
+      section: Allowed Tools
+        #tool-toggles .tool-toggles-grid (JS-rendered toggle cards)
+
+      section: Tier Warnings
+        #tier-warnings (existing, repositioned)
+
+      sl-details summary="Settings & Administration"
+        Defaults form (#defaults-form — unchanged internals)
+        New Tier form (#new-tier-form — unchanged internals, keeps #new-tier-copy-from)
+        Remote Callbook (#callbook-status — unchanged)
+        Auto Update (#auto-update-status — unchanged)
+        Paired Devices table — unchanged
+
+    .perm-sidebar (280px fixed right column)
+      #perm-preview .preview-card (inline caller preview)
+      #sidebar-topics .sidebar-list (all topics, draggable)
+        "+ Add Topic" button
+      #sidebar-goals .sidebar-list (all goals, draggable)
+        "+ Add Goal" button
+
+  sl-dialog#create-item-dialog (Create New Item modal — simplified, no icon selector)
+    sl-input#create-item-title
+    sl-textarea#create-item-desc
+    Create / Cancel buttons
+
+  sl-dialog#preview-dialog (existing — kept for full preview)
+```
+
+### Key DOM ID changes
+| Old ID | New ID/Structure | Notes |
+|--------|-----------------|-------|
+| `tier-select` | `#tier-cards` container | Cards replace dropdown. **All code reading `tier-select.value` must use `state.activeTierId` instead.** |
+| `tier-tools-list` | `#tool-toggles` | Toggle cards replace checkboxes |
+| `tier-topics-list` | `#active-topics-zone` | Drop zone with teal cards |
+| `tier-goals-list` | `#active-goals-zone` | Drop zone with yellow cards |
+| `tier-form` | Removed | Auto-save replaces form |
+| `tier-name` / `tier-description` | Removed | Tier names shown on cards |
+| `show-drag-columns` / `tier-columns` | Removed | Sidebar replaces columns |
+| `copy-from-tier` / `copy-tier-btn` | **Removed entirely** | Copy-tier functionality removed; New Tier form keeps "Copy from" dropdown |
+
+---
+
+## CSS Changes (style.css)
+
+### New classes to add (~130 lines)
+
+**Layout:**
+- `.perm-layout` — flex row, gap
+- `.perm-main` — flex:1, overflow-y:auto, max-width
+- `.perm-sidebar` — width:280px, shrink:0, hidden below 1280px
+- `.perm-section` — margin-bottom spacing
+- `.perm-section-header` — flex between h2 and action buttons
+- `.perm-hint` — muted italic helper text
+- `.perm-add-btn` — text button with + icon style
+
+**Tier cards:**
+- `.tier-cards-grid` — grid, repeat(auto-fill, minmax(140px,1fr)), gap
+- `.tier-card` — card-bg, border, rounded-xl, padding, cursor, centered content, h-24
+- `.tier-card:hover` — lighter bg, border-gray-600
+- `.tier-card.active` — gradient border glow (pseudo-element with blur), border-blue-500
+- `.tier-card .status-dot` — green pulsing dot (top-right)
+- `.tier-card-icon` — material icon, colored per tier
+- `.tier-card-name` — font-semibold, white
+
+**Toggle switches:**
+- `.toggle-switch` — inline-block, 44x24px
+- `.toggle-switch input` — hidden (opacity:0)
+- `.toggle-switch .slider` — rounded pill, #374151 bg, transition
+- `.toggle-switch .slider:before` — white circle, 18x18px
+- `input:checked + .slider` — blue bg + blue glow shadow
+- `input:checked + .slider:before` — translateX(20px)
+- `.tool-toggle-card` — glass-panel, rounded-xl, flex between info and toggle
+- `.tool-toggle-card.enabled` — border-blue-500/30, subtle blue shadow
+- `.tool-icon` — 40x40 rounded-lg icon container, colored per tool
+
+**Configuration zones:**
+- `.config-columns` — grid, 2 columns, gap
+- `.config-col` — flex column
+- `.config-col-header` — uppercase, small, tracking-wide, flex with badge
+- `.config-col-header--teal` — teal-400 color
+- `.config-col-header--yellow` — yellow-400 color
+- `.status-dot` — 6px circle
+- `.status-dot--teal` — teal bg + glow
+- `.status-dot--yellow` — yellow bg + glow
+- `.count-badge` — tiny badge with count
+- `.count-badge--teal` / `--yellow` — colored variants
+- `.perm-drop-zone` — dashed SVG border, min-height, rounded-xl
+- `.perm-drop-zone.drag-over` — blue highlight
+- `.active-item-card` — card with accent border + glow shadow + close button
+- `.active-item-card--teal` — teal border/glow
+- `.active-item-card--yellow` — yellow border/glow
+- `.drop-placeholder` — dashed inner border, "+ Drop Topic/Goal" text
+
+**Sidebar:**
+- `.preview-card` — gradient bg, rounded-2xl, border, padding, relative overflow
+- `.sidebar-list` — space-y, margin-top
+- `.sidebar-list-header` — uppercase tracking-wide muted
+- `.sidebar-item` — card-bg, border, rounded-lg, flex, cursor-move, group-hover
+- `.sidebar-item.active-in-zone` — dimmed, dashed border, italic "(Active)" label
+- `.sidebar-add-btn` — dashed border, full-width, muted + hover primary
+
+**Responsive:**
+- `@media (max-width: 1280px)` — hide `.perm-sidebar`, show fallback preview button in .perm-main
+
+### Modify existing
+- Remove `.tools-checklist` rules (replaced by toggle cards)
+- Remove `.tier-columns` / `.tier-column` rules (replaced by sidebar)
+- Keep `.topic-row`, `.drag-handle`, `.topic-content` etc. (adapted for sidebar items)
+- Keep `.tier-warning` rules (unchanged)
+- Keep `.glass-panel` (reused for tool toggle cards)
+
+---
+
+## JS Changes (app.js)
+
+### New state
+```js
+// Add to state object:
+activeTierId: 'public',  // currently selected tier (replaces tier-select dropdown value)
+```
+
+### Functions to REMOVE
+- `fillTierSelects()` — replaced by renderTierCards() + populateInviteTierSelect()
+- `renderTierColumns()` — replaced by sidebar lists
+- `bindDragEvents()` — replaced by new sidebar↔zone drag handlers
+- `bindItemListDelegation()` — replaced by direct delegation in bindPermissionsActions()
+
+### bootstrap() call site changes (CRITICAL)
+The bootstrap() function must be updated:
+- `bindSettingsActions()` → `bindPermissionsActions()` (renamed)
+- Remove `bindItemListDelegation()` call (functionality merged into bindPermissionsActions)
+- `tabLoaders.permissions` should call `loadSettings()` to ensure fresh data on tab switch (currently a no-op)
+
+### Functions to REWRITE
+
+**`renderToolCheckboxes(allowedTools)` → `renderToolToggles(allowedTools)`**
+- Renders TOOL_DESCRIPTIONS as toggle-switch cards (glass-panel + icon + name + desc + toggle)
+- Each toggle has data-tool attribute
+- Change event calls autoSaveTier()
+- Active toggles get .enabled class (blue border glow)
+
+**`renderTopicList(tier)` → `renderActiveTopics(tier)`**
+- Renders topics in #active-topics-zone as .active-item-card--teal cards
+- Each card has close button (removes + auto-saves)
+- Includes "+ Drop Topic" placeholder at bottom
+- Updates #topic-count badge
+
+**`renderGoalList(tier)` → `renderActiveGoals(tier)`**
+- Same pattern as topics but with yellow accent, renders in #active-goals-zone
+- Updates #goal-count badge
+
+**`renderTierEditor(tierId)` → `renderPermissions()`**
+- Orchestrator: calls renderTierCards, renderActiveTopics, renderActiveGoals, renderToolToggles, renderTierWarnings, renderSidebarPreview, renderSidebarLists
+- Uses state.activeTierId instead of reading tier-select.value
+
+**`openCallerPreview()`** ← MUST BE REWRITTEN (not unchanged!)
+- Current code at line 1591 reads `document.getElementById('tier-select').value` — that element is removed.
+- Fix: Replace with `state.activeTierId`
+- Rest of function logic (getPreviewData, dialog rendering) stays the same.
+
+**`bindSettingsActions()` → `bindPermissionsActions()`**
+- Remove: tier-form submit handler (Save Tier button gone)
+- Remove: tier-select sl-change handler (cards replace it)
+- Remove: copy-tier-btn click handler (copy-tier functionality removed)
+- Remove: show-drag-columns handler (removed feature)
+- Remove: preview-caller-btn handler (preview now inline in sidebar)
+- Add: tier card click delegation → set state.activeTierId + renderPermissions()
+- Add: tool toggle change delegation → autoSaveTier()
+- Add: topic/goal close button delegation → remove + autoSaveTier()
+- Add: sidebar add-topic/add-goal button → open create-item-dialog
+- Add: create-item-dialog submit → add item + autoSaveTier()
+- Keep: defaults-form submit handler
+- Keep: new-tier-form submit handler — **BUT FIX LINE 1734**: replace `document.getElementById('tier-select').value = tierId` with `state.activeTierId = tierId; renderPermissions();`
+- Keep: preview-close-btn handler
+- Keep: callbook, auto-update, device handlers (unchanged)
+
+**`loadSettings()`**
+- Replace `fillTierSelects()` call with:
+  - Call `populateInviteTierSelect()` to populate `#invite-tier` and `#new-tier-copy-from`
+  - Call `renderPermissions()`
+- Remove: `renderTierColumns()` call
+- Keep: defaults field population
+
+### Functions to ADD
+
+**`renderTierCards()`**
+- Reads state.settings.tiers, renders grid of .tier-card elements
+- Active card (state.activeTierId) gets .active class + green status-dot
+- Each card: icon (mapped from tier id or custom), name, click handler
+
+**`renderSidebarPreview(tierId)`**
+- Uses getPreviewData(tierId) to render inline preview card
+- Shows: tier name badge, "can discuss X topics to help Y goals using Z tools" summary
+- Active/valid status indicators
+
+**`renderSidebarLists(tier)`**
+- Renders all topics in #sidebar-topics as .sidebar-item cards with drag handles
+- Topics active in current tier shown dimmed with "(Active)" label
+- Renders all goals in #sidebar-goals same pattern
+- Each list has "+ Add Topic" / "+ Add Goal" button at bottom
+
+**`autoSaveTier()`**
+- Debounced (250ms) function
+- Collects: allowed_tools from toggle states, topics from active zone, goals from active zone
+- PUTs to `/settings/tiers/${state.activeTierId}`
+- Shows subtle "Saved" notice on success
+- NOTE: Uses `c.dataset.topic` for BOTH topics and goals — this is intentional because
+  `parseTopicObjects()` in dashboard.js:160 only reads `entry.topic`. Add WHY comment.
+
+**`bindSidebarDrag()`**
+- Makes .sidebar-item elements draggable
+- Drop targets: #active-topics-zone and #active-goals-zone
+- On drop: add item to active zone, mark as "(Active)" in sidebar, auto-save
+- Reverse: close button on active items removes from zone, un-dims in sidebar
+
+**`populateInviteTierSelect()`**
+- Extracted from old fillTierSelects() — populates:
+  1. `#invite-tier` (invites tab)
+  2. `#new-tier-copy-from` (inside Settings details)
+- Does NOT populate `#tier-select` (removed) or `#copy-from-tier` (removed)
+
+### Functions UNCHANGED
+- `getPreviewData(tierId)` — reused by renderSidebarPreview
+- `renderTierWarnings(tier)` — container ID stays #tier-warnings
+- `renderCallbookStatus()` — unchanged, just inside Settings details now
+- `renderAutoUpdateStatus()` — unchanged
+- `loadDashboardStatus()` — unchanged
+
+---
+
+## Auto-Save Pattern
+
+```js
+// 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');
+    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);
+
+    // A2A-48: uses dataset.topic for goals too (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}.
+    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 } };
+    try {
+      await request(`/settings/tiers/${encodeURIComponent(tierId)}`, {
+        method: 'PUT', body: JSON.stringify(body)
+      });
+      showNotice('Saved');
+    } catch (err) {
+      showNotice(`Save failed: ${err.message}`);
+    }
+    // Refresh state from server to stay in sync
+    const payload = await request('/settings');
+    state.settings = payload;
+  }, 250);
+}
+```
+
+---
+
+## Critical Integration Points
+
+1. **state.activeTierId initialization**: Set to 'public' in state object. When permissions panel loads (`loadSettings()`), default to 'public' or first available tier.
+
+2. **Invite tier select**: `fillTierSelects()` currently populates `#invite-tier` for the Invites tab. After removing fillTierSelects, `populateInviteTierSelect()` handles this. Called from loadSettings().
+
+3. **Tier warnings**: `#tier-warnings` container stays in new HTML. `renderTierWarnings()` called from `renderPermissions()` unchanged.
+
+4. **Settings details contents**: The defaults form, new-tier form, callbook, auto-update, and device sections all reference existing DOM IDs. They move INSIDE `<sl-details>` but their IDs and inner structure stay the same. All existing bind handlers still find them.
+
+5. **Tab navigation (CORRECTED)**: `tabLoaders.permissions` is currently a no-op (`() => {}`). Update it to call `loadSettings()` to ensure fresh data when switching to Permissions tab. This is not a regression fix (existing code has same stale-data issue) but improves behavior while we're in here.
+
+6. **Hash navigation**: `openCallTranscript()` uses hash to switch tabs. No impact — permissions tab doesn't use hash navigation.
+
+7. **openCallerPreview() tier-select reference (FIXED)**: This function reads `document.getElementById('tier-select').value` at line 1591. Since `#tier-select` is removed, this MUST change to `state.activeTierId`. The function is listed as "Functions to REWRITE" above.
+
+8. **new-tier-form success path (FIXED)**: At line 1734, `document.getElementById('tier-select').value = tierId` must become `state.activeTierId = tierId; renderPermissions();`.
+
+9. **bootstrap() changes (FIXED)**: Must update: `bindSettingsActions()` → `bindPermissionsActions()`, remove `bindItemListDelegation()` call.
+
+---
+
+## Scope Decision
+
+Drop the glass modal with icon selector and segmented Topic/Goal control. Instead, use a simplified `<sl-dialog>` with just title + description inputs (consistent with existing Shoelace patterns). This saves ~60-80 lines while keeping the "Create New Item" functionality.
+
+Builder should track actual git diff size. If exceeding 550 lines, defer the sidebar drag feature (make sidebar read-only) as the primary cut.
+
+---
+
+## Testing Strategy
+
+No new test files needed — this is a pure frontend SPA change. Existing backend tests (`npm test`) must pass unchanged since:
+- No API changes
+- No route changes
+- No data model changes
+- Dashboard API endpoints unchanged
+
+Manual verification via browser: open dashboard, navigate to Permissions tab, verify all acceptance criteria visually.