feat(website): homepage plugin showcase, live star count, faithful claude code mock

3 files changed, 267 insertions, 235 deletions

diff --git a/website/assets/jbm.woff2 b/website/assets/jbm.woff2
index 4d09cda4..059ca4e7 100644
--- a/website/assets/jbm.woff2
+++ b/website/assets/jbm.woff2
diff --git a/website/css/style.css b/website/css/style.css
index 06aae519..545b9123 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -3,10 +3,12 @@
     font-style: normal;
     font-weight: 400 700;
     font-display: swap;
-    src: url("/assets/jbm.woff2") format("woff2");
+    src: url("/assets/jbm.woff2?v=2") format("woff2");
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
         U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
-        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2500-2503,
+        U+2514, U+2580-259F, U+25C9, U+25CF, U+2713, U+276F,
+        U+FEFF, U+FFFD;
 }
 
 :root {
@@ -1510,92 +1512,43 @@ samp {
     border: 1px solid var(--line-strong);
 }
 
-.logo-cloud {
-    max-width: var(--max);
-    margin: 0 auto;
-    padding: 2.5rem 1.25rem 3rem;
-    overflow: hidden;
-}
-
-.logo-cloud-heading {
-    margin-bottom: 0.8rem;
-    text-align: center;
-}
-
-.logo-cloud-heading .section-kicker {
-    margin-bottom: 0.4rem;
+.nav-icon-link.has-count {
+    width: auto;
+    padding-inline: 0.55rem;
+    gap: 0.35rem;
 }
 
-.logo-cloud-heading h2 {
-    margin: 0;
-    color: var(--muted);
-    font-size: clamp(1rem, 2vw, 1.25rem);
-    line-height: 1.25;
-    letter-spacing: -0.02em;
-    font-family: var(--body);
-    font-weight: 400;
+.nav-icon-link.has-count:has(.nav-star-count:empty) {
+    width: 2.1rem;
+    padding-inline: 0;
+    gap: 0;
 }
 
-.logo-cloud-note {
-    margin: 0.35rem 0 0;
-    color: var(--muted-2);
+.nav-star-count {
     font-family: var(--mono);
-    font-size: 0.68rem;
-    line-height: 1.4;
-}
-
-.logo-marquee {
-    position: relative;
-    overflow: hidden;
-    border-top: 1px solid var(--line);
-    border-bottom: 1px solid var(--line);
-    padding: 0.5rem 0;
-}
-
-.logo-track {
-    display: flex;
-    width: max-content;
-    animation: logo-marquee 24s linear infinite;
-}
-
-.logo-row {
-    display: flex;
-    flex: 0 0 auto;
-    gap: 0.5rem;
-    padding: 0.25rem 0.25rem;
-}
-
-.logo-card {
-    width: 140px;
-    height: 50px;
-    display: grid;
-    place-items: center;
-    padding: 0.4rem 0.75rem;
-    color: var(--muted);
-}
-
-.logo-card img {
-    width: auto;
-    height: 26px;
-    max-width: 110px;
-    object-fit: contain;
-    opacity: var(--logo-opacity);
-    filter: var(--logo-filter);
-    transition: opacity 0.2s, filter 0.2s;
+    font-size: 0.78rem;
+    line-height: 1;
 }
 
-.logo-card img:hover {
-    opacity: 0.95;
+.hero-note a {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color 0.12s ease;
 }
 
-.logo-card span {
-    display: none;
+.hero-note a:hover {
+    color: var(--accent);
 }
 
 .community-section {
     padding-top: 4.25rem;
 }
 
+.section.community-section {
+    border-top: none;
+}
+
 .community-video-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1702,12 +1655,6 @@ samp {
     line-height: 1.55;
 }
 
-@keyframes logo-marquee {
-    to {
-        transform: translateX(-50%);
-    }
-}
-
 @keyframes theme-hint-pulse {
     0%, 70%, 100% {
         opacity: 0;
@@ -2540,7 +2487,6 @@ td:last-child {
 
     .section,
     .demo-section,
-    .logo-cloud,
     .footer,
     .final-cta {
         padding-inline: 1rem;
@@ -2584,20 +2530,6 @@ td:last-child {
         border-radius: var(--radius-md);
     }
 
-    .logo-cloud {
-        padding-bottom: 2.5rem;
-    }
-
-    .logo-card {
-        width: 120px;
-        height: 46px;
-    }
-
-    .logo-card img {
-        height: 24px;
-        max-width: 92px;
-    }
-
     .section {
         padding-top: 3rem;
         padding-bottom: 3rem;
@@ -2711,11 +2643,16 @@ td:last-child {
     .footer {
         flex-direction: column;
         align-items: flex-start;
+        padding-bottom: 4.5rem;
     }
 
     .footer div {
         justify-content: flex-start;
     }
+
+    .footer .footer-social {
+        justify-content: flex-start;
+    }
 }
 
 @media (max-width: 440px) {
@@ -2795,15 +2732,6 @@ td:last-child {
         margin: 0.35rem 0 0.45rem;
     }
 
-    .logo-card {
-        width: 110px;
-    }
-
-    .logo-card img {
-        height: 22px;
-        max-width: 88px;
-    }
-
     .mobile-proof,
     .mobile-shots {
         gap: 0.55rem;
@@ -3370,6 +3298,57 @@ td:last-child {
     color: #d97757;
 }
 
+/* Claude Code header logo + status footer — colors hardcoded to match the
+   real agent UI, not the site theme (the pane renders the agent, not herdr) */
+.cc-header {
+    display: flex;
+    gap: 0.6em;
+    align-items: center;
+}
+
+.herdr-ui-mock .cc-logo-art {
+    margin: 0;
+    color: #d97757;
+    line-height: 1;
+    white-space: pre;
+    font-family: var(--mono);
+}
+
+.cc-header-text {
+    min-width: 0;
+}
+
+.cc-header-text > div {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.cc-status {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.cc-file {
+    color: #b1b9f9;
+}
+
+.cc-cyan {
+    color: #4ec9d4;
+}
+
+.cc-yellow {
+    color: #d7ba7d;
+}
+
+.cc-coral {
+    color: #ff6b80;
+}
+
+.cc-gy {
+    color: var(--term-dim);
+}
+
 .cx-bullet {
     color: var(--accent);
 }
@@ -3507,12 +3486,45 @@ td:last-child {
 
 /* Homepage marketplace teaser */
 .marketplace-teaser {
+    display: block;
+    padding-block: 4.5rem;
+    border-bottom: 1px solid var(--line);
+}
+
+.marketplace-teaser-top {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
     gap: 3rem;
     align-items: center;
-    padding-block: 4.5rem;
-    border-bottom: 1px solid var(--line);
+}
+
+.marketplace-teaser-install {
+    display: grid;
+    gap: 0.55rem;
+    align-content: center;
+}
+
+.marketplace-install-output {
+    margin: 0;
+    padding-inline: 0.9rem;
+    color: var(--muted);
+    font-family: var(--mono);
+    font-size: 0.82rem;
+}
+
+.marketplace-install-note {
+    margin: 0;
+    padding-inline: 0.9rem;
+    color: var(--muted-2);
+    font-family: var(--mono);
+    font-size: 0.75rem;
+}
+
+@media (max-width: 50rem) {
+    .marketplace-teaser-top {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
 }
 
 .marketplace-teaser-copy h2 {
@@ -3535,7 +3547,15 @@ td:last-child {
 
 .marketplace-teaser-grid {
     display: grid;
+    grid-template-columns: repeat(3, 1fr);
     gap: 0.75rem;
+    margin-top: 2.5rem;
+}
+
+@media (max-width: 68rem) {
+    .marketplace-teaser-grid {
+        grid-template-columns: 1fr 1fr;
+    }
 }
 
 .mp-chip {
@@ -3575,10 +3595,12 @@ td:last-child {
 
 @media (max-width: 50rem) {
     .marketplace-teaser {
-        grid-template-columns: 1fr;
-        gap: 2rem;
         padding-block: 3.5rem;
     }
+
+    .marketplace-teaser-grid {
+        grid-template-columns: 1fr;
+    }
 }
 
 /* What you get: balanced capability grid + code card */
diff --git a/website/index.html b/website/index.html
index b883c506..2a5dfd80 100644
--- a/website/index.html
+++ b/website/index.html
@@ -43,7 +43,7 @@
         <link rel="apple-touch-icon" href="/assets/logo.png" />
         <link
             rel="preload"
-            href="/assets/jbm.woff2"
+            href="/assets/jbm.woff2?v=2"
             as="font"
             type="font/woff2"
             crossorigin
@@ -57,7 +57,7 @@
                 document.documentElement.setAttribute("data-palette", saved || system);
             })();
         </script>
-        <link rel="stylesheet" href="/css/style.css?v=45" />
+        <link rel="stylesheet" href="/css/style.css?v=59" />
     </head>
     <body>
         <header class="site-header">
@@ -96,10 +96,11 @@
                     <a href="/docs/socket-api/">API</a>
                 </div>
                 <div class="nav-tools">
-                    <a class="nav-icon-link" href="https://github.com/ogulcancelik/herdr" aria-label="Herdr on GitHub">
+                    <a class="nav-icon-link has-count" href="https://github.com/ogulcancelik/herdr" aria-label="Herdr on GitHub">
                         <svg viewBox="0 0 16 16" aria-hidden="true">
                             <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.64 7.64 0 0 1 8 3.87c.68 0 1.36.09 2 .26 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
                         </svg>
+                        <span class="nav-star-count" data-stat-stars></span>
                     </a>
                     <a class="nav-icon-link" href="https://x.com/herdrdev" aria-label="Herdr on X">
                         <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -184,7 +185,7 @@
                             </div>
                         </div>
                     </div>
-                    <p class="hero-note">Stable Linux/macOS · Windows preview beta · no Electron, no account, no telemetry</p>
+                    <p class="hero-note">Stable Linux/macOS · Windows preview beta · no Electron, no account, no telemetry · <a href="/stats/">live stats</a></p>
                 </div>
                 </div>
 
@@ -227,26 +228,34 @@
                                 </div>
                                 <div class="mock-panes active" data-tab="main">
                                     <div class="mock-pane focused tui" data-title="claude">
-                                        <div class="cc-head"><span class="cc-mark">✻</span> <b>Claude Code</b> <span class="dim">v2.1.168</span></div>
-                                        <div class="dim">&nbsp;&nbsp;~/Projects/herdr · master</div>
+                                        <div class="cc-header">
+                                            <pre class="cc-logo-art"> ▐▛███▜▌
+▝▜█████▛▘
+  ▘▘ ▝▝</pre>
+                                            <div class="cc-header-text">
+                                                <div><b>Claude Code</b> <span class="dim">v2.1.198</span></div>
+                                                <div class="dim">Fable 5 with high effort · Claude Max</div>
+                                                <div class="dim">~/Projects/herdr/website</div>
+                                            </div>
+                                        </div>
                                         <br />
-                                        <div><b>❯</b> the sidebar flickers when an agent flips state fast</div>
+                                        <div><b>❯</b> make the herdr.dev hero mock look exactly like real claude code</div>
                                         <br />
-                                        <div><span class="cc-bullet">●</span> Found it. The rollup recomputes on every PTY chunk, so a double state flip repaints the dot mid-frame.</div>
+                                        <div><span class="cc-bullet">●</span> Ha. I read the real pane over the socket — the mock was on v2.1.168, Claude Code is <span class="cc-file">v2.1.198</span> now. Missing the logo block and the whole rate-limit row.</div>
                                         <br />
                                         <div><span class="cc-bullet">●</span> Plan:</div>
-                                        <div class="dim">&nbsp;&nbsp;· src/app/state.rs — buffer state events per tick</div>
-                                        <div class="dim">&nbsp;&nbsp;· src/ui/sidebar.rs — repaint rollups once per frame</div>
+                                        <div class="dim">&nbsp;&nbsp;· index.html — swap ✻ for the real ▐▛███▜▌ mark, bump the version</div>
+                                        <div class="dim">&nbsp;&nbsp;· css/style.css — coral bypass line, add the 5h / Week bars</div>
                                         <br />
-                                        <div><b>❯</b> go, and add a regression test</div>
+                                        <div><b>❯</b> perfect. and make the dialogue about this, obviously</div>
                                         <br />
-                                        <div><span class="cc-working"><span class="braille-spinner">⠋</span> Working…</span> <span class="dim">(<span id="cc-timer">13m 36s</span> · esc to interrupt)</span></div>
+                                        <div><span class="cc-working"><span class="braille-spinner">⠋</span> Baking…</span> <span class="dim">(<span id="cc-timer">13m 36s</span> · esc to interrupt)</span></div>
                                         <div class="tui-bottom">
                                             <div class="cc-rule"></div>
                                             <div><b>❯</b> <span class="cursor"></span></div>
                                             <div class="cc-rule"></div>
-                                            <div class="dim">~/Projects/herdr &gt; master &gt; ctx ─── 3% 34k/1M</div>
-                                            <div class="dim">&gt;&gt; bypass permissions on (shift+tab to cycle)</div>
+                                            <div class="cc-status">&nbsp;&nbsp;<span class="cc-cyan">~/Projects/herdr/website</span><span class="cc-gy"> &gt; </span><span class="cc-yellow">master *</span><span class="green"> ↑1</span><span class="cc-gy"> &gt; ctx ──────── </span><span class="green">3%</span><span class="cc-gy"> 31k/1M</span></div>
+                                            <div class="cc-status">&nbsp;&nbsp;<span class="cc-coral">⏵⏵ bypass permissions on</span> <span class="dim">(shift+tab to cycle)</span></div>
                                         </div>
                                     </div>
                                     <div class="mock-pane" data-title="bun">
@@ -295,8 +304,16 @@
                                 </div>
                                 <div class="mock-panes single active" data-tab="main">
                                     <div class="mock-pane focused tui">
-                                        <div class="cc-head"><span class="cc-mark">✻</span> <b>Claude Code</b> <span class="dim">v2.1.168</span></div>
-                                        <div class="dim">&nbsp;&nbsp;~/Projects/llm-proxy · master</div>
+                                        <div class="cc-header">
+                                            <pre class="cc-logo-art"> ▐▛███▜▌
+▝▜█████▛▘
+  ▘▘ ▝▝</pre>
+                                            <div class="cc-header-text">
+                                                <div><b>Claude Code</b> <span class="dim">v2.1.198</span></div>
+                                                <div class="dim">Fable 5 with high effort · Claude Max</div>
+                                                <div class="dim">~/Projects/llm-proxy</div>
+                                            </div>
+                                        </div>
                                         <br />
                                         <div><b>❯</b> prep the request-log migration and run it</div>
                                         <br />
@@ -381,54 +398,6 @@
                 </div>
             </section>
 
-            <section class="logo-cloud" aria-labelledby="logo-cloud-title">
-                <div class="logo-cloud-heading">
-                    <p class="section-kicker"># used in the wild</p>
-                    <h2 id="logo-cloud-title">Popular with engineers from</h2>
-                    <p class="logo-cloud-note">Individual engineers, not company endorsements.</p>
-                </div>
-                <div class="logo-marquee" aria-label="Company logos">
-                    <div class="logo-track">
-                        <div class="logo-row">
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/jetbrains.svg" alt="JetBrains" /><span>JetBrains</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/docker.svg" alt="Docker" /><span>Docker</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/vercel.svg" alt="Vercel" /><span>Vercel</span></div>
-                            <div class="logo-card"><img width="94" height="32" src="/assets/company-logos/kimi-with-icon-light.svg" alt="Kimi" /><span>Kimi</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/sentry.svg" alt="Sentry" /><span>Sentry</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/google.svg" alt="Google" /><span>Google</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/nvidia.svg" alt="NVIDIA" /><span>NVIDIA</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/aws.svg" alt="AWS" /><span>AWS</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/bytedance.svg" alt="ByteDance" /><span>ByteDance</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/tencent.svg" alt="Tencent" /><span>Tencent</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/alibaba.svg" alt="Alibaba" /><span>Alibaba</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/salesforce.svg" alt="Salesforce" /><span>Salesforce</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/ibm.svg" alt="IBM" /><span>IBM</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/atlassian.svg" alt="Atlassian" /><span>Atlassian</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/whop.svg?v=2" alt="Whop" /><span>Whop</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/automattic.svg" alt="Automattic" /><span>Automattic</span></div>
-                        </div>
-                        <div class="logo-row" aria-hidden="true">
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/jetbrains.svg" alt="" /><span>JetBrains</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/docker.svg" alt="" /><span>Docker</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/vercel.svg" alt="" /><span>Vercel</span></div>
-                            <div class="logo-card"><img width="94" height="32" src="/assets/company-logos/kimi-with-icon-light.svg" alt="" /><span>Kimi</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/sentry.svg" alt="" /><span>Sentry</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/google.svg" alt="" /><span>Google</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/nvidia.svg" alt="" /><span>NVIDIA</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/aws.svg" alt="" /><span>AWS</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/bytedance.svg" alt="" /><span>ByteDance</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/tencent.svg" alt="" /><span>Tencent</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/alibaba.svg" alt="" /><span>Alibaba</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/salesforce.svg" alt="" /><span>Salesforce</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/ibm.svg" alt="" /><span>IBM</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/atlassian.svg" alt="" /><span>Atlassian</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/whop.svg?v=2" alt="" /><span>Whop</span></div>
-                            <div class="logo-card"><img width="82" height="22" src="/assets/company-logos/automattic.svg" alt="" /><span>Automattic</span></div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
             <section class="section community-section" id="community" aria-labelledby="community-title">
                 <div class="section-heading-wide">
                     <div>
@@ -697,6 +666,68 @@ $ herdr</code></pre>
                 </div>
             </section>
 
+            <section class="section marketplace-teaser" id="marketplace">
+                <div class="marketplace-teaser-top">
+                    <div class="marketplace-teaser-copy">
+                        <p class="section-kicker"># marketplace</p>
+                        <h2>Make it yours.</h2>
+                        <p class="marketplace-teaser-lede">
+                            Review diffs beside the agent. Approve from your phone.
+                            Navigate like vim. Watch your agents graze as pixel-art
+                            sheep. If herdr doesn't do it, one of
+                            <span data-plugin-count>150+</span> community plugins
+                            does, or you publish your own with one GitHub topic.
+                        </p>
+                        <div class="hero-actions">
+                            <a class="button button-primary" href="/plugins/">Browse plugins</a>
+                            <a class="button button-secondary" href="/docs/plugins/">Build a plugin</a>
+                        </div>
+                    </div>
+                    <div class="marketplace-teaser-install">
+                        <div class="install-card" aria-label="Plugin install command">
+                            <span class="prompt">$</span>
+                            <code>herdr plugin install &lt;owner&gt;/&lt;repo&gt;</code>
+                        </div>
+                        <p class="marketplace-install-output"># any public repo tagged herdr-plugin</p>
+                        <p class="marketplace-install-note">
+                            <span data-plugin-count>150+</span> community plugins, auto-discovered from GitHub
+                        </p>
+                    </div>
+                </div>
+                <div class="marketplace-teaser-grid">
+                    <a class="mp-chip" href="https://github.com/smarzban/herdr-file-viewer" target="_blank" rel="noopener" data-repo="smarzban/herdr-file-viewer">
+                        <span class="mp-chip-name">smarzban/<b>herdr-file-viewer</b></span>
+                        <span class="mp-chip-desc">Git-aware file tree, diffs, and rendered markdown in a side pane.</span>
+                        <span class="mp-chip-meta">Rust</span>
+                    </a>
+                    <a class="mp-chip" href="https://github.com/persiyanov/herdr-reviewr" target="_blank" rel="noopener" data-repo="persiyanov/herdr-reviewr">
+                        <span class="mp-chip-name">persiyanov/<b>herdr-reviewr</b></span>
+                        <span class="mp-chip-desc">Review the agent's diff, comment on lines, send notes back to its prompt.</span>
+                        <span class="mp-chip-meta">Rust</span>
+                    </a>
+                    <a class="mp-chip" href="https://github.com/paulbkim-dev/vim-herdr-navigation" target="_blank" rel="noopener" data-repo="paulbkim-dev/vim-herdr-navigation">
+                        <span class="mp-chip-name">paulbkim-dev/<b>vim-herdr-navigation</b></span>
+                        <span class="mp-chip-desc">Ctrl+h/j/k/l moves seamlessly across herdr panes and vim splits.</span>
+                        <span class="mp-chip-meta">Shell</span>
+                    </a>
+                    <a class="mp-chip" href="https://github.com/yuk1ty/herdr-spreader" target="_blank" rel="noopener" data-repo="yuk1ty/herdr-spreader">
+                        <span class="mp-chip-name">yuk1ty/<b>herdr-spreader</b></span>
+                        <span class="mp-chip-desc">Whole workspace layouts, tabs, panes and commands, from one YAML file.</span>
+                        <span class="mp-chip-meta">Rust</span>
+                    </a>
+                    <a class="mp-chip" href="https://github.com/AltanS/collie" target="_blank" rel="noopener" data-repo="AltanS/collie">
+                        <span class="mp-chip-name">AltanS/<b>collie</b></span>
+                        <span class="mp-chip-desc">A phone PWA for your herd over Tailscale, with push when an agent needs you.</span>
+                        <span class="mp-chip-meta">TypeScript</span>
+                    </a>
+                    <a class="mp-chip" href="https://github.com/ragamo/herdr-flock" target="_blank" rel="noopener" data-repo="ragamo/herdr-flock">
+                        <span class="mp-chip-name">ragamo/<b>herdr-flock</b></span>
+                        <span class="mp-chip-desc">Your agents as pixel-art sheep on a farm. Ended sessions rest in the graveyard.</span>
+                        <span class="mp-chip-meta">Rust</span>
+                    </a>
+                </div>
+            </section>
+
             <section class="section capability-section">
                 <div class="section-heading-wide">
                     <div>
@@ -779,37 +810,6 @@ $ herdr</code></pre>
                 </p>
             </section>
 
-            <section class="section marketplace-teaser" id="marketplace">
-                <div class="marketplace-teaser-copy">
-                    <p class="section-kicker"># marketplace</p>
-                    <h2>Built on, not just with.</h2>
-                    <p class="marketplace-teaser-lede">
-                        Herdr's CLI and socket API are the plugin surface, so
-                        community plugins drive it like an agent does: notifiers,
-                        layout presets, link handlers, release checks. Browse what
-                        people built, or publish your own with one GitHub topic.
-                    </p>
-                    <div class="hero-actions">
-                        <a class="button button-primary" href="/plugins/">Browse plugins</a>
-                        <a class="button button-secondary" href="/docs/plugins/">Build a plugin</a>
-                    </div>
-                </div>
-                <div class="marketplace-teaser-grid">
-                    <a class="mp-chip" href="https://github.com/ogulcancelik/herdr-plugin-examples/tree/main/agent-telegram-notify" target="_blank" rel="noopener">
-                        <span class="mp-chip-name">Agent Telegram Notify</span>
-                        <span class="mp-chip-desc">Telegram message when an agent finishes.</span>
-                    </a>
-                    <a class="mp-chip" href="https://github.com/ogulcancelik/herdr-plugin-examples/tree/main/github-link-preview" target="_blank" rel="noopener">
-                        <span class="mp-chip-name">GitHub Link Preview</span>
-                        <span class="mp-chip-desc">Open clicked issue and PR links in a side pane.</span>
-                    </a>
-                    <a class="mp-chip" href="https://github.com/ogulcancelik/herdr-plugin-examples/tree/main/dev-layout-bootstrap" target="_blank" rel="noopener">
-                        <span class="mp-chip-name">Dev Layout Bootstrap</span>
-                        <span class="mp-chip-desc">A three-pane dev layout around the current pane.</span>
-                    </a>
-                </div>
-            </section>
-
             <section class="final-cta">
                 <p class="section-kicker"># start the herd</p>
                 <h2>Install Herdr, run two agents, detach once.</h2>
@@ -906,6 +906,48 @@ $ herdr</code></pre>
 
         <script>
             (function () {
+                fetch("https://assets.herdr.dev/plugins/index.json")
+                    .then(function (res) {
+                        return res.ok ? res.json() : null;
+                    })
+                    .then(function (data) {
+                        if (!data || !Array.isArray(data.plugins)) return;
+                        document.querySelectorAll("[data-plugin-count]").forEach(function (el) {
+                            el.textContent = String(data.plugins.length);
+                        });
+                        var byName = {};
+                        data.plugins.forEach(function (p) {
+                            byName[p.fullName] = p;
+                        });
+                        document.querySelectorAll(".mp-chip[data-repo]").forEach(function (chip) {
+                            var p = byName[chip.getAttribute("data-repo")];
+                            if (!p || typeof p.stars !== "number") return;
+                            var meta = chip.querySelector(".mp-chip-meta");
+                            if (meta) meta.textContent = "★ " + p.stars + " · " + meta.textContent;
+                        });
+                    })
+                    .catch(function () {});
+
+                fetch("https://assets.herdr.dev/stats/stats.json")
+                    .then(function (res) {
+                        return res.ok ? res.json() : null;
+                    })
+                    .then(function (data) {
+                        var stars = data && data.stars && data.stars.total;
+                        if (typeof stars !== "number") return;
+                        var compact =
+                            stars >= 1000
+                                ? (stars / 1000).toFixed(1).replace(/\.0$/, "") + "k"
+                                : String(stars);
+                        document.querySelectorAll("[data-stat-stars]").forEach(function (el) {
+                            el.textContent = compact;
+                        });
+                    })
+                    .catch(function () {});
+            })();
+        </script>
+        <script>
+            (function () {
                 var overlay = document.getElementById("theme-overlay");
                 var list = document.getElementById("theme-overlay-list");
                 var hintLabel = document.getElementById("theme-hint-label");
@@ -1083,38 +1125,6 @@ $ herdr</code></pre>
             })();
 
             (function () {
-                var reduceMotion = window.matchMedia(
-                    "(prefers-reduced-motion: reduce)",
-                ).matches;
-                if (reduceMotion) return;
-
-                document.querySelectorAll(".logo-marquee").forEach(function (marquee) {
-                    var track = marquee.querySelector(".logo-track");
-                    if (!track || !track.getAnimations) return;
-
-                    function setPlaybackRate(rate) {
-                        var animation = track.getAnimations().find(function (candidate) {
-                            return candidate.animationName === "logo-marquee";
-                        });
-                        if (!animation) return;
-
-                        if (animation.updatePlaybackRate) {
-                            animation.updatePlaybackRate(rate);
-                        } else {
-                            animation.playbackRate = rate;
-                        }
-                    }
-
-                    marquee.addEventListener("mouseenter", function () {
-                        setPlaybackRate(0.6);
-                    });
-                    marquee.addEventListener("mouseleave", function () {
-                        setPlaybackRate(1);
-                    });
-                });
-            })();
-
-            (function () {
                 var copyButton = document.getElementById("copy-btn");
                 var command = document.getElementById("install-cmd");
                 var methods = Array.prototype.slice.call(