observer: rebrand UI to Agent Relay Observer#68
Merged
willwashburn merged 8 commits intomainfrom Mar 6, 2026
Merged
Conversation
|
Preview deployed!
This preview shares the staging database and will be cleaned up when the PR is merged or closed. Run E2E testsnpm run e2e -- https://pr68-api.relaycast.dev --ciOpen observer dashboard |
Revamp the Observer login page with a new dark-themed layout, gradient accents, rounded card, and a theme-aware logo (MutationObserver toggles black/white assets). Replace numerous hardcoded indigo spinner borders with the CSS variable --color-success for consistent success coloring (in catch-all page, RelaySessionProvider, and ChatFeed). Update AgentSidebar title to a bold, uppercase gradient "Observer" label. Minor form styling and accessibility tweaks (input, button, error state) to improve visual consistency and UX.
This reverts commit fff9cb9.
Introduce a DmMessage schema/type across the stack and update DM-related flows to return/camelize sender fields. Server engines (dm, dmAll) now join agent data and return agent_name for DM messages; routes and tests updated to assert the presence of agent_name. SDK/Agent clients now use the DmMessage type for DM list calls and the Relay client returns camelized DmMessage objects; unit tests added/adjusted to validate the shape. Frontend changes include ChatFeed adjustments to consume the new DM shape, Dashboard layout tweaks (removed activity toggle, resized ActivityLog), and multiple UI components updated to use CSS theme variables for colors and spacing.
Add support for archived channels across the dashboard. Expose an includeArchived option in useChannels (and its types) and pass it from DashboardLayout so archived channels are fetched. DashboardLayout now defaults selection to the first non-archived channel (falling back to the first), computes selectedChannelArchived, and forwards it to ChatFeed. AgentSidebar no longer filters out archived channels and renders archived items with reduced opacity. ChatFeed accepts selectedChannelArchived and shows an "Archived" badge in the header when appropriate.
Ensure thread.reply events are only processed when a new reply is actually inserted. Add an inserted flag to avoid double-processing, increment the parent message's replyCount in the thread cache, and update the channel timeline to only bump the parent's replyCount (no longer injecting the reply into the channel list). Handle non-finite replyCount values safely. Add tests to verify thread parent replyCount updates and that duplicate reply events are not double-counted, plus a minor assertion on channel messages length.
There was a problem hiding this comment.
Pull request overview
Rebrands the Observer dashboard UI to “Agent Relay Observer” and adds new branding assets, while also expanding DM message typing (agent identity fields) and improving channel/thread behaviors across the server, SDKs, and React client.
Changes:
- Update Observer dashboard branding (metadata, login + sidebar logo, spinners/colors, layout tweaks).
- Add/propagate a new
DmMessagetype that includesagent_nameacross server engines/routes, shared@relaycast/types, and the TypeScript SDK (with updated tests). - Improve UX/state handling: include archived channels in channel lists and prevent double-counting/injecting duplicate thread replies in the React reducer.
Reviewed changes
Copilot reviewed 23 out of 25 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/types/src/dm.ts | Adds DmMessage schema/type with sender identity fields. |
| packages/types/src/tests/types.test.ts | Adds type-level assertions for the new DmMessage fields. |
| packages/server/src/routes/tests/workspace.test.ts | Adds coverage for workspace DM messages endpoint returning agent_name. |
| packages/server/src/routes/tests/dm.test.ts | Updates DM messages test to include/validate agent_name. |
| packages/server/src/engine/dmAll.ts | Returns typed workspace DM conversations/messages including agent_name; joins agents for name. |
| packages/server/src/engine/dm.ts | Updates agent DM message listing to return DmMessage[] with agent_name. |
| packages/sdk-typescript/src/types.ts | Exposes DmMessage type at the SDK types layer. |
| packages/sdk-typescript/src/relay.ts | Switches workspace dmMessages() return type to DmMessage[]. |
| packages/sdk-typescript/src/agent.ts | Switches dms.messages() return type to DmMessage[]. |
| packages/sdk-typescript/src/tests/workspace.test.ts | Verifies DM messages are camelized (agentId/agentName/createdAt). |
| packages/sdk-typescript/src/tests/agent-messaging.test.ts | Updates DM messages test payload/expectations for new fields + camelization. |
| packages/react/src/types.ts | Introduces UseChannelsOptions to support includeArchived. |
| packages/react/src/reducer.ts | Prevents duplicate thread reply side-effects and avoids injecting replies into channel timeline. |
| packages/react/src/hooks/useChannels.ts | Adds includeArchived option and wires it into channel listing. |
| packages/react/src/tests/reducer.test.ts | Adds tests for replyCount increments + dedupe behavior. |
| packages/observer-dashboard/src/components/RelaySessionProvider.tsx | Updates loading spinner styling to new theme color. |
| packages/observer-dashboard/src/components/DashboardLayout.tsx | Includes archived channels in UI + passes archived state into ChatFeed; removes activity toggle UI. |
| packages/observer-dashboard/src/components/ChatFeed.tsx | Shows “Archived” badge; updates DM fetch typing/mapping; updates spinners. |
| packages/observer-dashboard/src/components/AgentSidebar.tsx | Adds theme-aware logo and displays archived channels (dimmed). |
| packages/observer-dashboard/src/components/ActivityLog.tsx | Adjusts activity panel width. |
| packages/observer-dashboard/src/app/login/page.tsx | Rebrands login UI and adds theme-aware logo switching. |
| packages/observer-dashboard/src/app/layout.tsx | Updates app metadata title/description for new brand. |
| packages/observer-dashboard/src/app/[[...slug]]/page.tsx | Updates suspense fallback spinner styling. |
| packages/observer-dashboard/public/brand/agent-relay-logo-white.svg | Adds new white logo asset. |
| packages/observer-dashboard/public/brand/agent-relay-logo-black.svg | Adds new black logo asset. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| conversationId: string, | ||
| opts?: MessageListQuery, | ||
| ): Promise<MessageWithMeta[]> => { | ||
| ): Promise<DmMessage[]> => { |
There was a problem hiding this comment.
This changes the TypeScript surface area of AgentClient.dms.messages() from MessageWithMeta[] to DmMessage[]. If this is an intentional API correction, it should be called out in the SDK changelog/release notes (it will be a breaking type-level change for consumers). If it’s intended to remain backward compatible, consider offering a separate method/type alias rather than changing the return type in-place.
Suggested change
| ): Promise<DmMessage[]> => { | |
| ): Promise<MessageWithMeta[]> => { |
Comment on lines
15
to
20
| export function DashboardLayout() { | ||
| const { agents: rawAgents } = usePresence(); | ||
| const { channels } = useChannels(); | ||
| const { channels } = useChannels({ includeArchived: true }); | ||
| const { conversations } = useWorkspaceDMs(); | ||
| const { status: wsStatus } = useWebSocket(); | ||
| const [selectedChannel, setSelectedChannel] = useState<string | null>(null); |
There was a problem hiding this comment.
The PR description/title focuses on an Observer UI rebrand, but this change alters runtime behavior by fetching and displaying archived channels (and adding archived-channel UX). Please either update the PR description to include these functional changes or split them into a separate PR so the scope/review surface is clear.
Comment on lines
+86
to
+89
| export interface UseChannelsOptions { | ||
| includeArchived?: boolean; | ||
| } | ||
|
|
There was a problem hiding this comment.
UseChannelsOptions is introduced as part of the useChannels() public API, but it isn’t re-exported from @relaycast/react’s main entrypoint (only UseChannelsReturn is). Consider re-exporting UseChannelsOptions from src/index.ts alongside the other hook types so consumers can reference the options type without deep imports.
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
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
Agent Relay Observer../workflows/packages/web/publicValidation