# Settings Pages (v2)

### Route: `/settings/*`
### Source: `packages/web/src/routes/settings.tsx`, `packages/web/src/routes/settings/projects.tsx`

---

## v1 -> v2 Changes

| Aspect | v1 | v2 |
|--------|----|----|
| Projects error state | None | `[AlertCircle]` + "Failed to load projects" + `[Retry]` |
| Delete button | Immediate (with `window.confirm`) | Shows `[spinner]` during mutation to prevent double-click |
| Health Check | Unchanged | Unchanged |

---

## Settings Layout (unchanged)

```
+=============================================================================+
| [CW]  Initiatives  Agents  [*Settings*]                 [cmd-k]  [sun]  * |
+=============================================================================+
|                                                                             |
|  Settings                                                                   |
|  [ Health Check ]  [*Projects*]                                            |
|  -----------------------------------------------------------------------    |
|                                                                             |
|                        <Settings Page Outlet>                               |
|                                                                             |
+=============================================================================+
```

`/settings` redirects to `/settings/health`.

---

## Projects -- Default State

```
+=============================================================================+
|  Settings                                                                   |
|  [ Health Check ]  [*Projects*]                                            |
|  -----------------------------------------------------------------------    |
|                                                    [ Register Project ]     |
|                                                                             |
|  +-----------------------------------------------------------------------+  |
|  |  backend                                                              |  |
|  |  github.com/org/backend-api                                           |  |
|  |                                                                       |  |
|  |  Default branch: main  [pencil]                           [trash]     |  |
|  +-----------------------------------------------------------------------+  |
|                                                                             |
|  +-----------------------------------------------------------------------+  |
|  |  frontend                                                             |  |
|  |  github.com/org/frontend-app                                          |  |
|  |                                                                       |  |
|  |  Default branch: develop  [pencil]                        [trash]     |  |
|  +-----------------------------------------------------------------------+  |
|                                                                             |
+=============================================================================+
```

### Project card anatomy

```
+------------------------------------------------------------------------+
|  <project-name>                                                        |
|  <project-url>                                                         |
|                                                                        |
|  Default branch: <branch>  [pencil]                        [trash]     |
+------------------------------------------------------------------------+
```

- `[pencil]` (Pencil icon): click to toggle inline edit mode
- `[trash]` (Trash2 icon): click triggers `window.confirm()`; Shift+click bypasses

### Inline branch editing (click pencil)

```
|  Default branch: [develop________]  [enter to save / esc to cancel]   |
```

---

## Projects -- Error State

```
+=============================================================================+
|  Settings                                                                   |
|  [ Health Check ]  [*Projects*]                                            |
|  -----------------------------------------------------------------------    |
|                                                                             |
|                        [AlertCircle]                                        |
|                   Failed to load projects                                   |
|                                                                             |
|                         [ Retry ]                                           |
|                                                                             |
+=============================================================================+
```

- `[AlertCircle]` icon: `h-8 w-8 text-destructive`
- Error message: `text-sm text-destructive`
- `[ Retry ]` button: `variant="outline" size="sm"`, calls `projectsQuery.refetch()`
- `[ Register Project ]` button is hidden during error state

---

## Projects -- Delete In Progress

```
+------------------------------------------------------------------------+
|  backend                                                               |
|  github.com/org/backend-api                                            |
|                                                                        |
|  Default branch: main  [pencil]                        [spinner]       |
+------------------------------------------------------------------------+
```

- `[trash]` icon replaced by `[spinner]` (`Loader2` with `animate-spin`) during `deleteMutation.isPending`
- Button is `disabled` to prevent double-click
- Only the card being deleted shows the spinner; other cards remain interactive

---

## Projects -- Empty State

```
+=============================================================================+
|  Settings                                                                   |
|  [ Health Check ]  [*Projects*]                                            |
|  -----------------------------------------------------------------------    |
|                                                                             |
|  +-----------------------------------------------------------------------+  |
|  |                                                                       |  |
|  |                    No projects registered                             |  |
|  |                                                                       |  |
|  |                    [ Register Project ]                                |  |
|  |                                                                       |  |
|  +-----------------------------------------------------------------------+  |
|                                                                             |
+=============================================================================+
```

- `[ Register Project ]` button opens `RegisterProjectDialog`
- The top-right `[ Register Project ]` button is hidden when the empty state CTA is visible

---

## Projects -- Loading State

```
+=============================================================================+
|  Settings                                                                   |
|  [ Health Check ]  [*Projects*]                                            |
|  -----------------------------------------------------------------------    |
|                                                    [ Register Project ]     |
|                                                                             |
|  +-----------------------------------------------------------------------+  |
|  | ░░░░░░░░░░░░░░                                                       |  |
|  | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░                                        |  |
|  |                                                                       |  |
|  | ░░░░░░░░░░░░░░░░░░░░░  ░░                            ░░              |  |
|  +-----------------------------------------------------------------------+  |
|                                                                             |
|  +-----------------------------------------------------------------------+  |
|  | ░░░░░░░░░░░░░░                                                       |  |
|  | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░                                        |  |
|  |                                                                       |  |
|  | ░░░░░░░░░░░░░░░░░░░░░  ░░                            ░░              |  |
|  +-----------------------------------------------------------------------+  |
|                                                                             |
+=============================================================================+
```

Skeleton cards mirror project card anatomy: name line, URL line, branch line with
pencil/trash placeholders. Shimmer animation sweeps left-to-right on a 1.5s loop.

---

## Source

- `packages/web/src/routes/settings.tsx`
- `packages/web/src/routes/settings/health.tsx`
- `packages/web/src/routes/settings/projects.tsx`
- `packages/web/src/components/RegisterProjectDialog.tsx`