From 067132a3ca9336e552cddf932c4fef90019402f3 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 11 Dec 2025 12:36:45 -0500 Subject: [PATCH 1/3] Update header and button styles for improved visual consistency - 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 --- packages/devtools/src/styles.css | 124 ++++++++++++++++--------------- 1 file changed, 63 insertions(+), 61 deletions(-) diff --git a/packages/devtools/src/styles.css b/packages/devtools/src/styles.css index f3352af..0dca2b7 100644 --- a/packages/devtools/src/styles.css +++ b/packages/devtools/src/styles.css @@ -226,7 +226,6 @@ display: flex !important; align-items: center !important; justify-content: space-between !important; - padding: 0.375rem 0.75rem !important; background-color: rgba(0, 0, 0, 0.8) !important; /* Black with opacity */ border-bottom: 1px solid #333333 !important; /* Dark gray border */ overflow: visible !important; @@ -269,7 +268,8 @@ .ai-devtools-header-right { display: flex !important; align-items: center !important; - gap: 0.75rem !important; + gap: 0.5rem !important; + padding: 0.5rem !important; } /* Main Search Bar */ @@ -282,7 +282,6 @@ border-radius: 0 !important; padding: 0 !important; flex: 1 !important; - margin-right: 1rem !important; min-height: 2.5rem !important; overflow: visible !important; } @@ -290,15 +289,14 @@ .ai-devtools-search-input-container { display: flex !important; align-items: center !important; - gap: 0.5rem !important; + align-self: stretch !important; width: 100% !important; - min-height: 2.5rem !important; - padding: 0.5rem 0.75rem !important; background-color: transparent !important; border: none !important; border-right: 1px solid #333333 !important; border-radius: 0 !important; position: relative !important; + padding-right: 0.5rem !important; } .ai-devtools-search-input-main { @@ -310,8 +308,10 @@ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; - font-size: 0.875rem !important; + font-size: 0.75rem !important; line-height: 1.2 !important; + height: 100% !important; + padding: 0 0.5rem !important; } .ai-devtools-search-input-main::placeholder { @@ -633,7 +633,7 @@ text-transform: uppercase !important; letter-spacing: 0.05em !important; background-color: #111111 !important; - border-bottom: 1px solid #222222 !important; + border-bottom: 1px solid #333333 !important; } .ai-devtools-suggestion-options { @@ -650,7 +650,7 @@ padding-right: 2.5rem !important; background-color: transparent !important; border: none !important; - border-bottom: 1px solid #222222 !important; + border-bottom: 1px solid #333333 !important; color: #cccccc !important; font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, @@ -723,12 +723,18 @@ font-style: italic !important; } +.ai-devtools-tabs-navigation { + display: flex !important; + gap: 0 !important; + border-bottom: 1px solid #333 !important; +} + /* Button styles */ .ai-devtools-btn { display: flex !important; align-items: center !important; - gap: 0.25rem !important; - padding: 0.125rem 0.375rem !important; + gap: 0.225rem !important; + padding: 0 0.5rem !important; font-size: 10px !important; font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, @@ -738,11 +744,40 @@ color: #cccccc !important; /* Light gray text */ cursor: pointer !important; transition: all 0.15s ease !important; + height: 24px !important; +} + +.ai-devtools-btn--with-icon { + padding-left: 0.4rem !important; +} + +.ai-devtools-btn--icon { + width: 24px !important; + padding: 0 !important; + } + +.ai-devtools-btn--tab { + border: none !important; + height: 26px !important; +} + +.ai-devtools-btn--tab-active { + color: #e5e7eb !important; + background-color: #1a1a1a !important; +} + +.ai-devtools-btn--tab:not(.ai-devtools-btn--tab-active):hover { + background-color: transparent !important; +} + +.ai-devtools-btn--close { + border: none !important; } .ai-devtools-btn:hover { background-color: #1a1a1a !important; /* Dark background on hover */ border-color: #555555 !important; /* Lighter border on hover */ + color: #ffffff !important; } .ai-devtools-btn.active { @@ -751,52 +786,19 @@ border-color: #555555 !important; /* Lighter active border */ } -.ai-devtools-btn-icon { - width: 0.625rem !important; - height: 0.625rem !important; +.ai-devtools-btn--close:hover { + color: #ffffff !important; + background-color: transparent !important; } -.ai-devtools-close-btn { - display: flex !important; - align-items: center !important; - justify-content: center !important; - padding: 0.125rem !important; - color: #cccccc !important; /* Light gray text */ - cursor: pointer !important; - transition: color 0.15s ease !important; -} - -.ai-devtools-close-btn:hover { - color: #ffffff !important; /* White on hover */ +.ai-devtools-btn-icon { + width: 0.725rem !important; + height: 0.725rem !important; } .ai-devtools-close-icon { - width: 0.75rem !important; - height: 0.75rem !important; -} - -/* Position Toggle Button */ -.ai-devtools-position-toggle-btn { - display: flex !important; - align-items: center !important; - justify-content: center !important; - width: 22px !important; - height: 22px !important; - padding: 0 !important; - font-size: 10px !important; - font-family: - "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", "Courier New", monospace !important; - border: 1px solid #333333 !important; /* Dark gray border */ - background-color: transparent !important; - color: #cccccc !important; /* Light gray text */ - cursor: pointer !important; - transition: all 0.15s ease !important; -} - -.ai-devtools-position-toggle-btn:hover { - background-color: #1a1a1a !important; /* Dark background on hover */ - border-color: #555555 !important; /* Lighter border on hover */ + width: 1rem !important; + height: 1rem !important; } .ai-devtools-position-toggle-icon { @@ -827,7 +829,7 @@ /* Event item styles */ .ai-devtools-event-item { - border-bottom: 1px solid #222222 !important; /* Subtle border like terminal */ + border-bottom: 1px solid #333333 !important; /* Subtle border like terminal */ } .ai-devtools-event-header { @@ -1052,7 +1054,7 @@ .ai-devtools-session-events { background-color: #0a0a0a !important; /* Session events background */ - border-top: 1px solid #222222 !important; + border-top: 1px solid #333333 !important; } .ai-devtools-session-event { @@ -1062,7 +1064,7 @@ } .ai-devtools-session-event:last-child { - border-bottom: 1px solid #222222 !important; /* Add border to last event */ + border-bottom: 1px solid #333333 !important; /* Add border to last event */ } .ai-devtools-event-timestamp { @@ -1183,11 +1185,10 @@ } .ai-devtools-empty-state { - margin-top: 1rem; display: flex !important; align-items: center !important; justify-content: center !important; - height: 8rem !important; + height: 100% !important; color: #cccccc !important; /* Light gray */ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, @@ -1201,12 +1202,13 @@ .ai-devtools-empty-title { font-size: 0.875rem !important; margin-bottom: 0.5rem !important; - color: #ffffff !important; /* White text */ + color: #cccccc !important; /* White text */ } .ai-devtools-empty-subtitle { font-size: 0.75rem !important; color: #888888 !important; /* Medium gray */ + max-width: 300px !important; } /* Filter styles */ @@ -1663,7 +1665,7 @@ right: -20px !important; transform: none !important; background-color: #0a0a0a !important; - border: 1px solid #222222 !important; + border: 1px solid #333333 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 2147483648 !important; @@ -2042,13 +2044,13 @@ .ai-devtools-state-change-item { padding: 0.75rem 1rem !important; - border-bottom: 1px solid #222222 !important; + border-bottom: 1px solid #333333 !important; cursor: pointer !important; transition: background-color 0.2s ease !important; } .ai-devtools-state-change-item:hover { - background: #222222 !important; + background: #333333 !important; } .ai-devtools-state-change-item.selected { From e1bdd93cb1a04cbbe0c45487aa495e457568180a Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 11 Dec 2025 12:37:03 -0500 Subject: [PATCH 2/3] Improve devtools panel controls and UI consistency - 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 --- .../src/components/devtools-panel.tsx | 74 ++++++------------- 1 file changed, 22 insertions(+), 52 deletions(-) diff --git a/packages/devtools/src/components/devtools-panel.tsx b/packages/devtools/src/components/devtools-panel.tsx index d1285c9..d1e40cc 100644 --- a/packages/devtools/src/components/devtools-panel.tsx +++ b/packages/devtools/src/components/devtools-panel.tsx @@ -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, @@ -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" /> @@ -543,10 +542,10 @@ export function DevtoolsPanel({ {/* Position Toggle Button */} {/* Close */} @@ -706,56 +707,26 @@ export function DevtoolsPanel({ )} {/* Tabs Navigation */} -
+
{isStoreAvailable && ( @@ -802,7 +773,6 @@ export function DevtoolsPanel({
- ); From d92c2e1b0a7ce98f29ecf636665284584c56655f Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 11 Dec 2025 12:37:16 -0500 Subject: [PATCH 3/3] Refine empty state messaging across components - 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 --- .../src/components/agent-flow-visualization.tsx | 11 +++++------ packages/devtools/src/components/event-list.tsx | 4 ++-- .../devtools/src/components/state-data-explorer.tsx | 4 ++-- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/devtools/src/components/agent-flow-visualization.tsx b/packages/devtools/src/components/agent-flow-visualization.tsx index b6c0296..94af079 100644 --- a/packages/devtools/src/components/agent-flow-visualization.tsx +++ b/packages/devtools/src/components/agent-flow-visualization.tsx @@ -413,16 +413,15 @@ export function AgentFlowVisualization({ display: "flex", alignItems: "center", justifyContent: "center", - background: "#09090b", + background: "#000000", }} >
-
- No Agent Activity +
+ Waiting for agents...
-
- Start a conversation with an agent-based -
system to see the orchestration flow here +
+ Start a conversation with an agent-based system to see the orchestration flow.
diff --git a/packages/devtools/src/components/event-list.tsx b/packages/devtools/src/components/event-list.tsx index 41c5cda..d60dced 100644 --- a/packages/devtools/src/components/event-list.tsx +++ b/packages/devtools/src/components/event-list.tsx @@ -20,9 +20,9 @@ export function EventList({ return (
-
▸ waiting for events...
+
Waiting for events…
- start streaming to capture events + Start streaming to capture events.
diff --git a/packages/devtools/src/components/state-data-explorer.tsx b/packages/devtools/src/components/state-data-explorer.tsx index 5330f10..ef896d3 100644 --- a/packages/devtools/src/components/state-data-explorer.tsx +++ b/packages/devtools/src/components/state-data-explorer.tsx @@ -36,10 +36,10 @@ export function StateDataExplorer({
⚡
-
+
No State Data
-
+
Select a store to view its current state