Fix mobile layout: header, featured card overflow, tap targets

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
@@ -8,11 +8,10 @@ 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.
-- **Test** (`quicktest.html`) — The Agentic Interface Test: Quick test
+  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
   in a modal with a level stepper (Chatbot → Fully Agentic), a radar
@@ -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.

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';

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
@@ -609,17 +609,28 @@ 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; }
+
+  /* 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 {
+    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; }

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';
   }
 

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'
@@ -54,23 +55,46 @@
         '<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"/>' +
               '</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>';
               }).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>' +
+              '<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>';
+        '</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');
+      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);
+      }
+      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);
+      });
+      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.

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>
@@ -887,31 +887,15 @@ <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>
-        <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>
 

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>