From e72b7dc2e5d49248c8dbdcc8ce5fd26a47c034f6 Mon Sep 17 00:00:00 2001 From: Will Washburn Date: Mon, 31 Aug 2026 20:12:55 -0700 Subject: [PATCH 1/2] Use Grok metadata in terminal context --- web/components/home/HeroTerminalMarquee.tsx | 10 ++++++++-- web/lib/test/hero-terminal-marquee.test.tsx | 18 ++++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 web/lib/test/hero-terminal-marquee.test.tsx diff --git a/web/components/home/HeroTerminalMarquee.tsx b/web/components/home/HeroTerminalMarquee.tsx index 745b78eb..84b296b9 100644 --- a/web/components/home/HeroTerminalMarquee.tsx +++ b/web/components/home/HeroTerminalMarquee.tsx @@ -44,6 +44,7 @@ const AGENT_META: Record< TerminalAgent, { activityGlyph: string; + branchPrefix: string; cycle: string; label: string; mode: string; @@ -54,6 +55,7 @@ const AGENT_META: Record< > = { claude: { activityGlyph: '✻', + branchPrefix: 'claude', cycle: '7.8s', label: 'Claude Code', mode: 'trusted', @@ -63,6 +65,7 @@ const AGENT_META: Record< }, codex: { activityGlyph: '◌', + branchPrefix: 'codex', cycle: '7.2s', label: 'OpenAI Codex', mode: 'workspace-write', @@ -72,6 +75,7 @@ const AGENT_META: Record< }, grok: { activityGlyph: '◆', + branchPrefix: 'grok', cycle: '7.5s', label: 'Grok', mode: 'auto', @@ -81,6 +85,7 @@ const AGENT_META: Record< }, opencode: { activityGlyph: '▣', + branchPrefix: 'opencode', cycle: '6.9s', label: 'OpenCode', mode: 'build', @@ -399,6 +404,7 @@ function RelayNetwork() { } function GrokTerminalBody({ card }: { card: TerminalCard }) { + const meta = AGENT_META[card.agent]; const prompt = card.lines.find((line) => line.tone === 'prompt') ?? card.lines[0]; const activity = card.lines.find((line) => line.tone === 'tool') ?? card.lines[1]; const result = card.lines.find((line) => line.tone === 'relay' || line.tone === 'ok'); @@ -408,9 +414,9 @@ function GrokTerminalBody({ card }: { card: TerminalCard }) {
⌁ - codex/{card.repo.replace('/', '-')} ~/{card.repo} + {meta.branchPrefix}/{card.repo.replace('/', '-')} ~/{card.repo} - auto + {meta.mode}
({ + default: ({ className }: { className?: string }) => , +})); + +import { HeroTerminalMarquee } from '../../components/home/HeroTerminalMarquee'; + +describe('HeroTerminalMarquee', () => { + it('uses Grok metadata for the Grok terminal context', () => { + const markup = renderToStaticMarkup(); + + expect(markup).toContain('grok/relay-docs ~/relay/docs'); + expect(markup).not.toContain('codex/relay-docs ~/relay/docs'); + }); +}); From d25912f84635167aa82f681a1416dfa9e79b1f95 Mon Sep 17 00:00:00 2001 From: Will Washburn Date: Tue, 1 Sep 2026 05:36:33 -0700 Subject: [PATCH 2/2] Prevent gaps in terminal marquee --- web/app/landing.module.css | 6 +++--- web/components/home/HeroTerminalMarquee.tsx | 8 ++++---- web/lib/test/hero-terminal-marquee.test.tsx | 6 ++++++ 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/web/app/landing.module.css b/web/app/landing.module.css index 7bc08f77..2d9481d1 100644 --- a/web/app/landing.module.css +++ b/web/app/landing.module.css @@ -2057,10 +2057,10 @@ } /* ── Terminal marquee ──────────────────────────────────────────────────── - Three full-bleed rows of agent sessions sliding past. Each track holds two + Three full-bleed rows of agent sessions sliding past. Each track holds four identical copies of its cards and slides exactly one copy's width, so the loop is seamless; the spacing lives in each card's margin-right rather than - a flex gap so that -50% lands on a card boundary rather than half a gap + a flex gap so that -25% lands on a card boundary rather than half a gap short. Rows differ in duration, direction and negative delay (a phase offset) so the card seams never line up across the band. The rows also hold different numbers of cards, so their tracks are different lengths and the @@ -2170,7 +2170,7 @@ transform: translate3d(0, 0, 0); } to { - transform: translate3d(-50%, 0, 0); + transform: translate3d(-25%, 0, 0); } } diff --git a/web/components/home/HeroTerminalMarquee.tsx b/web/components/home/HeroTerminalMarquee.tsx index 84b296b9..8bbbd369 100644 --- a/web/components/home/HeroTerminalMarquee.tsx +++ b/web/components/home/HeroTerminalMarquee.tsx @@ -643,10 +643,10 @@ function TerminalRow({ rowClass: string; rowKey: string; }) { - // Two identical copies make the loop seamless: the track slides exactly one - // copy's width (translateX(-50%)) and snaps back with the second copy already - // sitting where the first one started. - const copies = ['a', 'b']; + // Four identical copies keep at least three full sequences beyond the loop + // boundary. That prevents wide viewports from outrunning shorter rows while + // the track slides exactly one copy's width (translateX(-25%)). + const copies = ['a', 'b', 'c', 'd']; const rowPhase = rowKey === 'one' ? 0 : rowKey === 'two' ? 2.2 : 4.4; return ( diff --git a/web/lib/test/hero-terminal-marquee.test.tsx b/web/lib/test/hero-terminal-marquee.test.tsx index 1aeb0c21..3e775978 100644 --- a/web/lib/test/hero-terminal-marquee.test.tsx +++ b/web/lib/test/hero-terminal-marquee.test.tsx @@ -15,4 +15,10 @@ describe('HeroTerminalMarquee', () => { expect(markup).toContain('grok/relay-docs ~/relay/docs'); expect(markup).not.toContain('codex/relay-docs ~/relay/docs'); }); + + it('renders enough repeated sequences to keep wide marquee rows covered', () => { + const markup = renderToStaticMarkup(); + + expect(markup.match(/grok\/relay-docs ~\/relay\/docs/g)).toHaveLength(4); + }); });