---
id: w2/m8/t006
title: Dashboard — Settings → "Connect GitHub" card (install link, status, disconnect)
worker: worker2
status: done
estimate: 45m
depends_on: [w2/m8/t005]
---

## Objective

The human half of connect: a card on the dashboard Settings page showing the GitHub connection state — disconnected (Connect button → the install URL from `connectGit`), connected (account login, repo grant hint, Disconnect with confirm), or unavailable (backend 503 → explain the missing configuration).

## Context

- Read `dashboard/CLAUDE.md` before editing; Apollo over bex-api GraphQL; shadcn components; i18n strings.
- Precedent: the Settings → Team section (w4/m12) and the API-keys card (w4/m8) for layout + confirm-dialog patterns.
- The GitHub callback (m8/t004) redirects back to this page — it should show the fresh connection without a manual reload (refetch on mount / on focus).
- Compare against Render's connect UX (`render.com/docs/github`): connect is a redirect to GitHub, grant management deep-links to `github.com/apps/<slug>/installations/new`.

## Steps

1. GraphQL documents: `gitConnection` query, `connectGit`/`disconnectGit` mutations; codegen.
2. Settings card component with the three states + disconnect confirm dialog; "Manage repo access on GitHub" link when connected.
3. Playwright pass against the dev stub / mock: disconnected → connect → (simulated callback) → connected → disconnect. Screenshots with bare filenames (land in `.playwright-mcp/`).

## Files

- `dashboard/src/features/settings/` (new card) + route wiring
- GraphQL documents + generated types

## Acceptance criteria

- [ ] Three states render correctly (disconnected / connected / backend-unconfigured)
- [ ] Disconnect requires confirmation; connected state shows account login
- [ ] Returning from the GitHub callback shows the connection without manual reload

## Out of scope

- Repo picker / create wizard (`w5/m15`); auto-deploy toggle (`w2/m9`)
