Skip to content

Conversation

@richtabor
Copy link

@richtabor richtabor commented Dec 11, 2025

Hey team, took a few mins to tweak a few design elements I noticed as I experimented with the package. Nothing huge, just minor consistency adjustments and a few icon changes.

Summary

  • Refine header spacing and button styling for visual consistency
  • Update Material-UI icons to clearer alternatives (clear icon instead of close icon to match Chrome dev tools, play/stop icon within circle, to not conflict with arrows/lines so much).
  • Improve empty state messaging across all components for consistency
  • Standardize CSS classes and button patterns

Changes

  • Styles: Updated header spacing, button gaps, search input styling, and border colors for better contrast
  • DevTools Panel: Replaced icons (PlayCircle, StopCircle, CallToAction), refactored position toggle and close buttons with consistent styling
  • Empty States: Improved messaging clarity and standardized CSS classes across event-list, agent-flow-visualization, and state-data-explorer

Visual

Area.mp4

Test plan

  • Verify header and button spacing appears correct
  • Test all button interactions (capture/pause, clear, position toggle, close)
  • Check empty states display properly across all tabs
  • Verify tabs navigation styling
  • Test search input functionality and appearance

- Refine header spacing and button gaps
- Improve search input styling and alignment
- Update suggestion list border colors for better contrast
- Standardize button sizing and icon placement
- Replace Material-UI icons with more appropriate alternatives
- Refactor position toggle and close buttons to use consistent styling
- Update button text capitalization and iconography
- Simplify tabs navigation structure with reusable CSS classes
- Update empty state copy for better clarity and consistency
- Standardize empty state title and subtitle CSS classes
- Improve messaging tone (sentence case, proper punctuation)
- Update agent flow visualization empty state
@vercel
Copy link

vercel bot commented Dec 11, 2025

@richtabor is attempting to deploy a commit to the Pontus Abrahamsson's projects Team on Vercel.

A member of the Team first needs to authorize it.

alignItems: "center",
justifyContent: "center",
background: "#09090b",
background: "#000000",
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Matches the background of the events/states views.

<div className="ai-devtools-state-explorer-empty-title">
No Agent Activity
<div className="ai-devtools-empty-title">
Waiting for agents...
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the same language as events state

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant