Klaxon

Appearance

Screenshot inventory ​

The running list of what to capture with heroshot. Check items off as you commit them. See screenshots.md for the capture workflow; this page is just "what to point the picker at."

Shot names follow {surface}[-{variant}] — heroshot appends -{viewport}-{colorScheme}.png automatically, so one entry here usually produces ~6 image files.

Capture as alex@meridian.dev (owner, Meridian Labs) unless a row says otherwise — Meridian has the richest visual content (errors, forms, CVE shots, deploy approvals, GPU alerts, etc.).

Phase 1 — ~25 high-value shots for README + core guide pages ​

Dashboard (guide/web.md, guide/getting-started.md) ​

  • [ ] inbox — Inbox view, populated, no item selected (desktop + mobile)
  • [ ] inbox-item-selected — Inbox with an error-level item selected, detail pane visible
  • [ ] inbox-channel-deployments — Inbox filtered by the #deployments channel
  • [ ] snoozed — Snoozed view showing the 2 snoozed items with future snoozed_until
  • [ ] archived — Archived view with items grouped by date

Item detail (guide/items-and-forms.md) ​

  • [ ] item-error-with-actions — Open error item, all 4 action buttons (Ack / Dismiss / Archive / Snooze). Use "GPU cluster OOM on training job #4521".
  • [ ] item-with-form — Item with a populated form (use the "Deploy v2.14.0 to production" item — has select + textarea + yesno)
  • [ ] item-answered — Answered item showing the response JSON collapsible expanded
  • [ ] item-pinned — Pinned item at the top of the list with the pin indicator
  • [ ] item-with-comments — Detail pane showing 2–3 comments from mixed user + agent actors

Settings (guide/integrations.md, guide/push-notifications.md) ​

  • [ ] settings-connect-claude-code — Connect tab, "Claude Code" selected, code snippet + copy button
  • [ ] settings-connect-rest — Connect tab, "REST API" selected (shows curl examples)
  • [ ] settings-api-keys — API Keys section with ≥2 active keys + revoked collapsible open
  • [ ] settings-new-key — After generating a key: blue disclosure box with the raw token + Copy button

Admin panel (guide/admin.md, guide/teams.md, guide/roles-and-permissions.md, guide/invitations.md, guide/billing.md) ​

  • [ ] admin-users — Users tab with members grid populated, Invite button visible
  • [ ] admin-invite-modal — Invite modal open in email mode with role + team selects
  • [ ] admin-invite-link — Invite modal in link mode after creating a link (shareable URL + Copy)
  • [ ] admin-teams — Teams tab listing Platform + Research + etc.
  • [ ] admin-team-members — Team Members modal (click "Members" on a team row)
  • [ ] admin-roles — Roles tab showing 4 system roles + the custom "Support" role (Harbor)
  • [ ] admin-billing-team — Billing tab as Meridian (team plan), usage bars visible
  • [ ] admin-billing-enterprise — Billing tab as Elena at Harbor (enterprise plan, no limits) — switch persona to elena@harborcommerce.io

Login + invite flows (guide/authentication.md, guide/invitations.md) ​

  • [ ] login-initial — LoginPage in initial mode: GitHub + Google + "Log in with email". Log out first.
  • [ ] login-magic-link — Click "Log in with email", email + org_id inputs visible
  • [ ] invite-preview — /invite/<code> page (use a link-invite code from the seed — grep invitations table for one)

Overlays ​

  • [ ] keyboard-help — Press ? to open the overlay, capture the full shortcut table

Phase 2 — long tail (follow-up PR) ​

More item variants ​

  • [ ] item with deadline chip visible
  • [ ] item with multiple tags wrapping
  • [ ] item with assignee avatar in the list
  • [ ] snoozed item's detail pane (countdown visible)
  • [ ] item detail with a form that has every field type (the issue-link item covers computed + issuepicker)
  • [ ] item with a diffapproval form
  • [ ] item with a rating/slider form

Persona comparison (RBAC gating) ​

Same URL, different personas, to show permission differences:

  • [ ] personas-inbox-owner — as alex@meridian.dev (Admin button visible)
  • [ ] personas-inbox-member — as jordan@meridian.dev (no Admin button)
  • [ ] personas-inbox-viewer — as maya@meridian.dev (read-only indicators)
  • [ ] personas-inbox-custom — as kai@harborcommerce.io (custom "Support" role)

Responsive matrix ​

Capture these at mobile (390w) and tablet (900w) in addition to desktop. heroshot handles this via viewport flags — one entry covers all three:

  • [ ] responsive-inbox
  • [ ] responsive-item-detail (tablet/mobile renders as full-screen overlay)
  • [ ] responsive-admin
  • [ ] responsive-sidebar-collapsed (tablet mode, icons only)
  • [ ] responsive-sidebar-mobile-open (hamburger menu open)

Workspace / org switching ​

  • [ ] workspace-switcher-open — click the org name, dropdown visible (use Alex — member of 2 orgs)
  • [ ] workspace-switcher-create — "New workspace" form expanded

Modals + toasts ​

  • [ ] snooze-picker-open — click Snooze on an item, preset buttons visible
  • [ ] upgrade-modal — trigger a 402 by exceeding a limit (or mock the event)
  • [ ] undo-toast — dismiss an item, toast with progress bar visible (short window — capture fast)

Channels ​

  • [ ] channel-oncall — Inbox filtered by #oncall showing the escalation item pinned
  • [ ] channel-payments (private) — as marcus@harborcommerce.io (member of Engineering team)

Theme coverage ​

heroshot captures light + dark per shot automatically, but also grab the theme-switcher UI itself:

  • [ ] settings-theme-dark / settings-theme-light / settings-theme-dracula / settings-theme-nord

One item per form-field variant, so items-and-forms.md can embed a shot next to each type's description:

  • [ ] text, textarea, number
  • [ ] select, multiselect, radio
  • [ ] checkbox, toggle, yesno
  • [ ] datetime, rating, slider
  • [ ] issuepicker, diffapproval
  • [ ] markdown, taginput, repeat
  • [ ] fileupload, color, money, percentage, computed

The seed has at least one item exercising each — check seed.sql for which item carries which variant.

README placeholders ​

The three comments in the root README.md:

  • [ ] <!-- screenshot: dashboard inbox --> → inbox-desktop-light.png
  • [ ] <!-- screenshot: mobile item detail with form --> → item-with-form-mobile-light.png
  • [ ] <!-- screenshot: settings → MCP connection snippets --> → settings-connect-claude-code-desktop-light.png

Once the Phase 1 shots land, wire these into README with plain ![](./docs/public/heroshots/*.png) refs (GitHub doesn't render Vue components).

Embedding into VitePress guide pages ​

After shots exist, sprinkle <Heroshot name="..."/> references at natural anchor points. Suggested mapping (already in the plan but duplicated here so the capture pass and the embed pass are done by the same PR):

Guide pageEmbed
guide/getting-started.md<Heroshot name="login-initial"/>, <Heroshot name="inbox"/>
guide/web.md<Heroshot name="inbox"/>, <Heroshot name="responsive-inbox"/>
guide/items-and-forms.md<Heroshot name="item-error-with-actions"/>, <Heroshot name="item-with-form"/>, <Heroshot name="item-answered"/>
guide/channels.md<Heroshot name="inbox-channel-deployments"/>
guide/teams.md<Heroshot name="admin-teams"/>, <Heroshot name="admin-team-members"/>
guide/roles-and-permissions.md<Heroshot name="admin-roles"/>, <Heroshot name="personas-inbox-viewer"/>
guide/invitations.md<Heroshot name="admin-invite-modal"/>, <Heroshot name="invite-preview"/>
guide/admin.md<Heroshot name="admin-users"/>
guide/billing.md<Heroshot name="admin-billing-team"/>, <Heroshot name="admin-billing-enterprise"/>
guide/integrations.md<Heroshot name="settings-connect-claude-code"/>, <Heroshot name="settings-connect-rest"/>
guide/authentication.md<Heroshot name="login-initial"/>, <Heroshot name="login-magic-link"/>