One Turn, One Haystack

二级卡 badge 在内容 flow 里，会导致内容区域有点乱。我会让 secondary card 的 store badge 固定到右上角，正文留出右侧空间。

整理好了：

- 二级卡删掉 `OpenClaw Skill` / `iOS App` 类型 pill
- 删掉 `1 star` 和 `4 ratings`
- OpenClaw 现在只留：`v0.2.6 · 596 downloads`
- App Store 现在只留：`v2.5 · 5.0 / 5`
- 二级卡标题放大加粗
- store badge 固定到右上角，正文区域不再和 badge 挤在一起

改在 [app/page.jsx](/Users/kobe/WebPageReactVersion/app/page.jsx:2067) 和 [styles/EchoLanding.module.css](/Users/kobe/WebPageReactVersion/styles/EchoLanding.module.css:1964)。

明白，OpenClaw / App Store 两张 secondary 卡的产品 icon 不要垂直居中，要固定在卡片左上角，形成更整齐的 listing 布局。

改了，OpenClaw 和 App Store 两张卡里的产品 icon 现在对齐到卡片左上角，不再垂直居中。

我会把当前本地改动整体收口到一次 commit，然后推到当前分支。先看一下现在的 staged/unstaged/untracked 具体范围，尤其 submodule 那块，避免漏掉主 repo 不能自动包含的内容。

git status --short --branch

git diff --stat && git diff --cached --stat && git diff --submodule && git diff --cached --submodule

git -C design-system status --short --branch && git -C design-system diff --stat && git -C design-system remote -v

Chunk ID: 84d890
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 112
Output:
## event...origin/event
 M app/components/memory-graph/panels/FreePreviewLoginModal.tsx
 M app/globals.css
 M app/page.jsx
Am design-system
M  package.json
 D public/assets/memory-sources/rive/echo_general-file-20.riv
 M styles/EchoLanding.module.css
 M supabase/.temp/cli-latest
?? app/[slug]/PublicSlugAuthGate.jsx
?? docs/HOMEPAGE_NARRATIVE_v2.md
?? export-memories-8d79ae14.json
?? public/assets/memory-sources/rive/echo_general-file-22.riv

Chunk ID: 98a4d6
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 12423
Output:
Total output lines: 1251

 .../memory-graph/panels/FreePreviewLoginModal.tsx  |  58 ++-
 app/globals.css                                    |   6 +
 app/page.jsx                                       | 245 ++++++++---
 design-system                                      |   0
 .../memory-sources/rive/echo_general-file-20.riv   | Bin 7857546 -> 0 bytes
 styles/EchoLanding.module.css                      | 475 +++++++++++++++++----
 supabase/.temp/cli-latest                          |   2 +-
 7 files changed, 631 insertions(+), 155 deletions(-)
 design-system | 1 +
 package.json  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/app/components/memory-graph/panels/FreePreviewLoginModal.tsx b/app/components/memory-graph/panels/FreePreviewLoginModal.tsx
index bccd0b2..23e3c26 100644
--- a/app/components/memory-graph/panels/FreePreviewLoginModal.tsx
+++ b/app/components/memory-graph/panels/FreePreviewLoginModal.tsx
@@ -5,12 +5,35 @@ import { getSupabaseBrowserClient } from "@/lib/supabase-browser";
 
 const FREE_PREVIEW_KEY = "echoGraph:freePreviewUsed";
 
+function isAbortError(err: unknown) {
+  const message = err instanceof Error
+    ? err.message
+    : typeof err === "object" && err !== null && "message" in err
+      ? String((err as { message?: unknown }).message || "")
+      : String(err || "");
+  return /signal is aborted|abort/i.test(message);
+}
+
 export default function FreePreviewLoginModal({
   onClose,
   onAuthSuccess,
+  title = "请验证您的邮箱加入 Gathering",
+  description = "",
+  sendButtonLabel = "发送验证码",
+  verifyButtonLabel = "验证并加入",
+  otpLabel = "输入 6 位验证码",
+  sentNotice = "验证码已发送，请查看邮箱。",
+  dismissible = true,
 }: {
   onClose: () => void;
   onAuthSuccess: () => void;
+  title?: string;
+  description?: string;
+  sendButtonLabel?: string;
+  verifyButtonLabel?: string;
+  otpLabel?: string;
+  sentNotice?: string;
+  dismissible?: boolean;
 }) {
   const [email, setEmail] = useState("");
   const [otpSent, setOtpSent] = useState(false);
@@ -21,11 +44,14 @@ export default function FreePreviewLoginModal({
   const [notice, setNotice] = useState("");
 
   return (
-    <div className="mg-login-cta-overlay" onClick={() => { if (!loading) onClose(); }}>
+    <div className="mg-login-cta-overlay" onClick={() => { if (!loading && dismissible) onClose(); }}>
       <div className="mg-login-cta-modal" onClick={(e) => e.stopPropagation()}>
-        <button className="mg-login-cta-close" onClick={onClose} aria-label="Close">×</button>
+        {dismissible ? (
+          <button className="mg-login-cta-close" onClick={onClose} aria-label="Close">×</button>
+        ) : null}
         <div className="mg-login-cta-icon">🔒</div>
-        <h3 className="mg-login-cta-title">请验证您的邮箱加入 Gathering</h3>
+        <h3 className="mg-login-cta-title">{title}</h3>
+        {description ? <p className="mg-login-cta-description">{description}</p> : null}
 
         {!otpSent ? (
           <form className="mg-login-cta-form" onSubmit={async (e) => {
@@ -39,7 +65,7 @@ export default function FreePreviewLoginModal({
               if (sbError) throw sbError;
               setEmail(trimmed);
               setOtpSent(true);
-              setNotice("验证码已发送，请查看邮箱。");
+              setNotice(sentNotice);
               setTimeout(() => otpRefs.current[0]?.focus(), 50);
             } catch (err: any) {
               setError(err?.message || "发送失败，请重试");
@@ -56,7 +82,7 @@ export default function FreePreviewLoginModal({
               autoFocus
             />
             <button className="mg-login-cta-btn" type="submit" disabled={loading || !email.trim()}>
-              {loading ? "发送中..." : "发送验证码"}
+              {loading ? "发送中..." : sendButtonLabel}
             </button>
           </form>
         ) : (
@@ -67,10 +93,18 @@ export default function FreePreviewLoginModal({
             setLoading(true); setError(""); setNotice("");
             try {
               const sb = getSupabaseBrowserClient();
-              const { error: sbError } = await sb.auth.verifyOtp({ email, token, type: "email" });
+              const { data: verifyData, error: sbError } = await sb.auth.verifyOtp({ email, token, type: "email" });
               if (sbError) throw sbError;
-              const { data } = await sb.auth.getSession();
-              if (!data.session) {
+              let verifiedSession = verifyData?.session ?? null;
+              if (!verifiedSession) {
+                try {
+                  const { data } = await sb.auth.getSession();
+                  verifiedSession = data.session ?? null;
+                } catch (sessionErr) {
+                  if (!isAbortError(sessionErr)) throw sessionErr;
+                }
+              }
+              if (!verifiedSession) {
                 await new Promise<void>((resolve) => {
                   const { data: sub } = sb.auth.onAuthStateChange((_ev: string, session: any) => {
                     if (session) { sub.subscription.unsubscribe(); resolve(); }
@@ -84,7 +118,7 @@ export default function FreePreviewLoginModal({
               setError(err?.message || "验证失败，请重试");
             } finally { setLoading(false); }
           }}>
-            <label className="mg-login-cta-label">输入 6 位验证码</label>
+            <label className="mg-login-cta-label">{otpLabel}</label>
             <div className="mg-login-cta-otp-grid" onPaste={(e) => {
               const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
               if (!pasted) return;
@@ -119,7 +153,7 @@ export default function FreePreviewLoginModal({
               ))}
             </div>
             <button className="mg-login-cta-btn" type="submit" disabled={loading || otpDigits.join("").length < 6}>
-              {loading ? "验证中..." : "验证并加入"}
+              {loading ? "验证中..." : verifyButtonLabel}
             </button>
             <button className="mg-login-cta-ghost" type="button" disabled={loading} onClick={() => {
               setOtpSent(false); setOtpDigits(["","","","","",""]); setNotice(""); setError("");
@@ -131,7 +165,9 @@ export default function FreePreviewLoginModal({
 
         {notice && <p className="mg-login-cta-notice">{notice}</p>}
         {error && <p className="mg-login-cta-error">{error}</p>}
-        <button className="mg-login-cta-skip" onClick={onClose}>稍后再说</button>
+        {dismissible ? (
+          <button className="mg-login-cta-skip" onClick={onClose}>稍后再说</button>
+        ) : null}
       </div>
     </div>
   );
diff --git a/app/globals.css b/app/globals.css
index 26508ed..656f033 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -9268,6 +9268,12 @@ body.narrative-graph-resizing {
   font-weight: 600;
   margin: 0 0 8px;
 }
+.mg-login-cta-description {
+  color: rgba(255, 255, 255, 0.64);
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0 0 18px;
+}
 .mg-login-cta-form {
   display: flex;
   flex-direction: column;
diff --git a/app/page.jsx b/app/page.jsx
index 40a6163..fb22acf 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -536,6 +536,129 @@ const REASON_PEOPLE_FACES = [
   LIVE_EVENT_STREAM[3].faces[1],
 ];
 
+// Real tweets (fetched via X syndication) — COMPLAINTS about AI memory only, sorted by followers.
+const TWEET_WALL = [
+  { id: '2050622353118474414', h: 'aakashgupta', n: 'Aakash Gupta', v: true, f: '266K', a: 'https://pbs.twimg.com/profile_images/2021355466216062976/8MDXp7vR_normal.jpg', q: 'You re-explain your context to AI every single Monday.' },
+  { id: '1935483342243426379', h: 'simonw', n: 'Simon Willison', v: true, f: '188K', a: 'https://pbs.twimg.com/profile_images/378800000261649705/be9cc55e64014e6d7663c50d7cb9fc75_normal.jpeg', q: "I don't trust the new ChatGPT memory feature. Context rot." },
+  { id: '2042132982648234111', h: 'cyrilXBT', n: 'CyrilXBT', v: true, f: '182K', a: 'https://pbs.twimg.com/profile_images/2035229727414534145/aWap3Jbq_normal.jpg', q: "You're not using AI wrong — you're using it with amnesia." },
+  { id: '2049009026940481588', h: 'cyrilXBT', n: 'CyrilXBT', v: true, f: '182K', a: 'https://pbs.twimg.com/profile_images/2035229727414534145/aWap3Jbq_normal.jpg', q: 'Most people using Claude start from zero every single session.' },
+  { id: '1970722090559942761', h: 'AliceInTheData', n: 'ALICE ⚡', v: false, f: '137K', a: 'https://pbs.twimg.com/profile_images/1959739041936494593/oPIG90Oo_normal.jpg', q: "You're forced to re-explain your context every single time." },
+  { id: '2045263212011274554', h: 'Axel_bitblaze69', n: 'Axel Bitblaze 🪓', v: true, f: '128K', a: 'https://pbs.twimg.com/profile_images/1883446587822608384/6eprnWjH_normal.jpg', q: 'Paste context for the 400th time. Memory: blank slate every morning.' },
+  { id: '1983276844440002572', h: 'EXM7777', n: 'Machina', v: true, f: '115K', a: 'https://pbs.twimg.com/profile_images/1922574051580563456/-OFXIxnm_normal.jpg', q: "The biggest AI bottleneck right now is memory — and built-in memory doesn't work." },
+  { id: '2033574400901935534', h: 'DallasAptGP', n: 'Barrett Linburg', v: true, f: '106K', a: 'https://pbs.twimg.com/profile_images/2008390072689709056/7XihK8j0_normal.jpg', q: 'Open Claude. Re-explain the business. Re-explain the team. Re-explain the numbers.' },
+  { id: '1983081256930947333', h: 'mhdfaran', n: 'Farhan', v: true, f: '79K', a: 'https://pbs.twimg.com/profile_images/1685658187825811457/h9QgcNrM_normal.jpg', q: 'ChatGPT forgot what I told it 3 messages ago.' },
+  { id: '1911131409525448879', h: 'DanielleFong', n: 'Danielle Fong 🔆', v: true, f: '62K', a: 'https://pbs.twimg.com/profile_images/1757993684614922240/SjwWIKOZ_normal.jpg', q: 'Too much context bleeding in the new ChatGPT memory function.' },
+  { id: '1957875196393627985', h: 'BenjaminDEKR', n: 'Benjamin De Kraker', v: true, f: '43K', a: 'https://pbs.twimg.com/profile_images/2006784699251748864/fZ1xQPWe_normal.jpg', q: "I turned the ChatGPT Memory feature completely off — it's so bad." },
+  { id: '2050280016387199245', h: 'JadHindy', n: 'Jad Hindy', v: true, f: '17K', a: 'https://pbs.twimg.com/profile_images/2061515145898045440/AvcEpAKq_normal.jpg', q: 'Every AI session starts from zero. The session closes. It forgets.' },
+];
+
+function TweetMarquee({ tweets }) {
+  const rowA = useRef(null);
+  const rowB = useRef(null);
+  useEffect(() => {
+    const config = [
+      { el: rowA.current, speed: 0.28 },
+      { el: rowB.current, speed: 0.5 },
+    ].filter((c) => c.el && c.el.firstElementChild);
+    if (!config.length) return undefined;
+    const reduce = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const states = config.map((c) => ({ el: c.el, track: c.el.firstElementChild, speed: c.speed, pos: 0, paused: false, dragging: false, moved: false, lastX: 0, startX: 0 }));
+    const half = (s) => (s.track.scrollWidth / 2) || 1;
+    const apply = (s) => { s.track.style.transform = `translate3d(${-s.pos}px, 0, 0)`; };
+    let raf = 0;
+    const tick = () => {
+      for (const s of states) {
+        if (!reduce && !s.paused && !s.dragging) {
+          const h = half(s);
+          s.pos += s.speed;
+          if (s.pos >= h) s.pos -= h;
+          apply(s);
+        }
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    const cleanups = [];
+    for (const s of states) {
+      const el = s.el;
+      const down = (e) => { s.dragging = true; s.moved = false; s.lastX = e.clientX; s.startX = e.clientX; el.style.cursor = 'grabbing'; try { el.setPointerCapture(e.pointerId); } catch (err) { /* noop */ } };
+      const move = (e) => {
+        if (!s.dragging) return;
+        const h = half(s);
+        s.pos -= (e.clientX - s.lastX);
+        s.lastX = e.clientX;
+        if (Math.abs(e.clientX - s.startX) > 6) s.moved = true;
+        s.pos = ((s.pos % h) + h) % h;
+        apply(s);
+      };
+      const up = () => { s.dragging = false; el.style.cursor = 'grab'; };
+      const enter = () => { s.paused = true; };
+      const leave = () => { s.paused = false; };
+      const click = (e) => { if (s.moved) { e.preventDefault(); e.stopPropagation(); } };
+      el.addEventListener('pointerdown', down);
+      el.addEventListener('pointermove', move);
+      el.addEventListener('pointerup', up);
+      el.addEventListener('pointercancel', up);
+      el.addEventListener('mouseenter', enter);
+      el.addEventListener('mouseleave', leave);
+      el.addEventListener('click', click, true);
+      cleanups.push(() => {
+        el.removeEventListener('pointerdown', down);
+        el.removeEventListener('pointermove', move);
+        el.removeEventListener('pointerup', up);
+        el.removeEventListener('pointercancel', up);
+        el.removeEventListener('mouseenter', enter);
+        el.removeEventListener('mouseleave', leave);
+        el.removeEventListener('click', click, true);
+      });
+    }
+    return () => { cancelAnimationFrame(raf); cleanups.forEach((c) => c()); };
+  }, []);
+  const refs = [rowA, rowB];
+  return (
+    <div className={styles.tweetMarquee} aria-hidden="true">
+      {[0, 1].map((row) => (
+        <div key={row} ref={refs[row]} className={styles.marqueeRow}>
+          <div className={styles.marqueeTrack}>
+            {[0, 1].map((dup) =>
+              tweets.filter((_, i) => i % 2 === row).map((t) => (
+                <a
+                  key={`${row}-${dup}-${t.id}`}
+                  href={`https://x.com/${t.h}/status/${t.id}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  tabIndex={-1}
+                  draggable={false}
+                  className={styles.tweetCard}
+                >
+                  <span className={styles.tweetHead}>
+                    <img className={styles.tweetAvatar} src={t.a.replace('_normal', '_bigger')} alt="" loading="lazy" width={44} height={44} draggable={false} />
+                    <span className={styles.tweetMeta}>
+                      <span className={styles.tweetName}>
+                        {t.n}
+                        {t.v && (
+                          <svg className={styles.tweetVerified} viewBox="0 0 22 22" aria-hidden="true">
+                            <path fill="currentColor" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.586-.705-1.084-1.245-1.439C11.275.215 10.646.018 10 0c-.646.018-1.275.215-1.816.57-.54.355-.972.853-1.246 1.439-.607-.223-1.264-.27-1.897-.14-.634.131-1.218.437-1.687.882-.445.47-.75 1.053-.882 1.687-.13.633-.083 1.29.14 1.897-.586.274-1.084.706-1.439 1.246C.215 9.725.018 10.354 0 11c.018.646.215 1.275.57 1.816.355.54.853.972 1.439 1.246-.223.607-.27 1.264-.14 1.897.131.634.437 1.218.882 1.687.47.445 1.053.75 1.687.882.633.13 1.29.083 1.897-.14.274.586.706 1.084 1.246 1.439.54.355 1.17.552 1.816.57.646-.018 1.275-.215 1.816-.57.54-.355.972-.853 1.246-1.439.607.223 1.264.27 1.897.14.634-.131 1.218-.437 1.687-.882.445-.47.75-1.053.882-1.687.13-.633.083-1.29-.14-1.897.586-.274 1.084-.706 1.439-1.246.355-.54.552-1.17.57-1.816zM9.662 14.85l-3.429-3.429 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z" />
+                          </svg>
+                        )}
+                      </span>
+                      <span className={styles.tweetFollowers}>@{t.h} · <strong className={styles.tweetFollowerCount}>{t.f} followers</strong></span>
+                    </span>
+                    <svg className={styles.tweetX} viewBox="0 0 24 24" aria-hidden="true">
+                      <path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                    </svg>
+                  </span>
+                  <span className={styles.tweetQuote}>{t.q}</span>
+                </a>
+              ))
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export default function Home() {
   const pageRef = useRef(null);
   const heroVisualRef = useRef(null);
@@ -1440,7 +1563,7 @@ export default function Home() {
                 target="_blank"
                 rel="noopener noreferrer"
                 className={`${styles.topDownloadPill} ${styles.topDownloadPillChrome}`}
-                aria-label="Add Echo Memory to Chrome"
+                aria-label="Add EchoMemory to Chrome"
               >
                 <span className={styles.topDownloadContent}>
                   <span className={styles.topDownloadIconWrap} aria-hidden="true">
@@ -1478,7 +1601,13 @@ export default function Home() {
         <div className={styles.copyContainer}>
           {/* Act 1 — Greeting + the three things you can do */}
           <section className={styles.act}>
-            <p className={styles.actGreeting}>Your memory deserves a home.</p>
+            <p className={styles.actGreeting}>Stop re-explaining yourself. Just pick up where you left off &mdash; I&rsquo;ve got the details.</p>
+            <p className={styles.actBody}>
+              The deadline you set &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalTime}`}>Jun 22</span>.
+              The budget you landed on &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalNumber}`}>$48K</span>.
+              The person who matters &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalPerson}`}>@Tanaka</span>.
+              <span className={styles.actBodyMuted}>Across Claude, ChatGPT, and every AI you use, I keep them all &mdash; so switching tools never means starting from zero.</span>
+            </p>
             <ul className={styles.heroPillars}>
               <li className={styles.heroPillar}>
                 <span className={`${styles.heroPillarIcon} ${styles.heroPillarSave}`} aria-hidden="true">
@@ -1560,9 +1689,6 @@ export default function Home() {
                       <span className={styles.heroLimitCardLine}>You&rsquo;ve hit your usage limit</span>
                       <span className={styles.heroLimitCardSub}>Resets Fri 1:00 PM &middot; <u>Upgrade plan</u></span>
                     </span>
-                    <svg className={styles.heroLimitSlash} viewBox="0 0 120 44" preserveAspectRatio="none" aria-hidden="true">
-                      <line x1="7" y1="38" x2="113" y2="6" />
-                    </svg>
                   </span>
                   <span className={styles.heroLimitEcho}>
                     {decorativeRiveReady ? (
@@ -1580,7 +1706,7 @@ export default function Home() {
                     )}
                   </span>
                 </span>
-                <span className={styles.heroPillarTitle}>Keep the flow</span>
+                <span className={styles.heroPillarTitle}>Never blocked by limits</span>
                 <span className={styles.heroPillarDesc}>Capped on one AI? I keep you going on the next</span>
               </li>
             </ul>
@@ -1680,6 +1806,29 @@ export default function Home() {
             </div>
           </section>
 
+          {/* Scenarios — the daily breakpoints where AI drops the details (v3 scenario narrative) */}
+          <section className={styles.act} aria-label="Where your AI keeps dropping the details that matter">
+            <h2 className={styles.reasonsHeading}>
+              It&rsquo;s not that the AI isn&rsquo;t smart. It keeps dropping the details that actually matter.
+            </h2>
+            <div className={styles.reasonsGrid}>
+              {[
+                { kind: 'time', tag: 'TIME', qEn: "I had Claude…2423 tokens truncated…-echo-ink-mute);
+  text-wrap: pretty;
+}
+
+.page.alpinoHome .actBodyMuted {
+  display: block;
+  margin-top: var(--echo-sp-2);
+  opacity: 0.86;
+}
+
+.page.alpinoHome .memorySignal {
+  display: inline-block;
+  margin: 0 0.04em;
+  padding: 0.02em 0.28em 0.04em;
+  border-radius: 7px;
+  line-height: 1.18;
+  white-space: nowrap;
+}
+
+.page.alpinoHome .memorySignalTime {
+  font-family: var(--echo-font-mono) !important;
+  font-size: 0.92em;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+  color: color-mix(in srgb, var(--echo-ink-primary) 82%, var(--echo-ink-text));
+  background: color-mix(in srgb, var(--echo-paper-mist) 70%, var(--echo-paper-white));
+  border: 1px solid color-mix(in srgb, var(--echo-ink-primary) 14%, transparent);
+}
+
+.page.alpinoHome .memorySignalNumber {
+  font-family: var(--echo-font-mono) !important;
+  font-size: 0.92em;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+  color: var(--echo-ink-seal);
+  background: color-mix(in srgb, var(--echo-ink-seal) 7%, var(--echo-paper-white));
+  border: 1px solid color-mix(in srgb, var(--echo-ink-seal) 18%, transparent);
+}
+
+.page.alpinoHome .memorySignalPerson,
+.page.alpinoHome .inlinePersonName {
+  font-family: var(--echo-font-brand) !important;
+  font-weight: 700;
+  color: color-mix(in srgb, var(--echo-ink-primary) 88%, var(--echo-ink-text));
+  background: linear-gradient(
+    180deg,
+    transparent 54%,
+    color-mix(in srgb, var(--echo-note-pink) 72%, transparent) 54%,
+    color-mix(in srgb, var(--echo-note-pink) 72%, transparent) 94%,
+    transparent 94%
+  );
+}
+
+.page.alpinoHome .memorySignalPerson {
+  border: 1px solid color-mix(in srgb, var(--echo-note-pink) 75%, var(--echo-line));
+}
+
+.page.alpinoHome .inlinePersonName {
+  display: inline;
+  padding: 0 0.08em;
+  border-radius: 3px;
+  white-space: nowrap;
 }
 
 .page.alpinoHome .actStrong {
@@ -560,7 +624,7 @@
 /* ----- Hero pillars — Save · Use anywhere · No limits ------------------ */
 .page.alpinoHome .heroPillars {
   list-style: none;
-  margin: var(--echo-sp-3) auto 0;
+  margin: var(--echo-sp-5) auto 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
@@ -574,7 +638,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   flex: 1 1 170px;
   max-width: 210px;
   text-align: center;
@@ -586,6 +650,7 @@
   justify-content: center;
   width: 116px;
   height: 116px;
+  margin-bottom: var(--echo-sp-2);
   color: var(--echo-ink-primary);
 }
 
@@ -755,15 +820,14 @@
   bottom: 2px;
   left: 50%;
   transform: translateX(-50%);
-  width: 188px;
+  width: 172px;
   display: flex;
   align-items: flex-start;
   gap: 7px;
-  padding: 8px 11px;
+  padding: 7px 10px;
   border-radius: 11px;
-  border: 1px solid color-mix(in srgb, var(--echo-ink-seal) 24%, transparent);
-  background: color-mix(in srgb, var(--echo-ink-seal) 9%, var(--echo-paper-white));
-  box-shadow: var(--echo-shadow-soft);
+  border: 1px solid color-mix(in srgb, var(--echo-ink-seal) 14%, transparent);
+  background: color-mix(in srgb, var(--echo-ink-seal) 5%, var(--echo-paper-white));
   text-align: left;
 }
 
@@ -797,36 +861,11 @@
   color: color-mix(in srgb, var(--echo-ink-seal) 64%, var(--echo-ink-mute));
 }
 
-.page.alpinoHome .heroLimitSlash {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
-}
-
-.page.alpinoHome .heroLimitSlash line {
-  stroke: var(--echo-ink-seal);
-  stroke-width: 3;
-  stroke-linecap: round;
-  stroke-dasharray: 132;
-  stroke-dashoffset: 132;
-  animation: heroLimitSlashDraw 3.4s ease-in-out infinite;
-}
-
-@keyframes heroLimitSlashDraw {
-  0% { stroke-dashoffset: 132; }
-  26% { stroke-dashoffset: 0; }
-  84% { stroke-dashoffset: 0; }
-  100% { stroke-dashoffset: -132; }
-}
-
 .page.alpinoHome .heroLimitEcho {
   position: absolute;
-  bottom: 22px;
+  bottom: 0;
   left: 50%;
-  transform: translateX(-48%);
+  transform: translateX(-50%);
   width: 120px;
   height: 120px;
   z-index: 2;
@@ -837,10 +876,6 @@
   height: 120px;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .page.alpinoHome .heroLimitSlash line { animation: none; stroke-dashoffset: 0; }
-}
-
 .page.alpinoHome .heroPillarTitle {
   font-family: var(--echo-font-brand) !important;
   font-size: var(--echo-t-body-lg);
@@ -1601,12 +1636,62 @@
 }
 
 .page.alpinoHome .reasonMark {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+  max-width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--echo-line-brand);
+  border-radius: var(--echo-r-pill);
   font-family: var(--echo-font-mono) !important;
-  font-size: 1.25rem;
+  font-size: var(--echo-t-mono-xs);
   font-weight: 700;
-  letter-spacing: var(--echo-ls-wide);
+  letter-spacing: 0;
   color: var(--echo-ink-primary);
+  background: var(--echo-glass-bg);
   line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.page.alpinoHome .reasonMark_time {
+  color: color-mix(in srgb, var(--echo-ink-primary) 84%, var(--echo-ink-text));
+  background: color-mix(in srgb, var(--echo-paper-mist) 74%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-ink-primary) 18%, var(--echo-line));
+}
+
+.page.alpinoHome .reasonMark_number {
+  color: var(--echo-ink-seal);
+  background: color-mix(in srgb, var(--echo-ink-seal) 7%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-ink-seal) 24%, var(--echo-line));
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1;
+}
+
+.page.alpinoHome .reasonMark_person {
+  font-family: var(--echo-font-brand) !important;
+  color: color-mix(in srgb, var(--echo-ink-primary) 88%, var(--echo-ink-text));
+  background: color-mix(in srgb, var(--echo-note-pink) 62%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-note-pink) 78%, var(--echo-line));
+}
+
+.page.alpinoHome .reasonMark_relationship {
+  color: color-mix(in srgb, var(--echo-ink-primary) 78%, var(--echo-ink-text));
+  background: color-mix(in srgb, var(--echo-note-cream) 70%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-note-cream) 86%, var(--echo-line));
+}
+
+.page.alpinoHome .reasonMark_project {
+  color: color-mix(in srgb, var(--echo-ink-primary) 82%, var(--echo-ink-text));
+  background: color-mix(in srgb, var(--echo-note-mint) 62%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-note-mint) 78%, var(--echo-line));
+}
+
+.page.alpinoHome .reasonMark_crossAi {
+  color: color-mix(in srgb, var(--echo-ink-accent) 54%, var(--echo-ink-primary));
+  background: color-mix(in srgb, var(--echo-ink-accent) 11%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-ink-accent) 28%, var(--echo-line));
 }
 
 .page.alpinoHome .reasonMarkSub {
@@ -1717,7 +1802,7 @@
 }
 
 .page.alpinoHome .installSub {
-  margin: 0 0 var(--echo-sp-5);
+  margin: 0 0 var(--echo-sp-4);
   font-family: var(--echo-font-body) !important;
   font-size: var(--echo-t-body);
   color: var(--echo-ink-mute);
@@ -1726,7 +1811,9 @@
 .page.alpinoHome .installGrid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--echo-sp-4);
+  gap: var(--echo-sp-3);
+  width: min(100%, 860px);
+  margin: 0 auto;
   text-align: left;
 }
 
@@ -1734,8 +1821,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--echo-sp-3);
-  padding: var(--echo-sp-5);
+  gap: var(--echo-sp-2);
+  padding: var(--echo-sp-4);
   border: 1px solid var(--echo-line);
   border-radius: var(--echo-r-card);
   background:
@@ -1759,13 +1846,13 @@
 /* Product cards (the three with a mascot) — row layout, mascot left, content right */
 .page.alpinoHome .installCardProduct {
   flex-direction: row;
-  align-items: stretch;
-  gap: var(--echo-sp-4);
-  min-height: 132px;
+  align-items: center;
+  gap: var(--echo-sp-3);
+  min-height: 104px;
 }
 
 .page.alpinoHome .installCardProduct > .installCardMascot {
-  flex: 0 0 96px;
+  flex: 0 0 76px;
   align-self: center;
 }
 
@@ -1797,6 +1884,10 @@
    recede under an "Also available on" label; NPM is a builder footnote. */
 .page.alpinoHome .installCardPrimary {
   grid-column: 1 / -1;
+  flex-direction: row;
+  align-items: center;
+  min-height: 112px;
+  padding: var(--echo-sp-4);
   border-color: var(--echo-line-brand);
   background:
     radial-gradient(ellipse at 88% 0%, rgba(26, 58, 143, 0.09), transparent 54%),
@@ -1805,27 +1896,78 @@
 }
 
 .page.alpinoHome .installCardPrimary > .installCardMascot {
-  flex: 0 0 112px;
-  width: 112px;
-  height: 112px;
+  flex: 0 0 84px;
+  width: 84px;
+  height: 84px;
 }
 
-.page.alpinoHome .installPrimaryTag {
-  align-self: flex-start;
-  padding: 4px 12px;
-  border-radius: var(--echo-r-pill);
-  background: var(--echo-ink-primary);
-  color: var(--echo-paper-white);
+.page.alpinoHome .installPromptMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
   font-family: var(--echo-font-mono) !important;
   font-size: var(--echo-t-mono-xs);
   font-weight: 600;
-  letter-spacing: var(--echo-ls-wider);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  color: var(--echo-ink-mute);
+}
+
+.page.alpinoHome .installPromptMeta > span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+}
+
+.page.alpinoHome .installPromptMeta > span + span::before {
+  content: "•";
+  margin-right: 7px;
+  color: var(--echo-ink-faint);
+}
+
+.page.alpinoHome .installPromptType {
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: var(--echo-r-pill);
+  background: var(--echo-paper-white);
+  border: 1px solid var(--echo-line-brand);
+  color: var(--echo-ink-primary);
+}
+
+.page.alpinoHome .installPromptTypeChrome::before,
+.page.alpinoHome .installPromptTypeClawhub::before,
+.page.alpinoHome .installPromptTypeApple::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  flex: 0 0 12px;
+}
+
+.page.alpinoHome .installPromptTypeChrome::before {
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 50%, #4285f4 0 28%, transparent 29%),
+    conic-gradient(#ea4335 0 33%, #fbbc05 0 66%, #34a853 0 83%, #4285f4 0);
+}
+
+.page.alpinoHome .installPromptTypeClawhub::before {
+  border-radius: 4px;
+  background:
+    linear-gradient(135deg, #ff5a3d 0 48%, #1a3a8f 49% 100%);
+}
+
+.page.alpinoHome .installPromptTypeApple::before {
+  border-radius: 50%;
+  background: #111;
+}
+
+.page.alpinoHome .installPromptRating {
+  color: var(--echo-ink-text);
 }
 
 .page.alpinoHome .installAlsoLabel {
   grid-column: 1 / -1;
-  margin: var(--echo-sp-2) 0 calc(-1 * var(--echo-sp-1));
+  margin: var(--echo-sp-1) 0 calc(-1 * var(--echo-sp-1));
   font-family: var(--echo-font-mono) !important;
   font-size: var(--echo-t-mono-xs);
   font-weight: 600;
@@ -1835,20 +1977,40 @@
 }
 
 .page.alpinoHome .installCardSecondary {
-  min-height: 104px;
+  position: relative;
+  align-items: flex-start;
+  min-height: 106px;
+  padding-right: 132px;
   background:
     linear-gradient(135deg, var(--echo-paper-cream) 0%, var(--echo-paper-soft) 100%);
   box-shadow: none;
 }
 
+.page.alpinoHome .installCardSecondary .installCardBadge {
+  position: absolute;
+  top: var(--echo-sp-4);
+  right: var(--echo-sp-4);
+}
+
 .page.alpinoHome .installCardSecondary > .installCardMascot {
-  flex: 0 0 64px;
-  width: 64px;
-  height: 64px;
+  flex: 0 0 62px;
+  width: 62px;
+  height: 62px;
+  align-self: flex-start;
 }
 
 .page.alpinoHome .installCardSecondary .installCardName {
-  font-size: var(--echo-t-body);
+  font-size: 1.16rem;
+  font-weight: 700;
+}
+
+.page.alpinoHome .installCardSecondary .installPromptMeta {
+  gap: 6px;
+  font-size: 0.72rem;
+}
+
+.page.alpinoHome .installCardSecondary .installCardCaption {
+  margin-top: 1px;
 }
 
 .page.alpinoHome .installCardBuilder {
@@ -1867,9 +2029,9 @@
 
 .page.alpinoHome .installCardMascot {
   display: block;
-  width: 96px;
-  height: 96px;
-  border-radius: 18px;
+  width: 76px;
+  height: 76px;
+  border-radius: 16px;
   object-fit: cover;
   box-shadow: var(--echo-shadow-soft);
   flex: 0 0 auto;
@@ -1896,7 +2058,6 @@
   font-weight: 600;
   line-height: 1.2;
   color: var(--echo-ink-text);
-  margin-top: var(--echo-sp-1);
 }
 
 .page.alpinoHome .installCardCaption {
@@ -1969,7 +2130,7 @@
 
 .page.alpinoHome .clawhubBadgeSmall {
   font-family: var(--echo-font-body) !important;
-  font-size: 7.5px;
+  font-size: 0.4688rem;
   font-weight: 500;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -1978,7 +2139,7 @@
 
 .page.alpinoHome .clawhubBadgeLarge {
   font-family: var(--echo-font-brand) !important;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 700;
   letter-spacing: 0;
   color: var(--echo-paper-white);
@@ -1986,17 +2147,26 @@
 
 /* NPM card — red mark + monospace install command */
 .page.alpinoHome .installCardNpm {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px var(--echo-sp-3);
+  padding: var(--echo-sp-3);
   border-color: #e5e5e5;
 }
 
+.page.alpinoHome .installCardNpm .installCardEyebrow {
+  grid-column: 1 / -1;
+}
+
 .page.alpinoHome .npmBadgeBlock {
   align-items: center;
-  gap: 12px;
-  padding: 8px 14px;
+  gap: 10px;
+  padding: 6px 10px;
   border: 1px solid #e5e5e5;
   border-radius: var(--echo-r-tight);
   background: var(--echo-paper-white);
-  min-height: 56px;
+  min-height: 46px;
   text-decoration: none;
   transition: border-color var(--echo-dur-micro) var(--echo-ease-out),
               background var(--echo-dur-micro) var(--echo-ease-out);
@@ -2008,8 +2178,8 @@
 }
 
 .page.alpinoHome .npmBadgeMark {
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2019,8 +2189,8 @@
 }
 
 .page.alpinoHome .npmBadgeMark svg {
-  width: 26px;
-  height: 26px;
+  width: 22px;
+  height: 22px;
 }
 
 .page.alpinoHome .npmBadgeText {
@@ -2055,7 +2225,7 @@
 }
 
 .page.alpinoHome .npmCommandLine .installCardCommand {
-  padding: 8px 10px;
+  padding: 7px 10px;
   border: 0;
   border-radius: 0;
   background: transparent;
@@ -2063,8 +2233,8 @@
 
 .page.alpinoHome .npmCommandCopy {
   align-self: stretch;
-  min-width: 58px;
-  padding: 0 var(--echo-sp-3);
+  min-width: 52px;
+  padding: 0 var(--echo-sp-2);
   border: 0;
   border-left: 1px solid var(--echo-line);
   background: var(--echo-paper-white);
@@ -2360,7 +2530,7 @@
   }
 
   .page.alpinoHome .actGreeting {
-    font-size: clamp(2.1rem, 10vw, 3.4rem);
+    font-size: 1.9rem;
   }
 
   .page.alpinoHome .actBody,
@@ -4416,7 +4586,7 @@
   border-radius: 999px;
   background: rgba(34, 48, 72, 0.74);
   color: rgba(232, 241, 255, 0.96);
-  font-size: 20px;
+  font-size: 1.25rem;
   line-height: 1;
   cursor: pointer;
 }
@@ -4427,7 +4597,7 @@
 
 .skillPopupEyebrow {
   margin: 0 0 8px;
-  font-size: 11px;
+  font-size: var(--echo-t-mono-xs);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: rgba(162, 194, 238, 0.9);
@@ -4514,7 +4684,7 @@
 }
 
 .skillPopupFooterLabel {
-  font-size: 11px;
+  font-size: var(--echo-t-mono-xs);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: rgba(162, 194, 238, 0.9);
@@ -6337,3 +6507,132 @@
     padding: 0;
   }
 }
+
+/* Tweet social-proof wall (v3) — the whole AI world keeps saying it */
+.page.alpinoHome .tweetEyebrow {
+  align-self: center;
+  font-family: var(--echo-font-mono) !important;
+  font-size: var(--echo-t-mono-xs);
+  letter-spacing: var(--echo-ls-wider);
+  text-transform: uppercase;
+  color: var(--echo-ink-primary);
+  background: var(--echo-glass-bg);
+  border: 1px solid var(--echo-line-brand);
+  border-radius: var(--echo-r-pill);
+  padding: var(--echo-sp-1) var(--echo-sp-3);
+}
+/* Full-bleed two-row marquee, seamless right-to-left loop */
+.page.alpinoHome .tweetMarquee {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  max-width: 100vw;
+  margin-top: var(--echo-sp-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--echo-sp-4);
+  text-align: left;
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
+}
+.page.alpinoHome .marqueeRow {
+  display: flex;
+  overflow: hidden;
+  cursor: grab;
+  touch-action: pan-y;
+}
+.page.alpinoHome .marqueeTrack {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  width: max-content;
+  will-change: transform;
+  backface-visibility: hidden;
+}
+/* Cards replicate the official x.com embedded-tweet card: X palette + chrome.
+   This is a quoted external UI, so it intentionally uses X's colors (not Echo tokens). */
+.page.alpinoHome .tweetCard {
+  flex: 0 0 318px;
+  width: 318px;
+  margin-right: var(--echo-sp-4);
+  display: flex;
+  flex-direction: column;
+  padding: var(--echo-sp-4) var(--echo-sp-4);
+  background: #ffffff;
+  border: 1px solid #cfd9de;
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  color: #0f1419;
+  text-decoration: none;
+  transition: background var(--echo-dur-short) var(--echo-ease-out), box-shadow var(--echo-dur-short) var(--echo-ease-out);
+}
+.page.alpinoHome .tweetCard:hover {
+  background: #f7f9f9;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+}
+.page.alpinoHome .tweetHead {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.page.alpinoHome .tweetAvatar {
+  flex: 0 0 auto;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: #e1e8ed;
+}
+.page.alpinoHome .tweetMeta {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  line-height: 1.2;
+}
+.page.alpinoHome .tweetName {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-family: var(--echo-font-brand) !important;
+  font-weight: 700;
+  font-size: 0.9375rem;
+  color: #0f1419;
+}
+.page.alpinoHome .tweetVerified {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  color: #1d9bf0;
+}
+.page.alpinoHome .tweetFollowers {
+  font-family: var(--echo-font-body) !important;
+  font-size: 0.8125rem;
+  color: #536471;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.page.alpinoHome .tweetFollowerCount {
+  color: #0f1419;
+  font-weight: 700;
+}
+.page.alpinoHome .tweetX {
+  flex: 0 0 auto;
+  align-self: flex-start;
+  width: 19px;
+  height: 19px;
+  color: #0f1419;
+}
+.page.alpinoHome .tweetQuote {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-family: var(--echo-font-body) !important;
+  font-size: 0.9375rem;
+  line-height: 1.4;
+  color: #0f1419;
+}
diff --git a/supabase/.temp/cli-latest b/supabase/.temp/cli-latest
index a333a1d..aff2b6e 100644
--- a/supabase/.temp/cli-latest
+++ b/supabase/.temp/cli-latest
@@ -1 +1 @@
-v2.98.2
\ No newline at end of file
+v2.101.0
\ No newline at end of file
Submodule design-system 0000000...de51d09 (new submodule)
diff --git a/package.json b/package.json
index e80fbb9..b5367cf 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "cluster-labels:all": "node scripts/run_cluster_label_pipeline.mjs --mode all",
     "cluster-labels:replace": "node scripts/replace_cluster_labels.mjs",
     "cluster-labels:replace:dry": "node scripts/replace_cluster_labels.mjs --dry-run",
-    "tokens:sync": "cp ../echo-design-system/tokens.css app/tokens.css && echo 'Vendored app/tokens.css refreshed from ../echo-design-system'",
+    "tokens:sync": "cp design-system/tokens.css app/tokens.css && cp design-system/tokens.css public/tokens.css && echo 'Vendored tokens refreshed from design-system submodule'",
     "kobe:most-recent-conversation": "node scripts/kobe_most_recent_conversation.mjs"
   },
   "dependencies": {

Chunk ID: c44e4c
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 62
Output:
## main...origin/main
 M tokens.css
 tokens.css | 6 ++++++
 1 file changed, 6 insertions(+)
origin	https://github.com/Atlas-Graph-Academy/echo-design-system.git (fetch)
origin	https://github.com/Atlas-Graph-Academy/echo-design-system.git (push)

我看到了一个需要处理的点：`design-system` submodule 里面也有未提交的 `tokens.css` 改动。如果要真正 “all local changes”，我会先把 submodule 自己提交并推上去，再把主 repo 指到那个 submodule commit，最后提交/推主 repo。另一个需要留意的是有一个 `export-memories-8d79ae14.json` 未追踪文件，我先看文件体量和内容类型，避免把明显的私密导出误推。

ls -lh export-memories-8d79ae14.json app/[slug]/PublicSlugAuthGate.jsx docs/HOMEPAGE_NARRATIVE_v2.md public/assets/memory-sources/rive/echo_general-file-22.riv 2>/dev/null || true

file export-memories-8d79ae14.json app/[slug]/PublicSlugAuthGate.jsx docs/HOMEPAGE_NARRATIVE_v2.md public/assets/memory-sources/rive/echo_general-file-22.riv 2>/dev/null || true

git -C design-system diff -- tokens.css && git -C design-system log --oneline --decorate -3

git check-ignore -v export-memories-8d79ae14.json app/[slug]/PublicSlugAuthGate.jsx docs/HOMEPAGE_NARRATIVE_v2.md public/assets/memory-sources/rive/echo_general-file-22.riv 2>/dev/null || true

Chunk ID: 33e8da
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 15
Output:
zsh:1: no matches found: app/[slug]/PublicSlugAuthGate.jsx

Chunk ID: 25dd72
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 15
Output:
zsh:1: no matches found: app/[slug]/PublicSlugAuthGate.jsx

Chunk ID: 39e71c
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 274
Output:
diff --git a/tokens.css b/tokens.css
index 45a5791..e72abc0 100644
--- a/tokens.css
+++ b/tokens.css
@@ -26,6 +26,12 @@
   --echo-ink-faint:      #9b9b9b;   /* Tertiary text, placeholders, disabled */
   --echo-ink-seal:       #C7372F;   /* Decision red — wax-seal moments, alert, sparingly */
 
+  /* ========================================================================
+   * COLOR · CALENDAR (quiet notebook rhythm)
+   * ====================================================================== */
+  --echo-date-weekend:        rgba(168, 92, 62, 0.72);  /* Warm clay weekend date tint */
+  --echo-date-weekend-weight: 600;                      /* Weekend date emphasis */
+
   /* ========================================================================
    * COLOR · PAPER (background surfaces)
    * ====================================================================== */
de51d09 (HEAD -> main, origin/main, origin/HEAD) Refine Echo Home mock: greeting, hub nav, thread block-tiles
37025e0 Add Echo Home design mock
6834c20 Add Echo Chat specimen with hand-drawn manga speech bubble

Chunk ID: a7933b
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 15
Output:
zsh:1: no matches found: app/[slug]/PublicSlugAuthGate.jsx

小问题：`[slug]` 在 zsh 里被当成 glob 了，我重新用引号取文件信息。

ls -lh export-memories-8d79ae14.json 'app/[slug]/PublicSlugAuthGate.jsx' docs/HOMEPAGE_NARRATIVE_v2.md public/assets/memory-sources/rive/echo_general-file-22.riv 2>/dev/null || true

file export-memories-8d79ae14.json 'app/[slug]/PublicSlugAuthGate.jsx' docs/HOMEPAGE_NARRATIVE_v2.md public/assets/memory-sources/rive/echo_general-file-22.riv 2>/dev/null || true

git check-ignore -v export-memories-8d79ae14.json 'app/[slug]/PublicSlugAuthGate.jsx' docs/HOMEPAGE_NARRATIVE_v2.md public/assets/memory-sources/rive/echo_general-file-22.riv 2>/dev/null || true

wc -c export-memories-8d79ae14.json 2>/dev/null || true; head -c 500 export-memories-8d79ae14.json 2>/dev/null || true

Chunk ID: 63ff91
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 85
Output:
-rw-r--r--@ 1 kobe  staff   2.9K May 26 08:44 app/[slug]/PublicSlugAuthGate.jsx
-rw-r--r--@ 1 kobe  staff    27K Jun  2 17:16 docs/HOMEPAGE_NARRATIVE_v2.md
-rw-r--r--@ 1 kobe  staff    23K May 10 13:24 export-memories-8d79ae14.json
-rw-r--r--@ 1 kobe  staff   7.7M May 31 17:17 public/assets/memory-sources/rive/echo_general-file-22.riv

Chunk ID: b84b24
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 91
Output:
export-memories-8d79ae14.json:                              JSON data
app/[slug]/PublicSlugAuthGate.jsx:                          Java source, ASCII text
docs/HOMEPAGE_NARRATIVE_v2.md:                              exported SGML document text, Unicode text, UTF-8 text, with very long lines (312)
public/assets/memory-sources/rive/echo_general-file-22.riv: data

Chunk ID: 3ccf28
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 0
Output:

Chunk ID: f576fd
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 135
Output:
   23711 export-memories-8d79ae14.json
{
  "exported_at": "2026-05-10T20:24:42.840Z",
  "user": {
    "id": "8d79ae14-5bb6-4e86-9c39-03c209c0856e",
    "email": "echo@iditor.com"
  },
  "count": 11,
  "ordering": "time DESC NULLS LAST, created_at DESC NULLS LAST, id DESC",
  "source": "memories_with_sources view + memory_new.echo_comment join",
  "memories": [
    {
      "id": "93d58a21-6436-4b45-8f62-b0e5f4425704",
      "user_id": "8d79ae14-5bb6-4e86-9c39-03c209c0856e",
      "time": "2026-04-30T17:34:56.928+00:00",
      "created

`export-memories-8d79ae14.json` 是一份 memory export，里面有 email 和 memory records。我不会把这个推上远端，除非你单独明确说要推这份数据。其余 source/doc/assets/submodule 改动我会全部提交并推送。先处理 submodule。

git -C design-system add tokens.css && git -C design-system commit -m "Add calendar date tokens" && git -C design-system push origin main

Chunk ID: 986e0f
Wall time: 1.0020 seconds
Process running with session ID 20158
Original token count: 19
Output:
[main b16f464] Add calendar date tokens
 1 file changed, 6 insertions(+)

Submodule commit 已经创建，push 还在进行中。我等它结束，然后把主 repo 的 submodule 指针和其他本地改动一起提交。

{
  "name": "write_stdin",
  "arguments": "{\"session_id\":20158,\"chars\":\"\",\"yield_time_ms\":1000,\"max_output_tokens\":20000}"
}

Chunk ID: 166d6b
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 25
Output:
To https://github.com/Atlas-Graph-Academy/echo-design-system.git
   de51d09..b16f464  main -> main

Submodule 已推到 `echo-design-system/main`。现在主 repo 会指向新的 submodule commit；我把除 memory export JSON 之外的本地改动全部 stage。

git -C design-system status --short --branch && git submodule status --recursive

git add -A -- . ':!export-memories-8d79ae14.json' && git status --short --branch

Chunk ID: 206481
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 23
Output:
## main...origin/main
+b16f4645288908e7499009b413bc4bfa4cb3a28e design-system (heads/main)

Chunk ID: 5554bb
Wall time: 0.1117 seconds
Process exited with code 0
Original token count: 112
Output:
## event...origin/event
A  app/[slug]/PublicSlugAuthGate.jsx
M  app/components/memory-graph/panels/FreePreviewLoginModal.tsx
M  app/globals.css
M  app/page.jsx
A  design-system
A  docs/HOMEPAGE_NARRATIVE_v2.md
M  package.json
R  public/assets/memory-sources/rive/echo_general-file-20.riv -> public/assets/memory-sources/rive/echo_general-file-22.riv
M  styles/EchoLanding.module.css
M  supabase/.temp/cli-latest
?? export-memories-8d79ae14.json

主 repo 的 source/doc/assets/submodule 改动已经 staged；那份 memory export JSON 仍然留在本地未追踪。现在我看一眼 staged 摘要，然后提交。

git diff --cached --stat && git diff --cached --submodule

git status --short --branch

Chunk ID: 4c6620
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 20428
Output:
Total output lines: 1751

 app/[slug]/PublicSlugAuthGate.jsx                  | 104 +++++
 .../memory-graph/panels/FreePreviewLoginModal.tsx  |  58 ++-
 app/globals.css                                    |   6 +
 app/page.jsx                                       | 245 ++++++++---
 design-system                                      |   1 +
 docs/HOMEPAGE_NARRATIVE_v2.md                      | 383 +++++++++++++++++
 package.json                                       |   2 +-
 ...eneral-file-20.riv => echo_general-file-22.riv} | Bin 7857546 -> 8094809 bytes
 styles/EchoLanding.module.css                      | 475 +++++++++++++++++----
 supabase/.temp/cli-latest                          |   2 +-
 10 files changed, 1120 insertions(+), 156 deletions(-)
diff --git a/app/[slug]/PublicSlugAuthGate.jsx b/app/[slug]/PublicSlugAuthGate.jsx
new file mode 100644
index 0000000..f332638
--- /dev/null
+++ b/app/[slug]/PublicSlugAuthGate.jsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import MemoryGraphPageView from "@/app/components/memory-graph/MemoryGraphPageView";
+import FreePreviewLoginModal from "@/app/components/memory-graph/panels/FreePreviewLoginModal";
+import {
+  getSupabaseBrowserClient,
+  readStoredSupabaseSession,
+  restoreSupabaseSessionFromStorage,
+} from "@/lib/supabase-browser";
+
+function hasStoredSessionHint() {
+  const stored = readStoredSupabaseSession();
+  return !!(stored?.accessToken && stored?.refreshToken);
+}
+
+function hasSessionUser(session) {
+  return !!session?.user?.id;
+}
+
+export default function PublicSlugAuthGate({ slug, ownerName }) {
+  const displayName = typeof ownerName === "string" && ownerName.trim()
+    ? ownerName.trim()
+    : slug;
+  const [authState, setAuthState] = useState(() => (
+    hasStoredSessionHint() ? "authenticated" : "checking"
+  ));
+
+  useEffect(() => {
+    let cancelled = false;
+    const supabase = getSupabaseBrowserClient();
+
+    const markFromSession = (session) => {
+      if (cancelled) return;
+      setAuthState(hasSessionUser(session) ? "authenticated" : "required");
+    };
+
+    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
+      if (cancelled) return;
+      if (event === "SIGNED_OUT") {
+        setAuthState("required");
+        return;
+      }
+      if (hasSessionUser(session)) {
+        setAuthState("authenticated");
+        return;
+      }
+      if (!hasStoredSessionHint()) {
+        setAuthState("required");
+      }
+    });
+
+    (async () => {
+      try {
+        const { data } = await supabase.auth.getSession();
+        if (hasSessionUser(data?.session)) {
+          markFromSession(data.session);
+          return;
+        }
+
+        const restored = await restoreSupabaseSessionFromStorage(supabase);
+        markFromSession(restored);
+      } catch {
+        if (!cancelled) {
+          setAuthState(hasStoredSessionHint() ? "authenticated" : "required");
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      authListener.subscription.unsubscribe();
+    };
+  }, []);
+
+  if (authState === "authenticated") {
+    return (
+      <MemoryGraphPageView
+        key={`public:${slug}:authed`}
+        dataSource="public"
+        graphId={slug}
+      />
+    );
+  }
+
+  return (
+    <>
+      <div className="mg-public-account-gate" aria-hidden="true" />
+      {authState === "required" ? (
+        <FreePreviewLoginModal
+          dismissible={false}
+          title={`You need an Echo account to visit ${displayName}`}
+          description="Verify your everyday email to open this page."
+          sendButtonLabel="Send code"
+          verifyButtonLabel="Verify email"
+          otpLabel="Enter the 6-digit code"
+          sentNotice="Code sent. Check your email."
+          onClose={() => undefined}
+          onAuthSuccess={() => setAuthState("authenticated")}
+        />
+      ) : null}
+    </>
+  );
+}
diff --git a/app/components/memory-graph/panels/FreePreviewLoginModal.tsx b/app/components/memory-graph/panels/FreePreviewLoginModal.tsx
index bccd0b2..23e3c26 100644
--- a/app/components/memory-graph/panels/FreePreviewLoginModal.tsx
+++ b/app/components/memory-graph/panels/FreePreviewLoginModal.tsx
@@ -5,12 +5,35 @@ import { getSupabaseBrowserClient } from "@/lib/supabase-browser";
 
 const FREE_PREVIEW_KEY = "echoGraph:freePreviewUsed";
 
+function isAbortError(err: unknown) {
+  const message = err instanceof Error
+    ? err.message
+    : typeof err === "object" && err !== null && "message" in err
+      ? String((err as { message?: unknown }).message || "")
+      : String(err || "");
+  return /signal is aborted|abort/i.test(message);
+}
+
 export default function FreePreviewLoginModal({
   onClose,
   onAuthSuccess,
+  title = "请验证您的邮箱加入 Gathering",
+  description = "",
+  sendButtonLabel = "发送验证码",
+  verifyButtonLabel = "验证并加入",
+  otpLabel = "输入 6 位验证码",
+  sentNotice = "验证码已发送，请查看邮箱。",
+  dismissible = true,
 }: {
   onClose: () => void;
   onAuthSuccess: () => void;
+  title?: string;
+  description?: string;
+  sendButtonLabel?: string;
+  verifyButtonLabel?: string;
+  otpLabel?: string;
+  sentNotice?: string;
+  dismissible?: boolean;
 }) {
   const [email, setEmail] = useState("");
   const [otpSent, setOtpSent] = useState(false);
@@ -21,11 +44,14 @@ export default function FreePreviewLoginModal({
   const [notice, setNotice] = useState("");
 
   return (
-    <div className="mg-login-cta-overlay" onClick={() => { if (!loading) onClose(); }}>
+    <div className="mg-login-cta-overlay" onClick={() => { if (!loading && dismissible) onClose(); }}>
       <div className="mg-login-cta-modal" onClick={(e) => e.stopPropagation()}>
-        <button className="mg-login-cta-close" onClick={onClose} aria-label="Close">×</button>
+        {dismissible ? (
+          <button className="mg-login-cta-close" onClick={onClose} aria-label="Close">×</button>
+        ) : null}
         <div className="mg-login-cta-icon">🔒</div>
-        <h3 className="mg-login-cta-title">请验证您的邮箱加入 Gathering</h3>
+        <h3 className="mg-login-cta-title">{title}</h3>
+        {description ? <p className="mg-login-cta-description">{description}</p> : null}
 
         {!otpSent ? (
           <form className="mg-login-cta-form" onSubmit={async (e) => {
@@ -39,7 +65,7 @@ export default function FreePreviewLoginModal({
               if (sbError) throw sbError;
               setEmail(trimmed);
               setOtpSent(true);
-              setNotice("验证码已发送，请查看邮箱。");
+              setNotice(sentNotice);
               setTimeout(() => otpRefs.current[0]?.focus(), 50);
             } catch (err: any) {
               setError(err?.message || "发送失败，请重试");
@@ -56,7 +82,7 @@ export default function FreePreviewLoginModal({
               autoFocus
             />
             <button className="mg-login-cta-btn" type="submit" disabled={loading || !email.trim()}>
-              {loading ? "发送中..." : "发送验证码"}
+              {loading ? "发送中..." : sendButtonLabel}
             </button>
           </form>
         ) : (
@@ -67,10 +93,18 @@ export default function FreePreviewLoginModal({
             setLoading(true); setError(""); setNotice("");
             try {
               const sb = getSupabaseBrowserClient();
-              const { error: sbError } = await sb.auth.verifyOtp({ email, token, type: "email" });
+              const { data: verifyData, error: sbError } = await sb.auth.verifyOtp({ email, token, type: "email" });
               if (sbError) throw sbError;
-              const { data } = await sb.auth.getSession();
-              if (!data.session) {
+              let verifiedSession = verifyData?.session ?? null;
+              if (!verifiedSession) {
+                try {
+                  const { data } = await sb.auth.getSession();
+                  verifiedSession = data.session ?? null;
+                } catch (sessionErr) {
+                  if (!isAbortError(sessionErr)) throw sessionErr;
+                }
+              }
+              if (!verifiedSession) {
                 await new Promise<void>((resolve) => {
                   const { data: sub } = sb.auth.onAuthStateChange((_ev: string, session: any) => {
                     if (session) { sub.subscription.unsubscribe(); resolve(); }
@@ -84,7 +118,7 @@ export default function FreePreviewLoginModal({
               setError(err?.message || "验证失败，请重试");
             } finally { setLoading(false); }
           }}>
-            <label className="mg-login-cta-label">输入 6 位验证码</label>
+            <label className="mg-login-cta-label">{otpLabel}</label>
             <div className="mg-login-cta-otp-grid" onPaste={(e) => {
               const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
               if (!pasted) return;
@@ -119,7 +153,7 @@ export default function FreePreviewLoginModal({
               ))}
             </div>
             <button className="mg-login-cta-btn" type="submit" disabled={loading || otpDigits.join("").length < 6}>
-              {loading ? "验证中..." : "验证并加入"}
+              {loading ? "验证中..." : verifyButtonLabel}
             </button>
             <button className="mg-login-cta-ghost" type="button" disabled={loading} onClick={() => {
               setOtpSent(false); setOtpDigits(["","","","","",""]); setNotice(""); setError("");
@@ -131,7 +165,9 @@ export default function FreePreviewLoginModal({
 
         {notice && <p className="mg-login-cta-notice">{notice}</p>}
         {error && <p className="mg-login-cta-error">{error}</p>}
-        <button className="mg-login-cta-skip" onClick={onClose}>稍后再说</button>
+        {dismissible ? (
+          <button className="mg-login-cta-skip" onClick={onClose}>稍后再说</button>
+        ) : null}
       </div>
     </div>
   );
diff --git a/app/globals.css b/app/globals.css
index 26508ed..656f033 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -9268,6 +9268,12 @@ body.narrative-graph-resizing {
   font-weight: 600;
   margin: 0 0 8px;
 }
+.mg-login-cta-description {
+  color: rgba(255, 255, 255, 0.64);
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0 0 18px;
+}
 .mg-login-cta-form {
   display: flex;
   flex-direction: column;
diff --git a/app/page.jsx b/app/page.jsx
index 40a6163..fb22acf 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -536,6 +536,129 @@ const REASON_PEOPLE_FACES = [
   LIVE_EVENT_STREAM[3].faces[1],
 ];
 
+// Real tweets (fetched via X syndication) — COMPLAINTS about AI memory only, sorted by followers.
+const TWEET_WALL = [
+  { id: '2050622353118474414', h: 'aakashgupta', n: 'Aakash Gupta', v: true, f: '266K', a: 'https://pbs.twimg.com/profile_images/2021355466216062976/8MDXp7vR_normal.jpg', q: 'You re-explain your context to AI every single Monday.' },
+  { id: '1935483342243426379', h: 'simonw', n: 'Simon Willison', v: true, f: '188K', a: 'https://pbs.twimg.com/profile_images/378800000261649705/be9cc55e64014e6d7663c50d7cb9fc75_normal.jpeg', q: "I don't trust the new ChatGPT memory feature. Context rot." },
+  { id: '2042132982648234111', h: 'cyrilXBT', n: 'CyrilXBT', v: true, f: '182K', a: 'https://pbs.twimg.com/profile_images/2035229727414534145/aWap3Jbq_normal.jpg', q: "You're not using AI wrong — you're using it with amnesia." },
+  { id: '2049009026940481588', h: 'cyrilXBT', n: 'CyrilXBT', v: true, f: '182K', a: 'https://pbs.twimg.com/profile_images/2035229727414534145/aWap3Jbq_normal.jpg', q: 'Most people using Claude start from zero every single session.' },
+  { id: '1970722090559942761', h: 'AliceInTheData', n: 'ALICE ⚡', v: false, f: '137K', a: 'https://pbs.twimg.com/profile_images/1959739041936494593/oPIG90Oo_normal.jpg', q: "You're forced to re-explain your context every single time." },
+  { id: '2045263212011274554', h: 'Axel_bitblaze69', n: 'Axel Bitblaze 🪓', v: true, f: '128K', a: 'https://pbs.twimg.com/profile_images/1883446587822608384/6eprnWjH_normal.jpg', q: 'Paste context for the 400th time. Memory: blank slate every morning.' },
+  { id: '1983276844440002572', h: 'EXM7777', n: 'Machina', v: true, f: '115K', a: 'https://pbs.twimg.com/profile_images/1922574051580563456/-OFXIxnm_normal.jpg', q: "The biggest AI bottleneck right now is memory — and built-in memory doesn't work." },
+  { id: '2033574400901935534', h: 'DallasAptGP', n: 'Barrett Linburg', v: true, f: '106K', a: 'https://pbs.twimg.com/profile_images/2008390072689709056/7XihK8j0_normal.jpg', q: 'Open Claude. Re-explain the business. Re-explain the team. Re-explain the numbers.' },
+  { id: '1983081256930947333', h: 'mhdfaran', n: 'Farhan', v: true, f: '79K', a: 'https://pbs.twimg.com/profile_images/1685658187825811457/h9QgcNrM_normal.jpg', q: 'ChatGPT forgot what I told it 3 messages ago.' },
+  { id: '1911131409525448879', h: 'DanielleFong', n: 'Danielle Fong 🔆', v: true, f: '62K', a: 'https://pbs.twimg.com/profile_images/1757993684614922240/SjwWIKOZ_normal.jpg', q: 'Too much context bleeding in the new ChatGPT memory function.' },
+  { id: '1957875196393627985', h: 'BenjaminDEKR', n: 'Benjamin De Kraker', v: true, f: '43K', a: 'https://pbs.twimg.com/profile_images/2006784699251748864/fZ1xQPWe_normal.jpg', q: "I turned the ChatGPT Memory feature completely off — it's so bad." },
+  { id: '2050280016387199245', h: 'JadHindy', n: 'Jad Hindy', v: true, f: '17K', a: 'https://pbs.twimg.com/profile_images/2061515145898045440/AvcEpAKq_normal.jpg', q: 'Every AI session starts from zero. The session closes. It forgets.' },
+];
+
+function TweetMarquee({ tweets }) {
+  const rowA = useRef(null);
+  const rowB = useRef(null);
+  useEffect(() => {
+    const config = [
+      { el: rowA.current, speed: 0.28 },
+      { el: rowB.current, speed: 0.5 },
+    ].filter((c) => c.el && c.el.firstElementChild);
+    if (!config.length) return undefined;
+    const reduce = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const states = config.map((c) => ({ el: c.el, track: c.el.firstElementChild, speed: c.speed, pos: 0, paused: false, dragging: false, moved: false, lastX: 0, startX: 0 }));
+    const half = (s) => (s.track.scrollWidth / 2) || 1;
+    const apply = (s) => { s.track.style.transform = `translate3d(${-s.pos}px, 0, 0)`; };
+    let raf = 0;
+    const tick = () => {
+      for (const s of states) {
+        if (!reduce && !s.paused && !s.dragging) {
+          const h = half(s);
+          s.pos += s.speed;
+          if (s.pos >= h) s.pos -= h;
+          apply(s);
+        }
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    const cleanups = [];
+    for (const s of states) {
+      const el = s.el;
+      const down = (e) => { s.dragging = true; s.moved = false; s.lastX = e.clientX; s.startX = e.clientX; el.style.cursor = 'grabbing'; try { el.setPointerCapture(e.pointerId); } catch (err) { /* noop */ } };
+      const move = (e) => {
+        if (!s.dragging) return;
+        const h = half(s);
+        s.pos -= (e.clientX - s.lastX);
+        s.lastX = e.clientX;
+        if (Math.abs(e.clientX - s.startX) > 6) s.moved = true;
+        s.pos = ((s.pos % h) + h) % h;
+        apply(s);
+      };
+      const up = () => { s.dragging = false; el.style.cursor = 'grab'; };
+      const enter = () => { s.paused = true; };
+      const leave = () => { s.paused = false; };
+      const click = (e) => { if (s.moved) { e.preventDefault(); e.stopPropagation(); } };
+      el.addEventListener('pointerdown', down);
+      el.addEventListener('pointermove', move);
+      el.addEventListener('pointerup', up);
+      el.addEventListener('pointercancel', up);
+      el.addEventListener('mouseenter', enter);
+      el.addEventListener('mouseleave', leave);
+      el.addEventListener('click', click, true);
+      cleanups.push(() => {
+        el.removeEventListener('pointerdown', down);
+        el.removeEventListener('pointermove', move);
+        el.removeEventListener('pointerup', up);
+        el.removeEventListener('pointercancel', up);
+        el.removeEventListener('mouseenter', enter);
+        el.removeEventListener('mouseleave', leave);
+        el.removeEventListener('click', click, true);
+      });
+    }
+    return () => { cancelAnimationFrame(raf); cleanups.forEach((c) => c()); };
+  }, []);
+  const refs = [rowA, rowB];
+  return (
+    <div className={styles.tweetMarquee} aria-hidden="true">
+      {[0, 1].map((row) => (
+        <div key={row} ref={refs[row]} className={styles.marqueeRow}>
+          <div className={styles.marqueeTrack}>
+            {[0, 1].map((dup) =>
+              tweets.filter((_, i) => i % 2 === row).map((t) => (
+                <a
+                  key={`${row}-${dup}-${t.id}`}
+                  href={`https://x.com/${t.h}/status/${t.id}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  tabIndex={-1}
+                  draggable={false}
+                  className={styles.tweetCard}
+                >
+                  <span className={styles.tweetHead}>
+                    <img className={styles.tweetAvatar} src={t.a.replace('_normal', '_bigger')} alt="" loading="lazy" width={44} height={44} draggable={false} />
+                    <span className={styles.tweetMeta}>
+                      <span className={styles.tweetName}>
+                        {t.n}
+                        {t.v && (
+                          <svg className={styles.tweetVerified} viewBox="0 0 22 22" aria-hidden="true">
+                            <path fill="currentColor" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.586-.705-1.084-1.245-1.439C11.275.215 10.646.018 10 0c-.646.018-1.275.215-1.816.57-.54.355-.972.853-1.246 1.439-.607-.223-1.264-.27-1.897-.14-.634.131-1.218.437-1.687.882-.445.47-.75 1.053-.882 1.687-.13.633-.083 1.29.14 1.897-.586.274-1.084.706-1.439 1.246C.215 9.725.018 10.354 0 11c.018.646.215 1.275.57 1.816.355.54.853.972 1.439 1.246-.223.607-.27 1.264-.14 1.897.131.634.437 1.218.882 1.687.47.445 1.053.75 1.687.882.633.13 1.29.083 1.897-.14.274.586.706 1.084 1.246 1.439.54.355 1.17.552 1.816.57.646-.018 1.275-.215 1.816-.57.54-.355.972-.853 1.246-1.439.607.223 1.264.27 1.897.14.634-.131 1.218-.437 1.687-.882.445-.47.75-1.053.882-1.687.13-.633.083-1.29-.14-1.897.586-.274 1.084-.706 1.439-1.246.355-.54.552-1.17.57-1.816zM9.662 14.85l-3.429-3.429 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z" />
+                          </svg>
+                        )}
+                      </span>
+                      <span className={styles.tweetFollowers}>@{t.h} · <strong className={styles.tweetFollowerCount}>{t.f} followers</strong></span>
+                    </span>
+                    <svg className={styles.tweetX} viewBox="0 0 24 24" aria-hidden="true">
+                      <path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                    </svg>
+                  </span>
+                  <span className={styles.tweetQuote}>{t.q}</span>
+                </a>
+              ))
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export default function Home() {
   const pageRef = useRef(null);
   const heroVisualRef = useRef(null);
@@ -1440,7 +1563,7 @@ export default function Home() {
                 target="_blank"
                 rel="noopener noreferrer"
                 className={`${styles.…10428 tokens truncated…styles/EchoLanding.module.css b/styles/EchoLanding.module.css
index 6b9b0ae..94137e4 100644
--- a/styles/EchoLanding.module.css
+++ b/styles/EchoLanding.module.css
@@ -511,20 +511,84 @@
 /* ----- Act 1 — Greeting ------------------------------------------------ */
 .page.alpinoHome .actGreeting {
   margin: 0;
-  font-family: var(--echo-font-script) !important;
-  font-size: clamp(2.4rem, 6.4vw, var(--echo-t-display));
+  font-family: var(--echo-font-brand) !important;
+  font-size: clamp(2.4rem, 4.7vw, 3.9rem);
   font-weight: 700;
   line-height: var(--echo-lh-tight);
   color: var(--echo-ink-primary);
+  text-wrap: balance;
 }
 
 .page.alpinoHome .actBody {
-  max-width: 640px;
+  max-width: 760px;
   margin: 0 auto;
   font-family: var(--echo-font-body) !important;
   font-size: var(--echo-t-body);
   line-height: var(--echo-lh-relaxed);
   color: var(--echo-ink-mute);
+  text-wrap: pretty;
+}
+
+.page.alpinoHome .actBodyMuted {
+  display: block;
+  margin-top: var(--echo-sp-2);
+  opacity: 0.86;
+}
+
+.page.alpinoHome .memorySignal {
+  display: inline-block;
+  margin: 0 0.04em;
+  padding: 0.02em 0.28em 0.04em;
+  border-radius: 7px;
+  line-height: 1.18;
+  white-space: nowrap;
+}
+
+.page.alpinoHome .memorySignalTime {
+  font-family: var(--echo-font-mono) !important;
+  font-size: 0.92em;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+  color: color-mix(in srgb, var(--echo-ink-primary) 82%, var(--echo-ink-text));
+  background: color-mix(in srgb, var(--echo-paper-mist) 70%, var(--echo-paper-white));
+  border: 1px solid color-mix(in srgb, var(--echo-ink-primary) 14%, transparent);
+}
+
+.page.alpinoHome .memorySignalNumber {
+  font-family: var(--echo-font-mono) !important;
+  font-size: 0.92em;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+  color: var(--echo-ink-seal);
+  background: color-mix(in srgb, var(--echo-ink-seal) 7%, var(--echo-paper-white));
+  border: 1px solid color-mix(in srgb, var(--echo-ink-seal) 18%, transparent);
+}
+
+.page.alpinoHome .memorySignalPerson,
+.page.alpinoHome .inlinePersonName {
+  font-family: var(--echo-font-brand) !important;
+  font-weight: 700;
+  color: color-mix(in srgb, var(--echo-ink-primary) 88%, var(--echo-ink-text));
+  background: linear-gradient(
+    180deg,
+    transparent 54%,
+    color-mix(in srgb, var(--echo-note-pink) 72%, transparent) 54%,
+    color-mix(in srgb, var(--echo-note-pink) 72%, transparent) 94%,
+    transparent 94%
+  );
+}
+
+.page.alpinoHome .memorySignalPerson {
+  border: 1px solid color-mix(in srgb, var(--echo-note-pink) 75%, var(--echo-line));
+}
+
+.page.alpinoHome .inlinePersonName {
+  display: inline;
+  padding: 0 0.08em;
+  border-radius: 3px;
+  white-space: nowrap;
 }
 
 .page.alpinoHome .actStrong {
@@ -560,7 +624,7 @@
 /* ----- Hero pillars — Save · Use anywhere · No limits ------------------ */
 .page.alpinoHome .heroPillars {
   list-style: none;
-  margin: var(--echo-sp-3) auto 0;
+  margin: var(--echo-sp-5) auto 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
@@ -574,7 +638,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   flex: 1 1 170px;
   max-width: 210px;
   text-align: center;
@@ -586,6 +650,7 @@
   justify-content: center;
   width: 116px;
   height: 116px;
+  margin-bottom: var(--echo-sp-2);
   color: var(--echo-ink-primary);
 }
 
@@ -755,15 +820,14 @@
   bottom: 2px;
   left: 50%;
   transform: translateX(-50%);
-  width: 188px;
+  width: 172px;
   display: flex;
   align-items: flex-start;
   gap: 7px;
-  padding: 8px 11px;
+  padding: 7px 10px;
   border-radius: 11px;
-  border: 1px solid color-mix(in srgb, var(--echo-ink-seal) 24%, transparent);
-  background: color-mix(in srgb, var(--echo-ink-seal) 9%, var(--echo-paper-white));
-  box-shadow: var(--echo-shadow-soft);
+  border: 1px solid color-mix(in srgb, var(--echo-ink-seal) 14%, transparent);
+  background: color-mix(in srgb, var(--echo-ink-seal) 5%, var(--echo-paper-white));
   text-align: left;
 }
 
@@ -797,36 +861,11 @@
   color: color-mix(in srgb, var(--echo-ink-seal) 64%, var(--echo-ink-mute));
 }
 
-.page.alpinoHome .heroLimitSlash {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
-}
-
-.page.alpinoHome .heroLimitSlash line {
-  stroke: var(--echo-ink-seal);
-  stroke-width: 3;
-  stroke-linecap: round;
-  stroke-dasharray: 132;
-  stroke-dashoffset: 132;
-  animation: heroLimitSlashDraw 3.4s ease-in-out infinite;
-}
-
-@keyframes heroLimitSlashDraw {
-  0% { stroke-dashoffset: 132; }
-  26% { stroke-dashoffset: 0; }
-  84% { stroke-dashoffset: 0; }
-  100% { stroke-dashoffset: -132; }
-}
-
 .page.alpinoHome .heroLimitEcho {
   position: absolute;
-  bottom: 22px;
+  bottom: 0;
   left: 50%;
-  transform: translateX(-48%);
+  transform: translateX(-50%);
   width: 120px;
   height: 120px;
   z-index: 2;
@@ -837,10 +876,6 @@
   height: 120px;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .page.alpinoHome .heroLimitSlash line { animation: none; stroke-dashoffset: 0; }
-}
-
 .page.alpinoHome .heroPillarTitle {
   font-family: var(--echo-font-brand) !important;
   font-size: var(--echo-t-body-lg);
@@ -1601,12 +1636,62 @@
 }
 
 .page.alpinoHome .reasonMark {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+  max-width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--echo-line-brand);
+  border-radius: var(--echo-r-pill);
   font-family: var(--echo-font-mono) !important;
-  font-size: 1.25rem;
+  font-size: var(--echo-t-mono-xs);
   font-weight: 700;
-  letter-spacing: var(--echo-ls-wide);
+  letter-spacing: 0;
   color: var(--echo-ink-primary);
+  background: var(--echo-glass-bg);
   line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.page.alpinoHome .reasonMark_time {
+  color: color-mix(in srgb, var(--echo-ink-primary) 84%, var(--echo-ink-text));
+  background: color-mix(in srgb, var(--echo-paper-mist) 74%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-ink-primary) 18%, var(--echo-line));
+}
+
+.page.alpinoHome .reasonMark_number {
+  color: var(--echo-ink-seal);
+  background: color-mix(in srgb, var(--echo-ink-seal) 7%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-ink-seal) 24%, var(--echo-line));
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1;
+}
+
+.page.alpinoHome .reasonMark_person {
+  font-family: var(--echo-font-brand) !important;
+  color: color-mix(in srgb, var(--echo-ink-primary) 88%, var(--echo-ink-text));
+  background: color-mix(in srgb, var(--echo-note-pink) 62%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-note-pink) 78%, var(--echo-line));
+}
+
+.page.alpinoHome .reasonMark_relationship {
+  color: color-mix(in srgb, var(--echo-ink-primary) 78%, var(--echo-ink-text));
+  background: color-mix(in srgb, var(--echo-note-cream) 70%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-note-cream) 86%, var(--echo-line));
+}
+
+.page.alpinoHome .reasonMark_project {
+  color: color-mix(in srgb, var(--echo-ink-primary) 82%, var(--echo-ink-text));
+  background: color-mix(in srgb, var(--echo-note-mint) 62%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-note-mint) 78%, var(--echo-line));
+}
+
+.page.alpinoHome .reasonMark_crossAi {
+  color: color-mix(in srgb, var(--echo-ink-accent) 54%, var(--echo-ink-primary));
+  background: color-mix(in srgb, var(--echo-ink-accent) 11%, var(--echo-paper-white));
+  border-color: color-mix(in srgb, var(--echo-ink-accent) 28%, var(--echo-line));
 }
 
 .page.alpinoHome .reasonMarkSub {
@@ -1717,7 +1802,7 @@
 }
 
 .page.alpinoHome .installSub {
-  margin: 0 0 var(--echo-sp-5);
+  margin: 0 0 var(--echo-sp-4);
   font-family: var(--echo-font-body) !important;
   font-size: var(--echo-t-body);
   color: var(--echo-ink-mute);
@@ -1726,7 +1811,9 @@
 .page.alpinoHome .installGrid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--echo-sp-4);
+  gap: var(--echo-sp-3);
+  width: min(100%, 860px);
+  margin: 0 auto;
   text-align: left;
 }
 
@@ -1734,8 +1821,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--echo-sp-3);
-  padding: var(--echo-sp-5);
+  gap: var(--echo-sp-2);
+  padding: var(--echo-sp-4);
   border: 1px solid var(--echo-line);
   border-radius: var(--echo-r-card);
   background:
@@ -1759,13 +1846,13 @@
 /* Product cards (the three with a mascot) — row layout, mascot left, content right */
 .page.alpinoHome .installCardProduct {
   flex-direction: row;
-  align-items: stretch;
-  gap: var(--echo-sp-4);
-  min-height: 132px;
+  align-items: center;
+  gap: var(--echo-sp-3);
+  min-height: 104px;
 }
 
 .page.alpinoHome .installCardProduct > .installCardMascot {
-  flex: 0 0 96px;
+  flex: 0 0 76px;
   align-self: center;
 }
 
@@ -1797,6 +1884,10 @@
    recede under an "Also available on" label; NPM is a builder footnote. */
 .page.alpinoHome .installCardPrimary {
   grid-column: 1 / -1;
+  flex-direction: row;
+  align-items: center;
+  min-height: 112px;
+  padding: var(--echo-sp-4);
   border-color: var(--echo-line-brand);
   background:
     radial-gradient(ellipse at 88% 0%, rgba(26, 58, 143, 0.09), transparent 54%),
@@ -1805,27 +1896,78 @@
 }
 
 .page.alpinoHome .installCardPrimary > .installCardMascot {
-  flex: 0 0 112px;
-  width: 112px;
-  height: 112px;
+  flex: 0 0 84px;
+  width: 84px;
+  height: 84px;
 }
 
-.page.alpinoHome .installPrimaryTag {
-  align-self: flex-start;
-  padding: 4px 12px;
-  border-radius: var(--echo-r-pill);
-  background: var(--echo-ink-primary);
-  color: var(--echo-paper-white);
+.page.alpinoHome .installPromptMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
   font-family: var(--echo-font-mono) !important;
   font-size: var(--echo-t-mono-xs);
   font-weight: 600;
-  letter-spacing: var(--echo-ls-wider);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  color: var(--echo-ink-mute);
+}
+
+.page.alpinoHome .installPromptMeta > span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+}
+
+.page.alpinoHome .installPromptMeta > span + span::before {
+  content: "•";
+  margin-right: 7px;
+  color: var(--echo-ink-faint);
+}
+
+.page.alpinoHome .installPromptType {
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: var(--echo-r-pill);
+  background: var(--echo-paper-white);
+  border: 1px solid var(--echo-line-brand);
+  color: var(--echo-ink-primary);
+}
+
+.page.alpinoHome .installPromptTypeChrome::before,
+.page.alpinoHome .installPromptTypeClawhub::before,
+.page.alpinoHome .installPromptTypeApple::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  flex: 0 0 12px;
+}
+
+.page.alpinoHome .installPromptTypeChrome::before {
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 50%, #4285f4 0 28%, transparent 29%),
+    conic-gradient(#ea4335 0 33%, #fbbc05 0 66%, #34a853 0 83%, #4285f4 0);
+}
+
+.page.alpinoHome .installPromptTypeClawhub::before {
+  border-radius: 4px;
+  background:
+    linear-gradient(135deg, #ff5a3d 0 48%, #1a3a8f 49% 100%);
+}
+
+.page.alpinoHome .installPromptTypeApple::before {
+  border-radius: 50%;
+  background: #111;
+}
+
+.page.alpinoHome .installPromptRating {
+  color: var(--echo-ink-text);
 }
 
 .page.alpinoHome .installAlsoLabel {
   grid-column: 1 / -1;
-  margin: var(--echo-sp-2) 0 calc(-1 * var(--echo-sp-1));
+  margin: var(--echo-sp-1) 0 calc(-1 * var(--echo-sp-1));
   font-family: var(--echo-font-mono) !important;
   font-size: var(--echo-t-mono-xs);
   font-weight: 600;
@@ -1835,20 +1977,40 @@
 }
 
 .page.alpinoHome .installCardSecondary {
-  min-height: 104px;
+  position: relative;
+  align-items: flex-start;
+  min-height: 106px;
+  padding-right: 132px;
   background:
     linear-gradient(135deg, var(--echo-paper-cream) 0%, var(--echo-paper-soft) 100%);
   box-shadow: none;
 }
 
+.page.alpinoHome .installCardSecondary .installCardBadge {
+  position: absolute;
+  top: var(--echo-sp-4);
+  right: var(--echo-sp-4);
+}
+
 .page.alpinoHome .installCardSecondary > .installCardMascot {
-  flex: 0 0 64px;
-  width: 64px;
-  height: 64px;
+  flex: 0 0 62px;
+  width: 62px;
+  height: 62px;
+  align-self: flex-start;
 }
 
 .page.alpinoHome .installCardSecondary .installCardName {
-  font-size: var(--echo-t-body);
+  font-size: 1.16rem;
+  font-weight: 700;
+}
+
+.page.alpinoHome .installCardSecondary .installPromptMeta {
+  gap: 6px;
+  font-size: 0.72rem;
+}
+
+.page.alpinoHome .installCardSecondary .installCardCaption {
+  margin-top: 1px;
 }
 
 .page.alpinoHome .installCardBuilder {
@@ -1867,9 +2029,9 @@
 
 .page.alpinoHome .installCardMascot {
   display: block;
-  width: 96px;
-  height: 96px;
-  border-radius: 18px;
+  width: 76px;
+  height: 76px;
+  border-radius: 16px;
   object-fit: cover;
   box-shadow: var(--echo-shadow-soft);
   flex: 0 0 auto;
@@ -1896,7 +2058,6 @@
   font-weight: 600;
   line-height: 1.2;
   color: var(--echo-ink-text);
-  margin-top: var(--echo-sp-1);
 }
 
 .page.alpinoHome .installCardCaption {
@@ -1969,7 +2130,7 @@
 
 .page.alpinoHome .clawhubBadgeSmall {
   font-family: var(--echo-font-body) !important;
-  font-size: 7.5px;
+  font-size: 0.4688rem;
   font-weight: 500;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -1978,7 +2139,7 @@
 
 .page.alpinoHome .clawhubBadgeLarge {
   font-family: var(--echo-font-brand) !important;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 700;
   letter-spacing: 0;
   color: var(--echo-paper-white);
@@ -1986,17 +2147,26 @@
 
 /* NPM card — red mark + monospace install command */
 .page.alpinoHome .installCardNpm {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px var(--echo-sp-3);
+  padding: var(--echo-sp-3);
   border-color: #e5e5e5;
 }
 
+.page.alpinoHome .installCardNpm .installCardEyebrow {
+  grid-column: 1 / -1;
+}
+
 .page.alpinoHome .npmBadgeBlock {
   align-items: center;
-  gap: 12px;
-  padding: 8px 14px;
+  gap: 10px;
+  padding: 6px 10px;
   border: 1px solid #e5e5e5;
   border-radius: var(--echo-r-tight);
   background: var(--echo-paper-white);
-  min-height: 56px;
+  min-height: 46px;
   text-decoration: none;
   transition: border-color var(--echo-dur-micro) var(--echo-ease-out),
               background var(--echo-dur-micro) var(--echo-ease-out);
@@ -2008,8 +2178,8 @@
 }
 
 .page.alpinoHome .npmBadgeMark {
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2019,8 +2189,8 @@
 }
 
 .page.alpinoHome .npmBadgeMark svg {
-  width: 26px;
-  height: 26px;
+  width: 22px;
+  height: 22px;
 }
 
 .page.alpinoHome .npmBadgeText {
@@ -2055,7 +2225,7 @@
 }
 
 .page.alpinoHome .npmCommandLine .installCardCommand {
-  padding: 8px 10px;
+  padding: 7px 10px;
   border: 0;
   border-radius: 0;
   background: transparent;
@@ -2063,8 +2233,8 @@
 
 .page.alpinoHome .npmCommandCopy {
   align-self: stretch;
-  min-width: 58px;
-  padding: 0 var(--echo-sp-3);
+  min-width: 52px;
+  padding: 0 var(--echo-sp-2);
   border: 0;
   border-left: 1px solid var(--echo-line);
   background: var(--echo-paper-white);
@@ -2360,7 +2530,7 @@
   }
 
   .page.alpinoHome .actGreeting {
-    font-size: clamp(2.1rem, 10vw, 3.4rem);
+    font-size: 1.9rem;
   }
 
   .page.alpinoHome .actBody,
@@ -4416,7 +4586,7 @@
   border-radius: 999px;
   background: rgba(34, 48, 72, 0.74);
   color: rgba(232, 241, 255, 0.96);
-  font-size: 20px;
+  font-size: 1.25rem;
   line-height: 1;
   cursor: pointer;
 }
@@ -4427,7 +4597,7 @@
 
 .skillPopupEyebrow {
   margin: 0 0 8px;
-  font-size: 11px;
+  font-size: var(--echo-t-mono-xs);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: rgba(162, 194, 238, 0.9);
@@ -4514,7 +4684,7 @@
 }
 
 .skillPopupFooterLabel {
-  font-size: 11px;
+  font-size: var(--echo-t-mono-xs);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: rgba(162, 194, 238, 0.9);
@@ -6337,3 +6507,132 @@
     padding: 0;
   }
 }
+
+/* Tweet social-proof wall (v3) — the whole AI world keeps saying it */
+.page.alpinoHome .tweetEyebrow {
+  align-self: center;
+  font-family: var(--echo-font-mono) !important;
+  font-size: var(--echo-t-mono-xs);
+  letter-spacing: var(--echo-ls-wider);
+  text-transform: uppercase;
+  color: var(--echo-ink-primary);
+  background: var(--echo-glass-bg);
+  border: 1px solid var(--echo-line-brand);
+  border-radius: var(--echo-r-pill);
+  padding: var(--echo-sp-1) var(--echo-sp-3);
+}
+/* Full-bleed two-row marquee, seamless right-to-left loop */
+.page.alpinoHome .tweetMarquee {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  max-width: 100vw;
+  margin-top: var(--echo-sp-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--echo-sp-4);
+  text-align: left;
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
+}
+.page.alpinoHome .marqueeRow {
+  display: flex;
+  overflow: hidden;
+  cursor: grab;
+  touch-action: pan-y;
+}
+.page.alpinoHome .marqueeTrack {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  width: max-content;
+  will-change: transform;
+  backface-visibility: hidden;
+}
+/* Cards replicate the official x.com embedded-tweet card: X palette + chrome.
+   This is a quoted external UI, so it intentionally uses X's colors (not Echo tokens). */
+.page.alpinoHome .tweetCard {
+  flex: 0 0 318px;
+  width: 318px;
+  margin-right: var(--echo-sp-4);
+  display: flex;
+  flex-direction: column;
+  padding: var(--echo-sp-4) var(--echo-sp-4);
+  background: #ffffff;
+  border: 1px solid #cfd9de;
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  color: #0f1419;
+  text-decoration: none;
+  transition: background var(--echo-dur-short) var(--echo-ease-out), box-shadow var(--echo-dur-short) var(--echo-ease-out);
+}
+.page.alpinoHome .tweetCard:hover {
+  background: #f7f9f9;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+}
+.page.alpinoHome .tweetHead {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.page.alpinoHome .tweetAvatar {
+  flex: 0 0 auto;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: #e1e8ed;
+}
+.page.alpinoHome .tweetMeta {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  line-height: 1.2;
+}
+.page.alpinoHome .tweetName {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-family: var(--echo-font-brand) !important;
+  font-weight: 700;
+  font-size: 0.9375rem;
+  color: #0f1419;
+}
+.page.alpinoHome .tweetVerified {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  color: #1d9bf0;
+}
+.page.alpinoHome .tweetFollowers {
+  font-family: var(--echo-font-body) !important;
+  font-size: 0.8125rem;
+  color: #536471;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.page.alpinoHome .tweetFollowerCount {
+  color: #0f1419;
+  font-weight: 700;
+}
+.page.alpinoHome .tweetX {
+  flex: 0 0 auto;
+  align-self: flex-start;
+  width: 19px;
+  height: 19px;
+  color: #0f1419;
+}
+.page.alpinoHome .tweetQuote {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-family: var(--echo-font-body) !important;
+  font-size: 0.9375rem;
+  line-height: 1.4;
+  color: #0f1419;
+}
diff --git a/supabase/.temp/cli-latest b/supabase/.temp/cli-latest
index a333a1d..aff2b6e 100644
--- a/supabase/.temp/cli-latest
+++ b/supabase/.temp/cli-latest
@@ -1 +1 @@
-v2.98.2
\ No newline at end of file
+v2.101.0
\ No newline at end of file

Chunk ID: 4a245c
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 112
Output:
## event...origin/event
A  app/[slug]/PublicSlugAuthGate.jsx
M  app/components/memory-graph/panels/FreePreviewLoginModal.tsx
M  app/globals.css
M  app/page.jsx
A  design-system
A  docs/HOMEPAGE_NARRATIVE_v2.md
M  package.json
R  public/assets/memory-sources/rive/echo_general-file-20.riv -> public/assets/memory-sources/rive/echo_general-file-22.riv
M  styles/EchoLanding.module.css
M  supabase/.temp/cli-latest
?? export-memories-8d79ae14.json

I’m going to finish the commit and push now. I’ll keep the exported memory JSON out of the commit because it contains personal exported memory data.

git commit -m "Polish homepage and register design system submodule" && git push origin event && git status --short --branch

Chunk ID: 25f52e
Wall time: 1.0019 seconds
Process running with session ID 88965
Original token count: 92
Output:
[event 8530f55] Polish homepage and register design system submodule
 10 files changed, 1120 insertions(+), 156 deletions(-)
 create mode 100644 app/[slug]/PublicSlugAuthGate.jsx
 create mode 160000 design-system
 create mode 100644 docs/HOMEPAGE_NARRATIVE_v2.md
 rename public/assets/memory-sources/rive/{echo_general-file-20.riv => echo_general-file-22.riv} (78%)

The main commit succeeded. Push is still running, so I’m waiting on the remote response before I call it done.

{
  "name": "write_stdin",
  "arguments": "{\"session_id\":88965,\"chars\":\"\",\"yield_time_ms\":1000,\"max_output_tokens\":6000}"
}

Chunk ID: 62fcdc
Wall time: 1.2918 seconds
Process exited with code 0
Original token count: 40
Output:
To https://github.com/Atlas-Graph-Academy/WebPageReactVersion.git
   7e010f3..8530f55  event -> event
## event...origin/event
?? export-memories-8d79ae14.json

Done. Main repo commit `8530f55` is pushed to `origin/event`. Submodule commit `b16f464` is pushed to `design-system/main`.

I left `export-memories-8d79ae14.json` untracked because it contains exported memory data and an email address. No build/check run.

::git-stage{cwd="/Users/kobe/WebPageReactVersion/design-system"}
::git-commit{cwd="/Users/kobe/WebPageReactVersion/design-system"}
::git-push{cwd="/Users/kobe/WebPageReactVersion/design-system" branch="main"}
::git-stage{cwd="/Users/kobe/WebPageReactVersion"}
::git-commit{cwd="/Users/kobe/WebPageReactVersion"}
::git-push{cwd="/Users/kobe/WebPageReactVersion" branch="event"}

我来直接改 homepage 文案和间距：H1 缩成一句，碎片行尽量压成一行，三列标题统一成短节奏。

rg -n "Stop re-explaining|Jun 22|Tanaka|Never blocked|Never capped|Save|Recall" app/page.jsx styles/EchoLanding.module.css app/globals.css

git status --short --branch

Chunk ID: fa43ea
Wall time: 0.0001 seconds
Process exited with code 0
Original token count: 854
Output:
styles/EchoLanding.module.css:624:/* ----- Hero pillars — Save · Use anywhere · No limits ------------------ */
styles/EchoLanding.module.css:710:/* Save pillar — a ring of platform logos orbiting Echo: "everything from
styles/EchoLanding.module.css:712:.page.alpinoHome .heroPillarSave {
styles/EchoLanding.module.css:717:.page.alpinoHome .heroSaveHalo {
styles/EchoLanding.module.css:724:.page.alpinoHome .heroSaveHaloIcon {
styles/EchoLanding.module.css:740:  animation: heroSaveHaloTwinkle 3.6s ease-in-out infinite;
styles/EchoLanding.module.css:744:@keyframes heroSaveHaloTwinkle {
styles/EchoLanding.module.css:750:  .page.alpinoHome .heroSaveHaloIcon { animation: none; opacity: 0.9; }
styles/EchoLanding.module.css:753:/* Recall pillar — a faint memory-web behind Kaia (she searches the graph) */
styles/EchoLanding.module.css:754:.page.alpinoHome .heroPillarRecall {
styles/EchoLanding.module.css:759:.page.alpinoHome .heroRecallGraph {
styles/EchoLanding.module.css:766:.page.alpinoHome .heroRecallGraphSvg {
styles/EchoLanding.module.css:776:.page.alpinoHome .heroRecallEdges path {
styles/EchoLanding.module.css:783:.page.alpinoHome .heroRecallNode {
styles/EchoLanding.module.css:785:  animation: heroRecallTwinkle 4.2s ease-in-out infinite;
styles/EchoLanding.module.css:789:@keyframes heroRecallTwinkle {
styles/EchoLanding.module.css:795:.page.alpinoHome .heroPillarSave .heroPillarRive,
styles/EchoLanding.module.css:796:.page.alpinoHome .heroPillarRecall .heroPillarRive {
styles/EchoLanding.module.css:801:  .page.alpinoHome .heroRecallNode { animation: none; opacity: 0.6; }
app/page.jsx:85:/* Recall pillar — a faint knowledge-graph (memory web) behind Kaia, in the
app/page.jsx:1604:            <p className={styles.actGreeting}>Stop re-explaining yourself. Just pick up where you left off &mdash; I&rsquo;ve got the details.</p>
app/page.jsx:1606:              The deadline you set &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalTime}`}>Jun 22</span>.
app/page.jsx:1608:              The person who matters &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalPerson}`}>@Tanaka</span>.
app/page.jsx:1613:                <span className={`${styles.heroPillarIcon} ${styles.heroPillarSave}`} aria-hidden="true">
app/page.jsx:1614:                  <span className={styles.heroSaveHalo}>
app/page.jsx:1620:                        className={styles.heroSaveHaloIcon}
app/page.jsx:1638:                <span className={styles.heroPillarTitle}>Save</span>
app/page.jsx:1642:                <span className={`${styles.heroPillarIcon} ${styles.heroPillarRecall}`} aria-hidden="true">
app/page.jsx:1643:                  <span className={styles.heroRecallGraph}>
app/page.jsx:1644:                    <svg className={styles.heroRecallGraphSvg} viewBox="0 0 160 160" aria-hidden="true">
app/page.jsx:1645:                      <g className={styles.heroRecallEdges}>
app/page.jsx:1657:                            className={styles.heroRecallNode}
app/page.jsx:1677:                <span className={styles.heroPillarTitle}>Recall</span>
app/page.jsx:1709:                <span className={styles.heroPillarTitle}>Never blocked by limits</span>
app/page.jsx:2031:                    Save and reuse your memories across Chrome browser.
app/globals.css:8415:  /* Narrative actions (Regenerate/Save/Copy) + Generate Story: fixed at screen bottom on mobile */

Chunk ID: b38240
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 15
Output:
## event...origin/event
?? export-memories-8d79ae14.json

我看到页面已经只剩那个未跟踪的 export JSON；这次会只碰 homepage 前端文件。先把 hero 相关结构和样式读一下，方便一刀切准。

sed -n '1570,1725p' app/page.jsx

sed -n '500,710p' styles/EchoLanding.module.css

sed -n '710,880p' styles/EchoLanding.module.css

sed -n '880,980p' styles/EchoLanding.module.css

rg -n "actGreeting|actBody|heroPillars|heroPillarTitle|heroPillar" styles/EchoLanding.module.css

Chunk ID: 7a7eaf
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 292
Output:
512:.page.alpinoHome .actGreeting {
522:.page.alpinoHome .actBody {
532:.page.alpinoHome .actBodyMuted {
625:.page.alpinoHome .heroPillars {
637:.page.alpinoHome .heroPillar {
647:.page.alpinoHome .heroPillarIcon {
658:.page.alpinoHome .heroPillarRive {
669:  animation: heroPillarFloat 6.4s ease-in-out infinite;
672:.page.alpinoHome .heroPillar:nth-child(2) .heroPillarRive {
676:.page.alpinoHome .heroPillar:nth-child(3) .heroPillarRive {
680:@keyframes heroPillarFloat {
685:.page.alpinoHome .heroPillarRiveInner {
695:.page.alpinoHome .heroPillarRiveInner > * {
700:.page.alpinoHome .heroPillarRiveInner canvas {
705:.page.alpinoHome .heroPillarIcon > svg {
712:.page.alpinoHome .heroPillarSave {
754:.page.alpinoHome .heroPillarRecall {
795:.page.alpinoHome .heroPillarSave .heroPillarRive,
796:.page.alpinoHome .heroPillarRecall .heroPillarRive {
806:.page.alpinoHome .heroPillarWide {
811:.page.alpinoHome .heroPillarNoLimit {
874:.page.alpinoHome .heroLimitEcho .heroPillarRive {
879:.page.alpinoHome .heroPillarTitle {
887:.page.alpinoHome .heroPillarDesc {
2532:  .page.alpinoHome .actGreeting {
2536:  .page.alpinoHome .actBody,
2732:.alpinoHome .actBody,

这块的主问题在 `app/page.jsx` 文案和 `styles/EchoLanding.module.css` 的 hero stack。接下来我会加一个专门的 detail line 样式，让 Jun 22 / $48K / @Tanaka 变成一条更稳的视觉钩子。

sed -n '2480,2565p' styles/EchoLanding.module.css

sed -n '2700,2765p' styles/EchoLanding.module.css

rg -n "actBodyMuted|memorySignal|actBody" app/page.jsx styles/EchoLanding.module.css

Chunk ID: d5e422
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 343
Output:
app/page.jsx:1605:            <p className={styles.actBody}>
app/page.jsx:1606:              The deadline you set &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalTime}`}>Jun 22</span>.
app/page.jsx:1607:              The budget you landed on &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalNumber}`}>$48K</span>.
app/page.jsx:1608:              The person who matters &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalPerson}`}>@Tanaka</span>.
app/page.jsx:1609:              <span className={styles.actBodyMuted}>Across Claude, ChatGPT, and every AI you use, I keep them all &mdash; so switching tools never means starting from zero.</span>
app/page.jsx:1996:            <p className={styles.actBody}>
styles/EchoLanding.module.css:522:.page.alpinoHome .actBody {
styles/EchoLanding.module.css:532:.page.alpinoHome .actBodyMuted {
styles/EchoLanding.module.css:538:.page.alpinoHome .memorySignal {
styles/EchoLanding.module.css:547:.page.alpinoHome .memorySignalTime {
styles/EchoLanding.module.css:558:.page.alpinoHome .memorySignalNumber {
styles/EchoLanding.module.css:569:.page.alpinoHome .memorySignalPerson,
styles/EchoLanding.module.css:583:.page.alpinoHome .memorySignalPerson {
styles/EchoLanding.module.css:2536:  .page.alpinoHome .actBody,
styles/EchoLanding.module.css:2732:.alpinoHome .actBody,

sed -n '1978,2010p' app/page.jsx

sed -n '430,525p' styles/EchoLanding.module.css

rg -n "@media" styles/EchoLanding.module.css | tail -n 20

Chunk ID: 9d2a13
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 95
Output:
749:@media (prefers-reduced-motion: reduce) {
800:@media (prefers-reduced-motion: reduce) {
1188:@media (prefers-reduced-motion: reduce) {
1361:@media (prefers-reduced-motion: reduce) {
1595:@media (prefers-reduced-motion: reduce) {
2438:@media (max-width: 820px) {
5278:@media (max-width: 720px) {
5518:@media (prefers-reduced-motion: reduce) {
6039:@media (max-width: 820px) {

我会顺手把第三列标题改成 `Never capped`，这样三列不会再被一个长标题拖偏；副标题里的时间、金额、人名继续用现有的三种 style 区分。

文案已经落下去了；现在补样式，把 detail line 做成一条横向节奏，并给短标题后的 hero 区域一点更清楚的层级。

sed -n '2438,2555p' styles/EchoLanding.module.css

sed -n '2555,2635p' styles/EchoLanding.module.css

我还会加一个 mobile guard：桌面保持一行，窄屏如果真的压不住，就让点号节奏自然换行，不让 @Tanaka 孤零零掉队。

最后补一下字体权重继承，避免新加的副标题行看起来和别的灰字不在一个体系里。

git diff -- app/page.jsx styles/EchoLanding.module.css

git status --short --branch

Chunk ID: db9f18
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 1278
Output:
diff --git a/app/page.jsx b/app/page.jsx
index fb22acf..6b509cb 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -1601,12 +1601,16 @@ export default function Home() {
         <div className={styles.copyContainer}>
           {/* Act 1 — Greeting + the three things you can do */}
           <section className={styles.act}>
-            <p className={styles.actGreeting}>Stop re-explaining yourself. Just pick up where you left off &mdash; I&rsquo;ve got the details.</p>
-            <p className={styles.actBody}>
-              The deadline you set &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalTime}`}>Jun 22</span>.
-              The budget you landed on &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalNumber}`}>$48K</span>.
-              The person who matters &rarr; <span className={`${styles.memorySignal} ${styles.memorySignalPerson}`}>@Tanaka</span>.
-              <span className={styles.actBodyMuted}>Across Claude, ChatGPT, and every AI you use, I keep them all &mdash; so switching tools never means starting from zero.</span>
+            <p className={styles.actGreeting}>Stop re-explaining yourself.</p>
+            <p className={styles.actDetailLine} aria-label="Deadline Jun 22, budget 48K, person Tanaka">
+              <span className={`${styles.memorySignal} ${styles.memorySignalTime}`}>Jun 22</span>
+              <span className={styles.actDetailDot}>·</span>
+              <span className={`${styles.memorySignal} ${styles.memorySignalNumber}`}>$48K</span>
+              <span className={styles.actDetailDot}>·</span>
+              <span className={`${styles.memorySignal} ${styles.memorySignalPerson}`}>@Tanaka</span>
+            </p>
+            <p className={styles.actToolLine}>
+              Across Claude, ChatGPT, and every AI you use, I keep them all &mdash; so switching tools never means starting from zero.
             </p>
             <ul className={styles.heroPillars}>
               <li className={styles.heroPillar}>
@@ -1706,7 +1710,7 @@ export default function Home() {
                     )}
                   </span>
                 </span>
-                <span className={styles.heroPillarTitle}>Never blocked by limits</span>
+                <span className={styles.heroPillarTitle}>Never capped</span>
                 <span className={styles.heroPillarDesc}>Capped on one AI? I keep you going on the next</span>
               </li>
             </ul>
diff --git a/styles/EchoLanding.module.css b/styles/EchoLanding.module.css
index 94137e4..fbc1db0 100644
--- a/styles/EchoLanding.module.css
+++ b/styles/EchoLanding.module.css
@@ -512,13 +512,36 @@
 .page.alpinoHome .actGreeting {
   margin: 0;
   font-family: var(--echo-font-brand) !important;
-  font-size: clamp(2.4rem, 4.7vw, 3.9rem);
+  font-size: clamp(2.75rem, 5vw, 4.25rem);
   font-weight: 700;
   line-height: var(--echo-lh-tight);
   color: var(--echo-ink-primary);
   text-wrap: balance;
 }
 
+.page.alpinoHome .actDetailLine {
+  max-width: 900px;
+  margin: 2px auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: nowrap;
+  font-family: var(--echo-font-body) !important;
+  font-size: 1.18rem;
+  line-height: var(--echo-lh-snug);
+  color: var(--echo-ink-mute);
+  white-space: nowrap;
+}
+
+.page.alpinoHome .actDetailDot {
+  font-family: var(--echo-font-brand) !important;
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1;
+  color: color-mix(in srgb, var(--echo-ink-mute) 58%, transparent);
+}
+
 .page.alpinoHome .actBody {
   max-width: 760px;
   margin: 0 auto;
@@ -529,6 +552,16 @@
   text-wrap: pretty;
 }
 
+.page.alpinoHome .actToolLine {
+  max-width: 820px;
+  margin: var(--echo-sp-1) auto 0;
+  font-family: var(--echo-font-body) !important;
+  font-size: var(--echo-t-body);
+  line-height: var(--echo-lh-relaxed);
+  color: var(--echo-ink-mute);
+  text-wrap: pretty;
+}
+
 .page.alpinoHome .actBodyMuted {
   display: block;
   margin-top: var(--echo-sp-2);
@@ -538,8 +571,8 @@
 .page.alpinoHome .memorySignal {
   display: inline-block;
   margin: 0 0.04em;
-  padding: 0.02em 0.28em 0.04em;
-  border-radius: 7px;
+  padding: 0.04em 0.38em 0.08em;
+  border-radius: 8px;
   line-height: 1.18;
   white-space: nowrap;
 }
@@ -624,7 +657,7 @@
 /* ----- Hero pillars — Save · Use anywhere · No limits ------------------ */
 .page.alpinoHome .heroPillars {
   list-style: none;
-  margin: var(--echo-sp-5) auto 0;
+  margin: var(--echo-sp-6) auto 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
@@ -2533,7 +2566,16 @@
     font-size: 1.9rem;
   }
 
+  .page.alpinoHome .actDetailLine {
+    max-width: 100%;
+    gap: 8px;
+    flex-wrap: wrap;
+    font-size: 1rem;
+    white-space: normal;
+  }
+
   .page.alpinoHome .actBody,
+  .page.alpinoHome .actToolLine,
   .page.alpinoHome .actAsset,
   .page.alpinoHome .reasonBody,
   .page.alpinoHome .installSub,
@@ -2730,6 +2772,7 @@
 }
 
 .alpinoHome .actBody,
+.alpinoHome .actToolLine,
 .alpinoHome .reasonBody,
 .alpinoHome .installSub,
 .alpinoHome .installCardCaption {

Chunk ID: abd42e
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 27
Output:
## event...origin/event
 M app/page.jsx
 M styles/EchoLanding.module.css
?? export-memories-8d79ae14.json

Diff 看起来很小：只改了标题、detail line、第三个 feature 标题和对应样式。未跟踪的 export JSON 仍然没动。

rg -n "--echo-lh-snug|--echo-lh-tight|--echo-lh-relaxed" styles app/globals.css

Chunk ID: 579f59
Wall time: 0.0000 seconds
Process exited with code 2
Original token count: 18
Output:
rg: unrecognized flag --echo-lh-snug|--echo-lh-tight|--echo-lh-relaxed

rg -n -- "--echo-lh-snug|--echo-lh-tight|--echo-lh-relaxed" styles app/globals.css

Chunk ID: 3f1402
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 513
Output:
app/globals.css:6675:  line-height: var(--echo-lh-tight);
styles/TermsOfUse.module.css:306:  line-height: var(--echo-lh-tight);
styles/TermsOfUse.module.css:347:  line-height: var(--echo-lh-relaxed);
styles/TermsOfUse.module.css:398:  line-height: var(--echo-lh-snug);
styles/TermsOfUse.module.css:433:  line-height: var(--echo-lh-snug);
styles/TermsOfUse.module.css:442:  line-height: var(--echo-lh-snug);
styles/TermsOfUse.module.css:451:  line-height: var(--echo-lh-relaxed);
styles/TermsOfUse.module.css:469:  line-height: var(--echo-lh-relaxed);
styles/ReferralPage.module.css:59:  line-height: var(--echo-lh-tight);
styles/NamePage.module.css:65:  line-height: var(--echo-lh-tight);
styles/EchoLanding.module.css:517:  line-height: var(--echo-lh-tight);
styles/EchoLanding.module.css:532:  line-height: var(--echo-lh-snug);
styles/EchoLanding.module.css:550:  line-height: var(--echo-lh-relaxed);
styles/EchoLanding.module.css:560:  line-height: var(--echo-lh-relaxed);
styles/EchoLanding.module.css:645:  line-height: var(--echo-lh-relaxed);
styles/EchoLanding.module.css:916:  line-height: var(--echo-lh-tight);
styles/EchoLanding.module.css:941:  line-height: var(--echo-lh-snug);
styles/EchoLanding.module.css:962:  line-height: var(--echo-lh-relaxed);
styles/EchoLanding.module.css:1647:  line-height: var(--echo-lh-tight);
styles/EchoLanding.module.css:1768:  line-height: var(--echo-lh-snug);
styles/EchoLanding.module.css:1776:  line-height: var(--echo-lh-relaxed);
styles/EchoLanding.module.css:1831:  line-height: var(--echo-lh-tight);
styles/EchoLanding.module.css:2099:  line-height: var(--echo-lh-relaxed);
styles/EchoLanding.module.css:2112:  line-height: var(--echo-lh-snug);
styles/EchoLanding.module.css:2296:  line-height: var(--echo-lh-snug);
styles/EchoLanding.module.css:4880:  line-height: var(--echo-lh-snug);
styles/EchoLanding.module.css:5148:  line-height: var(--echo-lh-snug);
styles/EchoLanding.module.css:5385:    line-height: var(--echo-lh-snug);
styles/LoginPage.module.css:65:  line-height: var(--echo-lh-tight);

rg -n "Just pick up|Never blocked|actDetailLine|Never capped" app/page.jsx styles/EchoLanding.module.css

git diff --stat

Chunk ID: a26963
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 90
Output:
app/page.jsx:1605:            <p className={styles.actDetailLine} aria-label="Deadline Jun 22, budget 48K, person Tanaka">
app/page.jsx:1713:                <span className={styles.heroPillarTitle}>Never capped</span>
styles/EchoLanding.module.css:522:.page.alpinoHome .actDetailLine {
styles/EchoLanding.module.css:2569:  .page.alpinoHome .actDetailLine {

Chunk ID: 30fee6
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 46
Output:
 app/page.jsx                  | 18 +++++++++------
 styles/EchoLanding.module.css | 51 +++++++++++++++++++++++++++++++++++++++----
 2 files changed, 58 insertions(+), 11 deletions(-)

改好了：

- H1 改成一行：`Stop re-explaining yourself.`
- `Jun 22 · $48K · @Tanaka` 单独做成 detail line，保留时间 / 数字 / 人名三种现有 style
- 工具切换那句移到下一行灰色副标题
- 第三个 feature 标题改成 `Never capped`
- 收了一下 hero 层级和移动端换行保护

改动在 [app/page.jsx](/Users/kobe/WebPageReactVersion/app/page.jsx:1604) 和 [styles/EchoLanding.module.css](/Users/kobe/WebPageReactVersion/styles/EchoLanding.module.css:512)。没有 build/check。

我来改这块，不再用三个相似 pill 糊过去：把 details 做成 date / budget / person 三张不同语义的小卡，再把 ChatGPT、Claude 放进下方句子里用它们自己的 icon 承接。

sed -n '1,140p' app/page.jsx

sed -n '1590,1625p' app/page.jsx

sed -n '512,590p' styles/EchoLanding.module.css

git status --short --branch

Chunk ID: 37d2d1
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 27
Output:
## event...origin/event
 M app/page.jsx
 M styles/EchoLanding.module.css
?? export-memories-8d79ae14.json

这里已经有 ChatGPT / Claude 的 brand icon 常量，可以直接复用；date / budget / person 我会用确定的产品语义：calendar icon、ledger/receipt icon、Tanaka 的小头像，不去凭空搞不确定资产。

rg -n "getDiceBearFallback|memorySignal|actTool|Claude|ChatGPT|icons/brands" app/page.jsx styles/EchoLanding.module.css public app -g '*.*'

Chunk ID: 041851
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 6412
Output:
app/page.jsx:6:import { getDiceBearFallback } from '@/app/components/memory-graph/utils/avatarConstants';
app/page.jsx:77:  { name: 'OpenClaw', icon: '/icons/brands/OpenClaw-Logo.png' },
app/page.jsx:78:  { name: 'ChatGPT',  icon: '/icons/brands/chatgpt.svg' },
app/page.jsx:79:  { name: 'Claude',   icon: '/icons/brands/Claude-Logo.png' },
app/page.jsx:80:  { name: 'Gemini',   icon: '/icons/brands/Gemini-Logo.png' },
app/page.jsx:81:  { name: 'DeepSeek', icon: '/icons/brands/DeepSeek-Logo.png' },
app/page.jsx:82:  { name: 'Grok',     icon: '/icons/brands/Grok-Logo.png' },
app/page.jsx:207:const LENNY_FALLBACK_FACE = getDiceBearFallback(DEMO_USER_ID);
app/page.jsx:542:  { id: '1935483342243426379', h: 'simonw', n: 'Simon Willison', v: true, f: '188K', a: 'https://pbs.twimg.com/profile_images/378800000261649705/be9cc55e64014e6d7663c50d7cb9fc75_normal.jpeg', q: "I don't trust the new ChatGPT memory feature. Context rot." },
app/page.jsx:544:  { id: '2049009026940481588', h: 'cyrilXBT', n: 'CyrilXBT', v: true, f: '182K', a: 'https://pbs.twimg.com/profile_images/2035229727414534145/aWap3Jbq_normal.jpg', q: 'Most people using Claude start from zero every single session.' },
app/page.jsx:548:  { id: '2033574400901935534', h: 'DallasAptGP', n: 'Barrett Linburg', v: true, f: '106K', a: 'https://pbs.twimg.com/profile_images/2008390072689709056/7XihK8j0_normal.jpg', q: 'Open Claude. Re-explain the business. Re-explain the team. Re-explain the numbers.' },
app/page.jsx:549:  { id: '1983081256930947333', h: 'mhdfaran', n: 'Farhan', v: true, f: '79K', a: 'https://pbs.twimg.com/profile_images/1685658187825811457/h9QgcNrM_normal.jpg', q: 'ChatGPT forgot what I told it 3 messages ago.' },
app/page.jsx:550:  { id: '1911131409525448879', h: 'DanielleFong', n: 'Danielle Fong 🔆', v: true, f: '62K', a: 'https://pbs.twimg.com/profile_images/1757993684614922240/SjwWIKOZ_normal.jpg', q: 'Too much context bleeding in the new ChatGPT memory function.' },
app/page.jsx:551:  { id: '1957875196393627985', h: 'BenjaminDEKR', n: 'Benjamin De Kraker', v: true, f: '43K', a: 'https://pbs.twimg.com/profile_images/2006784699251748864/fZ1xQPWe_normal.jpg', q: "I turned the ChatGPT Memory feature completely off — it's so bad." },
app/page.jsx:1606:              <span className={`${styles.memorySignal} ${styles.memorySignalTime}`}>Jun 22</span>
app/page.jsx:1608:              <span className={`${styles.memorySignal} ${styles.memorySignalNumber}`}>$48K</span>
app/page.jsx:1610:              <span className={`${styles.memorySignal} ${styles.memorySignalPerson}`}>@Tanaka</span>
app/page.jsx:1612:            <p className={styles.actToolLine}>
app/page.jsx:1613:              Across Claude, ChatGPT, and every AI you use, I keep them all &mdash; so switching tools never means starting from zero.
app/page.jsx:1820:                { kind: 'time', tag: 'TIME', qEn: "I had Claude map out this plan last week. Now I just know there's a deadline — Wednesday or Friday? And which step came first?", eEn: 'I keep the dates and the next step, so next time you pick up right where you stopped.' },
app/page.jsx:1821:                { kind: 'number', tag: 'NUMBERS', qEn: "I worked out the budget, the quotes, the priorities with ChatGPT — and in a new chat I'm calculating it all over again.", eEn: "Budgets, counts, scores, and why you chose them don't get buried in old chats — they're ready next time." },
app/page.jsx:1825:                { kind: 'crossAi', tag: 'CROSS-AI', qEn: 'ChatGPT knows my background, but Claude writes this part better. I switch over — and all the context is gone.', eEn: 'What you said in ChatGPT works in Claude too. Your memory follows you — not the AI.' },
app/page.jsx:1879:                Hit your limit on Claude? <span className={styles.heroCtaHookAccent}>Bounce to any AI &mdash; context and all.</span>
app/page.jsx:1882:                One click carries your whole conversation from Claude to ChatGPT, Gemini, anywhere. Pick up the exact same thread &mdash; you never start over.
styles/EchoLanding.module.css:485: *   Act 2  Sequence       — 6 origins (OpenClaw → ChatGPT → Claude → Gemini
styles/EchoLanding.module.css:555:.page.alpinoHome .actToolLine {
styles/EchoLanding.module.css:571:.page.alpinoHome .memorySignal {
styles/EchoLanding.module.css:580:.page.alpinoHome .memorySignalTime {
styles/EchoLanding.module.css:591:.page.alpinoHome .memorySignalNumber {
styles/EchoLanding.module.css:602:.page.alpinoHome .memorySignalPerson,
styles/EchoLanding.module.css:616:.page.alpinoHome .memorySignalPerson {
styles/EchoLanding.module.css:2578:  .page.alpinoHome .actToolLine,
styles/EchoLanding.module.css:2775:.alpinoHome .actToolLine,
app/landing-v4/page.jsx:61:  { name: 'Claude',     icon: '/icons/brands/Claude-Logo.png' },
app/landing-v4/page.jsx:62:  { name: 'ChatGPT',    icon: '/icons/brands/chatgpt.svg' },
app/landing-v4/page.jsx:63:  { name: 'Gemini',     icon: '/icons/brands/Gemini-Logo.png' },
app/landing-v4/page.jsx:64:  { name: 'DeepSeek',   icon: '/icons/brands/DeepSeek-Logo.png' },
app/landing-v4/page.jsx:65:  { name: 'Perplexity', icon: '/icons/brands/Perplexity-Logo.png' },
app/landing-v4/page.jsx:66:  { name: 'OpenClaw',   icon: '/icons/brands/OpenClaw-Logo.png' },
app/landing-v4/page.jsx:67:  { name: 'Grok',       icon: '/icons/brands/Grok-Logo.png' },
app/landing-v4/page.jsx:68:  { name: 'Copilot',    icon: '/icons/brands/Copilot-Logo.png' },
app/landing-v4/page.jsx:77:    body: 'Works on Claude, ChatGPT, Gemini, DeepSeek, Perplexity, Grok, Copilot.',
app/page.jsx:6:import { getDiceBearFallback } from '@/app/components/memory-graph/utils/avatarConstants';
app/page.jsx:77:  { name: 'OpenClaw', icon: '/icons/brands/OpenClaw-Logo.png' },
app/page.jsx:78:  { name: 'ChatGPT',  icon: '/icons/brands/chatgpt.svg' },
app/page.jsx:79:  { name: 'Claude',   icon: '/icons/brands/Claude-Logo.png' },
app/page.jsx:80:  { name: 'Gemini',   icon: '/icons/brands/Gemini-Logo.png' },
app/page.jsx:81:  { name: 'DeepSeek', icon: '/icons/brands/DeepSeek-Logo.png' },
app/page.jsx:82:  { name: 'Grok',     icon: '/icons/brands/Grok-Logo.png' },
app/page.jsx:207:const LENNY_FALLBACK_FACE = getDiceBearFallback(DEMO_USER_ID);
app/page.jsx:542:  { id: '1935483342243426379', h: 'simonw', n: 'Simon Willison', v: true, f: '188K', a: 'https://pbs.twimg.com/profile_images/378800000261649705/be9cc55e64014e6d7663c50d7cb9fc75_normal.jpeg', q: "I don't trust the new ChatGPT memory feature. Context rot." },
app/page.jsx:544:  { id: '2049009026940481588', h: 'cyrilXBT', n: 'CyrilXBT', v: true, f: '182K', a: 'https://pbs.twimg.com/profile_images/2035229727414534145/aWap3Jbq_normal.jpg', q: 'Most people using Claude start from zero every single session.' },
app/page.jsx:548:  { id: '2033574400901935534', h: 'DallasAptGP', n: 'Barrett Linburg', v: true, f: '106K', a: 'https://pbs.twimg.com/profile_images/2008390072689709056/7XihK8j0_normal.jpg', q: 'Open Claude. Re-explain the business. Re-explain the team. Re-explain the numbers.' },
app/page.jsx:549:  { id: '1983081256930947333', h: 'mhdfaran', n: 'Farhan', v: true, f: '79K', a: 'https://pbs.twimg.com/profile_images/1685658187825811457/h9QgcNrM_normal.jpg', q: 'ChatGPT forgot what I told it 3 messages ago.' },
app/page.jsx:550:  { id: '1911131409525448879', h: 'DanielleFong', n: 'Danielle Fong 🔆', v: true, f: '62K', a: 'https://pbs.twimg.com/profile_images/1757993684614922240/SjwWIKOZ_normal.jpg', q: 'Too much context bleeding in the new ChatGPT memory function.' },
app/page.jsx:551:  { id: '1957875196393627985', h: 'BenjaminDEKR', n: 'Benjamin De Kraker', v: true, f: '43K', a: 'https://pbs.twimg.com/profile_images/2006784699251748864/fZ1xQPWe_normal.jpg', q: "I turned the ChatGPT Memory feature completely off — it's so bad." },
app/page.jsx:1606:              <span className={`${styles.memorySignal} ${styles.memorySignalTime}`}>Jun 22</span>
app/page.jsx:1608:              <span className={`${styles.memorySignal} ${styles.memorySignalNumber}`}>$48K</span>
app/page.jsx:1610:              <span className={`${styles.memorySignal} ${styles.memorySignalPerson}`}>@Tanaka</span>
app/page.jsx:1612:            <p className={styles.actToolLine}>
app/page.jsx:1613:              Across Claude, ChatGPT, and every AI you use, I keep them all &mdash; so switching tools never means starting from zero.
app/page.jsx:1820:                { kind: 'time', tag: 'TIME', qEn: "I had Claude map out this plan last week. Now I just know there's a deadline — Wednesday or Friday? And which step came first?", eEn: 'I keep the dates and the next step, so next time you pick up right where you stopped.' },
app/page.jsx:1821:                { kind: 'number', tag: 'NUMBERS', qEn: "I worked out the budget, the quotes, the priorities with ChatGPT — and in a new chat I'm calculating it all over again.", eEn: "Budgets, counts, scores, and why you chose them don't get buried in old chats — they're ready next time." },
app/page.jsx:1825:                { kind: 'crossAi', tag: 'CROSS-AI', qEn: 'ChatGPT knows my background, but Claude writes this part better. I switch over — and all the context is gone.', eEn: 'What you said in ChatGPT works in Claude too. Your memory follows you — not the AI.' },
app/page.jsx:1879:                Hit your limit on Claude? <span className={styles.heroCtaHookAccent}>Bounce to any AI &mdash; context and all.</span>
app/page.jsx:1882:                One click carries your whole conversation from Claude to ChatGPT, Gemini, anywhere. Pick up the exact same thread &mdash; you never start over.
public/brief.html:1354:        <li><strong>Best in the world</strong> — ahead of ChatGPT, Mem0, and every shipped memory system.</li>
public/brief.html:1356:        <li><strong>Cross-AI</strong> — Claude to ChatGPT to Cursor, detail intact.</li>
public/brief.html:1376:          <span class="waste-row__product" role="cell">Claude</span>
public/brief.html:1381:          <span class="waste-row__product" role="cell">Cursor / Claude Code</span>
public/brief.html:1386:          <span class="waste-row__product" role="cell">ChatGPT Memory</span>
public/brief.html:1423:        <span class="achievements__text"><strong>#1 on LongMemEval.</strong> Beats ChatGPT, Mem0, and MemGPT on long-horizon recall.</span>
public/brief.html:1431:        <span class="achievements__text"><strong>Working today</strong> across Claude, ChatGPT, Cursor, and Claude Code.</span>
app/docs/page.jsx:66:              Best for ChatGPT, Claude, Gemini, Perplexity, Grok, and other supported chat sites.
app/docs/page.jsx:74:              Best for Cursor, Windsurf, Claude web connectors, and Claude Desktop. Gives AI tools
app/docs/page.jsx:140:                <td>Search memories, save conversations, connect Cursor, Windsurf, Claude</td>
app/docs/page.jsx:205:              guide later only if you want the same memories available inside your IDE or Claude.
app/docs/page.jsx:219:              Cursor, Windsurf, Claude web connectors, and Claude Desktop.
app/docs/getting-started/page.jsx:96:                <td>Give Cursor, Windsurf, or Claude access to memories</td>
app/docs/mcp-server/page.jsx:13:  keywords: ['EchoMemory MCP Server', 'Cursor', 'Windsurf', 'Claude', 'ECHO_API_TOKEN'],
app/docs/mcp-server/page.jsx:30:    about: ['EchoMemory MCP Server', 'Cursor', 'Windsurf', 'Claude', 'memory retrieval'],
app/docs/mcp-server/page.jsx:34:      'Decide whether your client is an IDE using stdio or a Claude client using a remote MCP connector URL.',
app/docs/mcp-server/page.jsx:44:        title="Give Cursor, Windsurf, Claude, and other agents access to Echo memories"
app/docs/mcp-server/page.jsx:57:          <li>Use stdio-based MCP in IDEs like Cursor and Windsurf, or a remote connector flow in Claude.</li>
app/docs/mcp-server/page.jsx:66:          <li>Decide whether your client is an IDE using stdio or a Claude client using a remote MCP connector URL.</li>
app/docs/mcp-server/page.jsx:69:          Use stdio for Cursor and Windsurf. Use the remote connector flow for Claude web and Claude Desktop.
app/docs/mcp-server/page.jsx:112:            <h3 className={styles.subsectionTitle}>Claude web custom connector</h3>
app/docs/mcp-server/page.jsx:123:            <h3 className={styles.subsectionTitle}>Claude Desktop</h3>
app/docs/mcp-server/page.jsx:125:              Use the same remote custom connector flow as Claude web instead of a local daemon or file path.
app/docs/mcp-server/page.jsx:128:{`Open Claude Desktop
app/docs/mcp-server/page.jsx:158:          <li>Using the Claude connector instructions for Cursor or Windsurf.</li>
app/docs/troubleshooting/page.jsx:72:          <li>If a Claude connector fails in web or Desktop, make sure you are using the remote connector URL flow, not a local stdio config.</li>
app/docs/troubleshooting/page.jsx:93:          <li>Include the exact client: Cursor, Windsurf, Claude web, Claude Desktop, or OpenClaw gateway.</li>
app/docs/get-api-key/page.jsx:56:          <li>MCP Server needs an Echo API token before Cursor, Windsurf, or Claude can talk to EchoMemory.</li>
app/docs/chrome-extension/page.jsx:154:          <li>ChatGPT</li>
app/docs/chrome-extension/page.jsx:155:          <li>Claude</li>
app/docs/chrome-extension/page.jsx:174:          If you also want the same memories available in Cursor, Windsurf, or Claude connectors, continue to
app/components/notifications/NotificationDropdown.tsx:63:  claude: '/icons/brands/Claude-Logo.png',
app/components/notifications/NotificationDropdown.tsx:64:  chatgpt: '/icons/brands/ChatGPT-Logo.png',
app/components/notifications/NotificationDropdown.tsx:65:  openclaw: '/icons/brands/OpenClaw-Logo.png',
app/components/notifications/NotificationDropdown.tsx:66:  gemini: '/icons/brands/Gemini-Logo.png',
app/components/notifications/NotificationDropdown.tsx:67:  deepseek: '/icons/brands/DeepSeek-Logo.png',
app/components/notifications/NotificationDropdown.tsx:68:  perplexity: '/icons/brands/Perplexity-Logo.png',
app/components/notifications/NotificationDropdown.tsx:69:  copilot: '/icons/brands/Copilot-Logo.png',
app/components/notifications/NotificationDropdown.tsx:70:  grok: '/icons/brands/Grok-Logo.png',
app/components/notifications/types.ts:1:import { getDiceBearFallback } from "@/app/components/memory-graph/utils/avatarConstants";
app/components/notifications/types.ts:46:  return getDiceBearFallback(userId || 'system');
app/components/memory-graph/cluster-graph/useGraphRenderer.ts:2:import { getDiceBearFallback } from '../utils/avatarConstants';
app/components/memory-graph/cluster-graph/useGraphRenderer.ts:250:    const diceBearAvatarUrl = (userId: string) => getDiceBearFallback(userId);
app/components/memory-graph/cluster-graph/useGraphRenderer.ts:1740:                  || getDiceBearFallback(mem.userId, "ffe7e9"))
app/components/memory-graph/panels/profile-snapshot/EventProfileSnapshot.tsx:13:import { getDiceBearFallback } from "../../utils/avatarConstants";
app/components/memory-graph/panels/profile-snapshot/EventProfileSnapshot.tsx:626:                                    const src = t.avatarUrl || getDiceBearFallback(t.userId);
app/components/memory-graph/panels/profile-snapshot/ShoutFeed.tsx:3:import { getDiceBearFallback } from "../../utils/avatarConstants";
app/components/memory-graph/panels/profile-snapshot/ShoutFeed.tsx:46:  const getAvatar = (userId: string | null) => (userId && avatarMap[userId]) || getDiceBearFallback(userId ?? "");
app/components/memory-graph/utils/avatarConstants.ts:3:export function getDiceBearFallback(seed: string, backgroundColor = "ffffff"): string {
app/components/memory-graph/panels/profile-snapshot/useEventProfileState.ts:7:import { getDiceBearFallback } from "../../utils/avatarConstants";
app/components/memory-graph/panels/profile-snapshot/useEventProfileState.ts:156:    return avatarByUserId.get(uid) || getDiceBearFallback(uid);
app/components/timeline-lab/TimelineCanvas.tsx:444:  openclaw:   '/icons/brands/OpenClaw-Logo.png',
app/components/timeline-lab/TimelineCanvas.tsx:445:  claude:     '/icons/brands/Claude-Logo.png',
app/components/timeline-lab/TimelineCanvas.tsx:446:  chatgpt:    '/icons/brands/chatgpt.svg',
app/components/timeline-lab/TimelineCanvas.tsx:447:  copilot:    '/icons/brands/Copilot-Logo.png',
app/components/timeline-lab/TimelineCanvas.tsx:448:  deepseek:   '/icons/brands/DeepSeek-Logo.png',
app/components/timeline-lab/TimelineCanvas.tsx:449:  gemini:     '/icons/brands/Gemini-Logo.png',
app/components/timeline-lab/TimelineCanvas.tsx:450:  grok:       '/icons/brands/Grok-Logo.png',
app/components/timeline-lab/TimelineCanvas.tsx:451:  perplexity: '/icons/brands/Perplexity-Logo.png',
app/components/timeline-lab/TimelineCanvas.tsx:452:  mistral:    '/icons/brands/Mistral-Logo.png',
app/components/timeline-lab/TimelineCanvas.tsx:453:  qwen:       '/icons/brands/Qwen-Logo.png',
app/components/memory-graph/panels/profile-snapshot/ProfileCardModal.tsx:45:import { getDiceBearFallback } from "../../utils/avatarConstants";
app/components/memory-graph/panels/profile-snapshot/ProfileCardModal.tsx:286:  const avatarSrc = localAvatarUrl || data?.avatarUrl || getDiceBearFallback(userId);
app/components/timeline-lab/TimelineLabView.tsx:1577:  chatgpt: { label: 'ChatGPT', icon: '/icons/brands/chatgpt.svg' },
app/components/timeline-lab/TimelineLabView.tsx:1578:  openai: { label: 'ChatGPT', icon: '/icons/brands/chatgpt.svg' },
app/components/timeline-lab/TimelineLabView.tsx:1579:  claude: { label: 'Claude', icon: '/icons/brands/Claude-Logo.png' },
app/components/timeline-lab/TimelineLabView.tsx:1580:  gemini: { label: 'Gemini', icon: '/icons/brands/Gemini-Logo.png' },
app/components/timeline-lab/TimelineLabView.tsx:1581:  deepseek: { label: 'DeepSeek', icon: '/icons/brands/DeepSeek-Logo.png' },
app/components/timeline-lab/TimelineLabView.tsx:1582:  openclaw: { label: 'OpenClaw', icon: '/icons/brands/OpenClaw-Logo.png' },
app/components/timeline-lab/TimelineLabView.tsx:1583:  perplexity: { label: 'Perplexity', icon: '/icons/brands/Perplexity-Logo.png' },
app/components/timeline-lab/TimelineLabView.tsx:1584:  grok: { label: 'Grok', icon: '/icons/brands/Grok-Logo.png' },
app/components/timeline-lab/TimelineLabView.tsx:1585:  copilot: { label: 'Copilot', icon: '/icons/brands/Copilot-Logo.png' },
app/components/timeline-lab/TimelineLabView.tsx:1586:  mistral: { label: 'Mistral', icon: '/icons/brands/Mistral-Logo.png' },
app/components/timeline-lab/TimelineLabView.tsx:1587:  qwen: { label: 'Qwen', icon: '/icons/brands/Qwen-Logo.png' },
app/components/timeline-lab/TimelineLabView.tsx:1591:  twitter: { label: 'X', icon: '/icons/brands/x-twiiter-black-transparent.png' },
app/components/timeline-lab/TimelineLabView.tsx:1633:  return key ? SOURCE_BRANDS[key] : { label: 'Source', icon: '/icons/brands/OpenClaw-Logo.png' };
app/components/timeline-lab/TimelineLabView.tsx:4031:          claude: '/icons/brands/Claude-Logo.png',
app/components/timeline-lab/TimelineLabView.tsx:4032:          chatgpt: '/icons/brands/ChatGPT-Logo.png',
app/components/timeline-lab/TimelineLabView.tsx:4033:          openclaw: '/icons/brands/OpenClaw-Logo.png',
app/components/timeline-lab/TimelineLabView.tsx:4034:          gemini: '/icons/brands/Gemini-Logo.png',
app/components/timeline-lab/TimelineLabView.tsx:4035:          deepseek: '/icons/brands/DeepSeek-Logo.png',
app/components/timeline-lab/TimelineLabView.tsx:4036:          perplexity: '/icons/brands/Perplexity-Logo.png',
app/components/timeline-lab/TimelineLabView.tsx:4037:          copilot: '/icons/brands/Copilot-Logo.png',
app/components/timeline-lab/TimelineLabView.tsx:4038:          grok: '/icons/brands/Grok-Logo.png',
app/components/timeline-lab/TimelineLabView.tsx:4041:          claude: 'Claude', chatgpt: 'ChatGPT', openclaw: 'OpenClaw',
app/components/memory-graph/MemoryGraphHeader.tsx:10:import { getDiceBearFallback } from "./utils/avatarConstants";
app/components/memory-graph/MemoryGraphHeader.tsx:430:                            img.src = getDiceBearFallback(c.userId);
app/components/memory-graph/MemoryGraphHeader.tsx:462:                                img.src = getDiceBearFallback(c.userId);
app/components/memory-graph/MemoryGraphHeader.tsx:494:                            img.src = getDiceBearFallback(member.userId);
app/components/memory-graph/MemoryGraphHeader.tsx:530:                          img.src = getDiceBearFallback(headerProfile.userId || headerProfile.displayName || "public");
app/components/memory-graph/MemoryGraphHeader.tsx:575:                          img.src = getDiceBearFallback(selectedContributor.userId);
app/components/memory-graph/MemoryGraphHeader.tsx:636:                      ChatGPT {memorySourceStats.chatgpt}
app/components/memory-graph/MemoryGraphHeader.tsx:645:                      Claude {memorySourceStats.claude}
app/components/timeline-lab/TimelineEmptyOnboarding.tsx:34:  { key: 'chatgpt',    name: 'ChatGPT',    src: '/icons/brands/chatgpt.svg',         slug: null,            color: '10a37f', tier: 1, usersCount: 12400, usersLabel: '12.4k', target: 'https://chatgpt.com' },
app/components/timeline-lab/TimelineEmptyOnboarding.tsx:35:  { key: 'claude',     name: 'Claude',     src: '/icons/brands/Claude-Logo.png',     slug: 'claude',        color: 'cc785c', tier: 1, usersCount: 8900,  usersLabel: '8.9k',  target: 'https://claude.ai' },
app/components/timeline-lab/TimelineEmptyOnboarding.tsx:36:  { key: 'gemini',     name: 'Gemini',     src: '/icons/brands/Gemini-Logo.png',     slug: 'googlegemini',  color: '4285f4', tier: 1, usersCount: 5100,  usersLabel: '5.1k',  target: 'https://gemini.google.com' },
app/components/timeline-lab/TimelineEmptyOnboarding.tsx:37:  { key: 'deepseek',   name: 'DeepSeek',   src: '/icons/brands/DeepSeek-Logo.png',   slug: null,            color: '4d6bfe', tier: 2, usersCount: 3100,  usersLabel: '3.1k',  target: 'https://chat.deepseek.com' },
app/components/timeline-lab/TimelineEmptyOnboarding.tsx:38:  { key: 'grok',       name: 'Grok',       src: '/icons/brands/Grok-Logo.png',       slug: 'x',             color: '111111', tier: 2, usersCount: 2400,  usersLabel: '2.4k',  target: 'https://grok.com' },
app/components/timeline-lab/TimelineEmptyOnboarding.tsx:39:  { key: 'perplexity', name: 'Perplexity', src: '/icons/brands/Perplexity-Logo.png', slug: 'perplexity',    color: '20b8cd', tier: 2, usersCount: 1700,  usersLabel: '1.7k',  target: 'https://www.perplexity.ai' },
app/components/timeline-lab/TimelineEmptyOnboarding.tsx:40:  { key: 'qwen',       name: 'Qwen',       src: '/icons/brands/Qwen-Logo.png',       slug: 'alibabacloud',  color: 'ff6a00', tier: 2, usersCount: 1300,  usersLabel: '1.3k',  target: 'https://chat.qwen.ai' },
app/components/timeline-lab/TimelineEmptyOnboarding.tsx:41:  { key: 'copilot',    name: 'Copilot',    src: '/icons/brands/Copilot-Logo.png',    slug: null,            color: '0078d4', tier: 2, usersCount: 1100,  usersLabel: '1.1k',  target: 'https://copilot.microsoft.com' },
app/components/timeline-lab/TimelineEmptyOnboarding.tsx:42:  { key: 'mistral',    name: 'Mistral',    src: '/icons/brands/Mistral-Logo.png',    slug: 'mistralai',     color: 'fa520f', tier: 2, usersCount: 820,   usersLabel: '820',   target: 'https://chat.mistral.ai' },
app/components/timeline-lab/TimelineEmptyOnboarding.tsx:55:  { key: 'openclaw', name: 'OpenClaw', src: '/icons/brands/OpenClaw-Logo.png', slug: null,       color: '1a1a1a', tier: 1, usersCount: 4300, usersLabel: '4.3k',
app/components/memory-graph/panels/InviteSearchModal.tsx:44:import { getDiceBearFallback } from "../utils/avatarConstants";
app/components/memory-graph/panels/InviteSearchModal.tsx:48:  return getDiceBearFallback(seed);
app/components/timeline-lab/platform-icons.ts:8:  chatgpt: { key: 'chatgpt', label: 'ChatGPT', icon: '/icons/brands/chatgpt.svg' },
app/components/timeline-lab/platform-icons.ts:9:  claude: { key: 'claude', label: 'Claude', icon: '/icons/brands/Claude-Logo.png' },
app/components/timeline-lab/platform-icons.ts:10:  gemini: { key: 'gemini', label: 'Gemini', icon: '/icons/brands/Gemini-Logo.png' },
app/components/timeline-lab/platform-icons.ts:11:  deepseek: { key: 'deepseek', label: 'DeepSeek', icon: '/icons/brands/DeepSeek-Logo.png' },
app/components/timeline-lab/platform-icons.ts:12:  openclaw: { key: 'openclaw', label: 'OpenClaw', icon: '/icons/brands/OpenClaw-Logo.png' },
app/components/timeline-lab/platform-icons.ts:13:  perplexity: { key: 'perplexity', label: 'Perplexity', icon: '/icons/brands/Perplexity-Logo.png' },
app/components/timeline-lab/platform-icons.ts:14:  grok: { key: 'grok', label: 'Grok', icon: '/icons/brands/Grok-Logo.png' },
app/components/timeline-lab/platform-icons.ts:15:  copilot: { key: 'copilot', label: 'Copilot', icon: '/icons/brands/Copilot-Logo.png' },
app/components/timeline-lab/platform-icons.ts:16:  mistral: { key: 'mistral', label: 'Mistral', icon: '/icons/brands/Mistral-Logo.png' },
app/components/timeline-lab/platform-icons.ts:17:  qwen: { key: 'qwen', label: 'Qwen', icon: '/icons/brands/Qwen-Logo.png' },
app/components/memory-graph/panels/MemberManageModal.tsx:5:import { getDiceBearFallback } from "../utils/avatarConstants";
app/components/memory-graph/panels/MemberManageModal.tsx:60:              const fallback = getDiceBearFallback(member.userId);
app/components/memory-graph/panels/GroupEmptyStateOverlay.tsx:3:import { getDiceBearFallback } from "../utils/avatarConstants";
app/components/memory-graph/panels/GroupEmptyStateOverlay.tsx:42:                      img.src = getDiceBearFallback(member.userId);
app/api/cluster-names/route.ts:312:- "AI", "ChatGPT", "Gemini" etc. are tools, not persons.

我会保留 H1 的钩子，但补成你说的 “I remember the details.”，然后把三种 detail 改成明显不同的对象形态，而不是只是换颜色。

sed -n '190,220p' app/page.jsx

ls -1 public/icons/brands | sort | sed -n '1,80p'

sed -n '590,630p' styles/EchoLanding.module.css

Chunk ID: c28baf
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 56
Output:
ChatGPT-Logo.png
Claude-Logo.png
Copilot-Logo.png
DeepSeek-Logo.png
Gemini-Logo.png
Grok-Logo.png
MCP-Logo.png
Mistral-Logo.png
OpenClaw-Logo.png
Perplexity-Logo.png
Qwen-Logo.png
chatgpt.svg
x-twiiter-black-transparent.png

接下来会动 JSX 结构：`Jun 22 / $48K / @Tanaka` 从纯文本 pill 变成三张语义 detail 卡；ChatGPT / Claude 不用外链，直接用 repo 里的品牌 icon。

rg -n "<Image|Image" app/page.jsx | head -n 20

Chunk ID: 88c92a
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 102
Output:
5:import Image from 'next/image';
218:  { input: 'gotoImageMemory', value: 1 },
235:  { input: 'gotoImageMemory', value: 1, action: 'idle', dur: [2000, 3500] },
1544:                        <Image
1842:                    <Image
2020:                <Image
2039:                  <Image
2059:                <Image
2068:                    <Image
2100:                <Image
2109:                    <Image

样式上我会让三张 detail 卡各自有不同轮廓：日期像 calendar chip，预算像 ledger row，人物像 profile chip。这样后面扩到 organization / event 也有空间。

rg -n -- "--echo-note|--echo-ink-seal|--echo-paper-mist|--echo-line" styles/EchoLanding.module.css app/globals.css | head -n 80

Chunk ID: d9642f
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 1732
Output:
app/globals.css:6629:  border: 1px solid var(--echo-line-ink);
app/globals.css:6698:  border: 1px solid var(--echo-line-ink);
app/globals.css:6775:  border: 1px solid var(--echo-line-ink);
app/globals.css:6807:  color: var(--echo-ink-seal);
app/globals.css:6821:  border: 1px solid var(--echo-line-ink);
app/globals.css:6922:  color: var(--echo-ink-seal);
styles/EchoLanding.module.css:295:  border: 1px solid var(--echo-line-ink);
styles/EchoLanding.module.css:321:  border: 1px solid var(--echo-line-ink);
styles/EchoLanding.module.css:587:  background: color-mix(in srgb, var(--echo-paper-mist) 70%, var(--echo-paper-white));
styles/EchoLanding.module.css:597:  color: var(--echo-ink-seal);
styles/EchoLanding.module.css:598:  background: color-mix(in srgb, var(--echo-ink-seal) 7%, var(--echo-paper-white));
styles/EchoLanding.module.css:599:  border: 1px solid color-mix(in srgb, var(--echo-ink-seal) 18%, transparent);
styles/EchoLanding.module.css:610:    color-mix(in srgb, var(--echo-note-pink) 72%, transparent) 54%,
styles/EchoLanding.module.css:611:    color-mix(in srgb, var(--echo-note-pink) 72%, transparent) 94%,
styles/EchoLanding.module.css:617:  border: 1px solid color-mix(in srgb, var(--echo-note-pink) 75%, var(--echo-line));
styles/EchoLanding.module.css:862:  border: 1px solid color-mix(in srgb, var(--echo-ink-seal) 14%, transparent);
styles/EchoLanding.module.css:863:  background: color-mix(in srgb, var(--echo-ink-seal) 5%, var(--echo-paper-white));
styles/EchoLanding.module.css:872:  color: var(--echo-ink-seal);
styles/EchoLanding.module.css:887:  color: var(--echo-ink-seal);
styles/EchoLanding.module.css:894:  color: color-mix(in srgb, var(--echo-ink-seal) 64%, var(--echo-ink-mute));
styles/EchoLanding.module.css:1053:  border: 1px solid var(--echo-line-brand);
styles/EchoLanding.module.css:1080:  border: 1px solid color-mix(in srgb, var(--echo-ink-seal) 26%, var(--echo-line));
styles/EchoLanding.module.css:1081:  background: color-mix(in srgb, var(--echo-ink-seal) 7%, var(--echo-paper-white));
styles/EchoLanding.module.css:1088:  color: var(--echo-ink-seal);
styles/EchoLanding.module.css:1104:  color: var(--echo-ink-seal);
styles/EchoLanding.module.css:1141:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:1460:  color: var(--echo-ink-seal);
styles/EchoLanding.module.css:1665:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:1678:  border: 1px solid var(--echo-line-brand);
styles/EchoLanding.module.css:1693:  background: color-mix(in srgb, var(--echo-paper-mist) 74%, var(--echo-paper-white));
styles/EchoLanding.module.css:1694:  border-color: color-mix(in srgb, var(--echo-ink-primary) 18%, var(--echo-line));
styles/EchoLanding.module.css:1698:  color: var(--echo-ink-seal);
styles/EchoLanding.module.css:1699:  background: color-mix(in srgb, var(--echo-ink-seal) 7%, var(--echo-paper-white));
styles/EchoLanding.module.css:1700:  border-color: color-mix(in srgb, var(--echo-ink-seal) 24%, var(--echo-line));
styles/EchoLanding.module.css:1708:  background: color-mix(in srgb, var(--echo-note-pink) 62%, var(--echo-paper-white));
styles/EchoLanding.module.css:1709:  border-color: color-mix(in srgb, var(--echo-note-pink) 78%, var(--echo-line));
styles/EchoLanding.module.css:1714:  background: color-mix(in srgb, var(--echo-note-cream) 70%, var(--echo-paper-white));
styles/EchoLanding.module.css:1715:  border-color: color-mix(in srgb, var(--echo-note-cream) 86%, var(--echo-line));
styles/EchoLanding.module.css:1720:  background: color-mix(in srgb, var(--echo-note-mint) 62%, var(--echo-paper-white));
styles/EchoLanding.module.css:1721:  border-color: color-mix(in srgb, var(--echo-note-mint) 78%, var(--echo-line));
styles/EchoLanding.module.css:1727:  border-color: color-mix(in srgb, var(--echo-ink-accent) 28%, var(--echo-line));
styles/EchoLanding.module.css:1807:  border-color: color-mix(in srgb, var(--echo-ink-seal) 18%, var(--echo-line));
styles/EchoLanding.module.css:1816:  text-decoration-color: var(--echo-line-brand);
styles/EchoLanding.module.css:1859:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:1874:  border-color: var(--echo-line-brand);
styles/EchoLanding.module.css:1924:  border-color: var(--echo-line-brand);
styles/EchoLanding.module.css:1966:  border: 1px solid var(--echo-line-brand);
styles/EchoLanding.module.css:2107:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:2133:  border-color: var(--echo-line-ink);
styles/EchoLanding.module.css:2254:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:2272:  border-left: 1px solid var(--echo-line);
styles/EchoLanding.module.css:2306:  text-decoration-color: var(--echo-line-brand);
styles/EchoLanding.module.css:2316:  border: 1px solid var(--echo-line-ink);
styles/EchoLanding.module.css:2322:  border-color: var(--echo-line-brand);
styles/EchoLanding.module.css:2405:  border: 1px solid var(--echo-line-ink);
styles/EchoLanding.module.css:2441:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:2461:  border-color: var(--echo-line-ink);
styles/EchoLanding.module.css:4758:  border-color: var(--echo-line-brand);
styles/EchoLanding.module.css:4833:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:4854:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:4910:  color: var(--echo-ink-seal);
styles/EchoLanding.module.css:4941:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:4957:  border-color: color-mix(in srgb, var(--echo-ink-seal) 38%, var(--echo-line));
styles/EchoLanding.module.css:4958:  background: color-mix(in srgb, var(--echo-ink-seal) 10%, var(--echo-paper-white));
styles/EchoLanding.module.css:4959:  color: var(--echo-ink-seal);
styles/EchoLanding.module.css:4963:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:5064:  stroke: var(--echo-ink-seal);
styles/EchoLanding.module.css:5071:  fill: color-mix(in srgb, var(--echo-ink-seal) 10%, var(--echo-paper-white));
styles/EchoLanding.module.css:5072:  stroke: var(--echo-ink-seal);
styles/EchoLanding.module.css:5077:  fill: var(--echo-ink-seal);
styles/EchoLanding.module.css:5085:  fill: color-mix(in srgb, var(--echo-ink-seal) 10%, var(--echo-paper-white));
styles/EchoLanding.module.css:5086:  stroke: var(--echo-ink-seal);
styles/EchoLanding.module.css:5091:  fill: var(--echo-ink-seal);
styles/EchoLanding.module.css:5105:  fill: var(--echo-ink-seal);
styles/EchoLanding.module.css:5113:  border: 1px solid var(--echo-line);
styles/EchoLanding.module.css:5147:  border-bottom: 1px solid var(--echo-line);
styles/EchoLanding.module.css:5185:  text-decoration-color: var(--echo-line-strong);
styles/EchoLanding.module.css:5206:  border: 1px solid var(--echo-line-soft);
styles/EchoLanding.module.css:5255:  border-top: 1px solid var(--echo-line-soft);
styles/EchoLanding.module.css:5264:  border-top: 1px solid var(--echo-line-soft);

rg -n "LuCalendar|LuReceipt|LuClipboard|LuUser" app components lib styles -g '*.{js,jsx,ts,tsx}' | head -n 80

Chunk ID: 0acc62
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 93
Output:
rg: components: No such file or directory (os error 2)
app/components/notifications/NotificationDropdown.tsx:12:  LuUserPlus,
app/components/notifications/NotificationDropdown.tsx:13:  LuUserCheck,
app/components/notifications/NotificationDropdown.tsx:39:  friend_request: LuUserPlus,
app/components/notifications/NotificationDropdown.tsx:40:  friend_accept: LuUserCheck,

我先确认 lucide icon 名称在当前包里存在，避免因为一个 icon 名字让页面挂掉；确认后再 patch。

node -e "const lu=require('react-icons/lu'); console.log(['LuCalendarDays','LuReceiptText','LuNotebookTabs','LuUserRound'].map(k=>k+':'+!!lu[k]).join('\n'))"

Chunk ID: fc3a74
Wall time: 0.0000 seconds
Process exited with code 0
Original token count: 19
Output:
LuCalendarDays:true
LuReceiptText:true
LuNotebookTabs:true
LuUserRound:true

确认了 `LuCalendarDays` 和 `LuReceiptText` 都可用。现在开始替换 markup 和 CSS。

sed -n '1,40p' app/components/memory-graph/utils/avatarConstants.ts

头像我用现有的 DiceBear fallback 机制生成一个稳定的 `Tanaka` face，和项目里人物头像的方式一致。

现在加样式：三张 detail 卡会有各自的视觉语言，budget 里面会有很轻的 ledger lines，不是单纯一个红色数字。

我还要补移动端尺寸，不然三张 detail 卡在窄屏上会太硬；桌面保持横排，移动端让它们作为完整小卡自然换行。

sed -n '2560,2595p' styles/EchoLanding.module.css

Let’s inspect specific mobile block after shifting line numbers.

sed -n '2645,2705p' styles/EchoLanding.module.css

sed -n '2705,2745p' styles/EchoLanding.module.css

改完了，我快速看一下 diff，确认没有误碰其它区域。

git diff -- app/page.jsx styles/EchoLanding.module.css

git status --short --branch

rg -n "actDetailDot|memorySignal" app/page.jsx styles/EchoLanding.module.css