harivansh-afk/sandbox-agent
1
0
Fork 0
mirror of https://github.com/harivansh-afk/sandbox-agent.git synced 2026-04-15 06:04:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: make agent badges subtle, position next to name, widen dropdown

Browse source
This commit is contained in:
Nathan Flurry 2026-01-27 20:40:02 -08:00
parent c498aeba28
commit 6f6a5ba04d
6 changed files with 78 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/packages/inspector/index.html
View file

@ -460,7 +460,7 @@
position: absolute;
top: 30px;
right: 0;
min-width: 140px;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border-2);
border-radius: 8px;
@ -484,7 +484,6 @@
transition: all var(--transition);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
@ -494,25 +493,14 @@
}
.sidebar-add-option:hover .agent-badge {
background: rgba(255, 255, 255, 0.2);
color: #fff;
color: rgba(255, 255, 255, 0.6);
}
.agent-option-name {
flex: 1;
min-width: 0;
}
.agent-option-badges {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.agent-badge {
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
white-space: nowrap;
@ -520,12 +508,10 @@
}
.agent-badge.installed {
background: rgba(48, 209, 88, 0.15);
color: var(--success);
color: var(--muted);
}
.agent-badge.version {
background: var(--border-2);
color: var(--muted);
}
@ -734,7 +720,7 @@
left: 50%;
transform: translateX(-50%);
margin-top: 4px;
min-width: 160px;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border-2);
border-radius: 8px;

8
frontend/packages/inspector/src/components/SessionSidebar.tsx
View file

@ -82,12 +82,8 @@ const SessionSidebar = ({
}}
>
<span className="agent-option-name">{agentLabels[agent.id] ?? agent.id}</span>
{agent.installed && (
<span className="agent-option-badges">
<span className="agent-badge installed">Installed</span>
{agent.version && <span className="agent-badge version">v{agent.version}</span>}
</span>
)}
{agent.installed && <span className="agent-badge installed">Installed</span>}
{agent.version && <span className="agent-badge version">v{agent.version}</span>}
</button>
))}
</div>

8
frontend/packages/inspector/src/components/chat/ChatPanel.tsx
View file

@ -202,12 +202,8 @@ const ChatPanel = ({
}}
>
<span className="agent-option-name">{agentLabels[agent.id] ?? agent.id}</span>
{agent.installed && (
<span className="agent-option-badges">
<span className="agent-badge installed">Installed</span>
{agent.version && <span className="agent-badge version">v{agent.version}</span>}
</span>
)}
{agent.installed && <span className="agent-badge installed">Installed</span>}
{agent.version && <span className="agent-badge version">v{agent.version}</span>}
</button>
))}
</div>