The AI updates the time filter

Author: matt-aitken

apps/webapp/app/components/code/AIQueryInput.tsx

@@ -20,16 +20,25 @@ import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
 
+interface AITimeFilter {
+  period?: string;
+  from?: string;
+  to?: string;
+}
+
 type StreamEventType =
   | { type: "thinking"; content: string }
   | { type: "tool_call"; tool: string; args: unknown }
-  | { type: "result"; success: true; query: string }
+  | { type: "time_filter"; filter: AITimeFilter }
+  | { type: "result"; success: true; query: string; timeFilter?: AITimeFilter }
   | { type: "result"; success: false; error: string };
 
 export type AIQueryMode = "new" | "edit";
 
 interface AIQueryInputProps {
   onQueryGenerated: (query: string) => void;
+  /** Called when the AI sets a time filter - updates URL search params */
+  onTimeFilterChange?: (filter: AITimeFilter) => void;
   /** Set this to a prompt to auto-populate and immediately submit */
   autoSubmitPrompt?: string;
   /** Change this to force re-submission even if prompt is the same */
@@ -40,6 +49,7 @@ interface AIQueryInputProps {
 
 export function AIQueryInput({
   onQueryGenerated,
+  onTimeFilterChange,
   autoSubmitPrompt,
   autoSubmitKey,
   getCurrentQuery,
@@ -174,10 +184,22 @@ export function AIQueryInput({
           setThinking((prev) => prev + event.content);
           break;
         case "tool_call":
-          setThinking((prev) => prev + `\nValidating query...\n`);
+          if (event.tool === "setTimeFilter") {
+            setThinking((prev) => prev + `\nSetting time filter...\n`);
+          } else {
+            setThinking((prev) => prev + `\nValidating query...\n`);
+          }
+          break;
+        case "time_filter":
+          // Apply time filter immediately when the AI sets it
+          onTimeFilterChange?.(event.filter);
           break;
         case "result":
           if (event.success) {
+            // Apply time filter if included in result (backup in case time_filter event was missed)
+            if (event.timeFilter) {
+              onTimeFilterChange?.(event.timeFilter);
+            }
             onQueryGenerated(event.query);
             setPrompt("");
             setLastResult("success");
@@ -189,7 +211,7 @@ export function AIQueryInput({
           break;
       }
     },
-    [onQueryGenerated]
+    [onQueryGenerated, onTimeFilterChange]
   );
 
   const handleSubmit = useCallback(

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx

@@ -2,12 +2,20 @@ import { useState } from "react";
 import { AIQueryInput } from "~/components/code/AIQueryInput";
 import { Header3 } from "~/components/primitives/Headers";
 
+interface AITimeFilter {
+  period?: string;
+  from?: string;
+  to?: string;
+}
+
 export function AITabContent({
   onQueryGenerated,
+  onTimeFilterChange,
   getCurrentQuery,
   aiFixRequest,
 }: {
   onQueryGenerated: (query: string) => void;
+  onTimeFilterChange?: (filter: AITimeFilter) => void;
   getCurrentQuery: () => string;
   aiFixRequest: { prompt: string; key: number } | null;
 }) {
@@ -31,6 +39,7 @@ export function AITabContent({
     <div className="space-y-2">
       <AIQueryInput
         onQueryGenerated={onQueryGenerated}
+        onTimeFilterChange={onTimeFilterChange}
         autoSubmitPrompt={activeRequest?.prompt}
         autoSubmitKey={activeRequest?.key}
         getCurrentQuery={getCurrentQuery}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx

@@ -11,16 +11,24 @@ import { ExamplesContent } from "./ExamplesContent";
 import { TableSchemaContent } from "./TableSchemaContent";
 import { TRQLGuideContent } from "./TRQLGuideContent";
 
+interface AITimeFilter {
+  period?: string;
+  from?: string;
+  to?: string;
+}
+
 export function QueryHelpSidebar({
   onTryExample,
   onQueryGenerated,
+  onTimeFilterChange,
   getCurrentQuery,
   activeTab,
   onTabChange,
   aiFixRequest,
 }: {
   onTryExample: (query: string, scope: QueryScope) => void;
   onQueryGenerated: (query: string) => void;
+  onTimeFilterChange?: (filter: AITimeFilter) => void;
   getCurrentQuery: () => string;
   activeTab: string;
   onTabChange: (tab: string) => void;
@@ -55,6 +63,7 @@ export function QueryHelpSidebar({
         >
           <AITabContent
             onQueryGenerated={onQueryGenerated}
+            onTimeFilterChange={onTimeFilterChange}
             getCurrentQuery={getCurrentQuery}
             aiFixRequest={aiFixRequest}
           />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx

@@ -464,10 +464,17 @@ const QueryEditorForm = forwardRef<
   );
 });
 
+interface AITimeFilter {
+  period?: string;
+  from?: string;
+  to?: string;
+}
+
 export default function Page() {
   const { defaultQuery, history, isAdmin } = useTypedLoaderData<typeof loader>();
   const results = useTypedActionData<typeof action>();
   const navigation = useNavigation();
+  const { replace: replaceSearchParams } = useSearchParams();
 
   // Use most recent history item if available, otherwise fall back to defaults
   const initialQuery = history.length > 0 ? history[0].query : defaultQuery;
@@ -488,6 +495,21 @@ export default function Page() {
     }));
   }, []);
 
+  // Handle time filter changes from AI
+  const handleTimeFilterChange = useCallback(
+    (filter: AITimeFilter) => {
+      replaceSearchParams({
+        period: filter.period,
+        from: filter.from,
+        to: filter.to,
+        // Clear cursor/direction when time filter changes
+        cursor: undefined,
+        direction: undefined,
+      });
+    },
+    [replaceSearchParams]
+  );
+
   const isLoading = (navigation.state === "submitting" || navigation.state === "loading") && navigation.formMethod === "POST";
 
 
@@ -702,6 +724,7 @@ export default function Page() {
                 const formatted = autoFormatSQL(query);
                 editorRef.current?.setQuery(formatted);
               }}
+              onTimeFilterChange={handleTimeFilterChange}
               getCurrentQuery={() => editorRef.current?.getQuery() ?? ""}
               activeTab={sidebarTab}
               onTabChange={setSidebarTab}

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

@@ -6,7 +6,7 @@ import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { requireUserId } from "~/services/session.server";
 import { EnvironmentParamSchema } from "~/utils/pathBuilder";
-import { AIQueryService } from "~/v3/services/aiQueryService.server";
+import { AIQueryService, type AITimeFilter } from "~/v3/services/aiQueryService.server";
 import { querySchemas } from "~/v3/querySchemas";
 
 const RequestSchema = z.object({
@@ -102,6 +102,8 @@ export async function action({ request, params }: ActionFunctionArgs) {
         success?: boolean;
         query?: string;
         error?: string;
+        filter?: AITimeFilter;
+        timeFilter?: AITimeFilter;
       }) => {
         controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
       };
@@ -122,6 +124,19 @@ export async function action({ request, params }: ActionFunctionArgs) {
                 tool: part.toolName,
                 args: part.args,
               });
+
+              // If it's a setTimeFilter call, emit the time_filter event immediately
+              if (part.toolName === "setTimeFilter") {
+                const args = part.args as { period?: string; from?: string; to?: string };
+                sendEvent({
+                  type: "time_filter",
+                  filter: {
+                    period: args.period,
+                    from: args.from,
+                    to: args.to,
+                  },
+                });
+              }
               break;
             }
             case "error": {
@@ -136,12 +151,14 @@ export async function action({ request, params }: ActionFunctionArgs) {
               // Extract query from the final text
               const finalText = await result.text;
               const query = extractQueryFromText(finalText);
+              const timeFilter = service.getPendingTimeFilter();
 
               if (query) {
                 sendEvent({
                   type: "result",
                   success: true,
                   query,
+                  timeFilter,
                 });
               } else if (
                 finalText.toLowerCase().includes("cannot") ||