Styling progress

Author: matt-aitken

apps/webapp/app/components/primitives/Input.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useImperativeHandle, useRef } from "react";
 import { cn } from "~/utils/cn";
-import { Icon, RenderIcon } from "./Icon";
+import { Icon, type RenderIcon } from "./Icon";
 
 const containerBase =
   "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-charcoal-650 has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-1 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text";
@@ -37,6 +37,13 @@ const variants = {
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
   },
+  "secondary-small": {
+    container:
+      "px-1 h-6 w-full rounded border border-charcoal-600 hover:border-charcoal-550 bg-secondary hover:bg-charcoal-650",
+    input: "px-1 rounded text-xs",
+    iconSize: "size-3 ml-0.5",
+    accessory: "pr-0.5",
+  },
 };
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {

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

@@ -1,5 +1,6 @@
+import { Portal } from "@radix-ui/react-portal";
 import { useFetcher, useNavigate } from "@remix-run/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
 import { Input } from "~/components/primitives/Input";
 import { ShortcutKey } from "~/components/primitives/ShortcutKey";
@@ -32,13 +33,29 @@ export function AIFilterInput() {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
-
+  const inputRef = useRef<HTMLInputElement>(null);
   const fetcher = useFetcher<AIFilterResult>();
 
+  // Calculate position for error message
+  const [errorPosition, setErrorPosition] = useState({ top: 0, left: 0, width: 0 });
+
+  useEffect(() => {
+    if (fetcher.data?.success === false && inputRef.current) {
+      const rect = inputRef.current.getBoundingClientRect();
+      setErrorPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    }
+  }, [fetcher.data?.success]);
+
   useEffect(() => {
     if (fetcher.data?.success && fetcher.state === "loading") {
       // Clear the input after successful application
       setText("");
+      // Ensure focus is removed after successful submission
+      setIsFocused(false);
 
       const searchParams = objectToSearchParams(fetcher.data.filters);
       if (!searchParams) {
@@ -52,6 +69,11 @@ export function AIFilterInput() {
 
       navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
 
+      //focus the input again
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+
       // TODO: Show success message with explanation
       console.log(`AI applied filters: ${fetcher.data.explanation}`);
     } else if (fetcher.data?.success === false) {
@@ -70,22 +92,28 @@ export function AIFilterInput() {
     >
       <motion.div
         initial={{ width: "auto" }}
-        animate={{ width: isFocused ? "24rem" : "auto" }}
+        animate={{ width: isFocused && text.length > 0 ? "24rem" : "auto" }}
         transition={{
           type: "spring",
           stiffness: 300,
           damping: 30,
         }}
+        className="animated-gradient-glow relative"
       >
         <Input
           type="text"
           name="text"
-          variant="small"
+          variant="secondary-small"
           placeholder="Describe your filters…"
           value={text}
           onChange={(e) => setText(e.target.value)}
           disabled={isLoading}
           fullWidth
+          ref={inputRef}
+          className={cn(
+            "placeholder:text-text-bright",
+            isFocused && "placeholder:text-text-dimmed"
+          )}
           onKeyDown={(e) => {
             if (e.key === "Enter" && text.trim() && !isLoading) {
               e.preventDefault();
@@ -96,7 +124,12 @@ export function AIFilterInput() {
             }
           }}
           onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
+          onBlur={() => {
+            // Only blur if the text is empty or we're not loading
+            if (text.length === 0 || !isLoading) {
+              setIsFocused(false);
+            }
+          }}
           icon={<AISparkleIcon className="size-4" />}
           accessory={
             isLoading ? (
@@ -110,6 +143,20 @@ export function AIFilterInput() {
             ) : undefined
           }
         />
+        {fetcher.data?.success === false && (
+          <Portal>
+            <div
+              className="fixed z-[9999] rounded-md bg-rose-500 px-3 py-2 text-sm text-white shadow-lg"
+              style={{
+                top: `${errorPosition.top + 8}px`,
+                left: `${errorPosition.left}px`,
+                width: `${errorPosition.width}px`,
+              }}
+            >
+              {fetcher.data.error}
+            </div>
+          </Portal>
+        )}
       </motion.div>
     </fetcher.Form>
   );

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

@@ -395,7 +395,9 @@ function FilterMenu(props: RunFiltersProps) {
       shortcut={shortcut}
       tooltipTitle={"Filter runs"}
       className="pr-0.5"
-    />
+    >
+      <></>
+    </SelectTrigger>
   );
 
   return (

apps/webapp/app/v3/services/aiRunFilterService.server.ts

@@ -11,12 +11,21 @@ import { VersionListPresenter } from "~/presenters/v3/VersionListPresenter.serve
 import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { logger } from "~/services/logger.server";
 
-const AIFilterResponseSchema = z.object({
-  filters: TaskRunListSearchFilters.omit({ environments: true }),
-  explanation: z
-    .string()
-    .describe("A short human-readable explanation of what filters were applied"),
-});
+const AIFilterResponseSchema = z
+  .discriminatedUnion("success", [
+    z.object({
+      success: z.literal(true),
+      filters: TaskRunListSearchFilters.omit({ environments: true }),
+      explanation: z
+        .string()
+        .describe("A short human-readable explanation of what filters were applied"),
+    }),
+    z.object({
+      success: z.literal(false),
+      error: z.string(),
+    }),
+  ])
+  .describe("The response from the AI filter service");
 
 export type AIFilterResult =
   | {
@@ -27,7 +36,6 @@ export type AIFilterResult =
   | {
       success: false;
       error: string;
-      suggestions: string;
     };
 
 export async function processAIFilter(
@@ -38,7 +46,6 @@ export async function processAIFilter(
     return {
       success: false,
       error: "OpenAI API key is not configured",
-      suggestions: "Contact your administrator to configure AI features",
     };
   }
 
@@ -185,27 +192,41 @@ The filters object should only contain the fields that are actually being filter
 
 CRITICAL: The response must be a valid JSON object with exactly this structure:
 {
+  "success": true,
   "filters": {
     // only include fields that have actual values
   },
   "explanation": "string explaining what filters were applied"
 }
 
+or if you can't figure out the filters then return:
+{
+  "success": false,
+  "error": "<short human understandable suggestion>"
+}
+
+Make the error no more than 8 words.
+
 Convert the following natural language description into structured filters:
 
 "${text}"
-
-Return only the filters that are explicitly mentioned or can be reasonably inferred. If the description is unclear or doesn't match any known patterns, return an empty filters object and explain why in the explanation field.`,
+`,
     });
 
     // Add debugging to see what the AI returned
     logger.info("AI filter response", {
       text,
       environmentId: environment.id,
       result: result.experimental_output,
-      filters: result.experimental_output.filters,
     });
 
+    if (!result.experimental_output.success) {
+      return {
+        success: false,
+        error: result.experimental_output.error,
+      };
+    }
+
     // Validate the filters against the schema to catch any issues
     const validationResult = TaskRunListSearchFilters.omit({ environments: true }).safeParse(
       result.experimental_output.filters
@@ -219,8 +240,6 @@ Return only the filters that are explicitly mentioned or can be reasonably infer
       return {
         success: false,
         error: "AI response validation failed",
-        suggestions:
-          "The AI response contained invalid filter values. Try rephrasing your request.",
       };
     }
 
@@ -241,17 +260,13 @@ Return only the filters that are explicitly mentioned or can be reasonably infer
     if (error instanceof Error && error.message.includes("schema")) {
       return {
         success: false,
-        error: "AI response format error",
-        suggestions:
-          "The AI response didn't match the expected format. Try rephrasing your request or being more specific about what you want to filter.",
+        error: error.message,
       };
     }
 
     return {
       success: false,
-      error: "Failed to process AI filter request",
-      suggestions:
-        "Try being more specific about what you want to filter. Use common terms like 'failed runs', 'last 7 days', 'with tag X'. Check that your description is clear and unambiguous",
+      error: error instanceof Error ? error.message : String(error),
     };
   }
 }

apps/webapp/package.json

@@ -85,6 +85,7 @@
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-label": "^2.0.1",
     "@radix-ui/react-popover": "^1.0.5",
+    "@radix-ui/react-portal": "^1.1.9",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^1.2.1",
     "@radix-ui/react-slider": "^1.1.2",