Slice 12: inline command-result toasts

New <toast-host> overlay: components post 'toast' CustomEvents ({message, kind: success|error|info}) and it shows brief, auto-dismissing, bottom-right toasts (errors linger). <repo-menu> (git + coordination actions) and <pr-list> (create/merge) now post friendly success/error toasts instead of alert(); the activity feed still logs everything. Also adds the slice 11 CHANGELOG entry. Verified live: 'Checked for updates' toast shown. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-09-20 17:50:32 -04:00
parent 68b6c3a3f8
commit 34ed127653
6 changed files with 139 additions and 4 deletions
@@ -0,0 +1,67 @@
+// <toast-host> — a singleton overlay that shows brief command-result toasts.
+//
+// A self-contained control (AGENT.md §1.1): shadow DOM, no data of its own. Any
+// component posts a toast by dispatching a `toast` CustomEvent on document:
+//   document.dispatchEvent(new CustomEvent('toast',
+//     { detail: { message: 'Published', kind: 'success' } }));
+// kind ∈ success | error | info. Toasts stack bottom-right, auto-dismiss (errors
+// linger longer), and dismiss on click.
+
+class ToastHost extends HTMLElement {
+  #onToast = null;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.#render();
+    this.#onToast = (e) => this.#show(e.detail || {});
+    document.addEventListener('toast', this.#onToast);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('toast', this.#onToast);
+  }
+
+  #show({ message, kind = 'info', timeout }) {
+    if (!message) return;
+    const t = document.createElement('div');
+    t.className = 'toast ' + (['success', 'error', 'info'].includes(kind) ? kind : 'info');
+    t.textContent = String(message);
+    t.addEventListener('click', () => t.remove());
+    this.shadowRoot.getElementById('stack').appendChild(t);
+    requestAnimationFrame(() => t.classList.add('in'));
+    const ms = timeout || (kind === 'error' ? 6000 : 3500);
+    setTimeout(() => {
+      t.classList.remove('in');
+      setTimeout(() => t.remove(), 200);
+    }, ms);
+  }
+
+  #render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        #stack {
+          position: fixed; right: 16px; bottom: 16px; z-index: 1100;
+          display: flex; flex-direction: column-reverse; gap: 8px;
+          max-width: min(360px, 90vw);
+        }
+        .toast {
+          background: var(--surface-2); color: var(--color-fg);
+          border: 1px solid var(--border-strong); border-left-width: 3px;
+          border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
+          box-shadow: 0 8px 28px rgba(0,0,0,.45); cursor: pointer;
+          opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s;
+        }
+        .toast.in { opacity: 1; transform: none; }
+        .toast.success { border-left-color: var(--color-success); }
+        .toast.error   { border-left-color: var(--color-danger); }
+        .toast.info    { border-left-color: var(--fill-accent); }
+      </style>
+      <div id="stack"></div>`;
+  }
+}
+
+customElements.define('toast-host', ToastHost);
@@ -0,0 +1,22 @@
+# toast-host
+
+## Intent
+A singleton overlay for brief command-result feedback (AGENT.md §6 polish). It
+gives immediate, legible confirmation of what a UI action did — "Published",
+"Merged & cleaned up PR #3", or an error — instead of only the activity feed or a
+browser `alert()`. Any component can post to it without a reference to it.
+
+## Public surface
+- **Tag:** `<toast-host>` (place once, near the end of the page).
+- **Listens:** `toast` on `document` — `detail: { message, kind?, timeout? }`,
+  where `kind` ∈ `success | error | info` (default `info`).
+- **Behavior:** toasts stack bottom-right, animate in, auto-dismiss (errors last
+  longer — 6s vs 3.5s), and dismiss on click. Renders nothing until posted to.
+
+## History
+- 2026-09-20: created — slice 12; inline toasts for menu/PR command results.
+
+## Notes / gotchas
+- Posters build the `CustomEvent` themselves (components are standalone, no shared
+  module); keep the detail shape in sync with this contract.
+- Messages are set via `textContent` (no HTML injection).