51 lines
3.6 KiB
Markdown
51 lines
3.6 KiB
Markdown
# Beeper Copilot UI reference captures
|
||
|
||
Source: <https://beeper-copilot-lp.vercel.app/>
|
||
|
||
Captured on 2026-09-28 with Chromium through agent-browser. These are screenshots
|
||
of the public landing page and its animated UI demonstrations, not screenshots
|
||
of a logged-in production application. Displayed people and conversations come
|
||
from that page, not this user's Beeper account. Animations can show different
|
||
stages between captures. No page contents were modified to create the images.
|
||
|
||
| Capture | Contents |
|
||
| ---------------------------------------------- | ---------------------------------------------------------------------------------- |
|
||
| [Desktop three-pane](desktop-three-pane.png) | Conversation list, conversation body/composer, person context; 1440 × 720 viewport |
|
||
| [Reply review](desktop-reply-review.png) | Three reply styles, selected candidate, approval button; 1440 × 1080 |
|
||
| [CRM and evidence](desktop-crm.png) | Person panel, evidence-backed fields, people board; 1440 × 1080 |
|
||
| [Features](desktop-features.png) | Unified inbox, ghost completion, review and reply suggestions; 1440 × 1080 |
|
||
| [Feedback](desktop-feedback.png) | Candidate comparison and writing-rule feedback; 1440 × 1080 |
|
||
| [Desktop hero](desktop-hero.png) | Landing-page introduction and part of the demo; 1440 × 1080 |
|
||
| [Desktop full page](desktop-full.png) | Entire landing page at 1440px wide |
|
||
| [Mobile hero](mobile-hero.png) | Landing-page layout at 390 × 844 |
|
||
| [Mobile conversation](mobile-conversation.png) | The demo's compressed conversation layout at 390 × 844 |
|
||
|
||
## Patterns to reuse
|
||
|
||
- Three coordinated panes: compact list, a dominant conversation, and persistent
|
||
person context. In this app the right pane should show Codex-published life
|
||
context, source references and pending user corrections.
|
||
- Compact network badges on identities and messages. Keep original conversation
|
||
identity available even when presenting a person across networks.
|
||
- A reply review sits near the conversation and composer. Candidate selection,
|
||
editing and confirmation remain visible steps; approval is distinct from
|
||
generating or inserting a suggestion.
|
||
- Evidence chips next to contextual statements provide a path back to messages
|
||
or the published life source reference.
|
||
- Suggested actions include their reason and can populate the appropriate
|
||
editor. The app can render externally produced suggestions without inference.
|
||
|
||
The LP's dense right panel and desktop three-pane arrangement are useful
|
||
references. Its mobile demo squeezes the columns and is not a good mobile
|
||
navigation model for this app: use list → conversation with an accessible context
|
||
panel instead. The LP's relationship-phase labels, coverage scores and confidence
|
||
percentages are demo product choices, not requirements for this personal CRM.
|
||
|
||
For Home, borrow the contextual presentation inside a reply activity rather than
|
||
embedding the full inbox. Weight logging needs a numeric input; a routine needs
|
||
steps; an optional task needs a simple completion control. These can coexist in
|
||
one activity list without forcing every activity into a chat layout.
|
||
|
||
See [external agent publishing](../../agent-publishing-design.md) for the proposed
|
||
producer/consumer boundary and typed activity contract.
|