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

feat: show installed badge and version in agent dropdown menus

Browse source
This commit is contained in:
Nathan Flurry 2026-01-27 20:34:10 -08:00
parent f452b46b94
commit c498aeba28
4 changed files with 70 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { Plus, RefreshCw } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import type { SessionInfo } from "sandbox-agent";
import type { AgentInfo, SessionInfo } from "sandbox-agent";
const SessionSidebar = ({
sessions,
@ -8,7 +8,7 @@ const SessionSidebar = ({
onSelectSession,
onRefresh,
onCreateSession,
availableAgents,
agents,
agentsLoading,
agentsError,
sessionsLoading,
@ -19,7 +19,7 @@ const SessionSidebar = ({
onSelectSession: (session: SessionInfo) => void;
onRefresh: () => void;
onCreateSession: (agentId: string) => void;
availableAgents: string[];
agents: AgentInfo[];
agentsLoading: boolean;
agentsError: string | null;
sessionsLoading: boolean;
@ -68,20 +68,26 @@ const SessionSidebar = ({
<div className="sidebar-add-menu">
{agentsLoading && <div className="sidebar-add-status">Loading agents...</div>}
{agentsError && <div className="sidebar-add-status error">{agentsError}</div>}
{!agentsLoading && !agentsError && availableAgents.length === 0 && (
{!agentsLoading && !agentsError && agents.length === 0 && (
<div className="sidebar-add-status">No agents available.</div>
)}
{!agentsLoading && !agentsError &&
availableAgents.map((id) => (
agents.map((agent) => (
<button
key={id}
key={agent.id}
className="sidebar-add-option"
onClick={() => {
onCreateSession(id);
onCreateSession(agent.id);
setShowMenu(false);
}}
>
{agentLabels[id] ?? id}
<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>
)}
</button>
))}
</div>

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

@ -1,6 +1,6 @@
import { MessageSquare, PauseCircle, PlayCircle, Plus, Terminal } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import type { AgentModeInfo, PermissionEventData, QuestionEventData } from "sandbox-agent";
import type { AgentInfo, AgentModeInfo, PermissionEventData, QuestionEventData } from "sandbox-agent";
import ApprovalsTab from "../debug/ApprovalsTab";
import ChatInput from "./ChatInput";
import ChatMessages from "./ChatMessages";
@ -18,7 +18,7 @@ const ChatPanel = ({
onSendMessage,
onKeyDown,
onCreateSession,
availableAgents,
agents,
agentsLoading,
agentsError,
messagesEndRef,
@ -58,7 +58,7 @@ const ChatPanel = ({
onSendMessage: () => void;
onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
onCreateSession: (agentId: string) => void;
availableAgents: string[];
agents: AgentInfo[];
agentsLoading: boolean;
agentsError: string | null;
messagesEndRef: React.RefObject<HTMLDivElement>;
@ -188,20 +188,26 @@ const ChatPanel = ({
<div className="empty-state-menu">
{agentsLoading && <div className="sidebar-add-status">Loading agents...</div>}
{agentsError && <div className="sidebar-add-status error">{agentsError}</div>}
{!agentsLoading && !agentsError && availableAgents.length === 0 && (
{!agentsLoading && !agentsError && agents.length === 0 && (
<div className="sidebar-add-status">No agents available.</div>
)}
{!agentsLoading && !agentsError &&
availableAgents.map((id) => (
agents.map((agent) => (
<button
key={id}
key={agent.id}
className="sidebar-add-option"
onClick={() => {
onCreateSession(id);
onCreateSession(agent.id);
setShowAgentMenu(false);
}}
>
{agentLabels[id] ?? id}
<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>
)}
</button>
))}
</div>