| 17 | } |
| 18 | |
| 19 | export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ |
| 20 | agent, |
| 21 | alignValues, |
| 22 | }) => { |
| 23 | return ( |
| 24 | <div |
| 25 | key={agent.id} |
| 26 | className="relative flex flex-row items-center justify-between gap-4 bg-surface-secondary px-8 pb-4 pt-4 text-base [&:not(:last-child)]:pb-0 after:absolute after:left-[43px] after:top-0 after:h-full after:w-0.5 after:bg-border after:content-['']" |
| 27 | > |
| 28 | <div className="flex flex-row items-baseline gap-4"> |
| 29 | <div className="flex w-6 shrink-0 justify-center"> |
| 30 | <div className="relative z-[1] size-2.5 rounded-full border-solid border-2 border-content-secondary bg-surface-secondary" /> |
| 31 | </div> |
| 32 | <div className="flex flex-row items-baseline gap-8 font-normal text-sm text-content-secondary max-md:flex-wrap max-md:gap-4"> |
| 33 | <div |
| 34 | className={cn( |
| 35 | "flex shrink-0 flex-row items-baseline gap-2 max-md:w-fit max-md:flex-col max-md:items-start max-md:gap-2", |
| 36 | alignValues && "sm:min-w-[240px]", |
| 37 | )} |
| 38 | > |
| 39 | <span>Agent:</span> |
| 40 | <span className="text-content-primary">{agent.name}</span> |
| 41 | </div> |
| 42 | |
| 43 | <div |
| 44 | className={cn( |
| 45 | "flex shrink-0 flex-row items-baseline gap-2 max-md:w-fit max-md:flex-col max-md:items-start max-md:gap-2", |
| 46 | alignValues && "sm:min-w-[100px]", |
| 47 | )} |
| 48 | > |
| 49 | <span>OS:</span> |
| 50 | <span className="font-normal text-sm capitalize text-content-primary"> |
| 51 | {agent.operating_system} |
| 52 | </span> |
| 53 | </div> |
| 54 | |
| 55 | <div className="flex flex-row items-center gap-2 max-md:w-fit max-md:flex-col max-md:items-start max-md:gap-2"> |
| 56 | <span>Apps:</span> |
| 57 | <div className="flex flex-row items-center gap-1 flex-wrap"> |
| 58 | {/* We display all modules returned in agent.apps */} |
| 59 | {agent.apps.map((app) => ( |
| 60 | <AppPreview key={app.slug}> |
| 61 | <BaseIcon app={app} /> |
| 62 | {app.display_name} |
| 63 | </AppPreview> |
| 64 | ))} |
| 65 | {/* Additionally, we display any apps that are visible, e.g. |
| 66 | apps that are included in agent.display_apps */} |
| 67 | {agent.display_apps.includes("web_terminal") && ( |
| 68 | <AppPreview> |
| 69 | <TerminalIcon className="size-3" /> |
| 70 | {DisplayAppNameMap.web_terminal} |
| 71 | </AppPreview> |
| 72 | )} |
| 73 | {agent.display_apps.includes("ssh_helper") && ( |
| 74 | <AppPreview>{DisplayAppNameMap.ssh_helper}</AppPreview> |
| 75 | )} |
| 76 | {agent.display_apps.includes("port_forwarding_helper") && ( |