Agents component: Dashboard playground UI

npm-packages/dashboard-common/src/features/agents/components/Agents.tsx

@@ -0,0 +1,12 @@
+import { Nent } from "@common/lib/useNents";
+
+export function Agents({ nents: allNents }: { nents: Nent[] }) {
+  const nents = allNents.filter((nent) => nent.name !== null);
+  const usingAgentComponent = nents.some(
+    (nent) => nent.name === "agent" && nent.path === "agent"
+  );
+  if (usingAgentComponent) {
+    return <div>Using AI Agents... show dashboard</div>;
+  }
+  return <div>Not using agents... follow docs to get set up</div>;
+}

npm-packages/dashboard-common/src/features/agents/components/AgentsView.tsx

@@ -0,0 +1,15 @@
+import { DeploymentPageTitle } from "@common/elements/DeploymentPageTitle";
+import { LoadingTransition } from "@ui/Loading";
+import { PageContent } from "@common/elements/PageContent";
+import { useNents } from "@common/lib/useNents";
+import { Agents } from "@common/features/agents/components/Agents";
+
+export function AgentsView() {
+  const { nents } = useNents();
+  return (
+    <PageContent>
+      <DeploymentPageTitle title="AI Agents" />
+      <LoadingTransition>{nents && <Agents nents={nents} />}</LoadingTransition>
+    </PageContent>
+  );
+}

npm-packages/dashboard-common/src/layouts/DeploymentDashboardLayout.tsx

@@ -21,6 +21,7 @@ import { FunctionRunnerWrapper } from "@common/features/functionRunner/component
 import { FunctionsProvider } from "@common/lib/functions/FunctionsProvider";
 import { useIsGlobalRunnerShown } from "@common/features/functionRunner/lib/functionRunner";
 import { useIsCloudDeploymentInSelfHostedDashboard } from "@common/lib/useIsCloudDeploymentInSelfHostedDashboard";
+import { BotIcon } from "@common/lib/logos/BotIcon";
 
 type LayoutProps = {
   children: JSX.Element;
@@ -79,6 +80,12 @@ export function DeploymentDashboardLayout({
       ),
       href: `${uriPrefix}/logs`,
     },
+    {
+      key: "agent",
+      label: "AI Agents",
+      Icon: (props: any) => <BotIcon {...props} />,
+      href: `${uriPrefix}/agents`,
+    },
   ];
 
   const sidebarItems = [
@@ -125,7 +132,7 @@ export function DeploymentDashboardLayout({
           <div
             className={classNames(
               "flex w-full grow overflow-x-hidden",
-              !isGlobalRunnerVertical && "flex-col",
+              !isGlobalRunnerVertical && "flex-col"
             )}
           >
             {/* If the function runner is fully expanded, hide the content */}
@@ -155,7 +162,7 @@ function PauseBanner() {
   const deploymentState = useQuery(udfs.deploymentState.deploymentState);
 
   const { useCurrentTeam, useCurrentUsageBanner } = useContext(
-    DeploymentInfoContext,
+    DeploymentInfoContext
   );
 
   const team = useCurrentTeam();

npm-packages/dashboard-common/src/lib/logos/BotIcon.tsx

@@ -0,0 +1,23 @@
+export function BotIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-content-secondary"
+    >
+      <path d="M12 8V4H8" />
+      <rect width="16" height="12" x="4" y="8" rx="2" />
+      <path d="M2 14h2" />
+      <path d="M20 14h2" />
+      <path d="M15 13v2" />
+      <path d="M9 13v2" />
+    </svg>
+  );
+}

npm-packages/dashboard-self-hosted/src/pages/agents.tsx

@@ -0,0 +1,3 @@
+import { AgentsView } from "@common/features/agents/components/AgentsView";
+
+export default AgentsView;