a2acalling 0.6.62 → 0.6.64

package/docs/plans/2026-02-21-a2a-49-remaining-tabs-polish.md

@@ -0,0 +1,375 @@
+# A2A-49: Dark Theme Polish for Remaining Tabs — Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Apply consistent dark theme styling to Contacts, Calls, Invites, Logs, and Health tabs so the entire dashboard matches the dark visual language from A2A-47.
+
+**Architecture:** Pure CSS additions + minor app.js class name changes. A2A-47 already established dark CSS vars, Shoelace dark theme, and dark table/card base styles. This ticket fills in the gaps: table hover states, clickable row cursors, status accent colors, glass-panel on cards, filter area backgrounds, and consistent monospace styling. No API/route/data changes.
+
+**Tech Stack:** CSS custom properties, Shoelace dark theme, existing render functions in app.js
+
+---
+
+## What A2A-47 Already Handles (DO NOT duplicate)
+
+- `:root` dark vars (`--bg`, `--panel`, `--ink`, `--ink-muted`, `--line`, `--accent`, `--card-bg`)
+- `sl-card::part(base)` dark background + border
+- `th` dark header background
+- `#logs-table tr:hover td` hover highlight
+- `#notice` dark toast styling
+- `.transcript` dark background
+- `.summary` pre styling
+- All Shoelace form components (`sl-input`, `sl-select`, `sl-button`, `sl-badge`) via `sl-theme-dark`
+
+## What Needs Adding (This Ticket)
+
+### CSS gaps:
+1. Table hover for ALL tables (not just logs)
+2. Clickable row cursor for calls-table and contacts tables
+3. Contact status accent dots (colored inline badges)
+4. Subtle filter area background
+5. Log level color coding in table cells
+6. Health pass/fail status color reinforcement
+7. Monospace `<code>` element dark styling
+8. `sl-details` dark summary/header styling
+9. Responsive sidebar collapse: hide `.perm-sidebar` below breakpoint (already done)
+
+### app.js gaps:
+1. Add `data-status` attribute to contact status cells for CSS color targeting
+2. Add `data-level` attribute to log level cells for CSS color coding
+3. Add `data-clickable` or cursor class to clickable table rows
+
+---
+
+## Task 1: CSS — Universal table hover + clickable rows
+
+**Files:**
+- Modify: `src/dashboard/public/style.css` (after existing `#logs-table tr:hover td` rule ~line 294)
+
+**Step 1: Add universal table row hover and clickable cursor styles**
+
+Add these CSS rules after the existing `#logs-table` hover rule:
+
+```css
+/* A2A-49: Universal dark table row hover for all tabs.
+   Uses 0.04 to match the existing logs hover opacity from A2A-47. */
+table tbody tr:hover td {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+/* A2A-49: Contacts rows use buttons inside cells (not full-row click),
+   so they don't get cursor:pointer — only calls rows do. */
+
+/* A2A-49: Clickable table rows get pointer cursor */
+#calls-table tbody tr {
+  cursor: pointer;
+}
+
+#calls-table tbody tr:hover td {
+  background: rgba(59, 130, 246, 0.08);
+}
+```
+
+**Step 2: Remove the now-redundant `#logs-table` specific hover rule**
+
+The universal `table tbody tr:hover td` covers logs. Remove lines 292-295:
+```css
+/* REMOVE: A2A-47: Dark hover for log rows replacing light #f6fbff */
+#logs-table tr:hover td {
+  background: rgba(255, 255, 255, 0.04);
+}
+```
+
+**Step 3: Run tests**
+
+Run: `npm test`
+Expected: All 339 tests pass (CSS-only change, no backend impact)
+
+**Step 4: Commit**
+
+```bash
+git add src/dashboard/public/style.css
+git commit -m "style(A2A-49): universal dark table hover and clickable row cursor"
+```
+
+---
+
+## Task 2: CSS — Contact status dots + log level colors
+
+**Files:**
+- Modify: `src/dashboard/public/style.css` (add new section)
+- Modify: `src/dashboard/public/app.js` (renderContacts, renderLogs)
+
+**Step 1: Add status dot and log level CSS**
+
+Append to style.css:
+
+```css
+/* A2A-49: Contact status colored badges */
+.contact-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.82rem;
+}
+
+.contact-status::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.contact-status[data-status="online"]::before {
+  background: #10B981;
+  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
+}
+
+.contact-status[data-status="offline"]::before {
+  background: #EF4444;
+  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
+}
+
+.contact-status[data-status="unknown"]::before {
+  background: #6B7280;
+}
+
+/* A2A-49: Log level color coding */
+.log-level {
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.log-level[data-level="error"] {
+  color: #F87171;
+}
+
+.log-level[data-level="warn"] {
+  color: #FBBF24;
+}
+
+.log-level[data-level="info"] {
+  color: #60A5FA;
+}
+
+.log-level[data-level="debug"] {
+  color: #A78BFA;
+}
+
+.log-level[data-level="trace"] {
+  color: #6B7280;
+}
+```
+
+**Step 2: Update renderContacts() status cell in app.js**
+
+In `renderContacts()` (app.js ~line 441), change the status cell from:
+```js
+<td>${esc(c?.status || '-')}</td>
+```
+to:
+```js
+<td><span class="contact-status" data-status="${esc(c?.status || 'unknown')}">${esc(c?.status || '-')}</span></td>
+```
+
+**Step 3: Update renderLogs() level cell in app.js**
+
+In `renderLogs()` (app.js ~line 1110), change:
+```js
+<td>${esc(row.level || '-')}</td>
+```
+to:
+```js
+<td><span class="log-level" data-level="${esc(row.level || '')}">${esc(row.level || '-')}</span></td>
+```
+
+**Step 4: Run tests**
+
+Run: `npm test`
+Expected: All 339 tests pass
+
+**Step 5: Commit**
+
+```bash
+git add src/dashboard/public/style.css src/dashboard/public/app.js
+git commit -m "style(A2A-49): contact status dots and log level color coding"
+```
+
+---
+
+## Task 3: CSS — Filter area, code elements, and sl-details refinements
+
+**Files:**
+- Modify: `src/dashboard/public/style.css`
+
+**Step 1: Replace `.filters` rule and add new styles**
+
+REPLACE the existing `.filters` block at style.css lines 178-183 with this merged version (keeps grid layout, adds dark polish):
+
+```css
+.filters {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.6rem;
+  margin-bottom: 0.9rem;
+  /* A2A-49: Subtle background for filter areas */
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.8rem;
+}
+```
+
+Then APPEND these new rules to the end of style.css (before the responsive media queries):
+
+```css
+/* A2A-49: Dark monospace code elements */
+code {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 0.1em 0.35em;
+  font-size: 0.85em;
+  color: #E2E8F0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+/* A2A-49: pre.summary gets dark background. This SUPPLEMENTS the existing
+   .summary rule (max-width + white-space) — do NOT remove .summary. */
+pre.summary {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 0.75em;
+  color: var(--ink);
+}
+
+/* A2A-49: sl-details summary bar dark polish */
+sl-details::part(summary) {
+  font-weight: 500;
+  color: var(--ink);
+}
+
+sl-details::part(base) {
+  background: var(--card-bg);
+  border-color: var(--line);
+}
+```
+
+**Step 2: Run tests**
+
+Run: `npm test`
+Expected: All 339 tests pass
+
+**Step 3: Commit**
+
+```bash
+git add src/dashboard/public/style.css
+git commit -m "style(A2A-49): filter area background, code elements, sl-details polish"
+```
+
+---
+
+## Task 4: CSS — Health tab status colors
+
+**Files:**
+- Modify: `src/dashboard/public/style.css`
+
+**Step 1: Add health-specific styles**
+
+Append to style.css:
+
+```css
+/* A2A-49: Health card gets glass-panel treatment via CSS (not index.html).
+   The acceptance criterion requires glass-panel styling on #health-latest.
+   We target the sl-card shadow DOM part directly. */
+#health-latest::part(base) {
+  background: rgba(30, 41, 59, 0.4);
+  backdrop-filter: blur(12px);
+  border-color: rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+}
+
+/* A2A-49: Health tab — step icons and status reinforcement.
+   Shoelace badge variants (success/danger/warning) already provide
+   green/red/yellow colors in dark theme — no override needed. */
+#health-latest details ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+#health-latest details li {
+  padding: 0.3rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  font-size: 0.85rem;
+}
+
+#health-latest details li:last-child {
+  border-bottom: none;
+}
+
+/* A2A-49: Native <details> dark styling inside health cards */
+#health-latest details > summary {
+  cursor: pointer;
+  color: var(--ink-muted);
+  font-size: 0.85rem;
+  padding: 0.3rem 0;
+}
+
+#health-latest details > summary:hover {
+  color: var(--ink);
+}
+```
+
+**Step 2: Run tests**
+
+Run: `npm test`
+Expected: All 339 tests pass
+
+**Step 3: Commit**
+
+```bash
+git add src/dashboard/public/style.css
+git commit -m "style(A2A-49): health tab step list and details styling"
+```
+
+---
+
+## Task 5: Final visual verification + merge commit
+
+**Step 1: Run full test suite**
+
+Run: `npm test`
+Expected: All 339 tests pass
+
+**Step 2: Check diff size**
+
+Run: `git diff main --stat`
+Expected: 2 files changed, under 200 lines added. Well within 500-line limit.
+
+**Step 3: Verify no backend files changed**
+
+Run: `git diff main --name-only`
+Expected: Only `src/dashboard/public/style.css` and `src/dashboard/public/app.js`
+
+---
+
+## Acceptance Criteria Mapping
+
+| Criterion | Addressed In |
+|-----------|-------------|
+| Contacts tab: dark backgrounds, status dots | Task 2 (status dots) + existing sl-card dark styling |
+| Contacts tab: Add Contact form dark theme | Already handled by Shoelace sl-theme-dark |
+| Calls tab: dark header and row styling | Task 1 (universal hover) + existing th dark styling |
+| Calls tab: call detail/transcript dark cards | Task 3 (pre.summary) + existing .transcript styling |
+| Invites tab: form and table dark theme | Already handled by Shoelace + Task 1 (hover) |
+| Logs tab: filter inputs dark theme | Task 3 (filter area background) + Shoelace |
+| Logs tab: dark styling with hover | Task 1 (universal hover replaces logs-specific) |
+| Logs tab: trace detail dark card | Already handled by sl-card dark styling |
+| Health tab: glass-panel styling | Task 4 (health details) + existing sl-card dark |
+| Health tab: dark history table | Task 1 (universal hover) + existing th/td dark |
+| All Shoelace components render correctly | Already handled by sl-theme-dark from A2A-47 |
+| No visual inconsistencies | Consistent use of CSS vars throughout |
+| Tests pass | Verified in each task |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "a2acalling",
-  "version": "0.6.62",
+  "version": "0.6.64",
   "description": "Agent-to-agent calling for OpenClaw - A2A agent communication",
   "main": "src/index.js",
   "bin": {