docs: prod screenshots for every feature page (#88)

* docs(spec): prod screenshots for docs site design

Captures every feature page in docs/docs/features/ with multi-shot
screenshots from prod, redacted via in-browser CSS blur, embedded inline
in the same PR.

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

* docs(plan): prod screenshots for docs site implementation plan

Drives prod through agent-browser, in-browser CSS blur for PII, embeds
into 14 feature .md files. 19 tasks across infra setup, per-feature
captures, review, and PR.

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

* docs: scaffold screenshot capture infrastructure

* docs(screenshots): contacts page

Capture and embed six production screenshots for contacts.md: list view,
bulk-actions toolbar, contact detail, timeline, message composer, and
CSV/LinkedIn import. Populate /contacts and /contacts/:id blur selectors
in redaction-rules.json with selectors discovered on the live DOM.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): dashboard page

Capture three annotated screenshots for /dashboard (overview, expanded
follow-up card, needs-attention panel). Add blur selectors for contact
names, avatar images/initials, AI draft text, and activity snippets to
redaction-rules.json. Embed images into dashboard.md.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): gmail integration

Capture settings-section, bcc-address, and timeline-thread screenshots for gmail.md. Add /settings route blur selectors for connected Gmail address and integration usernames. Embed all three images in the Gmail feature doc.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): identity resolution

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): linkedin integration

Add settings-section.png showing the LinkedIn Extension row (Connected state,
connection status blurred). Embed image in linkedin.md after Installing the
Extension section. Pairing-modal skipped — modal is only reachable via
Disconnect, which would break the live extension token.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): map page

Capture overview, focus, and cluster screenshots for map.md; add /map
route PII blur selectors to redaction-rules.json; embed images in docs.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): mcp server

Capture settings-section.png (MCP Access with Generate key button) and
generated-key-modal.png (plaintext key fully blurred at 20px) for mcp.md.
Key was generated and immediately revoked after capture.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): notifications page

Capture feed, filter-unread, and navbar-badge screenshots for
notifications.md; add /notifications blur selectors to redaction-rules.json.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): organizations

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): settings page

Capture five settings screenshots (overview, connected-accounts, followup-rules, tags, csv-import) and embed them into settings.md.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): suggestions page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): telegram integration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): twitter integration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): twitter — fix bio-change shot, persist selectors

Re-captured bio-change-timeline.png from a contact with real bio_change
events (3 on file). The prior shot showed only Telegram DMs with a
single-line violet pill that could have been anything; the new shot shows
the same violet pill format in the correct context with TWO bio-change
entries visible (YESTERDAY + APR 26 2026), unambiguously identifying the
bio-update card format.

Also persists span.text-[11px].text-violet-600 into redaction-rules.json
under /contacts/:id so future re-captures blur bio text without ad-hoc
injection.

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

* docs(screenshots): twitter — bio pill prefix visible, content blurred

Surgical DOM-split at capture time: each bio-change pill
(single text-node "Bio updated: <content>") is split into a
visible prefix span and a .bio-pii content span. CSS blur(5px)
targets .bio-pii only, leaving "Bio updated:" legible.

The existing redaction-rules.json selector
span.text-[11px].text-violet-600 is kept as a fallback for
non-surgical captures.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): whatsapp integration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): whatsapp — clarify QR shot alt text

* docs(screenshots): fix PII leaks in 4 shots (meeting subjects, contact sidebar)

Add meeting-subject selector (span.text-[11px].text-stone-500.dark:text-stone-400)
to /contacts/:id blur rules. Re-capture bio-change-timeline with full sidebar blur
applied alongside the bio-pill surgical split. Re-capture gmail and whatsapp shots
with the new meeting selector so calendar event titles are no longer legible.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(screenshots): drop whatsapp/timeline — prod has no WhatsApp data

---------

Co-authored-by: Nick Sawinyh <nikita@sawinyh.ru>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

docs/docs/features/contacts.md

@@ -11,6 +11,8 @@ Contacts are the core entity in PingCRM. The contact list and detail pages let y
 
 The `/contacts` page displays all contacts in a searchable, sortable, paginated table.
 
+![Contact list view](/img/screenshots/contacts/list.png)
+
 ### Search and Filtering
 
 - **Full-text search** across contact names, emails, companies, notes, and social handles. Results are ranked by relevance: exact name prefix matches rank highest, followed by partial name matches, company/title matches, social handle matches, then other fields.
@@ -48,10 +50,14 @@ Select multiple contacts from the list to apply actions in one operation:
 - `GET /api/v1/contacts/2nd-tier/count` -- returns `{ count: N }`, used by the confirmation dialog.
 - `DELETE /api/v1/contacts/2nd-tier` -- deletes all 2nd tier contacts and their related data, returns `{ deleted_count: N }`.
 
+![Bulk actions toolbar with three contacts selected](/img/screenshots/contacts/list-bulk-actions.png)
+
 ## Contact Detail
 
 The `/contacts/[id]` page shows the full profile for a single contact.
 
+![Contact detail page](/img/screenshots/contacts/detail.png)
+
 ### Inline Editing
 
 Contact fields can be edited inline -- click a field to modify it. Fields include name, email, phone, company, title, tags, priority level, and notes.
@@ -84,6 +90,8 @@ Send messages directly from the contact detail page. Supported channels:
 
 The composer uses AI to draft context-aware messages based on the contact's profile and interaction history.
 
+![Message composer drafting an AI-suggested message](/img/screenshots/contacts/detail-composer.png)
+
 ### BCC Email Logging
 
 Each contact has a unique BCC address (e.g., `you+c7f3a2b@gmail.com`). BCC this address when sending emails from any client to automatically log the email to this contact's timeline. See [Gmail Integration — BCC Email Logging](./gmail.md#bcc-email-logging) for details.
@@ -99,6 +107,8 @@ A chronological timeline of all interactions with the contact, including:
 - Bio change events (detected from Twitter and Telegram).
 - Read receipts for Telegram messages (single check = delivered, double check = read).
 
+![Interaction timeline showing messages across platforms](/img/screenshots/contacts/detail-timeline.png)
+
 Messages longer than 400 characters are truncated with a "Show more" button to keep the timeline compact. Click to expand the full message.
 
 Notes added manually can be edited or deleted directly from the timeline by hovering over the entry to reveal inline action buttons.
@@ -172,4 +182,6 @@ Four methods are available for adding contacts:
 - **Google Contacts Sync** -- import contacts from your connected Google account.
 - **Manual Entry** -- add contacts one at a time through the UI.
 
+![CSV import modal](/img/screenshots/contacts/import.png)
+
 Additionally, the LinkedIn Chrome extension automatically creates contacts from your LinkedIn conversations during message sync.

docs/docs/features/dashboard.md

@@ -7,6 +7,8 @@ title: Dashboard
 
 The `/dashboard` page is the daily-driver view: stat cards at the top, follow-ups and activity in the centre, and an "is anything slipping" panel on the right. All data is fetched through React Query hooks and refreshes on focus.
 
+![Dashboard overview](/img/screenshots/dashboard/overview.png)
+
 ## Stat Cards
 
 Three counters at the top of the page, each with a week-over-week trend arrow when prior data is available:
@@ -27,6 +29,8 @@ Up to five pending suggestions from the follow-up engine, each rendered as an ex
 
 A trigger badge on each card shows why the suggestion fired: `90+ days`, `New event`, `Scheduled`, or `Birthday`. The "View all →" link jumps to the full `/suggestions` page.
 
+![Follow-up card expanded with AI-drafted message](/img/screenshots/dashboard/followup-expanded.png)
+
 ## Recent Activity
 
 A chronological feed of the most recent interactions across every platform — sent and received emails, Telegram messages, Twitter DMs, LinkedIn messages, manual notes, and meeting records. Each row links to the relevant contact.
@@ -36,3 +40,5 @@ A chronological feed of the most recent interactions across every platform — s
 A side panel listing high-priority contacts where outreach is overdue (no interaction past their priority threshold). Each row links to the contact detail page; an inline pill in the header shows the count when any are present. When everyone is on schedule, the panel reads "All caught up!".
 
 The list is capped to a small number on the dashboard; click "View all →" to open the contacts page sorted by overdue.
+
+![Needs Attention panel](/img/screenshots/dashboard/needs-attention.png)

docs/docs/features/gmail.md

@@ -11,6 +11,8 @@ PingCRM connects to Gmail via OAuth 2.0 with Google, syncing email threads, cont
 
 The Gmail integration uses standard Google OAuth 2.0. After granting access on the Google consent screen, PingCRM stores a refresh token to maintain access without repeated sign-in. Multi-account support allows connecting more than one Gmail address.
 
+![Gmail section in Settings](/img/screenshots/gmail/settings-section.png)
+
 ## Email Sync
 
 Individual email messages are imported as interactions. Each message captures:
@@ -25,6 +27,8 @@ Messages are deduplicated by Gmail message ID. Multi-message threads create sepa
 
 **Schedule:** Email sync runs automatically every 6 hours.
 
+![Gmail thread messages in a contact's interaction timeline](/img/screenshots/gmail/timeline-thread.png)
+
 ## BCC Email Logging
 
 Each contact has a unique BCC address. When you BCC that address on any email from any client (Gmail, Outlook, Apple Mail), PingCRM automatically logs the email to that contact's timeline.
@@ -39,6 +43,8 @@ Each contact has a unique BCC address. When you BCC that address on any email fr
 
 **No custom domain or email infrastructure required** -- it uses Gmail's native `+` addressing.
 
+![BCC address with copy button on the contact detail page](/img/screenshots/gmail/bcc-address.png)
+
 ## Google Contacts Sync
 
 A one-way import pulls contacts from Google Contacts into PingCRM. Contact records include names, email addresses, phone numbers, and organization fields. This import does not write back to Google -- it is read-only.

docs/docs/features/identity.md

@@ -7,6 +7,8 @@ title: Identity Resolution
 
 The **Identity Resolution** page (`/identity`) detects and merges duplicate contacts that represent the same person across different platforms. PingCRM uses a multi-tier matching system to surface candidates, from deterministic exact matches to probabilistic scoring.
 
+![Identity resolution queue](/img/screenshots/identity/queue.png)
+
 ## Tier 1: Deterministic Matching
 
 Tier 1 matches are high-confidence duplicates identified by exact data overlap. These are auto-merged without manual review.
@@ -58,6 +60,8 @@ For each pair, you can:
 - **Merge** -- combines both records into a single contact, preserving all interactions and platform links.
 - **Reject** -- dismisses the match so it will not be suggested again.
 
+![Side-by-side comparison card with merge and reject actions](/img/screenshots/identity/comparison-card.png)
+
 ## On-Demand Scan
 
 Click the **Scan** button on the Identity Resolution page to trigger a fresh duplicate detection pass across all contacts. This is useful after a large import or platform sync. The scan runs as a background task, and you will receive a notification when new matches are found.

docs/docs/features/linkedin.md

@@ -19,6 +19,8 @@ The PingCRM Chrome extension is **not published on the Chrome Web Store**. It sh
 
 To update later, `git pull` in the cloned repo (or re-download the ZIP) and click the **reload** icon on the extension's card in `chrome://extensions`.
 
+![LinkedIn section in Settings](/img/screenshots/linkedin/settings-section.png)
+
 ## Extension Pairing
 
 Connecting the extension uses a one-time pairing code instead of a password:

docs/docs/features/map.md

@@ -7,6 +7,8 @@ title: Map
 
 The `/map` page plots your contacts on an interactive world map. Use it to find nearby contacts when traveling, spot geographic clusters in your network, and navigate from a contact's location back to the map.
 
+![Map view with contacts plotted globally](/img/screenshots/map/overview.png)
+
 ## How it works
 
 Every contact with a non-empty `location` string is geocoded to latitude/longitude via the Mapbox Geocoding API. The map view queries contacts within the current viewport and renders them as pins, with clustering for dense metros.
@@ -18,6 +20,8 @@ Two entry points:
 1. **Sidebar nav** -- the "Map" entry opens `/map` at a world view. Pan and zoom to fill the sidebar with contacts in the current viewport.
 2. **From a contact page** -- when a contact has been successfully geocoded, the location text under their profile renders as a link. Clicking it opens `/map?focus=<contact_id>` centered on that contact at city-level zoom.
 
+![Map focused on a single contact](/img/screenshots/map/focus.png)
+
 If a contact's location couldn't be geocoded (free-form text like a URL, emoji, or unparseable entry), the location field renders as plain text on the contact page -- no link.
 
 ## Viewport sidebar
@@ -32,6 +36,8 @@ When a metro has more than 500 contacts in view, the sidebar shows a "Showing 50
 
 Zoomed-out views collapse nearby pins into numbered cluster bubbles. Clicking a cluster zooms in and breaks it apart. Cluster radius is 50 pixels, and clusters disappear at zoom level 14+.
 
+![Cluster bubbles at zoomed-out view](/img/screenshots/map/cluster.png)
+
 ## Geocoding
 
 Contacts are geocoded automatically in the background via a Celery task:

docs/docs/features/mcp.md

@@ -20,12 +20,16 @@ PingCRM includes an MCP server that lets AI clients query your CRM data directly
 
 All tools return Markdown-formatted text optimized for LLM consumption.
 
+![MCP Access section in Settings](/img/screenshots/mcp/settings-section.png)
+
 ## Setup
 
 ### 1. Generate an API Key
 
 Go to **Settings > Account > MCP Access** and click **Generate key**. The key is shown only once — copy it and store it securely. The key format is `pingcrm_` followed by a random string.
 
+![Generated API key modal — shown once, copy immediately](/img/screenshots/mcp/generated-key-modal.png)
+
 ### 2. Configure Your AI Client
 
 #### Claude Desktop (local / stdio)

docs/docs/features/notifications.md

@@ -7,6 +7,8 @@ title: Notifications
 
 The **Notifications** page (`/notifications`) is the central feed for system events, alerts, and actionable updates. An unread badge in the navbar indicates how many unread notifications are pending.
 
+![Notifications feed](/img/screenshots/notifications/feed.png)
+
 ## Notification Types
 
 PingCRM generates notifications for the following events:
@@ -20,6 +22,8 @@ PingCRM generates notifications for the following events:
 - **Connection expired** -- alerts when a platform OAuth token has expired and needs re-authorization.
 - **Meeting prep re-auth** -- prompts re-authorization when the `gmail.send` scope is needed for pre-meeting prep emails.
 
+![Unread filter tab](/img/screenshots/notifications/filter-unread.png)
+
 ## Actions
 
 - **Mark as read** -- dismiss a single notification.
@@ -32,6 +36,8 @@ PingCRM generates notifications for the following events:
   - Connection expired / sync failed → settings (reconnect)
   - Auto-tagging → settings tags tab
 
+![Unread badge in the navbar](/img/screenshots/notifications/navbar-badge.png)
+
 ## Filter Tabs
 
 The notification feed supports the following filter tabs:

docs/docs/features/organizations.md

@@ -11,6 +11,8 @@ Organizations group contacts by company or institution. The organization pages l
 
 The `/organizations` page displays all organizations in a sortable, searchable table.
 
+![Organizations list](/img/screenshots/organizations/list.png)
+
 ### Table Columns
 
 Each row shows:
@@ -39,10 +41,14 @@ Organizations with zero active contacts are automatically hidden from the list t
 - **Per-Row Delete** -- delete an individual organization directly from the list.
 - **Bulk Actions** -- perform operations on multiple selected organizations at once.
 
+![Selecting multiple organizations for merge](/img/screenshots/organizations/merge-selection.png)
+
 ## Organization Detail
 
 The `/organizations/[id]` page provides the full profile for a single organization.
 
+![Organization detail page](/img/screenshots/organizations/detail.png)
+
 ### Inline Editing
 
 The following fields can be edited inline:

docs/docs/features/settings.md

@@ -7,6 +7,10 @@ title: Settings
 
 The **Settings** page (`/settings`) manages platform connections, data imports, and sync controls. Each integration displays a connection status badge (connected, disconnected, or error).
 
+![Settings page overview](/img/screenshots/settings/overview.png)
+
+![Connected accounts at a glance](/img/screenshots/settings/connected-accounts.png)
+
 ## Gmail
 
 - **Connect / Disconnect** -- initiates or revokes the Google OAuth flow.
@@ -46,14 +50,20 @@ See [LinkedIn Integration](./linkedin.md) for full details on the extension, Voy
 - **LinkedIn CSV import** -- supports the export format from LinkedIn's "Download your data" feature. Columns are mapped automatically to PingCRM contact fields.
 - Imported contacts appear in the contacts list immediately and are eligible for identity resolution matching.
 
+![CSV import dropzone](/img/screenshots/settings/csv-import.png)
+
 ## Follow-up Rules
 
 Configure the follow-up intervals per priority level. These control how often the suggestion engine recommends reaching out to contacts at each priority tier (default: high=30 days, medium=60 days, low=180 days). Values can range from 7 to 365 days.
 
+![Follow-up interval settings per priority level](/img/screenshots/settings/followup-rules.png)
+
 ## Tags
 
 Manage the tag taxonomy used for organizing contacts. Tags can be generated automatically via LLM or applied manually. The taxonomy supports hierarchical categories.
 
+![Tag taxonomy management](/img/screenshots/settings/tags.png)
+
 ## MCP Access
 
 Generate an API key for the [MCP Server](../setup.md) (Model Context Protocol). This allows AI clients like Claude Desktop, Cursor, and VS Code to query your CRM data.