Feat/prototype agents; feature flagged (#432)

Author: matthewlouisbrockman

src/app/dashboard/[teamSlug]/agents/page.tsx

@@ -0,0 +1,64 @@
+import type { Metadata } from 'next'
+import { notFound, redirect } from 'next/navigation'
+import { AUTH_URLS } from '@/configs/urls'
+import { featureFlags } from '@/core/modules/feature-flags/feature-flags.server'
+import { getAuthContext } from '@/core/server/auth'
+import { getTeamIdFromSlug } from '@/core/server/functions/team/get-team-id-from-slug'
+import { AgentsList } from '@/features/dashboard/agents/agents-list'
+import { AGENT_TEMPLATES } from '@/features/dashboard/agents/config'
+import { Page } from '@/features/dashboard/layouts/page'
+
+export const metadata: Metadata = {
+  title: 'Agents - E2B',
+}
+
+type AgentsPageProps = {
+  params: Promise<{
+    teamSlug: string
+  }>
+}
+
+export default async function AgentsPage({ params }: AgentsPageProps) {
+  const [{ teamSlug }, authContext] = await Promise.all([
+    params,
+    getAuthContext(),
+  ])
+
+  if (!authContext) {
+    redirect(AUTH_URLS.SIGN_IN)
+  }
+
+  const teamId = await getTeamIdFromSlug(teamSlug, authContext.accessToken)
+
+  if (!teamId.ok || !teamId.data) {
+    notFound()
+  }
+
+  const agentsEnabled = await featureFlags.isEnabled('agentsEnabled', {
+    user: {
+      id: authContext.user.id,
+      email: authContext.user.email ?? undefined,
+    },
+    team: {
+      id: teamId.data,
+      slug: teamSlug,
+    },
+  })
+
+  if (!agentsEnabled) {
+    notFound()
+  }
+
+  return (
+    <Page className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <h2 className="prose-title text-fg">Agents</h2>
+        <p className="prose-body text-fg-tertiary max-w-2xl">
+          Start a coding-agent sandbox and open it in the dashboard terminal.
+        </p>
+      </div>
+
+      <AgentsList agents={AGENT_TEMPLATES} />
+    </Page>
+  )
+}

src/app/dashboard/[teamSlug]/sandboxes/[sandboxId]/terminal/page.tsx

@@ -9,13 +9,18 @@ interface SandboxTerminalPageProps {
   params: Promise<{
     teamSlug: string
   }>
+  searchParams: Promise<{
+    command?: string
+  }>
 }
 
 export default async function SandboxTerminalPage({
   params,
+  searchParams,
 }: SandboxTerminalPageProps) {
-  const [{ teamSlug }, authContext] = await Promise.all([
+  const [{ teamSlug }, { command = '' }, authContext] = await Promise.all([
     params,
+    searchParams,
     getAuthContext(),
   ])
 
@@ -33,6 +38,7 @@ export default async function SandboxTerminalPage({
 
   return (
     <SandboxTerminalView
+      command={command}
       sandboxManagementAuth={createSandboxManagementAuth(
         authContext,
         teamId.data

src/app/dashboard/terminal/page.tsx

@@ -34,10 +34,10 @@ export default async function TerminalPage({
   searchParams,
 }: TerminalPageProps) {
   const { command = '', sandboxId, template } = await searchParams
-  const terminalTemplate = normalizeTerminalTemplate(template)
   const terminalSandboxId = normalizeTerminalSandboxId(sandboxId)
+  const requestedTemplate = normalizeTerminalTemplate(template)
 
-  if (!terminalTemplate) {
+  if (!terminalSandboxId && !requestedTemplate) {
     return <TerminalUnavailable message="The terminal template is invalid." />
   }
 
@@ -51,7 +51,7 @@ export default async function TerminalPage({
     return (
       <TerminalSignIn
         sandboxId={terminalSandboxId}
-        template={terminalTemplate}
+        template={requestedTemplate ?? 'base'}
       />
     )
   }
@@ -69,14 +69,18 @@ export default async function TerminalPage({
     authContext.user.id,
     authContext.accessToken
   )
-  const team = terminalSandboxId
-    ? await resolveTerminalSandboxTeam({
+  const terminalSandbox = terminalSandboxId
+    ? await resolveTerminalSandbox({
         accessToken: authContext.accessToken,
         preferredTeamId: resolvedTeam?.id,
         sandboxId: terminalSandboxId,
         teams: teamsResult.data,
       })
+    : null
+  const team = terminalSandbox
+    ? terminalSandbox.team
     : teamsResult.data.find((candidate) => candidate.id === resolvedTeam?.id)
+  const terminalTemplate = terminalSandbox?.template ?? requestedTemplate
 
   if (!team) {
     return (
@@ -95,7 +99,7 @@ export default async function TerminalPage({
     : await isTerminalTemplateAvailable({
         accessToken: authContext.accessToken,
         teamId: team.id,
-        template: terminalTemplate,
+        template: terminalTemplate ?? 'base',
       })
 
   if (!templateAvailable.ok) {
@@ -119,7 +123,7 @@ export default async function TerminalPage({
         launchTarget={{
           command,
           sandboxId: terminalSandboxId,
-          template: terminalTemplate,
+          template: terminalTemplate ?? 'base',
         }}
         sandboxManagementAuth={createSandboxManagementAuth(
           authContext,
@@ -139,7 +143,7 @@ function normalizeTerminalSandboxId(sandboxId?: string) {
   return parsedSandboxId.success ? parsedSandboxId.data : null
 }
 
-async function resolveTerminalSandboxTeam({
+async function resolveTerminalSandbox({
   accessToken,
   preferredTeamId,
   sandboxId,
@@ -152,34 +156,54 @@ async function resolveTerminalSandboxTeam({
 }) {
   if (preferredTeamId) {
     const preferredTeam = teams.find((team) => team.id === preferredTeamId)
-    if (
-      preferredTeam &&
-      (await hasSandboxInTeam({
+    if (preferredTeam) {
+      const preferredSandbox = await getSandboxInTeam({
         accessToken,
         sandboxId,
         teamId: preferredTeam.id,
-      }))
-    ) {
-      return preferredTeam
+      })
+
+      if (preferredSandbox) {
+        return {
+          team: preferredTeam,
+          template: getSandboxTemplate(preferredSandbox),
+        }
+      }
     }
   }
 
   const candidateTeams = teams.filter((team) => team.id !== preferredTeamId)
   const teamMatches = await Promise.all(
     candidateTeams.map(async (team) => ({
-      team,
-      ownsSandbox: await hasSandboxInTeam({
+      sandbox: await getSandboxInTeam({
         accessToken,
         sandboxId,
         teamId: team.id,
       }),
+      team,
     }))
   )
 
-  return teamMatches.find((match) => match.ownsSandbox)?.team ?? null
+  const match = teamMatches.find(({ sandbox }) => sandbox)
+
+  return match?.sandbox
+    ? {
+        team: match.team,
+        template: getSandboxTemplate(match.sandbox),
+      }
+    : null
+}
+
+type TerminalSandbox = {
+  alias?: string
+  templateID: string
+}
+
+function getSandboxTemplate(sandbox: TerminalSandbox) {
+  return sandbox.alias ?? sandbox.templateID
 }
 
-async function hasSandboxInTeam({
+async function getSandboxInTeam({
   accessToken,
   sandboxId,
   teamId,
@@ -201,9 +225,9 @@ async function hasSandboxInTeam({
       cache: 'no-store',
     })
 
-    return result.response.ok && Boolean(result.data)
+    return result.response.ok && result.data ? result.data : null
   } catch {
-    return false
+    return null
   }
 }
 

src/app/sbx/new/route.ts

@@ -5,14 +5,24 @@ import { AUTH_URLS, PROTECTED_URLS } from '@/configs/urls'
 import { getAuthContext } from '@/core/server/auth'
 import { resolveUserTeam } from '@/core/server/functions/team/resolve-user-team'
 import { l, serializeErrorForLog } from '@/core/shared/clients/logger/logger'
+import { normalizeTerminalTemplate } from '@/features/dashboard/terminal/template'
 
 export const GET = async (req: NextRequest) => {
   try {
+    const requestUrl = new URL(req.url)
+    const template = normalizeTerminalTemplate(
+      requestUrl.searchParams.get('template') ?? undefined
+    )
+
+    if (!template) {
+      return NextResponse.redirect(new URL(req.url).origin)
+    }
+
     const authContext = await getAuthContext()
 
     if (!authContext) {
       const params = new URLSearchParams({
-        returnTo: new URL(req.url).pathname,
+        returnTo: `${requestUrl.pathname}${requestUrl.search}`,
       })
 
       return NextResponse.redirect(
@@ -29,20 +39,29 @@ export const GET = async (req: NextRequest) => {
       return NextResponse.redirect(new URL(req.url).origin)
     }
 
-    const sbx = await Sandbox.create('base', {
+    const sbx = await Sandbox.create(template, {
       apiUrl: process.env.NEXT_PUBLIC_INFRA_API_URL,
       domain: process.env.NEXT_PUBLIC_E2B_DOMAIN,
       apiHeaders: {
         ...authHeaders(authContext.accessToken, team.id),
       },
     })
 
+    const terminalParams = new URLSearchParams({ template })
+    const command = requestUrl.searchParams.get('command')?.trim()
+
+    if (command) {
+      terminalParams.set('command', command)
+    }
+
     const terminalUrl = PROTECTED_URLS.SANDBOX_TERMINAL(
       team.slug,
       sbx.sandboxId
     )
 
-    return NextResponse.redirect(new URL(terminalUrl, req.url))
+    return NextResponse.redirect(
+      new URL(`${terminalUrl}?${terminalParams.toString()}`, req.url)
+    )
   } catch (error) {
     l.warn(
       {

src/configs/layout.ts

@@ -118,6 +118,10 @@ const DASHBOARD_LAYOUT_CONFIGS: Record<
     title: 'Members',
     type: 'default',
   }),
+  '/dashboard/*/agents': () => ({
+    title: 'Agents',
+    type: 'default',
+  }),
 
   // billing
   '/dashboard/*/usage': () => ({

src/core/modules/feature-flags/definitions.ts

@@ -1,6 +1,13 @@
 import type { FeatureFlagDefinition } from '@/core/modules/feature-flags/types'
 
 export const FEATURE_FLAGS = {
+  agentsEnabled: {
+    kind: 'boolean',
+    key: 'agents_enabled',
+    defaultValue: false,
+    description: 'Enables the dashboard agents launcher.',
+    exposure: 'server',
+  },
   isAdmin: {
     kind: 'boolean',
     key: 'is_admin',

src/features/dashboard/agents/agents-list.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import Link from 'next/link'
+import type { ComponentType } from 'react'
+import { SiClaude, SiOpenai } from 'react-icons/si'
+import { cn } from '@/lib/utils'
+import { Button } from '@/ui/primitives/button'
+import { ExternalLinkIcon, UnpackIcon } from '@/ui/primitives/icons'
+import type { AgentTemplateConfig } from './config'
+
+const AGENT_ICONS = {
+  claude: SiClaude,
+  open: UnpackIcon,
+  openai: SiOpenai,
+} satisfies Record<
+  AgentTemplateConfig['icon'],
+  ComponentType<{ className?: string }>
+>
+
+function getLaunchHref(agent: AgentTemplateConfig) {
+  const params = new URLSearchParams({
+    command: agent.command,
+    template: agent.template,
+  })
+
+  return `/sbx/new?${params.toString()}`
+}
+
+export function AgentsList({
+  agents,
+  className,
+}: {
+  agents: AgentTemplateConfig[]
+  className?: string
+}) {
+  return (
+    <div className={cn('grid gap-3 sm:grid-cols-2 xl:grid-cols-3', className)}>
+      {agents.map((agent) => (
+        <AgentCard agent={agent} key={agent.id} />
+      ))}
+    </div>
+  )
+}
+
+function AgentCard({ agent }: { agent: AgentTemplateConfig }) {
+  const AgentIcon = AGENT_ICONS[agent.icon]
+
+  return (
+    <section className="border-stroke bg-bg-1 flex min-h-44 flex-col rounded-lg border p-4">
+      <div className="flex min-w-0 items-start gap-3">
+        <div className="border-stroke bg-bg flex size-9 shrink-0 items-center justify-center rounded-md border">
+          <AgentIcon className="size-4" />
+        </div>
+        <div className="min-w-0">
+          <h3 className="prose-body-highlight text-fg truncate">
+            {agent.name}
+          </h3>
+          <p className="prose-body text-fg-tertiary mt-1 line-clamp-2">
+            {agent.description}
+          </p>
+        </div>
+      </div>
+
+      <div className="prose-label text-fg-tertiary mt-auto pt-4 uppercase">
+        {agent.template}
+      </div>
+
+      <Button asChild className="mt-3 w-full" variant="primary">
+        <Link href={getLaunchHref(agent)} prefetch={false}>
+          Start
+          <ExternalLinkIcon />
+        </Link>
+      </Button>
+    </section>
+  )
+}