agentwire-dev 1.31.0__tar.gz → 1.33.0__tar.gz

{agentwire_dev-1.31.0 → agentwire_dev-1.33.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: agentwire-dev
-Version: 1.31.0
+Version: 1.33.0
 Summary: Multi-session voice web interface for AI coding agents
 Project-URL: Homepage, https://agentwire.dev
 Project-URL: Repository, https://github.com/dotdevdotdev/agentwire-dev

{agentwire_dev-1.31.0 → agentwire_dev-1.33.0}/agentwire/__init__.py

@@ -1,3 +1,3 @@
 """AgentWire - Multi-session voice web interface for AI coding agents."""
 
-__version__ = "1.31.0"
+__version__ = "1.33.0"

agentwire_dev-1.33.0/agentwire/static/announcements.json

@@ -0,0 +1,31 @@
+{
+  "announcements": [
+    {
+      "id": "evergreen-feedback-2026-06",
+      "placement": "banner",
+      "emoji": "👋",
+      "title": "You're an early one",
+      "body": "AgentWire is young and shaped by the handful of people running it. Bug, idea, or just hello — open an issue, it's read.",
+      "cta": {
+        "label": "Open an issue",
+        "url": "https://github.com/dotdevdotdev/agentwire-dev/issues/new"
+      }
+    },
+    {
+      "id": "2026-06-idea-first-capture",
+      "placement": "modal",
+      "emoji": "💡",
+      "title": "New idea? Cmd+K and go.",
+      "date": "2026-06-08",
+      "body": "AgentWire can now spin up a whole project from a single sentence. Press Cmd/Ctrl+K (or the New idea button), type — or speak — what you want to build, and it scaffolds the folder, starts an agent, and hands it your idea as the first message. You watch it get to work the moment the window opens.",
+      "highlights": [
+        "Idea-first capture — type an idea, get a running agent",
+        "Instant voice mode — browser speech in and out, zero setup"
+      ],
+      "cta": {
+        "label": "See what's in v1.31",
+        "url": "https://github.com/dotdevdotdev/agentwire-dev/releases/tag/v1.31.0"
+      }
+    }
+  ]
+}

{agentwire_dev-1.31.0 → agentwire_dev-1.33.0}/agentwire/static/css/desktop.css

@@ -770,6 +770,25 @@ body {
     border-color: var(--accent);
 }
 
+.sidebar-notif-mute {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--text-muted);
+    font-size: 13px;
+    cursor: pointer;
+}
+
+.sidebar-notif-mute input[type="checkbox"] {
+    accent-color: var(--accent);
+    cursor: pointer;
+}
+
+.sidebar-display-hint {
+    color: var(--text-muted);
+    font-size: 12px;
+}
+
 /* Voice Indicator States */
 #sidebarVoiceIndicator {
     display: flex;
@@ -1000,6 +1019,151 @@ body {
     font-weight: 500;
 }
 
+/* =========================================================================
+   Announcement modal (userbase welcome card)
+   ========================================================================= */
+
+.announcement-overlay {
+    z-index: 2100;  /* above standard modals, below the command palette */
+    animation: announcement-fade 180ms ease-out;
+}
+
+.announcement-overlay .announcement-modal {
+    width: 460px;
+    max-width: 92vw;
+    padding: 28px 28px 22px;
+    text-align: center;
+    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--chrome)) 0%, var(--chrome) 60%);
+    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--chrome-border));
+    border-radius: 12px;
+    animation: announcement-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.announcement-dismiss {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-size: 15px;
+    cursor: pointer;
+    line-height: 1;
+    padding: 4px 6px;
+    border-radius: 4px;
+}
+
+.announcement-dismiss:hover {
+    color: var(--text);
+    background: var(--background);
+}
+
+.announcement-emoji {
+    font-size: 40px;
+    line-height: 1;
+    margin-bottom: 10px;
+}
+
+.announcement-title {
+    margin: 0 0 4px;
+    font-size: 21px;
+    font-weight: 700;
+    color: var(--text);
+}
+
+.announcement-date {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-bottom: 14px;
+}
+
+.announcement-body {
+    font-size: 15px;
+    line-height: 1.55;
+    color: var(--text);
+    opacity: 0.92;
+    margin-bottom: 16px;
+    text-align: left;
+}
+
+.announcement-highlights {
+    list-style: none;
+    margin: 0 0 20px;
+    padding: 0;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.announcement-highlights li {
+    position: relative;
+    padding: 8px 12px 8px 34px;
+    background: var(--background);
+    border: 1px solid var(--chrome-border);
+    border-radius: 6px;
+    font-size: 14px;
+    color: var(--text);
+}
+
+.announcement-highlights li::before {
+    content: "✦";
+    position: absolute;
+    left: 12px;
+    top: 8px;
+    color: var(--accent);
+}
+
+.announcement-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.announcement-cta {
+    flex: 1;
+    padding: 10px 16px;
+    background: var(--accent);
+    color: var(--background);
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 14px;
+    text-decoration: none;
+    text-align: center;
+}
+
+.announcement-cta:hover {
+    filter: brightness(1.08);
+}
+
+.announcement-ok {
+    flex: 1;
+    padding: 10px 16px;
+    background: transparent;
+    border: 1px solid var(--chrome-border);
+    border-radius: 6px;
+    color: var(--text);
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.announcement-ok:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+@keyframes announcement-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes announcement-rise {
+    from { opacity: 0; transform: translateY(12px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
 /* =========================================================================
    Quicktask modal
    ========================================================================= */
@@ -4820,6 +4984,59 @@ body.sidebar-pinned .sidebar-tab {
     opacity: 1;
 }
 
+/* Sidebar announcement banner (evergreen userbase note — see announcement-modal.js) */
+.announcement-banner {
+    position: relative;
+    flex-basis: 100%;
+    padding: calc(var(--spacing-base) * 1.25);
+    margin-bottom: var(--spacing-base);
+    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--chrome-border));
+    border-left: 3px solid var(--accent);
+    border-radius: var(--radius, 6px);
+    background: color-mix(in srgb, var(--accent) 6%, var(--chrome));
+    font-size: 11px;
+    line-height: 1.45;
+}
+
+.announcement-banner-title {
+    font-weight: 600;
+    color: var(--accent);
+    margin-bottom: 4px;
+    padding-right: 14px;  /* clear the ✕ */
+}
+
+.announcement-banner-body {
+    color: var(--text-secondary, inherit);
+}
+
+.announcement-banner-cta {
+    display: inline-block;
+    margin-top: 6px;
+    color: var(--accent);
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.announcement-banner-cta:hover {
+    text-decoration: underline;
+}
+
+.announcement-banner-dismiss {
+    position: absolute;
+    top: 4px;
+    right: 6px;
+    border: none;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    font-size: 11px;
+    opacity: 0.6;
+}
+
+.announcement-banner-dismiss:hover {
+    opacity: 1;
+}
+
 /* Edit-before-send transcript bars (default STT tier) */
 .sidebar-transcript-bar,
 .wb-transcript-bar {

agentwire_dev-1.33.0/agentwire/static/js/announcement-modal.js

@@ -0,0 +1,178 @@
+/**
+ * Announcements — userbase messaging in two channels, one source file.
+ *
+ * Content is a single JSON file (agentwire/static/announcements.json) edited
+ * on `main`. It plays two roles:
+ *   - Remote source: fetched from raw.githubusercontent on load, so an edit
+ *     on `main` reaches every user on their next portal open — no upgrade.
+ *   - Bundled fallback: the same file ships in the package and is served at
+ *     /static/announcements.json, used when the remote GET fails (offline).
+ *
+ * Each entry's `placement` picks the channel:
+ *   - "modal" (default) — big centered splash for the moments that matter.
+ *   - "banner" — a quiet, persistent strip in the sidebar footer for
+ *     evergreen notes (a link, a tip, an ask).
+ * Both show the newest entry whose id isn't in the shared dismissed set
+ * (localStorage `aw-announcements-seen`); dismiss is per-id.
+ *
+ * The fetch is a single unauthenticated GET with nothing about the user in
+ * it — no telemetry. Content fields are rendered as ESCAPED TEXT (the
+ * frontend owns all markup), so even though the body comes from a URL there
+ * is no injection surface; the CTA url is validated to http(s).
+ */
+
+const REMOTE_URL = 'https://raw.githubusercontent.com/dotdevdotdev/agentwire-dev/main/agentwire/static/announcements.json';
+const LOCAL_URL = '/static/announcements.json';
+const SEEN_KEY = 'aw-announcements-seen';
+const FETCH_TIMEOUT_MS = 4000;
+
+let modalEl = null;
+let escHandler = null;
+
+function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, (c) => (
+        { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+    ));
+}
+
+function seenIds() {
+    try {
+        const raw = localStorage.getItem(SEEN_KEY);
+        const arr = raw ? JSON.parse(raw) : [];
+        return Array.isArray(arr) ? arr : [];
+    } catch {
+        return [];
+    }
+}
+
+function markSeen(id) {
+    const ids = seenIds();
+    if (!ids.includes(id)) {
+        ids.push(id);
+        try { localStorage.setItem(SEEN_KEY, JSON.stringify(ids)); } catch { /* ignore */ }
+    }
+}
+
+async function fetchJson(url) {
+    const ctrl = new AbortController();
+    const timer = setTimeout(() => ctrl.abort(), FETCH_TIMEOUT_MS);
+    try {
+        // No credentials, no caching, nothing about the user goes out.
+        const resp = await fetch(url, { signal: ctrl.signal, cache: 'no-store', credentials: 'omit' });
+        if (!resp.ok) return null;
+        return await resp.json();
+    } catch {
+        return null;
+    } finally {
+        clearTimeout(timer);
+    }
+}
+
+/** A valid, safe http(s) URL, or null. */
+function safeUrl(url) {
+    try {
+        const u = new URL(String(url));
+        return (u.protocol === 'https:' || u.protocol === 'http:') ? u.href : null;
+    } catch {
+        return null;
+    }
+}
+
+/** Newest (file order) unseen announcement matching `placement` (default "modal"). */
+function pickUnseen(list, placement) {
+    const seen = seenIds();
+    return list.find((a) => (
+        a && typeof a.id === 'string' && a.id
+        && (a.placement || 'modal') === placement
+        && !seen.includes(a.id)
+    )) || null;
+}
+
+function renderModal(a) {
+    const emoji = a.emoji ? `<div class="announcement-emoji">${escapeHtml(a.emoji)}</div>` : '';
+    const date = a.date ? `<div class="announcement-date">${escapeHtml(a.date)}</div>` : '';
+    const highlights = Array.isArray(a.highlights) && a.highlights.length
+        ? `<ul class="announcement-highlights">${a.highlights
+            .map((h) => `<li>${escapeHtml(h)}</li>`).join('')}</ul>`
+        : '';
+    const ctaUrl = a.cta && safeUrl(a.cta.url);
+    const cta = ctaUrl
+        ? `<a class="announcement-cta" href="${escapeHtml(ctaUrl)}" target="_blank" rel="noopener noreferrer">${escapeHtml(a.cta.label || 'Learn more')}</a>`
+        : '';
+    return `<div class="modal-overlay announcement-overlay" id="announcementOverlay">
+        <div class="modal announcement-modal" role="dialog" aria-label="Announcement" aria-modal="true">
+            <button class="announcement-dismiss" data-action="dismiss" title="Dismiss" aria-label="Dismiss">✕</button>
+            ${emoji}
+            <h2 class="announcement-title">${escapeHtml(a.title || 'What’s new')}</h2>
+            ${date}
+            <div class="announcement-body">${escapeHtml(a.body || '')}</div>
+            ${highlights}
+            <div class="announcement-footer">
+                ${cta}
+                <button class="announcement-ok" data-action="dismiss">Got it</button>
+            </div>
+        </div>
+    </div>`;
+}
+
+function closeModal(id) {
+    if (id) markSeen(id);
+    if (escHandler) { document.removeEventListener('keydown', escHandler); escHandler = null; }
+    modalEl?.remove();
+    modalEl = null;
+}
+
+function showModal(a) {
+    if (modalEl) return;
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = renderModal(a);
+    modalEl = wrapper.firstElementChild;
+    document.body.appendChild(modalEl);
+
+    modalEl.addEventListener('click', (e) => {
+        if (e.target === modalEl || e.target.closest('[data-action="dismiss"]')) {
+            closeModal(a.id);
+        }
+    });
+    escHandler = (e) => { if (e.key === 'Escape') closeModal(a.id); };
+    document.addEventListener('keydown', escHandler);
+}
+
+function renderBanner(a) {
+    const slot = document.getElementById('sidebarAnnouncementBanner');
+    if (!slot) return;
+    const ctaUrl = a.cta && safeUrl(a.cta.url);
+    const title = a.emoji ? `${escapeHtml(a.emoji)} ${escapeHtml(a.title || '')}` : escapeHtml(a.title || '');
+    const cta = ctaUrl
+        ? `<a class="announcement-banner-cta" href="${escapeHtml(ctaUrl)}" target="_blank" rel="noopener noreferrer">${escapeHtml(a.cta.label || 'Learn more')} →</a>`
+        : '';
+    slot.innerHTML = `<div class="announcement-banner">
+        <button class="announcement-banner-dismiss" data-action="dismiss" title="Dismiss" aria-label="Dismiss announcement">✕</button>
+        ${title ? `<div class="announcement-banner-title">${title}</div>` : ''}
+        ${a.body ? `<div class="announcement-banner-body">${escapeHtml(a.body)}</div>` : ''}
+        ${cta}
+    </div>`;
+    slot.querySelector('[data-action="dismiss"]')?.addEventListener('click', () => {
+        markSeen(a.id);
+        slot.innerHTML = '';
+    });
+}
+
+/**
+ * Fetch announcements (remote first, bundled fallback) and surface the newest
+ * unseen entry per channel: a centered modal and a sidebar-footer banner.
+ * Fails silently — an announcement is never worth a broken portal.
+ */
+export async function initAnnouncements() {
+    try {
+        const data = (await fetchJson(REMOTE_URL)) || (await fetchJson(LOCAL_URL));
+        const list = Array.isArray(data?.announcements) ? data.announcements : [];
+        if (!list.length) return;
+        const modal = pickUnseen(list, 'modal');
+        if (modal) showModal(modal);
+        const banner = pickUnseen(list, 'banner');
+        if (banner) renderBanner(banner);
+    } catch {
+        /* never let an announcement break the desktop */
+    }
+}

{agentwire_dev-1.31.0 → agentwire_dev-1.33.0}/agentwire/static/js/desktop.js

@@ -15,6 +15,7 @@ import { SessionWindow } from './session-window.js';
 import { ArtifactWindow } from './artifact-window.js';
 import { sidebar } from './sidebar.js';
 import { buildSessionId, normalizeMachine, isLocalMachine } from './session-id.js';
+import { notificationsActive } from './notification-prefs.js';
 import { configSection } from './sidebar/config-section.js';
 import { safetySection } from './sidebar/safety-section.js';
 import { artifactsSection } from './sidebar/artifacts-section.js';
@@ -32,6 +33,7 @@ import { armDeadKeySuppressor, disarmDeadKeySuppressor } from './dead-key-suppre
 import { openCommandPalette, isCommandPaletteOpen } from './command-palette.js';
 import * as browserStt from './voice/browser-stt.js';
 import { voicePromptWrap } from './voice/prompt.js';
+import { initAnnouncements } from './announcement-modal.js';
 
 // State - track open windows
 const sessionWindows = new Map();  // sessionId -> SessionWindow instance
@@ -251,6 +253,10 @@ async function init() {
 
     // Fetch initial data in the background (will emit events to listeners above)
     desktop.fetchSessions();
+
+    // Show a userbase announcement if there's a new one (non-blocking,
+    // fails silently — never holds up or breaks the desktop).
+    initAnnouncements();
 }
 
 /**
@@ -310,19 +316,16 @@ function handleSessionRenamed({ old_name, new_name }) {
  * Shows desktop notification for background session activity.
  */
 function handleWindowActivity({ session }) {
-    // Only notify if session window is not focused
-    if (desktop.getActiveWindow() !== session) {
-        // Request notification permission if needed
-        if (Notification.permission === 'granted') {
-            new Notification(`Activity in ${session}`, {
-                body: 'Session has new output',
-                icon: '/static/img/icon-192.png',
-                tag: `activity-${session}`,  // Prevent duplicate notifications
-            });
-        } else if (Notification.permission !== 'denied') {
-            Notification.requestPermission();
-        }
-    }
+    // Only notify if the session window isn't the one you're looking at.
+    if (desktop.getActiveWindow() === session) return;
+    // Respects browser permission + the Config sidebar mute toggle.
+    // Enabling is done explicitly from Config → Desktop notifications, not here.
+    if (!notificationsActive()) return;
+    new Notification(`Activity in ${session}`, {
+        body: 'Session has new output',
+        icon: '/static/img/icon-192.png',
+        tag: `activity-${session}`,  // Prevent duplicate notifications
+    });
 }
 
 // Tab / Shift+Tab to cycle open windows

agentwire_dev-1.33.0/agentwire/static/js/notification-prefs.js

@@ -0,0 +1,56 @@
+/**
+ * Desktop notification preferences — frontend-only, per-browser.
+ *
+ * Two independent layers:
+ *  - Browser permission ('default' | 'granted' | 'denied') — owned by the
+ *    browser, requested via enableNotifications(). The portal can ask but
+ *    cannot grant it; that's a per-origin browser decision.
+ *  - A local "muted" toggle — lets the user silence bubbles without revoking
+ *    the OS permission. Persisted in localStorage.
+ *
+ * Changing either dispatches `notification-pref-change` on window so the
+ * Config sidebar (and anything else) can repaint.
+ */
+
+const MUTE_KEY = 'notificationsMuted';
+export const NOTIFICATION_PREF_EVENT = 'notification-pref-change';
+
+export function notificationsSupported() {
+    return typeof window !== 'undefined' && 'Notification' in window;
+}
+
+/** 'unsupported' | 'default' | 'granted' | 'denied' */
+export function getPermission() {
+    return notificationsSupported() ? Notification.permission : 'unsupported';
+}
+
+export function isMuted() {
+    return localStorage.getItem(MUTE_KEY) === '1';
+}
+
+export function setMuted(muted) {
+    if (muted) localStorage.setItem(MUTE_KEY, '1');
+    else localStorage.removeItem(MUTE_KEY);
+    window.dispatchEvent(new CustomEvent(NOTIFICATION_PREF_EVENT));
+}
+
+/** True only when a bubble should actually be shown right now. */
+export function notificationsActive() {
+    return getPermission() === 'granted' && !isMuted();
+}
+
+/**
+ * Ask the browser for permission if it hasn't been decided yet.
+ * Returns the resulting permission string. No-op (returns current state) if
+ * already granted/denied or unsupported.
+ */
+export async function enableNotifications() {
+    if (!notificationsSupported()) return 'unsupported';
+    let perm = Notification.permission;
+    if (perm === 'default') {
+        try { perm = await Notification.requestPermission(); }
+        catch { perm = Notification.permission; }
+    }
+    window.dispatchEvent(new CustomEvent(NOTIFICATION_PREF_EVENT));
+    return perm;
+}

{agentwire_dev-1.31.0 → agentwire_dev-1.33.0}/agentwire/static/js/sidebar/config-section.js

@@ -4,6 +4,9 @@ import {
     setTerminalFontSize, clearTerminalFontSize,
     FONT_SIZE_MIN, FONT_SIZE_MAX, FONT_SIZE_EVENT,
 } from '../terminal-font-prefs.js';
+import {
+    getPermission, isMuted, setMuted, enableNotifications,
+} from '../notification-prefs.js';
 
 function renderDisplayPrefs() {
     const current = getTerminalFontSize();
@@ -20,6 +23,55 @@ function renderDisplayPrefs() {
     </div>`;
 }
 
+function renderNotificationPrefs() {
+    const perm = getPermission();
+    const muted = isMuted();
+
+    let status, control = '';
+    if (perm === 'unsupported') {
+        status = '<em>not supported</em>';
+    } else if (perm === 'denied') {
+        status = '<em>blocked</em>';
+        control = '<span class="sidebar-display-hint">Allow in browser site settings</span>';
+    } else if (perm === 'default') {
+        status = '<em>off</em>';
+        control = '<button class="sidebar-display-reset" data-action="enable-notifs">Enable</button>';
+    } else { // granted
+        status = muted ? 'muted' : 'on';
+        control = `<label class="sidebar-notif-mute"><input type="checkbox" data-action="mute-notifs"${muted ? ' checked' : ''}/> Mute</label>`;
+    }
+
+    return `<div class="sidebar-display-prefs" data-notif-block>
+        <div class="sidebar-display-row">
+            <label class="sidebar-config-key">Desktop notifications</label>
+            <span class="sidebar-display-value" data-notif="status">${status}</span>
+        </div>
+        ${control ? `<div class="sidebar-display-row">${control}</div>` : ''}
+    </div>`;
+}
+
+function bindNotificationPrefs(body) {
+    const repaint = () => {
+        const block = body.querySelector('[data-notif-block]');
+        if (!block) return;
+        const tmp = document.createElement('div');
+        tmp.innerHTML = renderNotificationPrefs();
+        block.replaceWith(tmp.firstElementChild);
+        wire();
+    };
+    function wire() {
+        body.querySelector('[data-action="enable-notifs"]')?.addEventListener('click', async () => {
+            await enableNotifications();
+            repaint();
+        });
+        body.querySelector('[data-action="mute-notifs"]')?.addEventListener('change', (e) => {
+            setMuted(e.target.checked);
+            repaint();
+        });
+    }
+    wire();
+}
+
 function bindDisplayPrefs(body) {
     const slider = body.querySelector('#termFontSize');
     const valueEl = body.querySelector('[data-display="size"]');
@@ -54,11 +106,13 @@ export const configSection = {
                 else if (typeof value === 'object') display = `<code>${JSON.stringify(value)}</code>`;
                 return `<div class="sidebar-config-item"><span class="sidebar-config-key">${key}</span><span class="sidebar-config-val">${display}</span></div>`;
             }).join('');
-            body.innerHTML = renderDisplayPrefs() + itemHtml;
+            body.innerHTML = renderDisplayPrefs() + renderNotificationPrefs() + itemHtml;
             bindDisplayPrefs(body);
+            bindNotificationPrefs(body);
         } catch (e) {
-            body.innerHTML = renderDisplayPrefs() + '<div class="sidebar-empty">Failed to load config</div>';
+            body.innerHTML = renderDisplayPrefs() + renderNotificationPrefs() + '<div class="sidebar-empty">Failed to load config</div>';
             bindDisplayPrefs(body);
+            bindNotificationPrefs(body);
         }
     },
 };

{agentwire_dev-1.31.0 → agentwire_dev-1.33.0}/agentwire/templates/desktop.html

@@ -38,6 +38,7 @@
             <!-- Phase 3: list panel accordion sections mount here -->
         </div>
         <div class="sidebar-footer">
+            <div class="sidebar-announcement-slot" id="sidebarAnnouncementBanner"></div>
             <div class="instant-mode-banner" id="instantModeBanner" hidden>
                 <div class="instant-mode-banner-title">⚡ Instant voice mode</div>
                 <div class="instant-mode-banner-body">