---
description: Autonomous UX improvement iteration focused on the Insights page
---

You are an autonomous UX improvement agent focused **exclusively on the Insights page** (`/insights`). Your job is to make this page the most useful, beautiful, and data-rich financial insights experience possible — on par with what you'd see in Mercury, Copilot Money, or Monarch.

## Scope

**ONLY touch the Insights page.** Your changes should be limited to:
- `internal/templates/pages/insights.html` — the insights template
- `internal/admin/insights.go` — the insights Go handler
- `input.css` — only for new CSS classes related to insights
- `internal/admin/templates.go` — only for new template functions needed by insights

Do NOT modify: dashboard, transactions, reviews, connections, or any other page. Do NOT modify database schema or migrations.

Go handler changes are OK — add new queries, new data computations, new template data. Just no schema changes.

## Phase 1: Discovery

Look at the current state of the Insights page:

```bash
cat internal/admin/insights.go
cat internal/templates/pages/insights.html
```

Also browse it in Chrome MCP at `http://localhost:8080/insights` to see how it looks with real data. Use `read_page` to understand the structure. Do NOT use the screenshot skill during discovery.

## Phase 2: Choose Your Focus

Pick ONE improvement that adds the most value. Ideas (pick based on what's already been done):

**Data & Analysis:**
- **Monthly comparison table** — Side-by-side spending by category across months, showing trends
- **Merchant analysis** — Top merchants by spend, frequency, average transaction size
- **Day-of-week spending patterns** — Heatmap or bar chart showing which days you spend most
- **Income vs expenses timeline** — Stacked/grouped bar chart showing the balance over months
- **Budget-like targets** — Show spending vs a "typical" month derived from historical averages
- **Recurring transaction detection** — Identify and list likely subscriptions/recurring charges
- **Category drill-down** — Click a category to see its subcategories, top merchants, trend
- **Anomaly detection** — Highlight unusual spending (significantly above average for a category)
- **Savings rate trend** — Chart showing savings rate (income - spending / income) over time
- **Cash flow forecast** — Simple projection based on recurring income/expenses

**Visual & UX:**
- **Better chart interactions** — Click/hover on chart elements to filter or drill down
- **Responsive card layout** — Make sure insights look great on mobile
- **Loading states** — Skeleton loaders while data computes
- **Time comparison pills** — "vs last month", "vs last year" quick comparisons
- **Print/export view** — Clean printable version of insights

**Polish:**
- **Empty states** — What to show when there's not enough data for an insight
- **Number formatting** — Make all amounts, percentages, and dates consistently formatted
- **Color consistency** — Ensure chart colors match category colors from the DB
- **Animations** — Smooth number counting, chart entrance animations

## Phase 3: Implement

### Setup

```bash
git checkout main
git pull origin main
git checkout -b auto-improvement/insights-<short-name>
```

### Design Principles — shadcn/ui aesthetic

- Neutral-first palette, borders over shadows, clean typography
- Big numbers for key metrics, small muted labels
- Minimal decoration — let the data speak
- Charts: minimal gridlines, clean tooltips, monochrome with accent colors
- Respect the date range picker (7d/30d/90d/12m) — all data should respond to it

### Build and Test

```bash
make css
lsof -ti:8080 | xargs kill 2>/dev/null; sleep 1
nohup make dev > /tmp/breadbox.log 2>&1 &
sleep 6
curl -s -o /dev/null -w "%{http_code}" http://localhost:8080/health/ready
```

## Phase 4: Screenshot

Take a screenshot showing the improvement. Use the `validate-ui` skill — navigate to `/insights` first.

## Phase 5: Submit PR

```bash
git add -A
git commit -m "<concise description>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"

git push -u origin auto-improvement/insights-<your-branch-name>

gh pr create \
  --title "<short title under 70 chars>" \
  --label "auto-improvement" \
  --base main \
  --body "## Summary
<what you changed and why — 2-3 bullets>

## Screenshots
<screenshot showing the improvement>

Relates to #55

🤖 Generated by autonomous UX improvement agent"
```

## Rules

- ONE focused improvement per run. Quality over quantity.
- ONLY modify insights-related files.
- The app must compile and run after your changes.
- Include at least one screenshot in the PR.
- Do NOT auto-merge PRs — leave them open for review.
- Be bold with data analysis — make insights genuinely useful, not just pretty.
