[UI][Agent] Make the UI of agent chat more aligned with the trace and log section [1/n]

[XinweiHe]

Summary

as titled.

Type of Change

• feat - A new feature
• fix - A bug fix
• docs - Documentation only changes
• style - Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• refactor - A code change that neither fixes a bug nor adds a feature
• perf - A code change that improves performance
• test - Adding missing tests or correcting existing tests
• build - Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci - Changes to our Cl configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
• chore - Other changes that don't modify sc or test files
• revert - Reverts a previous commit
• security - A security fix or improvement
• github - Changes to our GitHub configuration files and scripts
• other (please describe):

Details

Screenshots / Recordings (if applicable)

Checklist

• I have read the CONTRIBUTING.md
• I have added/updated tests where applicable
• I have added screenshots or recordings for UI changes (if applicable)
• I have updated documentation where necessary

[greptile-apps]

Greptile Overview

Greptile Summary

This PR refactors the agent chat UI to better align with the trace and log section design patterns, improving visual consistency across the application.

Key Changes:

• Agent panel state is now managed at the page level with localStorage persistence via custom usePersistentState hook
• Robot icon trigger moved from floating button to header toggle button alongside log/trace view toggles
• Agent UI wrapped in unified card container with consistent borders and rounded corners
• Message input redesigned with dedicated trace info header section showing active trace/span context
• Provider selector removed from UI, model selector added using new Navbar13 dropdown component
• Spacing and padding reduced throughout for more compact, aligned design (p-4→p-3, mb-4→mb-3)
• Component hierarchy restructured: AgentPanel moved inside main content area rather than wrapping entire page

The changes follow a clear pattern of lifting state up and standardizing UI components for better maintainability.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk - it's a well-structured UI refactoring focused on visual alignment and state management improvements
• The changes are purely UI/UX focused with clear architectural improvements (state lifting, localStorage persistence). The code follows React best practices, properly handles edge cases (SSR check, error handling in localStorage), and maintains backward compatibility. No breaking changes to data flow or business logic
• No files require special attention - all changes are straightforward UI refactoring with consistent patterns

Important Files Changed

File Analysis

Filename	Score	Overview
ui/src/app/explore/page.tsx	4/5	Added usePersistentState hook for localStorage-based agent panel state, restructured layout to move AgentPanel inside the main content area, and added agent toggle controls to ExploreHeader
ui/src/components/agent-panel/AgentPanel.tsx	5/5	Refactored to lift state management to parent (removed internal isOpen state), removed floating robot icon trigger button, and simplified layout with cleaner keyboard shortcut handling
ui/src/components/right-panel/agent/Agent.tsx	5/5	Wrapped entire agent UI in unified card container with border and rounded corners for consistent visual styling
ui/src/components/right-panel/agent/MessageInput.tsx	4/5	Major redesign with trace info header section, removed provider selector, added model selector using Navbar13, updated styling to match trace/log section design patterns
ui/src/components/ui/shadcn-io/navbar-13.tsx	5/5	New dropdown select component for mode and model selection with icons, descriptions, and consistent styling

Sequence Diagram

sequenceDiagram
    participant User
    participant ExploreHeader
    participant ModeToggle
    participant ExplorePage
    participant AgentPanel
    participant Agent
    participant MessageInput
    participant LocalStorage

    User->>ModeToggle: Click robot icon
    ModeToggle->>ExploreHeader: onAgentToggle()
    ExploreHeader->>ExplorePage: handleAgentToggle()
    ExplorePage->>ExplorePage: setAgentOpen(!agentOpen)
    ExplorePage->>LocalStorage: Save "agentPanelOpen" state
    LocalStorage-->>ExplorePage: State persisted
    ExplorePage->>AgentPanel: Pass isOpen={true}
    AgentPanel->>AgentPanel: setHasBeenOpened(true)
    AgentPanel->>Agent: Render Agent component
    Agent->>MessageInput: Render input with trace context
    MessageInput-->>User: Display agent panel

    User->>MessageInput: Type message
    MessageInput->>Agent: onSendMessage()
    Agent->>Agent: Process message with traceId/spanIds
    Agent->>MessageInput: Update messages
    MessageInput-->>User: Display response

    User->>User: Press Escape key
    ExplorePage->>ExplorePage: handleAgentToggle()
    ExplorePage->>LocalStorage: Save "agentPanelOpen" = false
    ExplorePage->>AgentPanel: Pass isOpen={false}
    AgentPanel-->>User: Panel slides out

Loading

[greptile-apps]

_{9 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}