From 2432dd429765a802a9c90b843c6d73dceb1a845c Mon Sep 17 00:00:00 2001 From: Garry Tan Date: Sat, 4 Apr 2026 08:25:23 -0700 Subject: [PATCH] feat: 6-card welcome page with cookie import + dual-agent cards MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 3x2 grid layout (was 2x2). New cards: "Import your cookies" (click 🍪 Cookies to import login sessions from Chrome/Arc/Brave) and "Or use your main agent" (your Claude Code terminal also controls this browser). Responsive: 3 cols > 2 cols > 1 col. Co-Authored-By: Claude Opus 4.6 (1M context) --- browse/src/welcome.html | 27 +++++++++++++++++++-------- browse/test/welcome-page.test.ts | 4 +++- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/browse/src/welcome.html b/browse/src/welcome.html index 7c42d8f3..759653f3 100644 --- a/browse/src/welcome.html +++ b/browse/src/welcome.html @@ -37,7 +37,7 @@ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 128px 128px; } - .page { width: 100%; max-width: 860px; padding: 0 40px; } + .page { width: 100%; max-width: 1060px; padding: 0 40px; } /* Sidebar prompt — points RIGHT toward where sidebar opens */ .sidebar-prompt { @@ -87,8 +87,8 @@ .logo-text { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 28px; color: #fff; letter-spacing: -0.5px; } .tagline { font-size: 15px; color: var(--zinc-400); max-width: 560px; line-height: 1.6; } - /* Feature cards */ - .features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; } + /* Feature cards — 3 columns for 6 cards */ + .features { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 28px; } .feat { background: var(--surface); border: 1px solid var(--border); @@ -155,7 +155,10 @@ .footer a { color: var(--zinc-400); text-decoration: none; } .footer a:hover { color: var(--amber-400); } - @media (max-width: 700px) { + @media (max-width: 900px) { + .features { grid-template-columns: 1fr 1fr; } + } + @media (max-width: 600px) { .features { grid-template-columns: 1fr; } html, body { overflow: auto; } .sidebar-prompt { right: 40px; } @@ -181,19 +184,27 @@
Talk to the sidebar
-

The sidebar chat is a Claude instance that controls this browser. Say "go to my app and check if login works" and watch it navigate, click, fill forms, and report back. It sees the same page you do.

+

The sidebar chat is a Claude instance that controls this browser. Say "go to my app and check if login works" and watch it navigate, click, fill forms, and report back.

+
+
+
Or use your main agent
+

Your Claude Code terminal also controls this browser. Run /qa, /design-review, or any skill and watch every action happen here. Two agents, one browser.

+
+
+
Import your cookies
+

Click 🍪 Cookies in the sidebar to import login sessions from Chrome, Arc, or Brave. Browse authenticated pages without logging in again.

Clean up any page
-

Click the Cleanup button in the sidebar. An AI reads the page, identifies overlays, paywalls, cookie banners, and clutter, then removes them. Articles become readable. Works on news sites, docs, anything.

+

Click Cleanup in the sidebar. AI identifies overlays, paywalls, cookie banners, and clutter, then removes them. Articles become readable.

Smart screenshots
-

The screenshot button captures a cleaned, annotated screenshot and sends it to your Claude Code session as context. "What's wrong with this page?" now has a visual answer.

+

The Screenshot button captures a cleaned screenshot and sends it to your Claude Code session as context. "What's wrong with this page?" now has a visual answer.

Modify any page
-

The sidebar can edit CSS and DOM on any page. "Make the header sticky" or "change the font to Inter." Changes happen live. The sidebar reports what it changed back to your Claude Code terminal.

+

The sidebar can edit CSS and DOM on any page. "Make the header sticky" or "change the font to Inter." Changes happen live, reported back to your terminal.

diff --git a/browse/test/welcome-page.test.ts b/browse/test/welcome-page.test.ts index 5d6b8a4b..e4d58fc7 100644 --- a/browse/test/welcome-page.test.ts +++ b/browse/test/welcome-page.test.ts @@ -89,8 +89,10 @@ describe('welcome page served via HTTP', () => { // ─── Feature cards ──────────────────────────────────────────────── - test('has all four feature cards', () => { + test('has all six feature cards', () => { expect(html).toContain('Talk to the sidebar'); + expect(html).toContain('Or use your main agent'); + expect(html).toContain('Import your cookies'); expect(html).toContain('Clean up any page'); expect(html).toContain('Smart screenshots'); expect(html).toContain('Modify any page');