From 08959bb507029e059783aea9974a03e4c7506c7b Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 11:38:09 +0530
Subject: [PATCH 01/14] Fix mobile layout: header, featured card overflow, tap
 targets

- Featured resource card forced 402px width on 375px screens (flex
  min-width blowout via the 22rem image placeholder): cards can now
  shrink (min-width: 0) and the placeholder goes full-width on mobile.
- Mobile header rebuilt as two balanced rows: logo + GitHub button on
  top, nav pills with real padding below (active pill no longer hugged
  its label).
- Test mode tabs regain a 42px tap height and centered labels on touch
  layouts.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ait.css    |  4 ++--
 styles.css | 21 ++++++++++++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/ait.css b/ait.css
index beb7808..b649dce 100644
--- a/ait.css
+++ b/ait.css
@@ -609,9 +609,9 @@ html[data-theme="dark"] .ait-radar-data { fill: rgba(242, 242, 242, 0.1); }
 }
 
 @media (max-width: 640px) {
-  /* Two fixed 13rem tabs exceed narrow viewports — go fluid. */
+  /* Fluid tabs with a comfortable tap height on touch screens. */
   .ait-mode-tabs { display: flex; }
-  .ait-mode-tab { min-width: 0; flex: 1; }
+  .ait-mode-tab { min-width: 0; flex: 1; min-height: 42px; justify-content: center; }
   .ait-row-main {
     flex-direction: column;
     align-items: flex-start;
diff --git a/styles.css b/styles.css
index 009671e..20166a3 100644
--- a/styles.css
+++ b/styles.css
@@ -751,6 +751,7 @@ textarea.input { resize: vertical; }
   flex-direction: column;
   align-items: flex-start;
   gap: 0.75rem;
+  min-width: 0; /* grid items must be able to shrink below content size */
   border: 1px solid var(--hairline);
   background: var(--surface);
   padding: 1.5rem;
@@ -997,10 +998,18 @@ html.js .reveal.in {
   :root { --container-pad: 1.5rem; }
   body { font-size: 16px; }
 
-  .header-inner { flex-direction: column; gap: 0; }
-  .wordmark { padding: 0.8rem 0 0.1rem; align-self: flex-start; }
-  .tabs { gap: 1.4rem; }
-  .tab { padding: 0.6rem 0.1rem; }
+  /* Two balanced rows: logo + GitHub button on top, nav pills below. */
+  .header-inner { flex-direction: column; gap: 0; position: relative; }
+  .wordmark { padding: 0.85rem 0 0.5rem; align-self: flex-start; }
+  .gh-btn {
+    position: absolute;
+    top: 0.55rem;
+    right: 1.25rem;
+    margin-left: 0;
+  }
+  .tabs { gap: 0.3rem; padding-bottom: 0.65rem; }
+  .tab { padding: 0.35rem 0.7rem; margin-left: -0.7rem; }
+  .tab + .tab { margin-left: 0; }
 
   .hero { padding: 6.5rem 0 5.5rem; }
   /* The desktop line break pins "Agentic Interface" to one line,
@@ -1014,7 +1023,9 @@ html.js .reveal.in {
   .feature-grid { grid-template-columns: 1fr; }
   .contrib-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .res-grid { grid-template-columns: 1fr; }
-  .res-feature { flex-direction: column; align-items: flex-start; }
+  .res-feature { flex-direction: column; align-items: stretch; gap: 1.25rem; }
+  .res-feature .ph { width: 100%; max-width: none; }
+  .res-feature .btn { align-self: flex-start; }
 
   .acc-title { font-size: 1.15rem; }
   .acc-item summary { gap: 0.9rem; padding: 1.25rem 0.1rem; }

From 79ecf0824bcd56420b7f6432e2af4fa8dba63156 Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 12:00:15 +0530
Subject: [PATCH 02/14] Mobile-only: hamburger nav, feature carousels, test-row
 layout, visible CTAs

- Header nav collapses into a hamburger panel on mobile: full-width
  rows, active page highlighted, GitHub button inside, Escape closes
- Primitive feature cards become swipeable scroll-snap carousels with
  square numbered pager tiles below (pager hidden on desktop; active
  tile tracks scrolling without relying on requestAnimationFrame)
- Test questions restack on mobile: number tile on top, question below,
  Yes/No aligned to the text's left edge, "?" right-aligned at 2rem to
  match the control height; name input goes full width
- Resource-card CTAs show by default on small screens (no hover on touch)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ait.css       | 20 ++++++++++---
 components.js | 20 ++++++++++++-
 script.js     | 37 +++++++++++++++++++++++
 styles.css    | 82 ++++++++++++++++++++++++++++++++++++++++++++-------
 4 files changed, 143 insertions(+), 16 deletions(-)

diff --git a/ait.css b/ait.css
index b649dce..97be2ac 100644
--- a/ait.css
+++ b/ait.css
@@ -612,14 +612,26 @@ html[data-theme="dark"] .ait-radar-data { fill: rgba(242, 242, 242, 0.1); }
   /* Fluid tabs with a comfortable tap height on touch screens. */
   .ait-mode-tabs { display: flex; }
   .ait-mode-tab { min-width: 0; flex: 1; min-height: 42px; justify-content: center; }
+
+  /* Number tile on top, question below it; Yes/No sits on the text's
+     left edge with the "?" on the right at a matching size. */
   .ait-row-main {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.8rem;
+  }
+  .ait-row-textwrap {
     flex-direction: column;
     align-items: flex-start;
-    gap: 0.6rem;
+    gap: 0.55rem;
+    max-width: none;
+  }
+  .ait-row-controls {
+    flex-direction: row-reverse;
+    justify-content: space-between;
   }
-  .ait-seg-group { align-self: stretch; }
-  .ait-seg { flex: 1; }
-  .ait-seg-label { width: 100%; }
+  .ait-tip-btn { width: 2rem; height: 2rem; }
+  .ait-name-row .ait-name-input { width: 100%; max-width: none; }
   .ait-genbar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
   .ait-generate { width: 100%; }
   .ait-modal { padding: 1.5rem 1.1rem 1.25rem; }
diff --git a/components.js b/components.js
index 8575e2f..a060554 100644
--- a/components.js
+++ b/components.js
@@ -18,6 +18,7 @@
     'arrow-up': 'M205.66 117.66a8 8 0 0 1-11.32 0L136 59.31V216a8 8 0 0 1-16 0V59.31L61.66 117.66a8 8 0 0 1-11.32-11.32l72-72a8 8 0 0 1 11.32 0l72 72a8 8 0 0 1 0 11.32Z',
     check: 'M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z',
     x: 'M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z',
+    list: 'M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8ZM40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16Zm176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16Z',
     moon: 'M233.54 142.23a8 8 0 0 0-8-2 88.08 88.08 0 0 1-109.8-109.8 8 8 0 0 0-10-10 104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 136 224a103.09 103.09 0 0 0 62.52-20.88 104.84 104.84 0 0 0 37-52.91 8 8 0 0 0-1.98-7.98Zm-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104 106 106 0 0 0 14.92-1.06 89 89 0 0 1-26.02 31.4Z',
     monitor: 'M208 40H48a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h160a24 24 0 0 0 24-24V64a24 24 0 0 0-24-24Zm8 136a8 8 0 0 1-8 8H48a8 8 0 0 1-8-8V64a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8ZM168 224a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Z',
     sun: 'M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64 64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48 48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z'
@@ -60,7 +61,8 @@
                 '<path fill="currentColor" d="M243.074 100.816C254.669 99.0662 265.489 107.047 267.241 118.643C268.996 130.239 261.016 141.061 249.421 142.817C237.821 144.573 226.994 136.592 225.241 124.991C223.489 113.391 231.472 102.566 243.074 100.816ZM0.123047 0.183838C30.3704 -0.193155 61.5253 0.117643 91.8252 0.171143V0.215088C93.8908 0.210607 95.9524 0.201319 98.0059 0.177979L97.9932 140.018L97.999 140.376C97.2973 140.793 63.8272 140.603 60.0508 140.6C60.1153 135.259 60.1187 129.849 60.1064 124.433C52.7323 124.42 45.365 124.437 38.0879 124.55L38.0977 140.584L0.115234 140.582C-0.129765 121.528 0.0923427 141.904 0.0898438 122.793L0.123047 0.183838ZM155.359 140.018L155.365 140.376C154.653 140.793 121.192 140.603 117.417 140.6C117.553 129.303 117.425 117.694 117.426 106.379L117.418 36.9084C117.417 24.797 117.261 12.2614 117.498 0.178955C121.813 0.364191 127.225 0.183088 131.623 0.183838C139.507 0.185341 147.499 0.267477 155.373 0.177979L155.359 140.018ZM175.123 0.183838C205.37 -0.193155 236.525 0.117643 266.825 0.171143L266.843 31.8098L213.088 31.8411L213.115 52.7961L260.897 52.8333C261.092 62.8495 261.082 74.4603 260.862 84.468L258.905 84.5022C243.743 84.4922 228.22 84.3146 213.088 84.55L213.098 140.584L175.115 140.582C174.87 121.528 175.092 101.904 175.09 82.7932L175.123 0.183838ZM38.0879 31.8411L38.1152 92.7961L60.0576 92.8127L60.0518 36.9084C60.0516 35.2222 60.0477 33.5277 60.043 31.8274L38.0879 31.8411Z"/>' +
               '</svg>' +
             '</a>' +
-            '<nav class="tabs" aria-label="Site pages">' +
+            '<button class="nav-toggle" type="button" aria-label="Menu" aria-expanded="false" aria-controls="site-nav"></button>' +
+            '<nav class="tabs" id="site-nav" aria-label="Site pages">' +
               PAGES.map(function (p) {
                 var current = p.id === active ? ' aria-current="page"' : '';
                 return '<a href="' + p.href + '" class="tab"' + current + '>' + p.label + '</a>';
@@ -72,6 +74,22 @@
           '</div>' +
         '</header>';
 
+      // Mobile hamburger: collapses the nav into a panel under the bar.
+      var headerEl = this.querySelector('.site-header');
+      var navToggle = this.querySelector('.nav-toggle');
+      function setMenu(open) {
+        headerEl.classList.toggle('menu-open', open);
+        navToggle.setAttribute('aria-expanded', String(open));
+        navToggle.innerHTML = iconSVG(open ? 'x' : 'list', 18);
+      }
+      navToggle.addEventListener('click', function () {
+        setMenu(!headerEl.classList.contains('menu-open'));
+      });
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') setMenu(false);
+      });
+      setMenu(false);
+
       // Star count: fetched from the GitHub API, cached for an hour.
       // On any failure the count stays hidden and the button still links.
       var stars = this.querySelector('.gh-stars');
diff --git a/script.js b/script.js
index 27dcfd8..321387d 100644
--- a/script.js
+++ b/script.js
@@ -165,6 +165,43 @@ if (accItems.length && !ACC_REDUCED) {
   });
 }
 
+// ---------------------------------------------------------------
+// Feature carousels: on mobile the card grids scroll horizontally;
+// a numbered square pager under each grid tracks and drives them.
+// (The pager is display:none on desktop, where the grid is a grid.)
+// ---------------------------------------------------------------
+document.querySelectorAll('.feature-grid').forEach((grid) => {
+  const cards = grid.querySelectorAll('.feature');
+  if (cards.length < 2) return;
+  const pager = document.createElement('div');
+  pager.className = 'feature-pager';
+  const tiles = [];
+  cards.forEach((card, i) => {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'numbox';
+    b.textContent = String(i + 1);
+    b.setAttribute('aria-label', 'Go to card ' + (i + 1) + ' of ' + cards.length);
+    b.addEventListener('click', () => {
+      grid.scrollTo({
+        left: card.offsetLeft - grid.offsetLeft,
+        behavior: ACC_REDUCED ? 'auto' : 'smooth'
+      });
+    });
+    pager.appendChild(b);
+    tiles.push(b);
+  });
+  const setActive = () => {
+    const ix = Math.min(Math.round(grid.scrollLeft / grid.clientWidth), tiles.length - 1);
+    tiles.forEach((t, i) => t.classList.toggle('active', i === ix));
+  };
+  // Direct call, not rAF-deferred: throttled webviews freeze rAF and
+  // the active tile would never update. The work is a few class toggles.
+  grid.addEventListener('scroll', setActive, { passive: true });
+  setActive();
+  grid.after(pager);
+});
+
 // ---------------------------------------------------------------
 // Scroll-entry reveals, with a hard fallback: if IntersectionObserver
 // is unavailable, everything is shown immediately.
diff --git a/styles.css b/styles.css
index 20166a3..6e81d5c 100644
--- a/styles.css
+++ b/styles.css
@@ -255,6 +255,20 @@ body::after  { right: calc(50% - var(--container-max) / 2); }
   background: var(--ink);
 }
 
+.nav-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 2.2rem;
+  height: 2.2rem;
+  background: none;
+  border: none;
+  color: var(--ink);
+  cursor: pointer;
+}
+
+.nav-toggle svg { display: block; }
+
 .gh-btn {
   display: inline-flex;
   align-items: center;
@@ -549,6 +563,25 @@ html[data-theme="dark"] .gh-btn:hover {
   color: var(--ink-soft);
 }
 
+/* Mobile carousel pager: square numbered tiles under each card set. */
+.feature-pager {
+  display: none;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 1.1rem;
+}
+
+.feature-pager .numbox {
+  cursor: pointer;
+  transition: background 150ms, border-color 150ms, color 150ms;
+}
+
+.feature-pager .numbox.active {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: var(--on-ink);
+}
+
 .ph {
   aspect-ratio: 16 / 10;
   display: flex;
@@ -998,18 +1031,32 @@ html.js .reveal.in {
   :root { --container-pad: 1.5rem; }
   body { font-size: 16px; }
 
-  /* Two balanced rows: logo + GitHub button on top, nav pills below. */
-  .header-inner { flex-direction: column; gap: 0; position: relative; }
-  .wordmark { padding: 0.85rem 0 0.5rem; align-self: flex-start; }
-  .gh-btn {
+  /* Single-row bar; the nav collapses into a hamburger panel. */
+  .wordmark { padding: 0.8rem 0; }
+  .nav-toggle { display: inline-flex; align-self: center; }
+  .tabs {
+    display: none;
     position: absolute;
-    top: 0.55rem;
-    right: 1.25rem;
-    margin-left: 0;
+    top: 100%;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    background: var(--bg);
+    border-bottom: 1px solid var(--hairline);
+    padding: 0.4rem 1.25rem 1rem;
+  }
+  .site-header.menu-open .tabs { display: flex; }
+  .tab {
+    align-self: stretch;
+    padding: 0.8rem 0.5rem;
+    font-size: 0.95rem;
+  }
+  .gh-btn {
+    margin: 0.75rem 0 0;
+    align-self: flex-start;
   }
-  .tabs { gap: 0.3rem; padding-bottom: 0.65rem; }
-  .tab { padding: 0.35rem 0.7rem; margin-left: -0.7rem; }
-  .tab + .tab { margin-left: 0; }
 
   .hero { padding: 6.5rem 0 5.5rem; }
   /* The desktop line break pins "Agentic Interface" to one line,
@@ -1020,7 +1067,20 @@ html.js .reveal.in {
   .contributors { padding: 4.5rem 0 5rem; }
   .page-header { padding: 4rem 0 2.75rem; }
 
-  .feature-grid { grid-template-columns: 1fr; }
+  /* Feature cards become a swipeable carousel with a numbered pager. */
+  .feature-grid {
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+  .feature-grid::-webkit-scrollbar { display: none; }
+  .feature { flex: 0 0 100%; scroll-snap-align: start; }
+  .feature-pager { display: flex; }
+
+  /* No hover on touch: resource CTAs always visible. */
+  .res-cta { opacity: 1; transform: none; }
   .contrib-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .res-grid { grid-template-columns: 1fr; }
   .res-feature { flex-direction: column; align-items: stretch; gap: 1.25rem; }

From 7ae67ad6840600c850b901dd2a9990107892019c Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 12:53:26 +0530
Subject: [PATCH 03/14] Mobile menu: star CTA row, dark textured scrim

- GitHub button becomes a full-width menu row: octocat icon,
  "Star us on GitHub" label, and the live star count as a chip
- Open menu now sits over a dark scrim with the site's halftone
  texture fading out top-to-bottom; tapping the scrim closes the menu
- Scrim lives as a header sibling: a fixed child would be trapped by
  the header's backdrop-filter containing block

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 components.js | 10 +++++++---
 styles.css    | 38 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/components.js b/components.js
index a060554..2a0a5f4 100644
--- a/components.js
+++ b/components.js
@@ -67,12 +67,15 @@
                 var current = p.id === active ? ' aria-current="page"' : '';
                 return '<a href="' + p.href + '" class="tab"' + current + '>' + p.label + '</a>';
               }).join('') +
-              '<a class="gh-btn" href="https://github.com/' + GITHUB_REPO + '" target="_blank" rel="noopener" aria-label="OpenUI on GitHub">' +
-                GITHUB_MARK + '<span class="gh-stars" hidden></span>' +
+              '<a class="gh-btn" href="https://github.com/' + GITHUB_REPO + '" target="_blank" rel="noopener" aria-label="Star OpenUI on GitHub">' +
+                GITHUB_MARK +
+                '<span class="gh-label">Star us on GitHub</span>' +
+                '<span class="gh-stars" hidden></span>' +
               '</a>' +
             '</nav>' +
           '</div>' +
-        '</header>';
+        '</header>' +
+        '<div class="menu-scrim" aria-hidden="true"></div>';
 
       // Mobile hamburger: collapses the nav into a panel under the bar.
       var headerEl = this.querySelector('.site-header');
@@ -85,6 +88,7 @@
       navToggle.addEventListener('click', function () {
         setMenu(!headerEl.classList.contains('menu-open'));
       });
+      this.querySelector('.menu-scrim').addEventListener('click', function () { setMenu(false); });
       document.addEventListener('keydown', function (e) {
         if (e.key === 'Escape') setMenu(false);
       });
diff --git a/styles.css b/styles.css
index 6e81d5c..cdfd4f2 100644
--- a/styles.css
+++ b/styles.css
@@ -304,6 +304,12 @@ html[data-theme="dark"] .gh-btn:hover {
 
 .gh-btn svg { display: block; }
 
+.gh-label { display: none; }
+
+/* Scrim behind the open mobile menu: dark veil over the page with the
+   site's halftone texture fading out from top to bottom. */
+.menu-scrim { display: none; }
+
 /* ---------- hero ---------- */
 
 .hero {
@@ -1055,7 +1061,37 @@ html.js .reveal.in {
   }
   .gh-btn {
     margin: 0.75rem 0 0;
-    align-self: flex-start;
+    align-self: stretch;
+    justify-content: flex-start;
+    gap: 0.6rem;
+    padding: 0.7rem 0.9rem;
+  }
+  .gh-label { display: inline; }
+  .gh-btn .gh-stars {
+    margin-left: auto;
+    background: var(--chip-bg);
+    color: var(--ink-soft);
+    font-size: var(--label-md);
+    padding: 0.2rem 0.55rem;
+  }
+  /* Sibling of the header (a fixed child would be trapped by the
+     header's backdrop-filter containing block). Below the header's
+     z-index so the panel stays on top. */
+  .site-header.menu-open + .menu-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--z-header) - 1);
+    background: rgba(17, 17, 17, 0.55);
+  }
+  .menu-scrim::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.5px);
+    background-size: 5px 5px;
+    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
+    mask-image: linear-gradient(to bottom, #000, transparent 75%);
   }
 
   .hero { padding: 6.5rem 0 5.5rem; }

From 6d3cab9f363b844cae372234779bbf99eedf27fe Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 13:03:34 +0530
Subject: [PATCH 04/14] Test rows: swap mobile control sides, roomier
 separators

- Mobile controls row: "?" on the left, Yes/No on the right
- Question rows get 1.15rem vertical padding (was 0.7rem) so the
  separators breathe, on all widths

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ait.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ait.css b/ait.css
index 97be2ac..405ae14 100644
--- a/ait.css
+++ b/ait.css
@@ -128,7 +128,7 @@
 
 .ait-row {
   border-bottom: 1px solid var(--hairline);
-  padding: 0.7rem 0.25rem;
+  padding: 1.15rem 0.25rem;
 }
 
 /* Deep-dive sections: the rows only carry bottom borders, so the
@@ -627,7 +627,6 @@ html[data-theme="dark"] .ait-radar-data { fill: rgba(242, 242, 242, 0.1); }
     max-width: none;
   }
   .ait-row-controls {
-    flex-direction: row-reverse;
     justify-content: space-between;
   }
   .ait-tip-btn { width: 2rem; height: 2rem; }

From 1a684561b7dc958efb506788583efe5cc359fcbe Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 17:11:20 +0530
Subject: [PATCH 05/14] Mobile menu: title, footer note, opaque scrim, scroll
 lock

- Menu panel restructured: top padding, "Agentic Interface Framework"
  title, the three tabs, then the Star-us-on-GitHub row and a small
  "Built by the open source community at OpenUI.com" note
- Scrim darkened to 78% ink; page scroll locks while the menu is open

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 components.js |  3 +++
 styles.css    | 36 +++++++++++++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/components.js b/components.js
index 2a0a5f4..dbd320f 100644
--- a/components.js
+++ b/components.js
@@ -63,6 +63,7 @@
             '</a>' +
             '<button class="nav-toggle" type="button" aria-label="Menu" aria-expanded="false" aria-controls="site-nav"></button>' +
             '<nav class="tabs" id="site-nav" aria-label="Site pages">' +
+              '<span class="menu-title">Agentic Interface Framework</span>' +
               PAGES.map(function (p) {
                 var current = p.id === active ? ' aria-current="page"' : '';
                 return '<a href="' + p.href + '" class="tab"' + current + '>' + p.label + '</a>';
@@ -72,6 +73,7 @@
                 '<span class="gh-label">Star us on GitHub</span>' +
                 '<span class="gh-stars" hidden></span>' +
               '</a>' +
+              '<p class="menu-note">Built by the open source community at <a href="https://openui.com" target="_blank" rel="noopener">OpenUI.com</a></p>' +
             '</nav>' +
           '</div>' +
         '</header>' +
@@ -82,6 +84,7 @@
       var navToggle = this.querySelector('.nav-toggle');
       function setMenu(open) {
         headerEl.classList.toggle('menu-open', open);
+        document.documentElement.classList.toggle('menu-locked', open);
         navToggle.setAttribute('aria-expanded', String(open));
         navToggle.innerHTML = iconSVG(open ? 'x' : 'list', 18);
       }
diff --git a/styles.css b/styles.css
index cdfd4f2..cad206d 100644
--- a/styles.css
+++ b/styles.css
@@ -306,6 +306,12 @@ html[data-theme="dark"] .gh-btn:hover {
 
 .gh-label { display: none; }
 
+.menu-title,
+.menu-note { display: none; }
+
+/* Page scroll is locked while the mobile menu is open. */
+html.menu-locked { overflow: hidden; }
+
 /* Scrim behind the open mobile menu: dark veil over the page with the
    site's halftone texture fading out from top to bottom. */
 .menu-scrim { display: none; }
@@ -1051,7 +1057,31 @@ html.js .reveal.in {
     gap: 0;
     background: var(--bg);
     border-bottom: 1px solid var(--hairline);
-    padding: 0.4rem 1.25rem 1rem;
+    padding: 2rem 1.25rem 1.25rem;
+  }
+  .menu-title {
+    display: block;
+    font-family: var(--font);
+    font-size: 0.95rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--ink);
+    padding: 0 0.5rem;
+    margin-bottom: 1.1rem;
+  }
+  .menu-note {
+    display: block;
+    font-family: var(--font);
+    font-size: var(--label-md);
+    color: var(--muted);
+    padding: 0 0.5rem;
+    margin-top: 0.9rem;
+  }
+  .menu-note a {
+    color: var(--ink);
+    font-weight: 500;
+    text-decoration: underline;
+    text-underline-offset: 2px;
   }
   .site-header.menu-open .tabs { display: flex; }
   .tab {
@@ -1060,7 +1090,7 @@ html.js .reveal.in {
     font-size: 0.95rem;
   }
   .gh-btn {
-    margin: 0.75rem 0 0;
+    margin: 1.4rem 0 0;
     align-self: stretch;
     justify-content: flex-start;
     gap: 0.6rem;
@@ -1082,7 +1112,7 @@ html.js .reveal.in {
     position: fixed;
     inset: 0;
     z-index: calc(var(--z-header) - 1);
-    background: rgba(17, 17, 17, 0.55);
+    background: rgba(17, 17, 17, 0.78);
   }
   .menu-scrim::after {
     content: "";

From 648359e5d6453dde96b657f8244cc5d55f0a31ad Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 17:12:48 +0530
Subject: [PATCH 06/14] Mobile menu polish: bigger title, tab separators,
 centered note

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 styles.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/styles.css b/styles.css
index cad206d..4d7f887 100644
--- a/styles.css
+++ b/styles.css
@@ -1062,20 +1062,22 @@ html.js .reveal.in {
   .menu-title {
     display: block;
     font-family: var(--font);
-    font-size: 0.95rem;
+    font-size: 1.4rem;
     font-weight: 600;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.02em;
+    line-height: 1.25;
     color: var(--ink);
     padding: 0 0.5rem;
-    margin-bottom: 1.1rem;
+    margin-bottom: 1.25rem;
   }
   .menu-note {
     display: block;
     font-family: var(--font);
     font-size: var(--label-md);
     color: var(--muted);
+    text-align: center;
     padding: 0 0.5rem;
-    margin-top: 0.9rem;
+    margin-top: 1rem;
   }
   .menu-note a {
     color: var(--ink);
@@ -1089,6 +1091,7 @@ html.js .reveal.in {
     padding: 0.8rem 0.5rem;
     font-size: 0.95rem;
   }
+  .tab + .tab { border-top: 1px solid var(--hairline); }
   .gh-btn {
     margin: 1.4rem 0 0;
     align-self: stretch;

From b30aee2c57d19d322ae5e07b7f255ae681cbab50 Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 17:21:24 +0530
Subject: [PATCH 07/14] Mobile menu: 4rem spacing above and below the tab group

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles.css b/styles.css
index 4d7f887..78790b5 100644
--- a/styles.css
+++ b/styles.css
@@ -1068,7 +1068,7 @@ html.js .reveal.in {
     line-height: 1.25;
     color: var(--ink);
     padding: 0 0.5rem;
-    margin-bottom: 1.25rem;
+    margin-bottom: 4rem;
   }
   .menu-note {
     display: block;
@@ -1093,7 +1093,7 @@ html.js .reveal.in {
   }
   .tab + .tab { border-top: 1px solid var(--hairline); }
   .gh-btn {
-    margin: 1.4rem 0 0;
+    margin: 4rem 0 0;
     align-self: stretch;
     justify-content: flex-start;
     gap: 0.6rem;

From 3eafce3b6be6ca8ea983e634d984d9b21a38ecc4 Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 17:23:13 +0530
Subject: [PATCH 08/14] Mobile menu: solid bar while open, seamless with the
 panel

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 styles.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/styles.css b/styles.css
index 78790b5..2f72b6c 100644
--- a/styles.css
+++ b/styles.css
@@ -1085,6 +1085,15 @@ html.js .reveal.in {
     text-decoration: underline;
     text-underline-offset: 2px;
   }
+  /* With the menu open, the bar goes solid so it reads as one
+     surface with the panel (the frosted 60% tint would otherwise
+     blend with the dark scrim and look gray). */
+  .site-header.menu-open {
+    background: var(--bg);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border-bottom-color: transparent;
+  }
   .site-header.menu-open .tabs { display: flex; }
   .tab {
     align-self: stretch;

From 0e41cdd951804e18f5569bfa6d71495471c4b830 Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 17:24:45 +0530
Subject: [PATCH 09/14] Mobile menu: drop the title, keep the tab spacing

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 components.js |  1 -
 styles.css    | 14 +-------------
 2 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/components.js b/components.js
index dbd320f..b3a4735 100644
--- a/components.js
+++ b/components.js
@@ -63,7 +63,6 @@
             '</a>' +
             '<button class="nav-toggle" type="button" aria-label="Menu" aria-expanded="false" aria-controls="site-nav"></button>' +
             '<nav class="tabs" id="site-nav" aria-label="Site pages">' +
-              '<span class="menu-title">Agentic Interface Framework</span>' +
               PAGES.map(function (p) {
                 var current = p.id === active ? ' aria-current="page"' : '';
                 return '<a href="' + p.href + '" class="tab"' + current + '>' + p.label + '</a>';
diff --git a/styles.css b/styles.css
index 2f72b6c..f81e888 100644
--- a/styles.css
+++ b/styles.css
@@ -306,7 +306,6 @@ html[data-theme="dark"] .gh-btn:hover {
 
 .gh-label { display: none; }
 
-.menu-title,
 .menu-note { display: none; }
 
 /* Page scroll is locked while the mobile menu is open. */
@@ -1057,18 +1056,7 @@ html.js .reveal.in {
     gap: 0;
     background: var(--bg);
     border-bottom: 1px solid var(--hairline);
-    padding: 2rem 1.25rem 1.25rem;
-  }
-  .menu-title {
-    display: block;
-    font-family: var(--font);
-    font-size: 1.4rem;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    line-height: 1.25;
-    color: var(--ink);
-    padding: 0 0.5rem;
-    margin-bottom: 4rem;
+    padding: 4rem 1.25rem 1.25rem;
   }
   .menu-note {
     display: block;

From 27b2eb981ad7ad836a05e97697614a6ef8718241 Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 17:33:04 +0530
Subject: [PATCH 10/14] Mobile carousel: full-width cards with side gutters

Cards escape the accordion indent via a full-bleed grid and fill the
viewport minus a 1.1rem gutter; pager click/active math now uses the
real card stride instead of the padded grid width.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 script.js  | 6 ++++--
 styles.css | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 321387d..4eb96d6 100644
--- a/script.js
+++ b/script.js
@@ -184,7 +184,7 @@ document.querySelectorAll('.feature-grid').forEach((grid) => {
     b.setAttribute('aria-label', 'Go to card ' + (i + 1) + ' of ' + cards.length);
     b.addEventListener('click', () => {
       grid.scrollTo({
-        left: card.offsetLeft - grid.offsetLeft,
+        left: card.offsetLeft - cards[0].offsetLeft,
         behavior: ACC_REDUCED ? 'auto' : 'smooth'
       });
     });
@@ -192,7 +192,9 @@ document.querySelectorAll('.feature-grid').forEach((grid) => {
     tiles.push(b);
   });
   const setActive = () => {
-    const ix = Math.min(Math.round(grid.scrollLeft / grid.clientWidth), tiles.length - 1);
+    // Stride = real card spacing (cards are narrower than the padded grid).
+    const stride = cards.length > 1 ? cards[1].offsetLeft - cards[0].offsetLeft : grid.clientWidth;
+    const ix = Math.min(Math.round(grid.scrollLeft / stride), tiles.length - 1);
     tiles.forEach((t, i) => t.classList.toggle('active', i === ix));
   };
   // Direct call, not rAF-deferred: throttled webviews freeze rAF and
diff --git a/styles.css b/styles.css
index f81e888..1c13f86 100644
--- a/styles.css
+++ b/styles.css
@@ -1136,6 +1136,11 @@ html.js .reveal.in {
   /* Feature cards become a swipeable carousel with a numbered pager. */
   .feature-grid {
     display: flex;
+    /* Full viewport width with a small gutter, escaping the accordion
+       body's indent; cards fill the padded width. */
+    margin: 0 calc(50% - 50vw);
+    padding: 0 1.1rem;
+    scroll-padding: 0 1.1rem;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;

From 0ca52bf8e392f5469a0f2db7acf558159e12cb41 Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Mon, 20 Jul 2026 17:35:45 +0530
Subject: [PATCH 11/14] Mobile accordions: body text uses the full width

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 styles.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index 1c13f86..62486d0 100644
--- a/styles.css
+++ b/styles.css
@@ -1160,7 +1160,8 @@ html.js .reveal.in {
 
   .acc-title { font-size: 1.15rem; }
   .acc-item summary { gap: 0.9rem; padding: 1.25rem 0.1rem; }
-  .acc-body { padding-left: 2.8rem; }
+  /* Body text uses the full width instead of hanging under the title. */
+  .acc-body { padding-left: 0.1rem; padding-right: 0.1rem; }
 
   .site-footer { padding: 3rem 0 9rem; }
 }

From 4cca94948fb8de86197660a5bce3c28e6fccf0b3 Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Wed, 22 Jul 2026 22:06:18 +0530
Subject: [PATCH 12/14] Contributors: Parikshit and Rabi first, then
 alphabetical

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 4740182..15ac529 100644
--- a/index.html
+++ b/index.html
@@ -887,11 +887,11 @@ <h4 class="feature-title">Feedback &amp; steering</h4>
         <h2 class="section-title reveal">Written by practitioners</h2>
         <p class="contrib-invite reveal">Engineers, designers, and product leaders who build agentic software and have watched the same problems recur across very different products.</p>
         <ul class="contrib-names reveal">
+          <li><span class="contrib-avatar" aria-hidden="true">P</span>Parikshit</li>
+          <li><span class="contrib-avatar" aria-hidden="true">R</span>Rabi</li>
           <li><span class="contrib-avatar" aria-hidden="true">A</span>Abhishek</li>
           <li><span class="contrib-avatar" aria-hidden="true">A</span>Aditya</li>
-          <li><span class="contrib-avatar" aria-hidden="true">P</span>Parikshit</li>
           <li><span class="contrib-avatar" aria-hidden="true">P</span>Prakhar</li>
-          <li><span class="contrib-avatar" aria-hidden="true">R</span>Rabi</li>
           <li><span class="contrib-avatar" aria-hidden="true">Z</span>Zahle</li>
         </ul>
         <p class="contrib-invite reveal">This is a starting point, not a finished specification. If these primitives describe what you have already learned, sign on. If they miss something, say what, and show the pattern.</p>

From 0da3319b17ba8b3e3c985f2527e82832c8f954aa Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Wed, 22 Jul 2026 22:14:51 +0530
Subject: [PATCH 13/14] Rebrand to Agent Interface Framework; multi-expand
 accordions

- Home primitives can now be expanded independently (multiple open at
  once): dropped JS exclusivity + the name="primitives" attribute, and
  removed the now-dead sibling-close / scroll-pin helpers
- Removed the image placeholder from the Agent Interface featured card
  on Resources (plus its dead CSS)
- Renamed the brand "Agentic Interface Framework/Test/Score" ->
  "Agent Interface ..." across pages, meta, components, and the test
  app, aligning with the agentinterfaces.org domain. Descriptive
  "agentic software/interface" prose is intentionally left as-is.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 README.md        |  4 ++--
 ait-questions.js |  2 +-
 ait.js           |  4 ++--
 components.js    |  2 +-
 index.html       | 22 +++++++++++-----------
 quicktest.html   |  6 +++---
 resources.html   |  7 +++----
 script.js        | 48 ++++--------------------------------------------
 styles.css       |  8 --------
 9 files changed, 27 insertions(+), 76 deletions(-)

diff --git a/README.md b/README.md
index 826f7c2..1c1429f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# The Agentic Interface Framework — website
+# The Agent Interface Framework — website
 
 A three-page static site for the framework *Eight primitives for the
 layer where humans meet agentic software*. No build step, no runtime
@@ -12,7 +12,7 @@ palette, sharp corners, inline Phosphor icons.
   accordions (one-liner, description, feature cards with image
   placeholders), contributors, and a contribute CTA that opens a
   mail-app form.
-- **Test** (`quicktest.html`) — The Agentic Interface Test: Quick test
+- **Test** (`quicktest.html`) — The Agent Interface Test: Quick test
   (16 questions) and Deep dive (48 questions) as switchable modes, all
   questions on one page with a sticky "Generate score" bar; results open
   in a modal with a level stepper (Chatbot → Fully Agentic), a radar
diff --git a/ait-questions.js b/ait-questions.js
index f91ec4d..834fb3c 100644
--- a/ait-questions.js
+++ b/ait-questions.js
@@ -1,4 +1,4 @@
-// The Agentic Interface Test — question data.
+// The Agent Interface Test — question data.
 // Every fix string is authored here at build time and never generated.
 window.AIT_DATA = (function () {
   'use strict';
diff --git a/ait.js b/ait.js
index b9f9fda..5768bba 100644
--- a/ait.js
+++ b/ait.js
@@ -1,4 +1,4 @@
-// The Agentic Interface Test — app logic. Plain script, no dependencies,
+// The Agent Interface Test — app logic. Plain script, no dependencies,
 // no network. All questions render on one page; results open in a modal.
 (function () {
   'use strict';
@@ -68,7 +68,7 @@
 
   // Title line shared by the modal and the canvas scorecard.
   function scoreTitle(name, score) {
-    return (name ? name + '\u2019s Agentic Interface Score' : 'Your Agentic Interface Score') +
+    return (name ? name + '\u2019s Agent Interface Score' : 'Your Agent Interface Score') +
       ' : ' + score + '/100';
   }
 
diff --git a/components.js b/components.js
index b3a4735..bc35be1 100644
--- a/components.js
+++ b/components.js
@@ -55,7 +55,7 @@
         '<a class="skip-link" href="#main">Skip to content</a>' +
         '<header class="site-header">' +
           '<div class="header-inner">' +
-            '<a href="./" class="wordmark" aria-label="Agentic Interface Framework — Home">' +
+            '<a href="./" class="wordmark" aria-label="Agent Interface Framework — Home">' +
               // Inline copy of logo.svg, recolored to currentColor.
               '<svg viewBox="0 0 268 144" height="18" aria-hidden="true">' +
                 '<path fill="currentColor" d="M243.074 100.816C254.669 99.0662 265.489 107.047 267.241 118.643C268.996 130.239 261.016 141.061 249.421 142.817C237.821 144.573 226.994 136.592 225.241 124.991C223.489 113.391 231.472 102.566 243.074 100.816ZM0.123047 0.183838C30.3704 -0.193155 61.5253 0.117643 91.8252 0.171143V0.215088C93.8908 0.210607 95.9524 0.201319 98.0059 0.177979L97.9932 140.018L97.999 140.376C97.2973 140.793 63.8272 140.603 60.0508 140.6C60.1153 135.259 60.1187 129.849 60.1064 124.433C52.7323 124.42 45.365 124.437 38.0879 124.55L38.0977 140.584L0.115234 140.582C-0.129765 121.528 0.0923427 141.904 0.0898438 122.793L0.123047 0.183838ZM155.359 140.018L155.365 140.376C154.653 140.793 121.192 140.603 117.417 140.6C117.553 129.303 117.425 117.694 117.426 106.379L117.418 36.9084C117.417 24.797 117.261 12.2614 117.498 0.178955C121.813 0.364191 127.225 0.183088 131.623 0.183838C139.507 0.185341 147.499 0.267477 155.373 0.177979L155.359 140.018ZM175.123 0.183838C205.37 -0.193155 236.525 0.117643 266.825 0.171143L266.843 31.8098L213.088 31.8411L213.115 52.7961L260.897 52.8333C261.092 62.8495 261.082 74.4603 260.862 84.468L258.905 84.5022C243.743 84.4922 228.22 84.3146 213.088 84.55L213.098 140.584L175.115 140.582C174.87 121.528 175.092 101.904 175.09 82.7932L175.123 0.183838ZM38.0879 31.8411L38.1152 92.7961L60.0576 92.8127L60.0518 36.9084C60.0516 35.2222 60.0477 33.5277 60.043 31.8274L38.0879 31.8411Z"/>' +
diff --git a/index.html b/index.html
index 15ac529..fa11d87 100644
--- a/index.html
+++ b/index.html
@@ -21,9 +21,9 @@
   <script src="components.js" defer></script>
   <script src="script.js" defer></script>
   <script src="shader-bg.js" defer></script>
-  <title>The Agentic Interface Framework</title>
+  <title>The Agent Interface Framework</title>
   <meta name="description" content="Eight primitives for the layer where humans meet agentic software.">
-  <meta property="og:title" content="The Agentic Interface Framework">
+  <meta property="og:title" content="The Agent Interface Framework">
   <meta property="og:description" content="Eight primitives for the layer where humans meet agentic software.">
   <meta property="og:type" content="website">
 </head>
@@ -45,7 +45,7 @@
 
     <section class="hero">
       <div class="container">
-        <h1 class="reveal">Agentic Interface <br>Framework</h1>
+        <h1 class="reveal">Agent Interface <br>Framework</h1>
         <p class="hero-sub reveal">A best-practice framework for taking your AI app<br>from chatbot <span class="hero-arrow" aria-hidden="true"><ph-icon name="arrow-right-bold" size="14"></ph-icon></span><span class="visually-hidden">to</span> agentic&nbsp;software.</p>
       </div>
     </section>
@@ -70,7 +70,7 @@ <h2 class="section-title reveal">The eight primitives</h2>
         <p class="section-lede reveal">The eight primitives are the building blocks of an agentic interface. Each one names a category of concrete, proven patterns &mdash; from expressing intent to recovering from failure. Applied together, they produce a product where people can direct the agent, watch it work, trust its results, and keep what it makes: an interface, not just a chat box. Open a primitive to see its patterns.</p>
 
         <!-- 01 Guide intent -->
-        <details class="acc-item" name="primitives" id="acc-guide-intent">
+        <details class="acc-item" id="acc-guide-intent">
           <summary>
             <span class="numbox acc-num">1</span>
             <h3 class="acc-title">Guide intent</h3>
@@ -150,7 +150,7 @@ <h4 class="feature-title">Structured inputs</h4>
         </details>
 
         <!-- 02 Reveal progress -->
-        <details class="acc-item" name="primitives" id="acc-reveal-progress">
+        <details class="acc-item" id="acc-reveal-progress">
           <summary>
             <span class="numbox acc-num">2</span>
             <h3 class="acc-title">Reveal progress</h3>
@@ -262,7 +262,7 @@ <h4 class="feature-title">Async &amp; background work</h4>
         </details>
 
         <!-- 03 Show, don't tell -->
-        <details class="acc-item" name="primitives" id="acc-show-dont-tell">
+        <details class="acc-item" id="acc-show-dont-tell">
           <summary>
             <span class="numbox acc-num">3</span>
             <h3 class="acc-title">Show, don&rsquo;t tell</h3>
@@ -342,7 +342,7 @@ <h4 class="feature-title">Accessible generated UI</h4>
         </details>
 
         <!-- 04 Keep control -->
-        <details class="acc-item" name="primitives" id="acc-keep-control">
+        <details class="acc-item" id="acc-keep-control">
           <summary>
             <span class="numbox acc-num">4</span>
             <h3 class="acc-title">Keep control</h3>
@@ -446,7 +446,7 @@ <h4 class="feature-title">Respectful surfacing</h4>
         </details>
 
         <!-- 05 Earn trust -->
-        <details class="acc-item" name="primitives" id="acc-earn-trust">
+        <details class="acc-item" id="acc-earn-trust">
           <summary>
             <span class="numbox acc-num">5</span>
             <h3 class="acc-title">Earn trust</h3>
@@ -550,7 +550,7 @@ <h4 class="feature-title">Agent identity</h4>
         </details>
 
         <!-- 06 Expect failure -->
-        <details class="acc-item" name="primitives" id="acc-expect-failure">
+        <details class="acc-item" id="acc-expect-failure">
           <summary>
             <span class="numbox acc-num">6</span>
             <h3 class="acc-title">Expect failure</h3>
@@ -635,7 +635,7 @@ <h4 class="feature-title">Refusal surfaces</h4>
         </details>
 
         <!-- 07 Make artifacts -->
-        <details class="acc-item" name="primitives" id="acc-make-artifacts">
+        <details class="acc-item" id="acc-make-artifacts">
           <summary>
             <span class="numbox acc-num">7</span>
             <h3 class="acc-title">Make artifacts</h3>
@@ -729,7 +729,7 @@ <h4 class="feature-title">Portability</h4>
         </details>
 
         <!-- 08 Build a home -->
-        <details class="acc-item" name="primitives" id="acc-build-a-home">
+        <details class="acc-item" id="acc-build-a-home">
           <summary>
             <span class="numbox acc-num">8</span>
             <h3 class="acc-title">Build a home</h3>
diff --git a/quicktest.html b/quicktest.html
index 6b92efb..5db7e76 100644
--- a/quicktest.html
+++ b/quicktest.html
@@ -23,9 +23,9 @@
   <script src="shader-bg.js" defer></script>
   <script src="ait-questions.js" defer></script>
   <script src="ait.js" defer></script>
-  <title>The Agentic Interface Test — The Agentic Interface Framework</title>
+  <title>The Agent Interface Test — The Agent Interface Framework</title>
   <meta name="description" content="Answer yes or no about your product's agentic interface. Get a score out of 100 and a maturity level.">
-  <meta property="og:title" content="The Agentic Interface Test">
+  <meta property="og:title" content="The Agent Interface Test">
   <meta property="og:description" content="Answer yes or no about your product's agentic interface. Get a score out of 100 and a maturity level.">
   <meta property="og:type" content="website">
 </head>
@@ -36,7 +36,7 @@
   <main id="main">
     <section class="page-header">
       <div class="container">
-        <h1 class="page-title">The Agentic Interface Test</h1>
+        <h1 class="page-title">The Agent Interface Test</h1>
         <p class="page-sub">How agentic is your product&rsquo;s interface? Answer yes or no. Get one score out of 100 and a maturity level.</p>
       </div>
     </section>
diff --git a/resources.html b/resources.html
index b0758ab..1c21d0e 100644
--- a/resources.html
+++ b/resources.html
@@ -20,9 +20,9 @@
   </script>
   <script src="components.js" defer></script>
   <script src="shader-bg.js" defer></script>
-  <title>Resources — The Agentic Interface Framework</title>
+  <title>Resources — The Agent Interface Framework</title>
   <meta name="description" content="Resources for building agentic interfaces.">
-  <meta property="og:title" content="Resources — The Agentic Interface Framework">
+  <meta property="og:title" content="Resources — The Agent Interface Framework">
   <meta property="og:description" content="Resources for building agentic interfaces.">
   <meta property="og:type" content="website">
 </head>
@@ -46,10 +46,9 @@ <h1 class="page-title">Resources</h1>
               <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"/></svg></span>
               <h2 class="res-name">Agent Interface</h2>
               <p class="res-by">By OpenUI</p>
-              <p class="res-desc">The open-source, production-ready, best-practice implementation of the Agentic Interface Framework.</p>
+              <p class="res-desc">The open-source, production-ready, best-practice implementation of the Agent Interface Framework.</p>
               <a class="btn" href="https://openui.com/agentinterface" target="_blank" rel="noopener">Explore Agent Interface<span class="btn-icon" aria-hidden="true"><ph-icon name="arrow-right" size="12"></ph-icon></span></a>
             </div>
-            <figure class="ph" aria-hidden="true"><span>Image</span></figure>
           </article>
           <article class="res-card">
             <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/></svg></span>
diff --git a/script.js b/script.js
index 4eb96d6..dc7b67a 100644
--- a/script.js
+++ b/script.js
@@ -26,7 +26,7 @@ if (contribBtn && contribForm) {
     e.preventDefault();
     const name = contribForm.elements.name.value.trim();
     const message = contribForm.elements.message.value.trim();
-    const subject = 'Contributing to the Agentic Interface Framework';
+    const subject = 'Contributing to the Agent Interface Framework';
     const body = (name ? 'Name: ' + name + '\n\n' : '') + message;
     window.location.href =
       'mailto:parikshit@thesys.dev?subject=' + encodeURIComponent(subject) +
@@ -38,11 +38,11 @@ if (contribBtn && contribForm) {
 }
 
 // ---------------------------------------------------------------
-// Accordions: exclusive open, animated as expand-then-fade.
+// Accordions: any number open at once, animated as expand-then-fade.
 // The panel's height eases open first; once it has expanded, the
 // content fades in. Collapse animates height and opacity together.
-// With prefers-reduced-motion (or no JS) the native details
-// behavior and its name="" exclusivity apply instead.
+// With prefers-reduced-motion (or no JS) the native details toggle
+// applies instead.
 // ---------------------------------------------------------------
 const accItems = Array.from(document.querySelectorAll('details.acc-item'));
 const ACC_REDUCED = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -88,12 +88,6 @@ function accExpand(item) {
     accSettle(body, 330, () => {
       body.style.cssText = '';
       delete item.dataset.animating;
-      // A sibling asked this panel to close while it was mid-expand
-      // (exclusivity would otherwise leave two panels open).
-      if (item.dataset.closeAfter) {
-        delete item.dataset.closeAfter;
-        accCollapse(item);
-      }
     });
   });
 }
@@ -114,28 +108,7 @@ function accCollapse(item) {
   });
 }
 
-// Closes `item` instantly and keeps `anchorEl` (the clicked summary)
-// at the same viewport position. Used for open siblings ABOVE the
-// clicked row: an animated collapse there would drag the clicked row
-// up under the cursor, which reads as a scroll glitch. The correction
-// is the row's measured displacement, so any scroll clamping the
-// browser applies when the document shrinks is accounted for.
-function accCollapseAbove(item, anchorEl) {
-  const body = item.querySelector('.acc-body');
-  body.style.cssText = '';
-  delete item.dataset.animating;
-  delete item.dataset.closeAfter;
-  const before = anchorEl.getBoundingClientRect().top;
-  item.open = false;
-  const shift = anchorEl.getBoundingClientRect().top - before;
-  if (shift) window.scrollBy(0, shift);
-}
-
 if (accItems.length && !ACC_REDUCED) {
-  // JS drives exclusivity so sibling closes can animate; the native
-  // exclusive-accordion attribute would snap them shut instead.
-  accItems.forEach((d) => d.removeAttribute('name'));
-
   accItems.forEach((item) => {
     const summary = item.querySelector('summary');
     const body = item.querySelector('.acc-body');
@@ -146,19 +119,6 @@ if (accItems.length && !ACC_REDUCED) {
       if (item.open) {
         accCollapse(item);
       } else {
-        accItems.forEach((other) => {
-          if (other === item || !other.open) return;
-          // "other precedes item": collapse instantly with scroll
-          // compensation so the clicked row stays pinned; siblings
-          // below can animate freely without shifting the row.
-          if (other.compareDocumentPosition(item) & Node.DOCUMENT_POSITION_FOLLOWING) {
-            accCollapseAbove(other, summary);
-          } else if (other.dataset.animating) {
-            other.dataset.closeAfter = '1';
-          } else {
-            accCollapse(other);
-          }
-        });
         accExpand(item);
       }
     });
diff --git a/styles.css b/styles.css
index 62486d0..458427c 100644
--- a/styles.css
+++ b/styles.css
@@ -837,13 +837,6 @@ html[data-theme="dark"] .res-card:not(.res-feature):focus-within {
 
 .res-feature .btn { margin-top: 0.5rem; }
 
-.res-feature .ph {
-  width: 22rem;
-  max-width: 40%;
-  flex-shrink: 0;
-  margin-bottom: 0;
-}
-
 .res-by {
   font-family: var(--font);
   font-size: var(--label-md);
@@ -1155,7 +1148,6 @@ html.js .reveal.in {
   .contrib-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .res-grid { grid-template-columns: 1fr; }
   .res-feature { flex-direction: column; align-items: stretch; gap: 1.25rem; }
-  .res-feature .ph { width: 100%; max-width: none; }
   .res-feature .btn { align-self: flex-start; }
 
   .acc-title { font-size: 1.15rem; }

From 82b220ba4d3dc02b6a2fa807e686431423ecef4a Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Wed, 22 Jul 2026 22:19:54 +0530
Subject: [PATCH 14/14] Replace contribute form with a contact-by-email line

- Dropped the Contribute button, the reveal-form markup, and all its
  JS (button toggle, mailto submit, #contribute deep link)
- Contributors section now closes with "To contribute, write to us at
  hello@thesys.dev" (mailto link)
- Removed the now-dead form CSS (.contrib-form*, .field-label,
  .form-row, .form-note, orphaned textarea.input); added .contrib-mail
- README updated (no more form; accordions are no longer exclusive)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 README.md  | 10 ++++------
 index.html | 18 +-----------------
 script.js  | 39 +--------------------------------------
 styles.css | 42 +++++++-----------------------------------
 4 files changed, 13 insertions(+), 96 deletions(-)

diff --git a/README.md b/README.md
index 1c1429f..17a651d 100644
--- a/README.md
+++ b/README.md
@@ -8,10 +8,9 @@ palette, sharp corners, inline Phosphor icons.
 ## Pages
 
 - **Home** (`index.html`) — hero, "the interface is the unsolved half"
-  intro with a CTA into the test, the eight primitives as exclusive
+  intro with a CTA into the test, the eight primitives as
   accordions (one-liner, description, feature cards with image
-  placeholders), contributors, and a contribute CTA that opens a
-  mail-app form.
+  placeholders), contributors, and a contribute-by-email line.
 - **Test** (`quicktest.html`) — The Agent Interface Test: Quick test
   (16 questions) and Deep dive (48 questions) as switchable modes, all
   questions on one page with a sticky "Generate score" bar; results open
@@ -38,9 +37,8 @@ palette, sharp corners, inline Phosphor icons.
   z-scale, motion) and shared components (`.btn`, `.numbox`, `.input`,
   page-header band), plus all Home styles.
 - `ait.css` — test-page styles, all `ait-` prefixed.
-- `script.js` — Home interactions: contribute form (opens the visitor's
-  mail app addressed to parikshit@thesys.dev), animated exclusive
-  accordions, scroll reveals. Home remains fully readable with
+- `script.js` — Home interactions: animated accordions (any number open
+  at once) and scroll reveals. Home remains fully readable with
   JavaScript disabled.
 - `ait-questions.js` — test data (`window.AIT_DATA`): 8 primitives,
   16 + 48 questions with tooltips and fixes, 5 maturity levels.
diff --git a/index.html b/index.html
index fa11d87..f780b97 100644
--- a/index.html
+++ b/index.html
@@ -895,23 +895,7 @@ <h2 class="section-title reveal">Written by practitioners</h2>
           <li><span class="contrib-avatar" aria-hidden="true">Z</span>Zahle</li>
         </ul>
         <p class="contrib-invite reveal">This is a starting point, not a finished specification. If these primitives describe what you have already learned, sign on. If they miss something, say what, and show the pattern.</p>
-        <p class="reveal">
-          <button class="btn" id="contrib-btn" aria-expanded="false" aria-controls="contrib-form">Contribute<span class="btn-icon" aria-hidden="true"><ph-icon name="arrow-right" size="12"></ph-icon></span></button>
-        </p>
-        <form id="contrib-form" class="contrib-form" hidden>
-          <label>
-            <span class="field-label">Your name</span>
-            <input class="input" type="text" name="name" autocomplete="name" placeholder="How you'd like to be credited">
-          </label>
-          <label>
-            <span class="field-label">Message</span>
-            <textarea class="input" name="message" rows="5" required placeholder="What held, what broke, what's missing &mdash; or just: sign me on."></textarea>
-          </label>
-          <div class="form-row">
-            <button type="submit" class="btn">Send<span class="btn-icon" aria-hidden="true"><ph-icon name="arrow-right" size="12"></ph-icon></span></button>
-            <p class="form-note">Opens your mail app, addressed to parikshit@thesys.dev.</p>
-          </div>
-        </form>
+        <p class="contrib-invite reveal">To contribute, write to us at <a class="contrib-mail" href="mailto:hello@thesys.dev">hello@thesys.dev</a>.</p>
       </div>
     </section>
 
diff --git a/script.js b/script.js
index dc7b67a..c0b217b 100644
--- a/script.js
+++ b/script.js
@@ -1,41 +1,4 @@
-// Home-page interactions: contribute form, accordions, scroll reveals.
-
-// ---------------------------------------------------------------
-// Contribute CTA: reveal the form, submit via the user's mail app
-// ---------------------------------------------------------------
-const contribBtn = document.getElementById('contrib-btn');
-const contribForm = document.getElementById('contrib-form');
-
-function openContribute(focus = true) {
-  if (!contribForm) return;
-  contribForm.hidden = false;
-  contribBtn.setAttribute('aria-expanded', 'true');
-  if (focus) contribForm.querySelector('input[name="name"]').focus();
-}
-
-if (contribBtn && contribForm) {
-  contribBtn.addEventListener('click', () => {
-    if (contribForm.hidden) openContribute();
-    else {
-      contribForm.hidden = true;
-      contribBtn.setAttribute('aria-expanded', 'false');
-    }
-  });
-
-  contribForm.addEventListener('submit', (e) => {
-    e.preventDefault();
-    const name = contribForm.elements.name.value.trim();
-    const message = contribForm.elements.message.value.trim();
-    const subject = 'Contributing to the Agent Interface Framework';
-    const body = (name ? 'Name: ' + name + '\n\n' : '') + message;
-    window.location.href =
-      'mailto:parikshit@thesys.dev?subject=' + encodeURIComponent(subject) +
-      '&body=' + encodeURIComponent(body);
-  });
-
-  // Deep link: arriving at ./#contribute opens the form in place.
-  if (location.hash === '#contribute') openContribute(false);
-}
+// Home-page interactions: accordions, scroll reveals.
 
 // ---------------------------------------------------------------
 // Accordions: any number open at once, animated as expand-then-fade.
diff --git a/styles.css b/styles.css
index 458427c..4f5a4cf 100644
--- a/styles.css
+++ b/styles.css
@@ -676,18 +676,6 @@ html.menu-locked { overflow: hidden; }
   border-color: var(--ink);
 }
 
-textarea.input { resize: vertical; }
-
-.field-label {
-  display: block;
-  font-family: var(--font);
-  font-size: var(--label-sm);
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  color: var(--muted);
-  margin-bottom: 0.5rem;
-}
-
 /* ---------- contributors + contribute ---------- */
 
 .contributors {
@@ -731,31 +719,15 @@ textarea.input { resize: vertical; }
   margin-bottom: 1.5rem;
 }
 
-.contrib-form {
-  margin-top: 2.25rem;
-  max-width: 34rem;
-  display: grid;
-  gap: 1.25rem;
-}
-
-/* display:grid above would otherwise defeat the hidden attribute */
-.contrib-form[hidden] { display: none; }
-
-.contrib-form label { display: block; }
-
-.form-row {
-  display: flex;
-  align-items: center;
-  gap: 1.25rem;
-  flex-wrap: wrap;
+.contrib-mail {
+  color: var(--ink);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
 }
 
-.form-note {
-  font-family: var(--font);
-  font-size: var(--label-sm);
-  letter-spacing: 0.01em;
-  color: var(--muted);
-}
+.contrib-mail:hover { text-decoration-thickness: 2px; }
 
 /* ---------- page header band (Test, Resources) ---------- */