Skip to content

Improve devtools UI consistency and polish #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
richtabor wants to merge 3 commits into
base: main
Choose a base branch
from
+94 −123
Open

Improve devtools UI consistency and polish #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
067132a
Update header and button styles for improved visual consistency
richtabor Dec 11, 2025
e1bdd93
Improve devtools panel controls and UI consistency
richtabor Dec 11, 2025
d92c2e1
Refine empty state messaging across components
richtabor Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions packages/devtools/src/components/agent-flow-visualization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,16 +413,15 @@ export function AgentFlowVisualization({
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#09090b",
background: "#000000",
Copy link
Author

@richtabor richtabor Dec 11, 2025

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-content">
<div className="ai-devtools-state-explorer-empty-title">
No Agent Activity
<div className="ai-devtools-empty-title">
Waiting for agents...
Copy link
Author

@richtabor richtabor Dec 11, 2025

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

</div>
<div className="ai-devtools-state-explorer-empty-description">
Start a conversation with an agent-based
<br /> system to see the orchestration flow here
<div className="ai-devtools-empty-subtitle">
Start a conversation with an agent-based system to see the orchestration flow.
</div>
</div>
</div>
Expand Down
74 changes: 22 additions & 52 deletions packages/devtools/src/components/devtools-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
"use client";

import {
ViewList as BottomPanelIcon,
Clear as ClearIcon,
CallToAction as BottomPanelIcon,
NotInterested as ClearIcon,
Close as CloseIcon,
Pause as PauseIcon,
PlayArrow as PlayArrowIcon,
ViewSidebar as RightPanelIcon,
PlayCircle as PlayArrowIcon,
StopCircle as StopIcon,
} from "@mui/icons-material";
import React, {
useCallback,
Expand Down Expand Up @@ -406,7 +405,7 @@ export function DevtoolsPanel({
// Delay hiding to allow clicking on suggestions
setTimeout(() => setShowSearchSuggestions(false), 200);
}}
placeholder={`${filteredEvents.length} total events found...`}
placeholder={`${filteredEvents.length} events found…`}
className="ai-devtools-search-input-main"
/>

Expand Down Expand Up @@ -543,10 +542,10 @@ export function DevtoolsPanel({
<button
type="button"
onClick={onToggleCapturing}
className={`ai-devtools-btn ${isReceivingEvents ? "receiving" : ""}`}
className={`ai-devtools-btn ai-devtools-btn--with-icon ${isReceivingEvents ? "receiving" : ""}`}
>
{isCapturing ? (
<PauseIcon className="ai-devtools-btn-icon" />
<StopIcon className="ai-devtools-btn-icon" />
) : (
<PlayArrowIcon className="ai-devtools-btn-icon" />
)}
Expand All @@ -557,31 +556,33 @@ export function DevtoolsPanel({
<button
type="button"
onClick={onClearEvents}
className="ai-devtools-btn"
className="ai-devtools-btn ai-devtools-btn--with-icon"
>
<ClearIcon className="ai-devtools-btn-icon" />
<span>clear</span>
<span>Clear</span>
</button>

{/* Position Toggle Button */}
<button
type="button"
onClick={onTogglePosition}
className="ai-devtools-position-toggle-btn"
className="ai-devtools-btn ai-devtools-btn--icon"
title={`Switch to ${config.position === "bottom" ? "right" : "bottom"} panel`}
>
{config.position === "bottom" ? (
<RightPanelIcon className="ai-devtools-position-toggle-icon" />
) : (
<BottomPanelIcon className="ai-devtools-position-toggle-icon" />
)}
<BottomPanelIcon
className="ai-devtools-position-toggle-icon"
style={{
transform:
config.position === "bottom" ? "rotate(-90deg)" : "none",
}}
/>
</button>

{/* Close */}
<button
type="button"
onClick={onClose}
className="ai-devtools-close-btn"
className="ai-devtools-btn ai-devtools-btn--icon ai-devtools-btn--close"
>
<CloseIcon className="ai-devtools-close-icon" />
</button>
Expand Down Expand Up @@ -706,56 +707,26 @@ export function DevtoolsPanel({
)}

{/* Tabs Navigation */}
<div
style={{
display: "flex",
gap: 0,
borderBottom: "1px solid #27272a",
}}
>
<div className="ai-devtools-tabs-navigation">
<button
className={`ai-devtools-btn ai-devtools-btn--tab ${activeTab === "events" ? "ai-devtools-btn--tab-active" : ""}`}
type="button"
onClick={() => setActiveTab("events")}
style={{
padding: "8px 16px",
background: "transparent",
border: "none",
color: activeTab === "events" ? "#e5e7eb" : "#666666",
fontSize: 11,
cursor: "pointer",
transition: "all 0.2s",
}}
>
Events
</button>
<button
className={`ai-devtools-btn ai-devtools-btn--tab ${activeTab === "agents" ? "ai-devtools-btn--tab-active" : ""}`}
type="button"
onClick={() => setActiveTab("agents")}
style={{
padding: "8px 16px",
background: "transparent",
border: "none",
color: activeTab === "agents" ? "#e5e7eb" : "#666666",
fontSize: 11,
cursor: "pointer",
transition: "all 0.2s",
}}
>
Agents
</button>
{isStoreAvailable && (
<button
className={`ai-devtools-btn ai-devtools-btn--tab ${activeTab === "state" ? "ai-devtools-btn--tab-active" : ""}`}
type="button"
onClick={() => setActiveTab("state")}
style={{
padding: "8px 16px",
background: "transparent",
border: "none",
color: activeTab === "state" ? "#e5e7eb" : "#666666",
fontSize: 11,
cursor: "pointer",
transition: "all 0.2s",
}}
>
State
</button>
Expand Down Expand Up @@ -802,7 +773,6 @@ export function DevtoolsPanel({
</div>
</div>
</div>

</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/devtools/src/components/event-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ export function EventList({
return (
<div className={`ai-devtools-empty-state ${className}`}>
<div className="ai-devtools-empty-content">
<div className="ai-devtools-empty-title">▸ waiting for events...</div>
<div className="ai-devtools-empty-title">Waiting for events…</div>
<div className="ai-devtools-empty-subtitle">
start streaming to capture events
Start streaming to capture events.
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/devtools/src/components/state-data-explorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@ export function StateDataExplorer({
<div className={`ai-devtools-state-explorer-empty ${className}`}>
<div className="ai-devtools-state-explorer-empty-content">
<div className="ai-devtools-state-explorer-empty-icon">⚡</div>
<div className="ai-devtools-state-explorer-empty-title">
<div className="ai-devtools-empty-title">
No State Data
</div>
<div className="ai-devtools-state-explorer-empty-description">
<div className="ai-devtools-empty-subtitle">
Select a store to view its current state
</div>
</div>
Expand Down
Loading