chat.task -> chat.agent

plus playground support, including playground conversations, and a new
agent list

Author: ericallam

apps/webapp/app/components/BulkActionFilterSummary.tsx

@@ -240,6 +240,19 @@ export function BulkActionFilterSummary({
                     />
                   );
                 }
+                case "sources": {
+                  const values = Array.isArray(value) ? value : [`${value}`];
+                  return (
+                    <AppliedFilter
+                      variant="minimal/medium"
+                      key={key}
+                      label={filterTitle(key)}
+                      icon={filterIcon(key)}
+                      value={appliedSummary(values)}
+                      removable={false}
+                    />
+                  );
+                }
                 default: {
                   assertNever(typedKey);
                 }

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -10,6 +10,7 @@ import {
   ClockIcon,
   Cog8ToothIcon,
   CogIcon,
+  CpuChipIcon,
   CubeIcon,
   ExclamationTriangleIcon,
   FolderIcon,
@@ -69,7 +70,9 @@ import {
   organizationTeamPath,
   queryPath,
   regionsPath,
+  v3AgentsPath,
   v3ApiKeysPath,
+  v3PlaygroundPath,
   v3BatchesPath,
   v3BillingPath,
   v3BuiltInDashboardPath,
@@ -470,6 +473,22 @@ export function SideMenu({
                 )}
                 onCollapseToggle={handleSectionToggle("ai")}
               >
+                <SideMenuItem
+                  name="Agents"
+                  icon={CpuChipIcon}
+                  activeIconColor="text-indigo-500"
+                  inactiveIconColor="text-indigo-500"
+                  to={v3AgentsPath(organization, project, environment)}
+                  isCollapsed={isCollapsed}
+                />
+                <SideMenuItem
+                  name="Playground"
+                  icon={BeakerIcon}
+                  activeIconColor="text-indigo-400"
+                  inactiveIconColor="text-indigo-400"
+                  to={v3PlaygroundPath(organization, project, environment)}
+                  isCollapsed={isCollapsed}
+                />
                 <SideMenuItem
                   name="Prompts"
                   icon={AIPromptsIcon}

apps/webapp/app/components/runs/v3/RunFilters.tsx

@@ -2,6 +2,7 @@ import * as Ariakit from "@ariakit/react";
 import {
   CalendarIcon,
   ClockIcon,
+  CpuChipIcon,
   FingerPrintIcon,
   RectangleStackIcon,
   Squares2X2Icon,
@@ -182,6 +183,9 @@ export const TaskRunListSearchFilters = z.object({
     `Machine presets to filter by (${machines.join(", ")})`
   ),
   errorId: z.string().optional().describe("Error ID to filter runs by (e.g. error_abc123)"),
+  sources: StringOrStringArray.describe(
+    "Task trigger sources to filter by (STANDARD, SCHEDULED, AGENT)"
+  ),
 });
 
 export type TaskRunListSearchFilters = z.infer<typeof TaskRunListSearchFilters>;
@@ -223,6 +227,8 @@ export function filterTitle(filterKey: string) {
       return "Version";
     case "errorId":
       return "Error ID";
+    case "sources":
+      return "Source";
     default:
       return filterKey;
   }
@@ -263,6 +269,8 @@ export function filterIcon(filterKey: string): ReactNode | undefined {
       return <IconRotateClockwise2 className="size-4" />;
     case "errorId":
       return <IconBugFilled className="size-4" />;
+    case "sources":
+      return <CpuChipIcon className="size-4" />;
     default:
       return undefined;
   }
@@ -310,6 +318,10 @@ export function getRunFiltersFromSearchParams(
         ? searchParams.getAll("versions")
         : undefined,
     errorId: searchParams.get("errorId") ?? undefined,
+    sources:
+      searchParams.getAll("sources").filter((v) => v.length > 0).length > 0
+        ? searchParams.getAll("sources")
+        : undefined,
   };
 
   const parsed = TaskRunListSearchFilters.safeParse(params);
@@ -351,7 +363,8 @@ export function RunsFilters(props: RunFiltersProps) {
     searchParams.has("queues") ||
     searchParams.has("machines") ||
     searchParams.has("versions") ||
-    searchParams.has("errorId");
+    searchParams.has("errorId") ||
+    searchParams.has("sources");
 
   return (
     <div className="flex flex-row flex-wrap items-center gap-1">
@@ -388,6 +401,7 @@ const filterTypes = [
   { name: "schedule", title: "Schedule ID", icon: <ClockIcon className="size-4" /> },
   { name: "bulk", title: "Bulk action", icon: <ListCheckedIcon className="size-4" /> },
   { name: "error", title: "Error ID", icon: <IconBugFilled className="size-4" /> },
+  { name: "source", title: "Source", icon: <CpuChipIcon className="size-4" /> },
 ] as const;
 
 type FilterType = (typeof filterTypes)[number]["name"];
@@ -443,6 +457,7 @@ function AppliedFilters({ possibleTasks, bulkActions }: RunFiltersProps) {
       <AppliedScheduleIdFilter />
       <AppliedBulkActionsFilter bulkActions={bulkActions} />
       <AppliedErrorIdFilter />
+      <AppliedSourceFilter />
     </>
   );
 }
@@ -481,6 +496,8 @@ function Menu(props: MenuProps) {
       return <VersionsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "error":
       return <ErrorIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "source":
+      return <SourceDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
   }
 }
 
@@ -1869,3 +1886,101 @@ function AppliedErrorIdFilter() {
     </FilterMenuProvider>
   );
 }
+
+const sourceOptions: { value: TaskTriggerSource; title: string }[] = [
+  { value: "STANDARD", title: "Standard" },
+  { value: "SCHEDULED", title: "Scheduled" },
+  { value: "AGENT", title: "Agent" },
+];
+
+function SourceDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+}) {
+  const { values, replace } = useSearchParams();
+
+  const handleChange = (values: string[]) => {
+    clearSearchValue();
+    replace({ sources: values, cursor: undefined, direction: undefined });
+  };
+
+  const filtered = useMemo(() => {
+    return sourceOptions.filter((item) =>
+      item.title.toLowerCase().includes(searchValue.toLowerCase())
+    );
+  }, [searchValue]);
+
+  return (
+    <SelectProvider value={values("sources")} setValue={handleChange} virtualFocus={true}>
+      {trigger}
+      <SelectPopover
+        className="min-w-0 max-w-[min(240px,var(--popover-available-width))]"
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+          return true;
+        }}
+      >
+        <ComboBox placeholder={"Filter by source..."} value={searchValue} />
+        <SelectList>
+          {filtered.map((item, index) => (
+            <SelectItem
+              key={item.value}
+              value={item.value}
+              icon={
+                <TaskTriggerSourceIcon source={item.value} className="size-4 flex-none" />
+              }
+              shortcut={shortcutFromIndex(index, { shortcutsEnabled: true })}
+            >
+              {item.title}
+            </SelectItem>
+          ))}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+function AppliedSourceFilter() {
+  const { values, del } = useSearchParams();
+  const sources = values("sources");
+
+  if (sources.length === 0 || sources.every((v) => v === "")) {
+    return null;
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <SourceDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Source"
+                icon={<CpuChipIcon className="size-4" />}
+                value={appliedSummary(
+                  sources.map(
+                    (v) => sourceOptions.find((o) => o.value === v)?.title ?? v
+                  )
+                )}
+                onRemove={() => del(["sources", "cursor", "direction"])}
+                variant="secondary/small"
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}

apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

@@ -55,8 +55,10 @@ import {
   filterableTaskRunStatuses,
   TaskRunStatusCombo,
 } from "./TaskRunStatus";
+import { TaskTriggerSourceIcon } from "./TaskTriggerSource";
 import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 import { useSearchParams } from "~/hooks/useSearchParam";
+import type { TaskTriggerSource } from "@trigger.dev/database";
 
 type RunsTableProps = {
   total: number;
@@ -343,6 +345,10 @@ export function TaskRunsTable({
                 </TableCell>
                 <TableCell to={path}>
                   <span className="flex items-center gap-x-1">
+                    <TaskTriggerSourceIcon
+                      source={run.taskKind as TaskTriggerSource}
+                      className="size-3.5 flex-none"
+                    />
                     {run.taskIdentifier}
                     {run.rootTaskRunId === null ? <Badge variant="extra-small">Root</Badge> : null}
                   </span>

apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx

@@ -1,4 +1,4 @@
-import { ClockIcon } from "@heroicons/react/20/solid";
+import { ClockIcon, CpuChipIcon } from "@heroicons/react/20/solid";
 import type { TaskTriggerSource } from "@trigger.dev/database";
 import { TaskIconSmall } from "~/assets/icons/TaskIcon";
 import { cn } from "~/utils/cn";
@@ -19,6 +19,11 @@ export function TaskTriggerSourceIcon({
         <ClockIcon className={cn("size-[1.125rem] min-w-[1.125rem] text-schedules", className)} />
       );
     }
+    case "AGENT": {
+      return (
+        <CpuChipIcon className={cn("size-[1.125rem] min-w-[1.125rem] text-indigo-500", className)} />
+      );
+    }
   }
 }
 
@@ -30,5 +35,8 @@ export function taskTriggerSourceDescription(source: TaskTriggerSource) {
     case "SCHEDULED": {
       return "Scheduled task";
     }
+    case "AGENT": {
+      return "Agent";
+    }
   }
 }

apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx

@@ -259,7 +259,7 @@ function ToolUseSection({ tools }: { tools: ToolUse[] }) {
 
 type ToolTab = "input" | "output" | "details";
 
-function ToolUseRow({ tool }: { tool: ToolUse }) {
+export function ToolUseRow({ tool }: { tool: ToolUse }) {
   const hasInput = tool.inputJson !== "{}";
   const hasResult = !!tool.resultOutput;
   const hasDetails = !!tool.description || !!tool.parametersJson;

apps/webapp/app/presenters/RunFilters.server.ts

@@ -36,6 +36,7 @@ export async function getRunFiltersFromRequest(request: Request): Promise<Filter
     queues,
     machines,
     errorId,
+    sources,
   } = TaskRunListSearchFilters.parse(s);
 
   return {
@@ -56,5 +57,6 @@ export async function getRunFiltersFromRequest(request: Request): Promise<Filter
     queues,
     machines,
     errorId,
+    sources,
   };
 }