mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-15 03:00:48 +00:00
feat(inspector): improve contrast and add collapsible debug panel (#182)
This commit is contained in:
NicholasKissel
parent
a897fbcb7c
commit
d4d7c66c05
7 changed files with 87 additions and 23 deletions
BIN
.github/media/inspector.png
vendored
BIN
.github/media/inspector.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
|
@ -14,16 +14,17 @@
|
|||
color-scheme: dark;
|
||||
/* Match landing page colors - high contrast */
|
||||
--bg: #000000;
|
||||
--surface: rgba(255, 255, 255, 0.04);
|
||||
--surface-2: rgba(255, 255, 255, 0.02);
|
||||
--border: rgba(255, 255, 255, 0.15);
|
||||
--border-2: rgba(255, 255, 255, 0.12);
|
||||
--input-bg: rgba(255, 255, 255, 0.05);
|
||||
--input-border: rgba(255, 255, 255, 0.18);
|
||||
--bg-panel: #0a0a0b;
|
||||
--surface: rgba(255, 255, 255, 0.06);
|
||||
--surface-2: rgba(255, 255, 255, 0.03);
|
||||
--border: rgba(255, 255, 255, 0.18);
|
||||
--border-2: rgba(255, 255, 255, 0.14);
|
||||
--input-bg: rgba(255, 255, 255, 0.07);
|
||||
--input-border: rgba(255, 255, 255, 0.22);
|
||||
--text: #ffffff;
|
||||
--text-secondary: #d4d4d8; /* zinc-300 */
|
||||
--text-secondary: #e4e4e7; /* zinc-200 */
|
||||
--muted: #a1a1aa; /* zinc-400 */
|
||||
--muted-2: #71717a; /* zinc-500 */
|
||||
--muted-2: #8b8b93; /* between zinc-400 and zinc-500 */
|
||||
--accent: #ff4f00;
|
||||
--accent-hover: #ff6a00;
|
||||
--success: #4ade80; /* green-400 */
|
||||
|
|
@ -87,7 +88,7 @@
|
|||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
background: var(--bg-panel);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -476,6 +477,11 @@
|
|||
grid-template-columns: 200px 1fr 1fr;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
transition: grid-template-columns 0.2s ease;
|
||||
}
|
||||
|
||||
.main-layout.debug-collapsed {
|
||||
grid-template-columns: 200px 1fr 42px;
|
||||
}
|
||||
|
||||
/* Session Sidebar */
|
||||
|
|
@ -483,7 +489,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
background: var(--bg-panel);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -1234,7 +1240,7 @@
|
|||
height: 41px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
background: var(--bg-panel);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -2455,13 +2461,14 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--bg-panel);
|
||||
}
|
||||
|
||||
.debug-tabs {
|
||||
display: flex;
|
||||
height: 41px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
background: var(--bg-panel);
|
||||
flex-shrink: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -2513,6 +2520,49 @@
|
|||
padding: 16px;
|
||||
}
|
||||
|
||||
.debug-panel.collapsed .debug-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.debug-panel.collapsed .debug-tabs {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
border-bottom: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.debug-panel.collapsed .debug-tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.debug-collapse-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
margin: 6px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition), border-color var(--transition), background var(--transition);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.debug-collapse-btn:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--text-secondary);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.debug-panel.collapsed .debug-collapse-btn {
|
||||
margin: 6px auto;
|
||||
}
|
||||
|
||||
/* Session Setup */
|
||||
.setup-grid {
|
||||
display: grid;
|
||||
|
|
@ -2637,19 +2687,19 @@
|
|||
}
|
||||
|
||||
.event-item {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
|
||||
.event-item:hover {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.event-item.expanded {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.event-item.highlighted {
|
||||
|
|
@ -2684,9 +2734,9 @@
|
|||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-2);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: var(--muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -288,6 +288,7 @@ export default function App() {
|
|||
|
||||
const [debugTab, setDebugTab] = useState<DebugTab>("events");
|
||||
const [highlightedEventId, setHighlightedEventId] = useState<string | null>(null);
|
||||
const [debugPanelCollapsed, setDebugPanelCollapsed] = useState(false);
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
|
@ -1614,7 +1615,7 @@ export default function App() {
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<main className="main-layout">
|
||||
<main className={`main-layout ${debugPanelCollapsed ? "debug-collapsed" : ""}`}>
|
||||
<SessionSidebar
|
||||
sessions={sessions}
|
||||
selectedSessionId={sessionId}
|
||||
|
|
@ -1704,6 +1705,8 @@ export default function App() {
|
|||
agentsLoading={agentsLoading}
|
||||
agentsError={agentsError}
|
||||
getClient={getClient}
|
||||
collapsed={debugPanelCollapsed}
|
||||
onToggleCollapse={() => setDebugPanelCollapsed(!debugPanelCollapsed)}
|
||||
/>
|
||||
</main>
|
||||
{toastStack}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Cloud, PlayCircle, Server, Terminal, Wrench } from "lucide-react";
|
||||
import { ChevronLeft, ChevronRight, Cloud, PlayCircle, Server, Terminal, Wrench } from "lucide-react";
|
||||
import type { AgentInfo, SandboxAgent, SessionEvent } from "sandbox-agent";
|
||||
|
||||
type AgentModeInfo = { id: string; name: string; description: string };
|
||||
|
|
@ -30,6 +30,8 @@ const DebugPanel = ({
|
|||
agentsLoading,
|
||||
agentsError,
|
||||
getClient,
|
||||
collapsed,
|
||||
onToggleCollapse,
|
||||
}: {
|
||||
debugTab: DebugTab;
|
||||
onDebugTabChange: (tab: DebugTab) => void;
|
||||
|
|
@ -49,10 +51,19 @@ const DebugPanel = ({
|
|||
agentsLoading: boolean;
|
||||
agentsError: string | null;
|
||||
getClient: () => SandboxAgent;
|
||||
collapsed?: boolean;
|
||||
onToggleCollapse?: () => void;
|
||||
}) => {
|
||||
return (
|
||||
<div className="debug-panel">
|
||||
<div className={`debug-panel ${collapsed ? "collapsed" : ""}`}>
|
||||
<div className="debug-tabs">
|
||||
<button
|
||||
className="debug-collapse-btn"
|
||||
onClick={onToggleCollapse}
|
||||
title={collapsed ? "Expand panel" : "Collapse panel"}
|
||||
>
|
||||
{collapsed ? <ChevronLeft size={14} /> : <ChevronRight size={14} />}
|
||||
</button>
|
||||
<button className={`debug-tab ${debugTab === "events" ? "active" : ""}`} onClick={() => onDebugTabChange("events")}>
|
||||
<PlayCircle className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
|
||||
Events
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
|
@ -23,7 +23,7 @@ function UniversalAPIDiagram() {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative w-full aspect-[16/9] bg-[#050505] rounded-2xl border border-white/10 overflow-hidden flex items-center justify-center shadow-2xl">
|
||||
<div className="relative w-full aspect-[4/3] sm:aspect-[16/9] bg-[#050505] rounded-2xl border border-white/10 overflow-hidden flex items-center justify-center shadow-2xl">
|
||||
{/* Background Dots - color changes with active adapter */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.15] pointer-events-none transition-all duration-1000"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue