mirror of
https://github.com/rohitg00/agentmemory.git
synced 2026-09-14 20:16:33 +08:00
Rohit Ghumare
f1fbea3c08
Five user-reported issues against agent-memory.dev v0.9.16: 1. AGENT/MEMORY title was clamp(54px, 12vw, 160px) — eating ~half the viewport on most desktop widths and forcing FeaturedIn below the fold. Reduced to clamp(44px, 9vw, 124px). Mobile-stacked variant now clamp(40px, 14vw, 72px) — cleaner. 2. Primary CTA was a generic "START IN 30 SECONDS" button that anchored to #install. Replaced with a copyable terminal command — `$ npx @agentmemory/agentmemory` rendered as a gold-bordered cell with "CLICK TO COPY" affordance. Copy → clipboard, transient "COPIED" state. Matches what users actually type. 3. FeaturedIn was a standalone section below the fold. Now inlined inside the hero (compact mode — no border, no own padding, transparent background) so AlphaSignal / Agentic AI Foundation / Trendshift validation lands above the fold. 4. Star count was missing from the hero CTA button. The component only fetched client-side from unauthenticated github.com/api which is rate-limited to ~60 req/hr/IP — first paint had no count, often forever on mobile (which is what the user screenshot showed). Hero is now an async server component; calls lib/github.ts fetchRepoStats (same path Nav already uses), passes the SSR'd count into GitHubStarButton via new optional initialStars prop. Client-side refetch still fires in useEffect as a best-effort refresh. 5. Mobile layout was unverified. Tightened all clamp() values, added explicit @media (max-width: 760px) breakpoint that drops padding, stacks the title, and reduces the chip size. The new HeroNpxCommand has its own mobile breakpoint at 640px that hides the "CLICK TO COPY" hint and stretches to full width. CTA stacks vertically now: copyable command (primary, gold border) on row 1, then "SEE IT MOVE" + STAR-with-count on row 2. FeaturedIn strip sits below row 2 as part of the above-the-fold validation. Build clean. No new deps.
70 lines
1.3 KiB
CSS
70 lines
1.3 KiB
CSS
.cmd {
|
|
display: inline-grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 16px 22px;
|
|
min-width: 460px;
|
|
max-width: 100%;
|
|
background: var(--iron);
|
|
border: 1px solid var(--gold);
|
|
color: var(--white);
|
|
font-family: var(--font-mono);
|
|
font-size: 16px;
|
|
letter-spacing: 0.02em;
|
|
cursor: pointer;
|
|
transition: background 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
|
|
text-align: left;
|
|
}
|
|
.cmd:hover {
|
|
background: #1a1a1f;
|
|
transform: translateY(-1px);
|
|
}
|
|
.cmd:focus-visible {
|
|
outline: 2px solid var(--gold);
|
|
outline-offset: 3px;
|
|
}
|
|
.copied {
|
|
background: var(--gold);
|
|
color: var(--ink);
|
|
border-color: var(--gold);
|
|
}
|
|
.copied .hint {
|
|
color: var(--ink);
|
|
}
|
|
.prompt {
|
|
color: var(--gold);
|
|
font-weight: 700;
|
|
}
|
|
.copied .prompt {
|
|
color: var(--ink);
|
|
}
|
|
.text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.hint {
|
|
font-size: 10px;
|
|
letter-spacing: 1.4px;
|
|
color: var(--ash);
|
|
text-transform: uppercase;
|
|
padding-left: 12px;
|
|
border-left: 1px solid var(--charcoal);
|
|
}
|
|
.copied .hint {
|
|
border-left-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
@media (max-width: 640px) {
|
|
.cmd {
|
|
min-width: 0;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
padding: 14px 16px;
|
|
gap: 10px;
|
|
}
|
|
.hint {
|
|
display: none;
|
|
}
|
|
}
|