From 5c9577a0c826c9b79d93b07cae7a0be3d01261cb Mon Sep 17 00:00:00 2001
From: Matthew Berman <748450+mberman84@users.noreply.github.com>
Date: Mon, 22 Jun 2026 18:39:36 -0700
Subject: [PATCH] Make loop search more prominent

---
 scripts/check.mjs | 11 +++++++++-
 site/index.html   | 26 ++++++++++++-----------
 site/styles.css   | 54 ++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/scripts/check.mjs b/scripts/check.mjs
index 3287c2b..678bf90 100644
--- a/scripts/check.mjs
+++ b/scripts/check.mjs
@@ -118,9 +118,18 @@ for (const value of [
 ]) {
   assert(html.includes(value), value);
 }
+assert(html.includes("Search the library"));
+assert(html.includes("Search by title, task, or contributor"));
+assert(html.includes('class="search-field"'));
+assert(html.includes("styles.css?v=20260622-search-prominence"));
+assert(css.includes(".search-control-label"));
+assert(css.includes(".search-control:hover .search-field"));
+assert(css.includes(".search-control:focus-within .search-field"));
 assert.equal((html.match(/data-here-now-credit/g) || []).length, 2);
-for (const page of [html, learnHtml, agentHtml]) {
+for (const page of [learnHtml, agentHtml]) {
   assert(page.includes("styles.css?v=20260622-centered-host-credit"));
+}
+for (const page of [html, learnHtml, agentHtml]) {
   const brandPosition = page.indexOf('class="brand-lockup"');
   const creditPosition = page.indexOf(
     'class="here-now-credit here-now-credit--header"',
diff --git a/site/index.html b/site/index.html
index b45b977..36af896 100644
--- a/site/index.html
+++ b/site/index.html
@@ -132,7 +132,7 @@
       href="https://signals.forwardfuture.ai/loop-library/agents/"
     />
     <link rel="icon" type="image/png" href="./assets/favicon.png" />
-    <link rel="stylesheet" href="./styles.css?v=20260622-centered-host-credit" />
+    <link rel="stylesheet" href="./styles.css?v=20260622-search-prominence" />
     <script type="application/ld+json">
 {
   "@context": "https://schema.org",
@@ -355,17 +355,19 @@ <h2 id="agent-skill-title">
 
         <div class="library-controls">
           <label class="search-control">
-            <span class="sr-only">Search loops</span>
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <circle cx="11" cy="11" r="7"></circle>
-              <path d="m20 20-4-4"></path>
-            </svg>
-            <input
-              id="loop-search"
-              type="search"
-              placeholder="Search loops or contributors"
-              autocomplete="off"
-            />
+            <span class="search-control-label">Search the library</span>
+            <span class="search-field">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <circle cx="11" cy="11" r="7"></circle>
+                <path d="m20 20-4-4"></path>
+              </svg>
+              <input
+                id="loop-search"
+                type="search"
+                placeholder="Search by title, task, or contributor"
+                autocomplete="off"
+              />
+            </span>
           </label>
 
           <div class="library-refinements">
diff --git a/site/styles.css b/site/styles.css
index e59ba8a..1675a5f 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -610,47 +610,81 @@ code {
   flex-direction: column;
   gap: 14px;
   margin-top: 32px;
-  padding: 12px 0;
+  padding: 16px 0;
   border-top: 1px solid var(--ink);
   border-bottom: 1px solid var(--ink);
 }
 
 .search-control {
-  display: flex;
+  display: block;
   width: min(100%, 680px);
+  cursor: text;
+}
+
+.search-control-label {
+  display: block;
+  width: max-content;
+  padding: 5px 9px;
+  color: var(--charcoal);
+  background: var(--orange);
+  font-family: var(--font-mono);
+  font-size: 0.66rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  line-height: 1.3;
+  text-transform: uppercase;
+}
+
+.search-field {
+  display: flex;
+  min-height: 52px;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
+  padding: 0 14px;
+  border: 2px solid var(--ink);
+  background: var(--surface);
 }
 
 .search-control:focus-within {
   color: var(--orange);
 }
 
-.search-control svg {
-  width: 18px;
-  height: 18px;
+.search-control:hover .search-field {
+  border-color: var(--orange);
+}
+
+.search-control:focus-within .search-field {
+  outline: 3px solid var(--orange);
+  outline-offset: 3px;
+}
+
+.search-field svg {
+  width: 22px;
+  height: 22px;
   flex: 0 0 auto;
   fill: none;
   stroke: currentColor;
-  stroke-width: 1.8;
+  stroke-width: 2;
 }
 
-.search-control input {
+.search-field input {
   width: 100%;
-  padding: 8px 0 6px;
+  padding: 13px 0;
   border: 0;
   border-bottom: 2px solid transparent;
   outline: 0;
   color: var(--ink);
   background: transparent;
+  font-weight: 650;
 }
 
 .search-control input:focus-visible {
   border-bottom-color: currentColor;
 }
 
-.search-control input::placeholder {
+.search-field input::placeholder {
   color: var(--placeholder);
+  font-weight: 500;
 }
 
 .category-filters {