Skip to content

Commit bca1910

Browse files
authored
feat: web design-contract alignment, changed-line estimates, and architecture policy gate (#347)
## Requirement or Bug Complete the web design-token rollout described in the design-system guide, make changed-line counts honest for large edits, and land the bounded-context architecture gate with its agent tooling. Closes #341 and its tickets #342–#346. ## Code Changes - **Terminal palette from design tokens** — the embedded terminal reads its xterm theme from new `--terminal-*` custom properties (12 roles across light, dark, and system-dark scopes) instead of two hardcoded hex palettes; theme switches now propagate through one source of truth. - **Workflow panel motion** — feature-scoped `--color-workflow-*` rail tokens plus the shared `--wf-*` motion scale; card/state transitions, a running-indicator pulse at the panel beat, label tracking, and automatic disable under reduced motion. - **Typography and shape contract on application surfaces** — remaining raw `font-size` declarations moved onto the `--text-*` scale (14 sites across workflow cards, dialogs, badges, keyboard hints, composer, first-run, recovery); attachment count pill resized to host scaled text; radius/shape/overlay drift fixed onto contract tokens; all verified in light, dark, system-dark, and mono accent. - **Honest changed-line counts** — `computeLineChangeStat` (common prefix/suffix trim, row-array LCS, conservative fallback past a cell budget) with `computeEditChangeStat`; edit cards and file summaries now show `~`-marked estimates when a full diff is too expensive instead of `+0/-0`; only Write stays genuinely unknown. 13-case test coverage including trim, fallback, and large-file exactness. - **Bounded-context policy gate** — `architecture-policy.yaml` plus `scripts/architecture/` (package boundary rules, file-name conventions, golden-module contract, baseline) wired as `pnpm architecture:check`, with the `yaml` root dependency declared and the governance skill (rule catalog, policy schema, troubleshooting). - **Agent tooling skills** — browser automation, dogfooding, Electron automation, and framework-neutral TypeScript performance rules (24 js/async/bundle rules) added to the skill catalog; design-system guide retokenized to this repo's CSS vocabulary. - Generated web bundle restaged; `flake.nix` pnpmDeps hash refreshed for the new dependency. ## Behavior Changes and Affected Users - Web users: terminal follows the app theme everywhere; workflow panel animates (disabled under reduced motion); UI text scales with the user font size on previously fixed surfaces; large edits no longer read as "no change" in transcripts and file summaries; minor visual alignment on shapes. - Developers: new `pnpm architecture:check` gate and governance skill; four new agent skills; one new root dev dependency (`yaml`). ## Checklist - [x] Changesets for user-visible behavior (`web-design-token-alignment`, `web-large-edit-diff-stats`, `web-surface-contract-alignment` — minor) - [x] Tests: diff-stat suite (13 cases), web lib suites 204/204, full matrix green (build, typecheck, lint, sherif, `pnpm test` — 17931 passed; the single failure is the documented environment-specific base case), web typecheck + build, `architecture:check` clean - [x] `flake.nix` workspace sync and pnpmDeps hash verified - [x] English-only; no tracking or third-party identifiers introduced
1 parent 349be12 commit bca1910

121 files changed

Lines changed: 6463 additions & 406 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.agents/skills/agent-browser/SKILL.md‎

Lines changed: 697 additions & 0 deletions
Large diffs are not rendered by default.
Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
1+
<!--
2+
Derived from vercel-labs/agent-browser (skills/agent-browser/references/authentication.md).
3+
Copyright 2025 Vercel Inc. Licensed under Apache-2.0.
4+
Modified by Pythinker: local integration, formatting and adaptations.
5+
See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
6+
-->
7+
8+
# Authentication Patterns
9+
10+
Login flows, session persistence, OAuth, 2FA, and authenticated browsing.
11+
12+
**Related**: [session-management.md](session-management.md) for state persistence details, [SKILL.md](../SKILL.md) for quick start.
13+
14+
## Contents
15+
16+
- [Import Auth from Your Browser](#import-auth-from-your-browser)
17+
- [Persistent Profiles](#persistent-profiles)
18+
- [Session Persistence](#session-persistence)
19+
- [Basic Login Flow](#basic-login-flow)
20+
- [Saving Authentication State](#saving-authentication-state)
21+
- [Restoring Authentication](#restoring-authentication)
22+
- [OAuth / SSO Flows](#oauth--sso-flows)
23+
- [Two-Factor Authentication](#two-factor-authentication)
24+
- [HTTP Basic Auth](#http-basic-auth)
25+
- [Cookie-Based Auth](#cookie-based-auth)
26+
- [Token Refresh Handling](#token-refresh-handling)
27+
- [Security Best Practices](#security-best-practices)
28+
29+
## Import Auth from Your Browser
30+
31+
The fastest way to authenticate is to reuse cookies from a Chrome session you are already logged into.
32+
33+
**Step 1: Start Chrome with remote debugging**
34+
35+
```bash
36+
# macOS
37+
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222
38+
39+
# Linux
40+
google-chrome --remote-debugging-port=9222
41+
42+
# Windows
43+
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
44+
```
45+
46+
Log in to your target site(s) in this Chrome window as you normally would.
47+
48+
> **Security note:** `--remote-debugging-port` exposes full browser control on localhost. Any local process can connect and read cookies, execute JS, etc. Only use on trusted machines and close Chrome when done.
49+
50+
**Step 2: Grab the auth state**
51+
52+
```bash
53+
# Auto-discover the running Chrome and save its cookies + localStorage
54+
agent-browser --auto-connect state save ./my-auth.json
55+
```
56+
57+
**Step 3: Reuse in automation**
58+
59+
```bash
60+
# Load auth at launch
61+
agent-browser --state ./my-auth.json open https://app.example.com/dashboard
62+
63+
# Or load into an existing session
64+
agent-browser state load ./my-auth.json
65+
agent-browser open https://app.example.com/dashboard
66+
```
67+
68+
This works for any site, including those with complex OAuth flows, SSO, or 2FA -- as long as Chrome already has valid session cookies.
69+
70+
> **Security note:** State files contain session tokens in plaintext. Add them to `.gitignore`, delete when no longer needed, and set `AGENT_BROWSER_ENCRYPTION_KEY` for encryption at rest. See [Security Best Practices](#security-best-practices).
71+
72+
**Tip:** Combine with `--session-name` so the imported auth auto-persists across restarts:
73+
74+
```bash
75+
agent-browser --session-name myapp state load ./my-auth.json
76+
# From now on, state is auto-saved/restored for "myapp"
77+
```
78+
79+
## Persistent Profiles
80+
81+
Use `--profile` to point agent-browser at a Chrome user data directory. This persists everything (cookies, IndexedDB, service workers, cache) across browser restarts without explicit save/load:
82+
83+
```bash
84+
# First run: login once
85+
agent-browser --profile ~/.myapp-profile open https://app.example.com/login
86+
# ... complete login flow ...
87+
88+
# All subsequent runs: already authenticated
89+
agent-browser --profile ~/.myapp-profile open https://app.example.com/dashboard
90+
```
91+
92+
Use different paths for different projects or test users:
93+
94+
```bash
95+
agent-browser --profile ~/.profiles/admin open https://app.example.com
96+
agent-browser --profile ~/.profiles/viewer open https://app.example.com
97+
```
98+
99+
Or set via environment variable:
100+
101+
```bash
102+
export AGENT_BROWSER_PROFILE=~/.myapp-profile
103+
agent-browser open https://app.example.com/dashboard
104+
```
105+
106+
## Session Persistence
107+
108+
Use `--session-name` to auto-save and restore cookies + localStorage by name, without managing files:
109+
110+
```bash
111+
# Auto-saves state on close, auto-restores on next launch
112+
agent-browser --session-name twitter open https://twitter.com
113+
# ... login flow ...
114+
agent-browser close # state saved to ~/.agent-browser/sessions/
115+
116+
# Next time: state is automatically restored
117+
agent-browser --session-name twitter open https://twitter.com
118+
```
119+
120+
Encrypt state at rest:
121+
122+
```bash
123+
export AGENT_BROWSER_ENCRYPTION_KEY=$(openssl rand -hex 32)
124+
agent-browser --session-name secure open https://app.example.com
125+
```
126+
127+
## Basic Login Flow
128+
129+
```bash
130+
# Navigate to login page
131+
agent-browser open https://app.example.com/login
132+
agent-browser wait --load networkidle
133+
134+
# Get form elements
135+
agent-browser snapshot -i
136+
# Output: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Sign In"
137+
138+
# Fill credentials
139+
agent-browser fill @e1 "user@example.com"
140+
agent-browser fill @e2 "password123"
141+
142+
# Submit
143+
agent-browser click @e3
144+
agent-browser wait --load networkidle
145+
146+
# Verify login succeeded
147+
agent-browser get url # Should be dashboard, not login
148+
```
149+
150+
## Saving Authentication State
151+
152+
After logging in, save state for reuse:
153+
154+
```bash
155+
# Login first (see above)
156+
agent-browser open https://app.example.com/login
157+
agent-browser snapshot -i
158+
agent-browser fill @e1 "user@example.com"
159+
agent-browser fill @e2 "password123"
160+
agent-browser click @e3
161+
agent-browser wait --url "**/dashboard"
162+
163+
# Save authenticated state
164+
agent-browser state save ./auth-state.json
165+
```
166+
167+
## Restoring Authentication
168+
169+
Skip login by loading saved state:
170+
171+
```bash
172+
# Load saved auth state
173+
agent-browser state load ./auth-state.json
174+
175+
# Navigate directly to protected page
176+
agent-browser open https://app.example.com/dashboard
177+
178+
# Verify authenticated
179+
agent-browser snapshot -i
180+
```
181+
182+
## OAuth / SSO Flows
183+
184+
For OAuth redirects:
185+
186+
```bash
187+
# Start OAuth flow
188+
agent-browser open https://app.example.com/auth/google
189+
190+
# Handle redirects automatically
191+
agent-browser wait --url "**/accounts.google.com**"
192+
agent-browser snapshot -i
193+
194+
# Fill Google credentials
195+
agent-browser fill @e1 "user@gmail.com"
196+
agent-browser click @e2 # Next button
197+
agent-browser wait 2000
198+
agent-browser snapshot -i
199+
agent-browser fill @e3 "password"
200+
agent-browser click @e4 # Sign in
201+
202+
# Wait for redirect back
203+
agent-browser wait --url "**/app.example.com**"
204+
agent-browser state save ./oauth-state.json
205+
```
206+
207+
## Two-Factor Authentication
208+
209+
Handle 2FA with manual intervention:
210+
211+
```bash
212+
# Login with credentials
213+
agent-browser open https://app.example.com/login --headed # Show browser
214+
agent-browser snapshot -i
215+
agent-browser fill @e1 "user@example.com"
216+
agent-browser fill @e2 "password123"
217+
agent-browser click @e3
218+
219+
# Wait for user to complete 2FA manually
220+
echo "Complete 2FA in the browser window..."
221+
agent-browser wait --url "**/dashboard" --timeout 120000
222+
223+
# Save state after 2FA
224+
agent-browser state save ./2fa-state.json
225+
```
226+
227+
## HTTP Basic Auth
228+
229+
For sites using HTTP Basic Authentication:
230+
231+
```bash
232+
# Set credentials before navigation
233+
agent-browser set credentials username password
234+
235+
# Navigate to protected resource
236+
agent-browser open https://protected.example.com/api
237+
```
238+
239+
## Cookie-Based Auth
240+
241+
Manually set authentication cookies:
242+
243+
```bash
244+
# Set auth cookie
245+
agent-browser cookies set session_token "abc123xyz"
246+
247+
# Navigate to protected page
248+
agent-browser open https://app.example.com/dashboard
249+
```
250+
251+
## Token Refresh Handling
252+
253+
For sessions with expiring tokens:
254+
255+
```bash
256+
#!/bin/bash
257+
# Wrapper that handles token refresh
258+
259+
STATE_FILE="./auth-state.json"
260+
261+
# Try loading existing state
262+
if [[ -f "$STATE_FILE" ]]; then
263+
agent-browser state load "$STATE_FILE"
264+
agent-browser open https://app.example.com/dashboard
265+
266+
# Check if session is still valid
267+
URL=$(agent-browser get url)
268+
if [[ "$URL" == *"/login"* ]]; then
269+
echo "Session expired, re-authenticating..."
270+
# Perform fresh login
271+
agent-browser snapshot -i
272+
agent-browser fill @e1 "$USERNAME"
273+
agent-browser fill @e2 "$PASSWORD"
274+
agent-browser click @e3
275+
agent-browser wait --url "**/dashboard"
276+
agent-browser state save "$STATE_FILE"
277+
fi
278+
else
279+
# First-time login
280+
agent-browser open https://app.example.com/login
281+
# ... login flow ...
282+
fi
283+
```
284+
285+
## Security Best Practices
286+
287+
1. **Never commit state files** - They contain session tokens
288+
289+
```bash
290+
echo "*.auth-state.json" >> .gitignore
291+
```
292+
293+
2. **Use environment variables for credentials**
294+
295+
```bash
296+
agent-browser fill @e1 "$APP_USERNAME"
297+
agent-browser fill @e2 "$APP_PASSWORD"
298+
```
299+
300+
3. **Clean up after automation**
301+
302+
```bash
303+
agent-browser cookies clear
304+
rm -f ./auth-state.json
305+
```
306+
307+
4. **Use short-lived sessions for CI/CD**
308+
```bash
309+
# Don't persist state in CI
310+
agent-browser open https://app.example.com/login
311+
# ... login and perform actions ...
312+
agent-browser close # Session ends, nothing persisted
313+
```

0 commit comments

Comments
 (0)