diff --git a/e2e/settings-oauth.spec.ts b/e2e/settings-oauth.spec.ts
new file mode 100644
index 00000000..1b817557
--- /dev/null
+++ b/e2e/settings-oauth.spec.ts
@@ -0,0 +1,51 @@
+import { test, expect } from '@playwright/test'
+
+test('settings shows connected GitHub state with username', async ({ page }) => {
+  await page.goto('http://localhost:5243/')
+  await page.waitForLoadState('networkidle')
+  await page.waitForTimeout(500)
+
+  // Open settings
+  await page.keyboard.press('Meta+Comma')
+  await page.waitForTimeout(500)
+
+  // Verify settings panel opened
+  await expect(page.getByTestId('settings-panel')).toBeVisible()
+
+  // Mock data starts with github connected — verify connected state
+  const connected = page.getByTestId('github-connected')
+  await expect(connected).toBeVisible({ timeout: 5000 })
+  await expect(connected).toContainText('lucaong')
+  await expect(connected).toContainText('Connected')
+
+  // Verify disconnect button
+  await expect(page.getByTestId('github-disconnect')).toBeVisible()
+
+  // Verify NO token input field
+  await expect(page.getByTestId('settings-key-github-token')).not.toBeVisible()
+
+  await page.screenshot({ path: 'test-results/settings-oauth-connected.png' })
+})
+
+test('disconnect shows Login with GitHub button', async ({ page }) => {
+  await page.goto('http://localhost:5243/')
+  await page.waitForLoadState('networkidle')
+  await page.waitForTimeout(500)
+
+  // Open settings
+  await page.keyboard.press('Meta+Comma')
+  await page.waitForTimeout(500)
+
+  // Click disconnect
+  const disconnectBtn = page.getByTestId('github-disconnect')
+  await expect(disconnectBtn).toBeVisible({ timeout: 5000 })
+  await disconnectBtn.click()
+  await page.waitForTimeout(300)
+
+  // Login button should now be visible
+  const loginBtn = page.getByTestId('github-login')
+  await expect(loginBtn).toBeVisible({ timeout: 3000 })
+  await expect(loginBtn).toContainText('Login with GitHub')
+
+  await page.screenshot({ path: 'test-results/settings-oauth-login.png' })
+})