feat(web): chasing-border animation for reviewing persona card#364
Merged
Conversation
Replaces the green-wave shimmer on reviewing persona rows with a chasing border that reuses the reconnect gradient. A ::before pseudo-element holds a conic-gradient clipped to a 1.5px ring via mask-composite; the from-angle is animated through a registered @Property for smooth rotation. Adds a "Reviewing Agent Card" section to /design-lab with six variants (baseline, previous green wave, chase soft/slow, dense/fast) so future tweaks can be compared side by side. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…tion - Design-lab chase variants now use the same ::before + mask-composite technique as production (no opaque inner). Adds a Default/Hover/Selected surface picker so the ring can be judged against real row backgrounds. - Reduced-motion hides the ::before outright instead of freezing a static gradient arc, so the reviewing cue reads as "none" rather than residue. - Radius is sourced from a single utility class. Removes the hard-coded 0.375rem on .persona-reviewing-row; persona-agent-row now applies rounded-lg whenever the row is selected or reviewing, so the ring's border-radius: inherit has one unambiguous source. - Drops the duplicate border-radius from .dl-persona-wave for the same reason. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
selfcontained
marked this pull request as ready for review
April 19, 2026 16:23
The chasing-border exploration is complete and shipping in .persona-reviewing-row, so the reviewing-card and spinner sections are no longer needed. The page is now a bare scaffold (theme picker + empty-state card) ready for the next experiment. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
niiyeboah
added a commit
that referenced
this pull request
Jul 8, 2026
- Bound MessageStore.listForAgent to the most recent 500 (mirrors the history-detail LIMIT 500); the sidebar refetches this eagerly, so it must not be unbounded. (security #360, architecture #362) - Only publish message.created when the row actually persisted; the insert failure path stays swallow-and-log so delivery is never blocked, but the UI no longer gets an event with no backing row. (security #361) - Serve unreadCount from GET /agents/:id/messages via countUnreadForAgent (uses the partial unread index) and drive the sidebar badge from it, so the count stays accurate despite the list cap. (architecture #363) - Drop the unused agentManager dep from the messages routes. (architecture #364) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
selfcontained
pushed a commit
that referenced
this pull request
Jul 10, 2026
- Bound MessageStore.listForAgent to the most recent 500 (mirrors the history-detail LIMIT 500); the sidebar refetches this eagerly, so it must not be unbounded. (security #360, architecture #362) - Only publish message.created when the row actually persisted; the insert failure path stays swallow-and-log so delivery is never blocked, but the UI no longer gets an event with no backing row. (security #361) - Serve unreadCount from GET /agents/:id/messages via countUnreadForAgent (uses the partial unread index) and drive the sidebar badge from it, so the count stays accurate despite the list cap. (architecture #363) - Drop the unused agentManager dep from the messages routes. (architecture #364) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
selfcontained
added a commit
that referenced
this pull request
Jul 10, 2026
… History (#736) * Add design spec for agent messages feature Persist agent-to-agent messages, surface them in a per-agent sidebar Messages tab, and add a Messages tab to the History detail view. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Add implementation plan for agent messages feature Task-by-task TDD plan: agent_messages table + MessageStore, persist/ broadcast on send, REST endpoints, useAgentMessages hook + SSE, sidebar Messages tab, History detail Messages tab, and E2E coverage. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(messages): add agent_messages table and MessageStore Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(messages): persist and broadcast messages on send * feat(messages): add read + mark-read REST endpoints Add GET /api/v1/agents/:id/messages and POST /api/v1/agents/:id/messages/read, backed by MessageStore. Mark-read publishes a message.read UI event. Also add the message.created and message.read variants to the backend UiEvent union so sender/mark-read publishes type-check against the broker. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(messages): add useAgentMessages hook and SSE wiring * feat(messages): add MessagesPanel with conversation threads * fix(messages): add loading state to MessagesPanel Expose isLoading from useAgentMessages hook and render a spinner while loading, preventing misleading empty state flash on initial mount. Modeled on BrainTabContent's loading pattern for consistency. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(messages): add Messages tab to the agent sidebar * feat(messages): surface messages in History detail view Add a messages query to GET /api/v1/history/agents/:id and a Messages tab to the History detail view, backed by a new MessageTimeline component. * test(messages): e2e coverage for sidebar + history messages Add seedAgentMessageViaDB helper and agent-messages.spec.ts covering the sidebar Messages tab (unread badge appears then clears on open) and the History detail Messages tab. Also fix a markRead useCallback dependency (depended on the unstable mutation object, causing a request storm and a flickering unread badge). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * docs(messages): clarify History is not live-invalidated Final review found the data-flow diagram implied the History detail tab refetches on message.created; it does not. History is retrospective and matches its sibling tabs (refetch on remount/focus/staleTime). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * style(messages): apply prettier formatting CI `pnpm run format` (prettier --check) flagged these files; the local pre-commit hook was unavailable so formatting wasn't applied on commit. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(messages): address persona review findings - Bound MessageStore.listForAgent to the most recent 500 (mirrors the history-detail LIMIT 500); the sidebar refetches this eagerly, so it must not be unbounded. (security #360, architecture #362) - Only publish message.created when the row actually persisted; the insert failure path stays swallow-and-log so delivery is never blocked, but the UI no longer gets an event with no backing row. (security #361) - Serve unreadCount from GET /agents/:id/messages via countUnreadForAgent (uses the partial unread index) and drive the sidebar badge from it, so the count stays accurate despite the list cap. (architecture #363) - Drop the unused agentManager dep from the messages routes. (architecture #364) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(messages): address frontend UX review findings - Only mark messages read when the sidebar is actually open on the Messages tab; gating on the persisted tab alone silently cleared unread state for a closed sidebar. (#365) - Surface unread messages on the collapsed sidebar toggle (combined with the unseen-media count) so unread is discoverable while collapsed. (#366) - Add an explanatory tooltip to the "not delivered" label in both the sidebar panel and the History timeline. (#367) - Give the populated message list min-h-0 flex-1 so it scrolls within the sidebar instead of overflowing past the bottom edge. (#368) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(messages): review feedback — split hooks, unify bubble UX, improve icons Split useAgentMessages into three focused hooks (messages list, unread count, mark-read mutation). Unify MessageTimeline and MessageBubble into a single exported component used in both sidebar and history. Add collapsible agent-grouped threads with framer-motion animation and persisted collapse state. Add generic Bot fallback icon for unknown agent types. Replace non-reactive queryClient.getQueryData with reactive useQuery+select for agent type enrichment. Delete unused plan doc. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(messages): address persona review round 1 findings Fix history query to return newest 500 messages (subquery pattern), resolve recipientRepoRoot from target agent's cwd, add tab overflow scrolling for sidebar and history tabs, improve copy button touch target. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor(sidebar): drop Brain tab, revert to label tabs Brain data is accessible from the global area; per-agent sidebar tab was redundant. Reverts icon experiment and restores text labels for the remaining 4 tabs (Pins, Media, Reviews, Messages). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(db): renumber agent-messages migration to 0030 Resolves duplicate prefix conflict with 0029_reviews.sql from main. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: remove brain-sidebar E2E tests Brain tab was removed from the sidebar in this PR. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test(e2e): increase split-pane reload timeout to reduce flakiness The jotai atom reads localStorage asynchronously after hydration; 5s was sometimes too short in CI. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Brad Harris <bmharris@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
status-blocked → waiting → working → done). A::beforepseudo-element holds a conic-gradient clipped to a 1.5px ring viamask-composite; thefromangle animates through a registered@propertyfor smooth rotation./design-labwith six variants (baseline, previous green wave, chase soft/soft-slow/dense/dense-fast) so future tweaks can be compared side by side..dl-persona-waveclass; respectprefers-reduced-motionby pausing the chase.Files
apps/web/src/index.css— replaced.persona-reviewing-rowwith@property --persona-chase-angle+::beforechase-border; updatedhtml[data-hidden]pause rule to target the pseudo-element.apps/web/src/components/app/design-lab.tsx— new reviewing-card preview section and variant definitions; generalized page heading.Test plan
pnpm run check(server + web tsc --noEmit)pnpm run finalize:web(type check + production build)/design-lab— chase animation runs (@propertyconfirmed via computed style:from: 325.933deg, 4s duration, gradient contains all four reconnect hues).persona-reviewing-rowclass on/design-labconfirmed the production class now drives the chase border🤖 Generated with Claude Code