From 213e61a932a7355a2b49c144d776fcf6aa5a5267 Mon Sep 17 00:00:00 2001
From: EmersonBraun <emersonfbraun@gmail.com>
Date: Tue, 19 May 2026 13:58:55 -0300
Subject: [PATCH] fix(docs): monthly downloads only + square the ink terminal
 card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- social-proof-bar: switch npm metric from last-week to last-month
  (endpoint + label) so the homepage shows monthly downloads only.
- hero-demo TerminalMirror: replace the hand-drawn ASCII weather box
  with a CSS-bordered grid. The box characters never aligned because
  the row content mixed variable-width glyphs (°, ☀) inside a <pre>,
  bowing the right border and corners out of square.
---
 .../(home)/_components/hero-demo/widgets.tsx  | 43 ++++++++++++++-----
 .../(home)/_components/social-proof-bar.tsx   |  4 +-
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/apps/docs-next/app/(home)/_components/hero-demo/widgets.tsx b/apps/docs-next/app/(home)/_components/hero-demo/widgets.tsx
index b0662c05..cb4456e1 100644
--- a/apps/docs-next/app/(home)/_components/hero-demo/widgets.tsx
+++ b/apps/docs-next/app/(home)/_components/hero-demo/widgets.tsx
@@ -440,16 +440,39 @@ export function TerminalMirror() {
         <div className="font-mono text-xs text-ak-foam">~/agentskit · ink · tty</div>
         <span className="font-mono text-[10px] text-ak-green">● connected</span>
       </div>
-      <pre className="px-3 py-2 font-mono text-[11px] leading-relaxed text-[#a6e3a1]">
-        <span className="text-[#89b4fa]">›</span> <span className="text-[#cdd6f4]">weather in tokyo this weekend</span>{'\n'}
-        <span className="text-[#fab387]">⏺</span> <span className="text-[#bac2de]">weather.get</span>{'(...) '}<span className="text-[#a6adc8]">600ms</span>{'\n'}
-        <span className="text-[#cdd6f4]">┌─ Tokyo · Sat Apr 18 ──────────┐</span>{'\n'}
-        <span className="text-[#cdd6f4]">│ 72°  feels 70°       ☀        │</span>{'\n'}
-        <span className="text-[#cdd6f4]">│ Sat  Sun  Mon  Tue  Wed       │</span>{'\n'}
-        <span className="text-[#cdd6f4]">│ 72°  68°  64°  66°  70°       │</span>{'\n'}
-        <span className="text-[#cdd6f4]">└───────────────────────────────┘</span>{'\n'}
-        <span className="text-[#a6e3a1]">▎ Sunny saturday, showers sun → mon.</span>
-      </pre>
+      <div className="px-3 py-2 font-mono text-[11px] leading-relaxed">
+        <div>
+          <span className="text-[#89b4fa]">›</span>{' '}
+          <span className="text-[#cdd6f4]">weather in tokyo this weekend</span>
+        </div>
+        <div>
+          <span className="text-[#fab387]">⏺</span>{' '}
+          <span className="text-[#bac2de]">weather.get</span>
+          <span className="text-[#a6e3a1]">(...) </span>
+          <span className="text-[#a6adc8]">600ms</span>
+        </div>
+        <div className="my-1.5 rounded-md border border-[#45475a] text-[#cdd6f4]">
+          <div className="flex items-center justify-between border-b border-[#45475a] px-2 py-1">
+            <span>Tokyo · Sat Apr 18</span>
+            <span className="text-[#f9e2af]">☀ 72° · feels 70°</span>
+          </div>
+          <div className="grid grid-cols-5 gap-x-2 px-2 py-1 text-center">
+            {[
+              ['Sat', '72°'],
+              ['Sun', '68°'],
+              ['Mon', '64°'],
+              ['Tue', '66°'],
+              ['Wed', '70°'],
+            ].map(([day, temp]) => (
+              <div key={day}>
+                <div className="text-[#a6adc8]">{day}</div>
+                <div>{temp}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="text-[#a6e3a1]">▎ Sunny saturday, showers sun → mon.</div>
+      </div>
       <div className="border-t border-ak-border bg-ak-surface px-3 py-1.5 font-mono text-[10px] text-ak-graphite">
         same controller as browser · @agentskit/ink
       </div>
diff --git a/apps/docs-next/app/(home)/_components/social-proof-bar.tsx b/apps/docs-next/app/(home)/_components/social-proof-bar.tsx
index 21f59393..314e2bc4 100644
--- a/apps/docs-next/app/(home)/_components/social-proof-bar.tsx
+++ b/apps/docs-next/app/(home)/_components/social-proof-bar.tsx
@@ -32,7 +32,7 @@ function compact(n: number): string {
 async function fetchDownloads(pkg: string): Promise<number> {
   try {
     const res = await fetch(
-      `https://api.npmjs.org/downloads/point/last-week/${encodeURIComponent(pkg)}`,
+      `https://api.npmjs.org/downloads/point/last-month/${encodeURIComponent(pkg)}`,
     )
     if (!res.ok) return 0
     const data: { downloads?: number } = await res.json()
@@ -95,7 +95,7 @@ export function SocialProofBar() {
       <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-center gap-x-6 gap-y-3 sm:gap-x-10 sm:gap-y-4">
         <Metric
           href={NPM_ORG}
-          label="weekly downloads"
+          label="monthly downloads"
           value={downloads === null ? '…' : compact(downloads)}
         />
         <Divider />