feat(inspector): dashboard layout v2 — right panel tabs, star placeholder, globals bar #135
Conversation
…laceholder, globals bar Layout reorganization: - Right panel: Agent/Events/Logs as tabs (one at a time, default Agent) Collapsible, resizable, persisted active tab - Left panel: MCP Primitives always visible (no title header), collapse button moved into tabs row - Center: Screencast with animated star placeholder when no widget - Globals bar: Horizontal bar below screencast, only when streaming, collapsible with expand button - Toolbar: Simplified to primitives + right panel toggles - New components: RightPanel, NoWidgetPlaceholder - Updated: GlobalsPanel (horizontal layout), McpPrimitivesPanel (no header), Toolbar (2 buttons), EventsPanel/AgentPanel (showTitle/showClearButton props) - Added starFloat/starBlink CSS keyframes for tamagotchi animation Build ✅, 813/813 tests ✅
Replace basic tamagotchi face with elegant 8-pointed crystalline star: - Sharp elongated cardinal + diagonal points with glass-like gradients - Glowing center with radial pulse animation - Two slowly rotating orbital rings (digital/binary feel) - Inner crystalline facets showing light refraction - Ambient sparkle dots - Subtle outer halo - Animations: float, core pulse, orbit spin, sparkle
- Shifted from teal (#20b2aa) to icy steel blue (#7aabcf, #a8c8e8, #b8d0e8) - Brighter/lighter overall: higher opacity facets, whiter gradients - Wider star point edges (18px spread instead of 12) - Larger SVG viewport (180px vs 160px) - Updated glow/halo to match icy blue palette
Widened all 8 points at the base — ~36px spread instead of 18. Classic compass rose proportions, no more needle spikes. Inner facets scaled to match.
- Empty states (No agent events, No logs, etc.) now vertically centered using flex: 1 instead of height: 100% - Forced sans-serif font on empty labels (was inheriting monospace from events/logs containers) - Containers now flex columns so child empty states can stretch - Both left and right panels have consistent centered placeholders
Rewrote star as single 16-vertex polygon with mathematically computed coordinates — perfect 8-fold rotational symmetry guaranteed. - Cardinal tips at R=88, diagonal at R=62, valleys at R=36 - Brighter gradients: higher opacities, more white (#d6e5f8, #e8f2ff) - Inner diamond facets + refraction lines for crystalline look - Bigger core glow (r=22), brighter center - Cleaner structure: one polygon instead of 8 separate shapes
Replaced crystalline SVG with 15x15 pixel grid star. Pure white (#fff) pixels, 8px per pixel block, pixelated rendering. Subtle white glow. Clean retro aesthetic.
21x21 grid with clear star shape — thin pointed rays extending from a solid core. 6px per pixel, crisp edges rendering.
Replaced all SVG/pixel-art code with a single crystalline star PNG. Gentle floating animation kept. Cleaned up unused styles and keyframes.
- Replaced header logo with sirius-star.png - Title: 'sirius-mcp inspector'
- Replaced existing logo.png and sirius-star.png with new versions. - Ensured consistency with recent design updates.
- Collapse arrow moved to left side of right panel tabs (mirrors left panel) - Removed Clear button from right panel header - Placeholder font color matched (#4b5563) across both panels - Right resize handle matched left: 6px, #2d2f2f background
- Replaced logo.png and sirius-star.png with new versions to align with design updates.
📝 WalkthroughSummary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings. WalkthroughReworks the dashboard into Layout V2: adds a collapsible, resizable RightPanel (Agent/Events/Logs) with persisted active tab and width; moves globals into a horizontal environment bar under the screencast; always-renders left MCP primitives panel (header hidden when left); removes bottom-panel usage and adds NoWidgetPlaceholder. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Toolbar
participant Dashboard
participant RightPanel
participant Panels
participant Storage as localStorage
User->>Toolbar: click Right panel toggle
Toolbar->>Dashboard: onToggleRightPanel()
Dashboard->>RightPanel: render with isCollapsed flag
User->>RightPanel: click tab (Agent/Events/Logs)
RightPanel->>Panels: render selected panel
RightPanel->>Storage: persist activeTab
User->>RightPanel: drag resize handle
RightPanel->>RightPanel: compute width (useResizablePanelWidth with resizeDirection)
RightPanel->>Storage: persist width
User->>RightPanel: click collapse
RightPanel->>Dashboard: onToggleCollapse()
Dashboard->>Storage: persist collapsed state
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Code Review: Dashboard Layout V2SummaryThis is a well-executed major UI refactor that reorganizes the Inspector dashboard layout. The changes are substantial (~740 additions, ~350 deletions across 14 files) but focused and intentional. Overall code quality is high with good adherence to the repository's TypeScript standards. ✅ StrengthsArchitecture & Design
Code Quality
Testing & Build
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/inspector/src/dashboard/react/InspectorDashboard.tsx (1)
29-36:⚠️ Potential issue | 🟡 MinorRemove unused props from interface definition.
The
InspectorDashboardPropsinterface definesinitialPanelHeightandminPanelHeight(lines 32-35), but these props are not destructured or used in the component signature on line 48. This creates a misleading API surface.🧹 Proposed fix to clean up unused props
export interface InspectorDashboardProps { /** Base URL for the inspector API (default: current origin) */ baseUrl?: string; - /** Initial panel height in pixels (default: 200) */ - initialPanelHeight?: number; - /** Minimum panel height in pixels (default: 100) */ - minPanelHeight?: number; }Also applies to: 48-48
🤖 Fix all issues with AI agents
In `@packages/inspector/src/dashboard/react/components/Toolbar.tsx`:
- Line 67: The inline JSX comment "Primitives panel toggle - only shown when
session is active" in the Toolbar component is stale because the button is now
rendered unconditionally; remove or update that comment. Locate the comment
inside the Toolbar.tsx JSX (the JSX comment near the primitives panel toggle
button) and either delete it or replace it with an accurate brief note (e.g.,
"Primitives panel toggle") so the comment matches current behavior in the
Toolbar component.
🧹 Nitpick comments (4)
LAYOUT_SPEC.md (1)
5-19: Consider adding language identifiers to ASCII diagram code blocks.The fenced code blocks for ASCII diagrams lack language identifiers. While these are plain text diagrams, adding
textorplaintextas the language identifier would satisfy markdownlint and improve tooling compatibility.📝 Proposed fix
-``` +```text ┌─────────────────────────────────────────────────────┐Apply the same change to both diagram blocks.
Also applies to: 23-39
packages/inspector/src/dashboard/react/components/RightPanel.tsx (1)
23-25: Consider removing unused clear callbacks from props.The
onClearLogs,onClearEvents, andonClearAgentEventscallbacks are passed to child panels, but sinceshowClearButton={false}is set for all panels, these callbacks will never be invoked. If Clear functionality is intentionally removed from the right panel, consider removing these props to simplify the interface.Alternatively, if Clear functionality may be re-added later, keeping them is acceptable for forward compatibility.
Also applies to: 126-146
packages/inspector/src/dashboard/react/components/McpPrimitivesPanel.tsx (1)
792-800: Consider consolidating duplicate collapse button logic.The collapse button rendering logic is duplicated in two places:
- Lines 792-800: When
position="left"withresizeHandleProps- Lines 845-853: When
position="left"withoutresizeHandlePropsBoth blocks are identical. Consider extracting a helper or restructuring to avoid duplication.
♻️ Proposed refactor
Extract the collapse button into a local variable or helper:
const collapseButton = position === "left" && onToggleCollapse && ( <button style={{ ...localStyles.collapseBtn, marginLeft: "auto" }} onClick={onToggleCollapse} title="Collapse panel" > ◀ </button> );Then use
{collapseButton}in both tabs sections.Also applies to: 845-853
packages/inspector/src/dashboard/react/components/GlobalsPanel.tsx (1)
43-45: Consider returningnullinstead of a hidden div.When the panel is not visible, returning
nullis cleaner and avoids adding an unnecessary DOM node.♻️ Proposed simplification
if (!isVisible) { - return <div style={{ display: "none" }} />; + return null; }
Matches EventsPanel and AgentPanel API for consistent prop interface across all three panel components.
Code Review - PR #135: Dashboard Layout V2OverviewThis PR implements a major layout reorganization of the Inspector dashboard with ~750 additions and ~350 deletions across 12 files. The changes successfully transform the dashboard from a bottom-panel design to a right-panel tabbed interface with improved UX. ✅ StrengthsArchitecture & Design
Code Quality
UX Improvements
|
- Remove stale comment in Toolbar.tsx - Remove unused initialPanelHeight/minPanelHeight from InspectorDashboardProps - Add unified Clear button to RightPanel header (per-tab callbacks) - Add 'Show Globals' button overlay when globals bar is collapsed - Hide zero count badges in RightPanel tabs
Code Review: PR #135 - Dashboard Layout V2SummaryMajor layout reorganization of the Inspector dashboard with significant UX improvements. The PR successfully implements a modern 3-column layout with tabbed right panel, always-visible left panel, and improved visual polish. Overall Assessment: ✅ APPROVE with minor suggestions ✅ StrengthsArchitecture & Design
Code Quality
UX Improvements
🔍 Issues & Suggestions1. Test Coverage
|
| Standard | Status | Notes |
|---|---|---|
| TypeScript strict mode | ✅ Pass | No any types used |
| Export contract | ✅ Pass | Components exported properly |
| Zod v4 | N/A | No schema validation in this PR |
| Express v5 | N/A | Frontend-only changes |
| Tests required | Need tests for new components | |
| Coverage thresholds | May fail CI without tests | |
| No circular deps | ✅ Pass | Clean imports |
await next() in middleware |
N/A | No middleware changes |
🎯 Final Checklist
Before merge:
- Add tests for
RightPanelcomponent - Add tests for
NoWidgetPlaceholdercomponent - Add tests for
GlobalsPanelhorizontal layout - Run
pnpm build && pnpm test && pnpm lint && pnpm typecheck(per AGENTS.md line 53) - Verify coverage thresholds pass
Optional enhancements (can be follow-up PRs):
- Add keyboard navigation to tabs
- Add unit test for resize direction logic
- Extract magic numbers to constants
- Consider empty state message constants
🎉 Conclusion
Excellent work on this major UI refactor! The code quality is high, the architecture is clean, and the UX improvements are significant. The main blocker is test coverage for the new components per repo standards.
Recommendation: Add tests for the new components, then this is ready to merge.
Great job! 🚀
Review conducted following repository standards in /AGENTS.md and TypeScript/React best practices.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@packages/inspector/src/dashboard/react/components/RightPanel.tsx`:
- Around line 47-61: The current activeTab initializer and useEffect access
window.localStorage directly which can throw in some browsers; wrap both getItem
and setItem calls in try/catch and fall back to the default ("agent") on error.
Specifically, update the state initializer (the useState(() => { ... }) block
referencing ACTIVE_TAB_STORAGE_KEY and window.localStorage.getItem) to catch
exceptions and return "agent" if reading fails, and update the useEffect that
calls window.localStorage.setItem(ACTIVE_TAB_STORAGE_KEY, activeTab) to perform
the set inside a try/catch (no-op on error); keep the existing typeof window !==
"undefined" guards.
In `@packages/inspector/src/dashboard/react/InspectorDashboard.tsx`:
- Around line 125-142: The localStorage reads for persisted state (in the
useState initializers for isRightPanelCollapsed and isGlobalsBarCollapsed) and
any corresponding writes when toggling those states must be wrapped in try/catch
to avoid runtime exceptions when storage is unavailable or blocked; update the
initializer logic in InspectorDashboard so each useState uses a safe read that
returns false on error, and update any setter handlers (the functions that call
localStorage.setItem for "mcp-dashboard-right-panel-collapsed" and
"mcp-dashboard-globals-bar-collapsed") to catch and ignore/storage-fail
gracefully, preserving the in-memory state even if localStorage fails.
🧹 Nitpick comments (1)
packages/inspector/src/dashboard/react/components/Toolbar.tsx (1)
67-88: Addaria-pressedto expose toggle state.
This makes the two buttons act like proper pressed toggles for assistive tech.Suggested diff
<button style={{ ...styles.toolbarBtn, ...(isPrimitivesPanelVisible ? styles.toolbarBtnActive : {}), }} onClick={onTogglePrimitivesPanel} title={isPrimitivesPanelVisible ? "Hide MCP Primitives" : "Show MCP Primitives"} aria-label={isPrimitivesPanelVisible ? "Hide MCP Primitives" : "Show MCP Primitives"} + aria-pressed={isPrimitivesPanelVisible} > <PrimitivesIcon /> </button> <button style={{ ...styles.toolbarBtn, ...(isRightPanelVisible ? styles.toolbarBtnActive : {}), }} onClick={onToggleRightPanel} title={isRightPanelVisible ? "Hide Right Panel" : "Show Right Panel"} aria-label={isRightPanelVisible ? "Hide Right Panel" : "Show Right Panel"} + aria-pressed={isRightPanelVisible} > <RightPanelIcon /> </button>
Code Review: Dashboard Layout V2This is a substantial UI refactoring that successfully reorganizes the Inspector dashboard. The implementation is solid with good attention to detail. Here are my findings: ✅ StrengthsArchitecture & Design:
Code Quality:
UX Polish:
🔍 Code Quality Observations1. RightPanel.tsx - Early Returns & Conditional Rendering 2. useResizablePanelWidth.ts - Direction Multiplier Logic const directionMultiplier = resizeDirection === 'right' ? -1 : 1;
const newWidth = Math.min(effectiveMaxWidth, Math.max(minWidth, startWidth + directionMultiplier * deltaX));This elegantly handles both left-to-right and right-to-left panel resizing. ✅ 3. GlobalsPanel.tsx - Horizontal Layout Conversion
4. NoWidgetPlaceholder.tsx - Animation 🐛 Potential Issues1. InspectorDashboard.tsx - Conditional Display Logic {isStreaming ? (/* screencast */) : (<NoWidgetPlaceholder />)}Question: What happens if there's an active session but streaming hasn't started yet? The old logic showed primitives in center, the new logic shows the placeholder. Is this the intended behavior? This might cause a flash of placeholder before streaming starts. Recommendation: Verify the state transition flow. Consider: {hasActiveSession && isStreaming ? (/* screencast */) : hasActiveSession ? (/* loading state? */) : (<NoWidgetPlaceholder />)}2. RightPanel.tsx - Noop Function Pattern ℹ️ This is defined inside the component, creating a new function instance on every render. While this works, it could be hoisted outside the component for better performance: const noop = (): void => undefined; // Outside component
export function RightPanel({ ... }) {
// ...
}Impact is minimal, but follows best practices. 3. Missing ARIA Labels
Recommendation: Add aria-labels for better accessibility: <button aria-label="Clear current tab items" ...>Clear</button>
<button aria-label="Show environment variables" ...>Show Environment</button>📊 Performance Considerations1. Style Object Spreading style={{
...styles.rightPanel,
width: isCollapsed ? 0 : panelWidth,
...(isCollapsed ? styles.rightPanelCollapsed : {}),
}}This is fine and follows the existing pattern. The ternary for conditional spreads is efficient. ✅ 2. LocalStorage Sync 🔒 Security ConcernsLocalStorage Usage: Multiple values are stored/retrieved from localStorage:
The code properly validates retrieved values:
No XSS or injection risks identified. ✅ 🧪 Test CoverageBased on the PR description: "Build ✅ | Tests 813/813 ✅" All tests are passing, which is excellent. However, I cannot verify:
Recommendation: Ensure test coverage for the new components matches the 50% threshold specified in AGENTS.md:51. 📝 DocumentationLAYOUT_SPEC.md: Excellent addition! This spec document clearly describes the changes and provides visual diagrams. This is great for future maintainers. ✅ Missing:
🎨 Visual/UX Considerations1. Logo Size Change 2. Globals Bar Collapsed State 3. Tab Styling 📋 Code Style & ConventionsFollows repo conventions: ✅
Zod v4 / Express v5: N/A for this PR (UI-only changes) 🚀 Overall AssessmentScore: 8.5/10 This is a high-quality refactoring that significantly improves the dashboard layout. The code is well-structured, follows TypeScript best practices, and maintains consistency with the existing codebase. Before merging:
Nice work overall! The mirrored collapse arrows, persisted state, and clean component separation are all excellent touches. 🌟 |
Code Review: Dashboard Layout V2OverviewThis is a substantial UI reorganization (~800 additions, ~360 deletions across 15 files) that restructures the inspector dashboard layout. The PR description states that builds and tests (813/813) are passing. ✅ ✅ Strengths1. Well-Documented Design
2. Clean Component Separation
3. Proper State Management
4. Type Safety
5. Accessibility
|
| Category | Status |
|---|---|
| Code Quality | ✅ Good |
| Architecture | ✅ Clean separation of concerns |
| Type Safety | ✅ Proper TypeScript usage |
| Performance | 🟡 Minor optimizations possible |
| Security | ✅ No concerns |
| Test Coverage | 🔴 Missing tests for new components |
| Documentation | ✅ Excellent spec document |
Action Items (Priority Order):
- 🔴 HIGH: Add tests for new components (RightPanel, NoWidgetPlaceholder, refactored GlobalsPanel)
- 🔴 HIGH: Verify resize direction logic works correctly for right panel
- 🟡 MEDIUM: Validate
isStreamingvshasActiveSessionlogic equivalence - 🟡 MEDIUM: Optimize
handleClearwith useCallback - 🟡 MEDIUM: Standardize panel header visibility pattern
- 🟢 LOW: Consider localStorage key namespacing
- 🟢 LOW: Remove redundant
isVisibleprop from GlobalsPanel
Verdict:
Approve with recommendations. The code is well-structured and follows repository conventions, but the lack of tests for significant UI changes is concerning per AGENTS.md requirements. The resize direction logic needs verification before merge.
Great work on the comprehensive spec document and clean component architecture! 🌟
Code Review: Dashboard Layout V2OverviewThis PR implements a major UI reorganization of the Inspector dashboard. The changes are well-structured and follow the repository's coding standards. Overall, this is a solid implementation with good attention to detail. ✅ Code Quality & Best PracticesStrengths:
Code highlights:
🐛 Potential Issues1. Missing resize handle when panel is collapsed (Minor)
Suggested fix: if (isCollapsed) {
return <div style={panelStyle} />;
}
return (
<>
<div {...resizeHandleProps} /* ... */ />
<div style={panelStyle}>
{/* panel content */}
</div>
</>
);2. Potential memory leak in connection cache (Low)
Suggested fix: Add cleanup in the connection close handler or add a useEffect that prunes stale connection IDs. 3. Inconsistent null-safety in GlobalsPanel (Minor)
Example: If ⚡ Performance ConsiderationsPositive:
Potential optimizations:
🔒 Security Concerns✅ No security issues identified.
🧪 Test CoverageObservations:
Recommendations:
📝 Additional ObservationsDocumentation
Styling
Binary assets
🎯 SummaryOverall Assessment: ✅ Approve with minor suggestions This is a well-executed UI refactoring that:
Priority fixes:
Nice-to-haves:
Great work overall! The reorganization significantly improves the dashboard's usability and maintains high code quality standards. 🌟 |
1 participant
Major layout reorganization of the Inspector dashboard.
Layout Changes:
Visual Polish:
Files: 12 changed, ~800 additions
Build ✅ | Tests 813/813 ✅