feat: refresh observer dashboard brand styling#107
Merged
willwashburn merged 14 commits intomainfrom Mar 26, 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://pr107-api.relaycast.dev --ciOpen observer dashboard |
Apply and persist light/dark theme early to avoid flash-of-unstyled-theme: add an inline themeScript in RootLayout that reads localStorage (agentrelay-theme) and sets html dataset/class/color-scheme. Introduce html[data-theme] handling and transitions in globals.css, adjust many CSS variables and background gradients for both light and dark themes to improve visual consistency. Update AgentSidebar to default to dark on server, respect html.dataset.theme, toggle dataset/color-scheme, persist changes to localStorage, and use a short transition class when switching themes.
Remove the 'Observer' brand pill and the 'Enter observer' h1 from packages/observer-dashboard/src/app/login/page.tsx to simplify the login UI and clean up the header layout.
Switch console color variables from a dark to a light palette in globals.css. Add an AgentRelayWordmark SVG component and replace the previous sidebar brand/title markup in AgentSidebar.tsx (also remove a small descriptive paragraph). Tweak ConsolePanel copy to shorten the console description. These changes update branding and move the console surfaces to a light-themed style.
ConsolePanel: replace the inline pill-style tab buttons with a compact <select> dropdown (styled) and add a ChevronDown icon for the dropdown indicator. Simplified TAB_OPTIONS to only include id/label (removed per-tab icons), updated change handler to use select value, and added an aria-label for accessibility. Also changed the default active tab from 'feed' to 'activity'.
Delete the top header block ("Observer console" label, "Realtime operations" h2, and descriptive paragraph) in ConsolePanel.tsx along with its enclosing wrapper. This simplifies the panel header/layout and reduces visual clutter; no functional behavior was changed.
Introduce responsive mobile panes and styling hooks across the dashboard. Components (AgentPanel, AgentSidebar, ConsolePanel, ThreadPanel) now accept an optional className and use cn to merge classes. DashboardLayout gains mobilePane state, a compact mobile UI with MobilePaneButton, StreamBanner, and renderRightPanel to render AgentPanel/ThreadPanel/ConsolePanel with passed className; it also auto-switches to details on agent/thread selection. Minor UI tweaks (select width, sidebar spacing) to improve mobile/desktop behavior.
Add a className prop to ChatFeed and use the shared cn helper to merge it into the root section. Also adjust DashboardLayout container div to include the missing flex class and pass className="h-full" to the AgentSidebar so it stretches to full height. These tweaks enable external styling and correct layout sizing for the sidebar.
Remove responsive column classes from AgentMetricsCards so the metrics use a single grid layout (removed sm:grid-cols-2 and xl:grid-cols-3). Reorder TAB_OPTIONS in ConsolePanel to place Activity and Costs before Feed and Metrics, updating the tab display order in the UI.
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
2 participants
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
What changed
Validation