npm - a2acalling - Versions diffs - 0.6.75 → 0.6.76 - Mend

a2acalling 0.6.75 → 0.6.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1025) hide show

package/docs/plans/2026-03-06-a2a-102-landing-page.md ADDED Viewed

@@ -0,0 +1,611 @@
+# A2A-102: A2A Callbook Landing Page Implementation Plan
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+**Goal:** Create a public landing page where users can discover, learn about, and download the A2A Callbook macOS app from GitHub Releases.
+**Architecture:** Static HTML/CSS/JS page in `docs/` directory, served via GitHub Pages. Platform detection shows macOS download button or npm CLI instructions. Dynamic download URL fetched from GitHub Releases API with hardcoded fallback.
+**Tech Stack:** Vanilla HTML/CSS/JS (no framework, no build step), GitHub Pages, GitHub Releases API.
+**Design Decisions (defaults for unanswered stakeholder questions):**
+- Hosted on GitHub Pages from `docs/` directory on main branch
+- Same repo (simpler CI, version-coupled)
+- No custom domain initially — uses `onthegonow.github.io/a2a_calling`
+---
+## Task 1: Create Landing Page HTML
+**Files:**
+- Create: `docs/index.html`
+**Step 1: Create the landing page**
+Single-file HTML page with:
+- Hero section: product name, tagline, hero description, download button
+- Platform detection: macOS shows "Download for macOS" (links to latest DMG), other OS shows npm instructions
+- Features section: 4 feature cards (Contacts, Calls, Permissions, Disclosure)
+- Getting Started section: 3-step process
+- System requirements
+- Footer: GitHub repo, npm package, documentation links
+Use semantic HTML, accessible markup (alt text, ARIA labels, keyboard navigation). Dark theme matching the dashboard aesthetic.
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>A2A Callbook — Agent-to-Agent Communication for macOS</title>
+  <meta name="description" content="A2A Callbook lets your AI agent communicate with other agents. Download the native macOS app or install via npm.">
+  <link rel="stylesheet" href="./style.css">
+  <link rel="icon" type="image/png" href="./assets/icon-32.png">
+</head>
+<body>
+  <!-- Hero -->
+  <header class="hero">
+    <nav class="nav">
+      <div class="nav-brand">
+        <img src="./assets/icon-64.png" alt="" width="32" height="32" class="nav-icon">
+        <span>A2A Callbook</span>
+      </div>
+      <div class="nav-links">
+        <a href="https://github.com/onthegonow/a2a_calling" target="_blank" rel="noopener">GitHub</a>
+        <a href="https://www.npmjs.com/package/a2acalling" target="_blank" rel="noopener">npm</a>
+      </div>
+    </nav>
+    <div class="hero-content">
+      <h1>Agent-to-Agent<br>Communication</h1>
+      <p class="hero-desc">A2A Callbook lets your AI agents talk to each other. Create invite tokens, manage contacts, set permissions, and monitor calls — all from a native macOS app.</p>
+      <div class="hero-actions" id="hero-actions">
+        <!-- Populated by JS based on platform -->
+        <noscript>
+          <a href="https://github.com/onthegonow/a2a_calling/releases/latest" class="btn btn-primary">Download from GitHub</a>
+        </noscript>
+      </div>
+      <p class="hero-req" id="hero-req">Requires macOS 12.0 or later</p>
+    </div>
+  </header>
+  <!-- Features -->
+  <section class="features" id="features">
+    <h2>Everything you need for agent communication</h2>
+    <div class="feature-grid">
+      <div class="feature-card">
+        <div class="feature-icon">&#128101;</div>
+        <h3>Contacts</h3>
+        <p>Manage your agent network. Add contacts by invite URL, track connection status, link permission tokens.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#128222;</div>
+        <h3>Calls</h3>
+        <p>Multi-turn conversations between agents with automatic summarization. Monitor active calls in real time.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#128274;</div>
+        <h3>Permissions</h3>
+        <p>Three permission tiers — Public, Friends, Family — control what callers can access. Fine-grained tool allowlists.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#128172;</div>
+        <h3>Disclosure</h3>
+        <p>Define what topics your agent discusses with callers. Per-tier disclosure policies keep conversations scoped.</p>
+      </div>
+    </div>
+  </section>
+  <!-- Getting Started -->
+  <section class="getting-started">
+    <h2>Get started in 3 steps</h2>
+    <div class="steps">
+      <div class="step">
+        <div class="step-num">1</div>
+        <h3>Download &amp; Install</h3>
+        <p>Download the DMG, drag to Applications, and launch. The built-in setup wizard guides you through configuration.</p>
+      </div>
+      <div class="step">
+        <div class="step-num">2</div>
+        <h3>Create Invite Tokens</h3>
+        <p>Generate invite URLs with scoped permissions and share them with other agents you want to communicate with.</p>
+      </div>
+      <div class="step">
+        <div class="step-num">3</div>
+        <h3>Start Calling</h3>
+        <p>Add contacts and start multi-turn conversations. Your agent handles calls automatically within permission boundaries.</p>
+      </div>
+    </div>
+  </section>
+  <!-- CLI Alternative -->
+  <section class="cli-section" id="cli-section">
+    <h2>Prefer the command line?</h2>
+    <p>A2A Calling is also available as an npm package with a full CLI.</p>
+    <div class="code-block">
+      <code>npm install -g a2acalling</code>
+      <button class="copy-btn" onclick="navigator.clipboard.writeText('npm install -g a2acalling')" aria-label="Copy command">Copy</button>
+    </div>
+    <p class="cli-note">Then run <code>a2a quickstart</code> to set up your agent.</p>
+  </section>
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="footer-content">
+      <div class="footer-brand">A2A Callbook</div>
+      <div class="footer-links">
+        <a href="https://github.com/onthegonow/a2a_calling" target="_blank" rel="noopener">GitHub</a>
+        <a href="https://www.npmjs.com/package/a2acalling" target="_blank" rel="noopener">npm</a>
+        <a href="https://github.com/onthegonow/a2a_calling/blob/main/docs/protocol.md" target="_blank" rel="noopener">Protocol Docs</a>
+      </div>
+      <p class="footer-copy">Open source under MIT License</p>
+    </div>
+  </footer>
+  <script src="./app.js"></script>
+</body>
+</html>
+```
+**Step 2: Commit**
+```bash
+git add docs/index.html
+git commit -m "feat(a2a-102): create landing page HTML"
+```
+---
+## Task 2: Create Landing Page CSS
+**Files:**
+- Create: `docs/style.css`
+**Step 1: Create responsive dark-themed styles**
+Design tokens match the dashboard: `#0B0E14` background, `#151B28` panels, `#3B82F6` accent, `#e2e8f0` text. System font stack (Inter first, then system fallbacks). Responsive from mobile (320px) to desktop. No CSS framework.
+```css
+/* A2A-102: Landing page styles */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg: #0B0E14;
+  --bg-alt: #0F1420;
+  --panel: #151B28;
+  --card: #1E2738;
+  --ink: #e2e8f0;
+  --ink-muted: #94a3b8;
+  --accent: #3B82F6;
+  --accent-hover: #2563EB;
+  --line: rgba(255, 255, 255, 0.08);
+  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --max-w: 1080px;
+}
+html { scroll-behavior: smooth; }
+body {
+  font-family: var(--font);
+  color: var(--ink);
+  background: var(--bg);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+/* ── Nav ───────────────────────────────────────────── */
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: var(--max-w);
+  margin: 0 auto;
+  padding: 1.5rem 2rem;
+}
+.nav-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+.nav-icon { border-radius: 6px; }
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 0.95rem;
+}
+.nav-links a { color: var(--ink-muted); }
+.nav-links a:hover { color: var(--ink); text-decoration: none; }
+/* ── Hero ──────────────────────────────────────────── */
+.hero {
+  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
+  padding-bottom: 5rem;
+}
+.hero-content {
+  max-width: var(--max-w);
+  margin: 0 auto;
+  padding: 4rem 2rem 0;
+  text-align: center;
+}
+.hero h1 {
+  font-size: clamp(2.2rem, 5vw, 3.5rem);
+  font-weight: 700;
+  line-height: 1.15;
+  margin-bottom: 1.2rem;
+  letter-spacing: -0.02em;
+}
+.hero-desc {
+  font-size: 1.15rem;
+  color: var(--ink-muted);
+  max-width: 600px;
+  margin: 0 auto 2rem;
+  line-height: 1.7;
+}
+.hero-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+.hero-req {
+  font-size: 0.85rem;
+  color: var(--ink-muted);
+}
+/* ── Buttons ───────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.1s;
+}
+.btn:hover { text-decoration: none; transform: translateY(-1px); }
+.btn:active { transform: translateY(0); }
+.btn-primary {
+  background: var(--accent);
+  color: #fff;
+}
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-secondary {
+  background: var(--card);
+  color: var(--ink);
+  border: 1px solid var(--line);
+}
+.btn-secondary:hover { border-color: var(--accent); }
+/* ── Features ──────────────────────────────────────── */
+.features {
+  max-width: var(--max-w);
+  margin: 0 auto;
+  padding: 5rem 2rem;
+}
+.features h2 {
+  text-align: center;
+  font-size: 1.8rem;
+  font-weight: 600;
+  margin-bottom: 3rem;
+}
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+}
+.feature-card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+.feature-icon {
+  font-size: 2rem;
+  margin-bottom: 0.75rem;
+}
+.feature-card h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+.feature-card p {
+  font-size: 0.9rem;
+  color: var(--ink-muted);
+  line-height: 1.5;
+}
+/* ── Getting Started ───────────────────────────────── */
+.getting-started {
+  background: var(--bg-alt);
+  padding: 5rem 2rem;
+}
+.getting-started h2 {
+  text-align: center;
+  font-size: 1.8rem;
+  font-weight: 600;
+  margin-bottom: 3rem;
+}
+.steps {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  max-width: var(--max-w);
+  margin: 0 auto;
+}
+.step { text-align: center; }
+.step-num {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin: 0 auto 1rem;
+}
+.step h3 {
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+.step p {
+  font-size: 0.9rem;
+  color: var(--ink-muted);
+  line-height: 1.5;
+}
+/* ── CLI Section ───────────────────────────────────── */
+.cli-section {
+  max-width: var(--max-w);
+  margin: 0 auto;
+  padding: 5rem 2rem;
+  text-align: center;
+}
+.cli-section h2 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}
+.cli-section > p {
+  color: var(--ink-muted);
+  margin-bottom: 1.5rem;
+}
+.code-block {
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.75rem 1.25rem;
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+  font-size: 0.95rem;
+}
+.copy-btn {
+  background: var(--card);
+  border: 1px solid var(--line);
+  color: var(--ink-muted);
+  padding: 0.3rem 0.6rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+.copy-btn:hover { color: var(--ink); border-color: var(--accent); }
+.cli-note {
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  color: var(--ink-muted);
+}
+.cli-note code {
+  background: var(--panel);
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+/* ── Footer ────────────────────────────────────────── */
+.footer {
+  border-top: 1px solid var(--line);
+  padding: 2.5rem 2rem;
+}
+.footer-content {
+  max-width: var(--max-w);
+  margin: 0 auto;
+  text-align: center;
+}
+.footer-brand {
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}
+.footer-links {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+.footer-links a { color: var(--ink-muted); font-size: 0.9rem; }
+.footer-links a:hover { color: var(--ink); }
+.footer-copy {
+  font-size: 0.8rem;
+  color: var(--ink-muted);
+}
+/* ── Responsive ────────────────────────────────────── */
+@media (max-width: 640px) {
+  .nav { padding: 1rem; }
+  .hero-content { padding: 2rem 1rem 0; }
+  .features, .getting-started, .cli-section { padding: 3rem 1rem; }
+  .feature-grid { grid-template-columns: 1fr; }
+}
+```
+**Step 2: Commit**
+```bash
+git add docs/style.css
+git commit -m "feat(a2a-102): create landing page styles"
+```
+---
+## Task 3: Create Landing Page JavaScript
+**Files:**
+- Create: `docs/app.js`
+**Step 1: Create platform detection and dynamic download URL script**
+```js
+/* A2A-102: Landing page — platform detection and dynamic download URL */
+(function () {
+  'use strict';
+  var REPO = 'onthegonow/a2a_calling';
+  var RELEASES_API = 'https://api.github.com/repos/' + REPO + '/releases/latest';
+  var FALLBACK_URL = 'https://github.com/' + REPO + '/releases/latest';
+  var isMac = /Mac|Macintosh/.test(navigator.userAgent || '');
+  var actions = document.getElementById('hero-actions');
+  var reqText = document.getElementById('hero-req');
+  if (isMac) {
+    // macOS — show download button
+    actions.innerHTML =
+      '<a href="' + FALLBACK_URL + '" id="download-btn" class="btn btn-primary">' +
+      'Download for macOS</a>' +
+      '<a href="https://github.com/' + REPO + '" class="btn btn-secondary" target="_blank" rel="noopener">' +
+      'View on GitHub</a>';
+    // Try to fetch actual DMG URL from latest release
+    fetch(RELEASES_API)
+      .then(function (r) { return r.json(); })
+      .then(function (release) {
+        if (!release || !release.assets) return;
+        var dmg = release.assets.find(function (a) {
+          return a.name && a.name.endsWith('.dmg');
+        });
+        if (dmg && dmg.browser_download_url) {
+          var btn = document.getElementById('download-btn');
+          if (btn) {
+            btn.href = dmg.browser_download_url;
+            btn.textContent = 'Download ' + release.tag_name + ' for macOS';
+          }
+        }
+      })
+      .catch(function () { /* keep fallback URL */ });
+  } else {
+    // Non-macOS — show npm instructions
+    actions.innerHTML =
+      '<a href="#cli-section" class="btn btn-primary">Install via npm</a>' +
+      '<a href="https://github.com/' + REPO + '" class="btn btn-secondary" target="_blank" rel="noopener">' +
+      'View on GitHub</a>';
+    reqText.textContent = 'The native app is macOS only. A2A Calling is available on all platforms via npm.';
+  }
+})();
+```
+**Step 2: Commit**
+```bash
+git add docs/app.js
+git commit -m "feat(a2a-102): add platform detection and dynamic download URL"
+```
+---
+## Task 4: Create Landing Page Assets
+**Files:**
+- Create: `docs/assets/icon-32.png` (favicon)
+- Create: `docs/assets/icon-64.png` (nav icon)
+**Step 1: Copy icons from native app**
+```bash
+mkdir -p docs/assets
+cp native/macos/src-tauri/icons/32x32.png docs/assets/icon-32.png
+# Create 64x64 from 128x128
+magick native/macos/src-tauri/icons/128x128.png -resize 64x64 docs/assets/icon-64.png
+```
+**Step 2: Commit**
+```bash
+git add docs/assets/
+git commit -m "feat(a2a-102): add landing page icon assets"
+```
+---
+## Task 5: Verify and Commit Final
+**Step 1: Validate HTML renders correctly**
+```bash
+# Verify all referenced files exist
+ls -la docs/index.html docs/style.css docs/app.js docs/assets/icon-32.png docs/assets/icon-64.png
+```
+**Step 2: Run npm test to verify no regressions**
+```bash
+npm test
+```
+**Step 3: Commit any final adjustments**
+If everything is clean, no additional commit needed.