First experiments with the UI

Author: matt-aitken

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

@@ -0,0 +1,98 @@
+import { useFetcher } from "@remix-run/react";
+import { useState, useEffect } from "react";
+import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
+import { Button } from "~/components/primitives/Buttons";
+import { Input } from "~/components/primitives/Input";
+import { Spinner } from "~/components/primitives/Spinner";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { type TaskRunListSearchFilters } from "./RunFilters";
+import { objectToSearchParams } from "~/utils/searchParams";
+import { ShortcutKey } from "~/components/primitives/ShortcutKey";
+
+type AIFilterResult =
+  | {
+      success: true;
+      filters: TaskRunListSearchFilters;
+      explanation?: string;
+    }
+  | {
+      success: false;
+      error: string;
+      suggestions?: string[];
+    };
+
+export function AIFilterInput() {
+  const [text, setText] = useState("");
+  const { replace } = useSearchParams();
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  const fetcher = useFetcher<AIFilterResult>();
+
+  useEffect(() => {
+    if (fetcher.data?.success) {
+      const searchParams = objectToSearchParams(fetcher.data.filters);
+      if (!searchParams) {
+        return;
+      }
+
+      replace(searchParams);
+
+      // Clear the input after successful application
+      setText("");
+
+      // TODO: Show success message with explanation
+      console.log(`AI applied filters: ${fetcher.data.explanation}`);
+    } else if (fetcher.data?.success === false) {
+      // TODO: Show error with suggestions
+      console.error(fetcher.data.error, fetcher.data.suggestions);
+    }
+  }, [fetcher.data, replace]);
+
+  const isLoading = fetcher.state === "submitting";
+
+  return (
+    <fetcher.Form
+      className="flex items-center gap-2"
+      action={`/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/runs/ai-filter`}
+      method="post"
+    >
+      <div className="relative flex-1">
+        <Input
+          type="text"
+          name="text"
+          variant="small"
+          placeholder="Describe your filters…"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          disabled={isLoading}
+          className="pr-10"
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && text.trim() && !isLoading) {
+              e.preventDefault();
+              const form = e.currentTarget.closest("form");
+              if (form) {
+                form.requestSubmit();
+              }
+            }
+          }}
+          icon={<AISparkleIcon className="size-4" />}
+          accessory={
+            text.length > 0 ? (
+              <ShortcutKey shortcut={{ key: "enter" }} variant="small" />
+            ) : undefined
+          }
+        />
+        {isLoading && (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2">
+            <Spinner color="muted" />
+          </div>
+        )}
+      </div>
+    </fetcher.Form>
+  );
+}

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

@@ -61,6 +61,7 @@ import { type loader as versionsLoader } from "~/routes/resources.orgs.$organiza
 import { Button } from "../../primitives/Buttons";
 import { BulkActionTypeCombo } from "./BulkAction";
 import { appliedSummary, FilterMenuProvider, TimeFilter } from "./SharedFilters";
+import { AIFilterInput } from "./AIFilterInput";
 import {
   allTaskRunStatuses,
   descriptionForTaskRunStatus,
@@ -305,6 +306,7 @@ export function RunsFilters(props: RunFiltersProps) {
 
   return (
     <div className="flex flex-row flex-wrap items-center gap-1">
+      <AIFilterInput />
       <FilterMenu {...props} />
       <RootOnlyToggle defaultValue={props.rootOnlyDefault} />
       <TimeFilter />
@@ -355,9 +357,8 @@ function FilterMenu(props: RunFiltersProps) {
       variant={"secondary/small"}
       shortcut={shortcut}
       tooltipTitle={"Filter runs"}
-    >
-      Filter
-    </SelectTrigger>
+      className="pr-0.5"
+    />
   );
 
   return (

apps/webapp/app/hooks/useSearchParam.ts

@@ -9,9 +9,8 @@ export function useSearchParams() {
   const location = useOptimisticLocation();
 
   const replace = useCallback(
-    (values: Values) => {
+    (values: Values | URLSearchParams) => {
       const s = set(new URLSearchParams(location.search), values);
-
       navigate(`${location.pathname}?${s.toString()}`, { replace: true });
     },
     [location, navigate]
@@ -70,7 +69,7 @@ export function useSearchParams() {
   };
 }
 
-function set(searchParams: URLSearchParams, values: Values) {
+function set(searchParams: URLSearchParams, values: Values | URLSearchParams) {
   const search = new URLSearchParams(searchParams);
   for (const [param, value] of Object.entries(values)) {
     if (value === undefined) {

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.ai-filter.tsx

@@ -0,0 +1,44 @@
+import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { requireUserId } from "~/services/session.server";
+import { EnvironmentParamSchema } from "~/utils/pathBuilder";
+import { type TaskRunListSearchFilters } from "~/components/runs/v3/RunFilters";
+
+const RequestSchema = z.object({
+  text: z.string().min(1),
+});
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  const userId = await requireUserId(request);
+  const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
+
+  // Parse the request body
+  const formData = await request.formData();
+  const submission = RequestSchema.safeParse(Object.fromEntries(formData));
+
+  if (!submission.success) {
+    return json<{ success: false; error: string }>(
+      {
+        success: false,
+        error: "Invalid request data",
+      },
+      { status: 400 }
+    );
+  }
+
+  const { text } = submission.data;
+
+  // TODO: Replace this with actual AI processing
+  // For now, return fake successful data
+  const fakeFilters: TaskRunListSearchFilters = {
+    statuses: ["COMPLETED_WITH_ERRORS"],
+    period: "7d",
+    tags: ["test-tag"],
+  };
+
+  return json<{ success: true; filters: TaskRunListSearchFilters; explanation: string }>({
+    success: true,
+    filters: fakeFilters,
+    explanation: `Applied filters: failed status, last 7 days, with tag "test-tag"`,
+  });
+}