Generate a title using AI

matt-aitken · matt-aitken · commit 478f18049df5 · 2026-01-28T14:12:23.000Z
diff --git a/apps/webapp/app/components/primitives/charts/Card.tsx b/apps/webapp/app/components/primitives/charts/Card.tsx
@@ -6,7 +6,7 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
   return (
     <div
       className={cn(
-        "flex flex-col rounded-lg border border-grid-bright bg-background-bright pb-2 pt-4",
+        "flex flex-col rounded-lg border border-grid-bright bg-background-bright pb-1.5 pt-3",
         className
       )}
     >
@@ -17,7 +17,7 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
 
 const CardHeader = ({ children }: { children: ReactNode }) => {
   return (
-    <Header3 className="mb-4 flex items-center justify-between gap-2 px-4">{children}</Header3>
+    <Header3 className="mb-3 flex items-center justify-between gap-2 px-3">{children}</Header3>
   );
 };
 
diff --git a/apps/webapp/app/env.server.ts b/apps/webapp/app/env.server.ts
@@ -521,7 +521,6 @@ const EnvironmentSchema = z
     PROD_USAGE_HEARTBEAT_INTERVAL_MS: z.coerce.number().int().optional(),
 
     CENTS_PER_RUN: z.coerce.number().default(0),
-    CENTS_PER_QUERY_BYTE_SECOND: z.coerce.number().default(0),
 
     EVENT_LOOP_MONITOR_ENABLED: z.string().default("1"),
     RESOURCE_MONITOR_ENABLED: z.string().default("0"),
diff --git a/apps/webapp/app/presenters/v3/QueryPresenter.server.ts b/apps/webapp/app/presenters/v3/QueryPresenter.server.ts
@@ -8,6 +8,8 @@ export type QueryHistoryItem = {
   scope: QueryScope;
   createdAt: Date;
   userName: string | null;
+  /** AI-generated title summarizing the query */
+  title: string | null;
   /** Time filter settings */
   filterPeriod: string | null;
   filterFrom: Date | null;
@@ -24,6 +26,7 @@ export class QueryPresenter extends BasePresenter {
         id: true,
         query: true,
         scope: true,
+        title: true,
         createdAt: true,
         filterPeriod: true,
         filterFrom: true,
@@ -43,6 +46,7 @@ export class QueryPresenter extends BasePresenter {
           scope: q.scope.toLowerCase() as QueryScope,
           createdAt: q.createdAt,
           userName: q.user?.displayName ?? q.user?.name ?? null,
+          title: q.title,
           filterPeriod: q.filterPeriod,
           filterFrom: q.filterFrom,
           filterTo: q.filterTo,
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -1,4 +1,6 @@
-import { ArrowDownTrayIcon, ArrowsPointingInIcon, ArrowsPointingOutIcon, ArrowTrendingUpIcon, ClipboardIcon } from "@heroicons/react/20/solid";
+import { ArrowDownTrayIcon, ArrowsPointingInIcon, ArrowsPointingOutIcon, ArrowTrendingUpIcon, ClipboardIcon, TableCellsIcon } from "@heroicons/react/20/solid";
+import { useFetcher } from "@remix-run/react";
+import type { action as titleAction } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query.ai-title";
 import type { OutputColumnMetadata, WhereClauseFallback } from "@internal/clickhouse";
 import {
   redirect,
@@ -374,12 +376,23 @@ const QueryEditorForm = forwardRef<
     history: QueryHistoryItem[];
     fetcher: ReturnType<typeof useTypedFetcher<typeof action>>;
     isAdmin: boolean;
+    onQuerySubmit?: () => void;
+    onHistorySelected?: (item: QueryHistoryItem) => void;
   }
->(function QueryEditorForm({ defaultQuery, defaultScope, defaultTimeFilter, history, fetcher, isAdmin }, ref) {
+>(function QueryEditorForm({ defaultQuery, defaultScope, defaultTimeFilter, history, fetcher, isAdmin, onQuerySubmit, onHistorySelected }, ref) {
   const isLoading = fetcher.state === "submitting" || fetcher.state === "loading";
   const [query, setQuery] = useState(defaultQuery);
   const [scope, setScope] = useState<QueryScope>(defaultScope);
   const formRef = useRef<HTMLFormElement>(null);
+  const prevFetcherState = useRef(fetcher.state);
+
+  // Notify parent when query is submitted (for title generation)
+  useEffect(() => {
+    if (prevFetcherState.current !== "submitting" && fetcher.state === "submitting") {
+      onQuerySubmit?.();
+    }
+    prevFetcherState.current = fetcher.state;
+  }, [fetcher.state, onQuerySubmit]);
 
   // Get time filter values - initialize from props (which may come from history)
   const [period, setPeriod] = useState<string | undefined>(defaultTimeFilter?.period);
@@ -414,7 +427,9 @@ const QueryEditorForm = forwardRef<
     setPeriod(item.filterPeriod ?? undefined);
     setFrom(item.filterFrom ? toISOString(item.filterFrom) : undefined);
     setTo(item.filterTo ? toISOString(item.filterTo) : undefined);
-  }, []);
+    // Notify parent about history selection (for title)
+    onHistorySelected?.(item);
+  }, [onHistorySelected]);
 
   return (
     <div className="flex h-full flex-col gap-2 bg-charcoal-900 pb-2">
@@ -514,6 +529,10 @@ export default function Page() {
   const results = fetcher.data;
   const { replace: replaceSearchParams } = useSearchParams();
 
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
   // Use most recent history item if available, otherwise fall back to defaults
   const initialQuery = history.length > 0 ? history[0].query : defaultQuery;
   const initialScope: QueryScope = history.length > 0 ? history[0].scope : "environment";
@@ -533,6 +552,44 @@ export default function Page() {
   const [sidebarTab, setSidebarTab] = useState<string>("ai");
   const [aiFixRequest, setAiFixRequest] = useState<{ prompt: string; key: number } | null>(null);
 
+  // Title generation state
+  const titleFetcher = useFetcher<typeof titleAction>();
+  const isTitleLoading = titleFetcher.state !== "idle";
+  const generatedTitle = titleFetcher.data?.title;
+  const [historyTitle, setHistoryTitle] = useState<string | null>(
+    history.length > 0 ? history[0].title ?? null : null
+  );
+
+  // Effective title: history title takes precedence, then generated
+  const queryTitle = historyTitle ?? generatedTitle ?? null;
+
+  // Track whether we should generate a title for the current results
+  const [shouldGenerateTitle, setShouldGenerateTitle] = useState(false);
+
+  // Trigger title generation when query succeeds (only for new queries, not history)
+  useEffect(() => {
+    if (
+      results?.rows &&
+      !results.error &&
+      shouldGenerateTitle &&
+      !historyTitle &&
+      titleFetcher.state === "idle"
+    ) {
+      const currentQuery = editorRef.current?.getQuery();
+      if (currentQuery) {
+        titleFetcher.submit(
+          { query: currentQuery },
+          {
+            method: "POST",
+            action: `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/query/ai-title`,
+            encType: "application/json",
+          }
+        );
+        setShouldGenerateTitle(false);
+      }
+    }
+  }, [results, shouldGenerateTitle, historyTitle, titleFetcher, organization.slug, project.slug, environment.slug]);
+
   const handleTryFixError = useCallback((errorMessage: string) => {
     setSidebarTab("ai");
     setAiFixRequest((prev) => ({
@@ -575,6 +632,18 @@ export default function Page() {
     setChartConfig(config);
   }, []);
 
+  // Handle query submission - prepare for title generation
+  const handleQuerySubmit = useCallback(() => {
+    setHistoryTitle(null); // Clear history title when running a new query
+    setShouldGenerateTitle(true); // Enable title generation for new results
+  }, []);
+
+  // Handle history selection - use existing title if available
+  const handleHistorySelected = useCallback((item: QueryHistoryItem) => {
+    setHistoryTitle(item.title ?? null);
+    setShouldGenerateTitle(false); // Don't generate title for history items
+  }, []);
+
   return (
     <PageContainer>
       <NavBar>
@@ -594,6 +663,8 @@ export default function Page() {
                   history={history}
                   fetcher={fetcher}
                   isAdmin={isAdmin}
+                  onQuerySubmit={handleQuerySubmit}
+                  onHistorySelected={handleHistorySelected}
                 />
               </ResizablePanel>
               <ResizableHandle id="query-editor-handle" />
@@ -701,7 +772,19 @@ export default function Page() {
                           </Callout>
                         )}
                         <div className="h-full bg-charcoal-900 p-2">
-                          <Card className="h-full overflow-hidden p-0">
+                          <Card className="h-full overflow-hidden px-0 pb-0">
+                            <Card.Header>
+                              <div className="flex items-center gap-1.5">
+                                <TableCellsIcon className="size-5 text-indigo-500" />
+                                {isTitleLoading ? (
+                                  <span className="flex items-center gap-2 text-text-dimmed">
+                                    <Spinner className="size-3" /> Generating title...
+                                  </span>
+                                ) : (
+                                  queryTitle ?? "Results"
+                                )}
+                              </div>
+                            </Card.Header>
                             <Card.Content className="min-h-0 flex-1 overflow-hidden p-0">
                               <TSQLResultsTable
                                 rows={results.rows}
@@ -728,6 +811,8 @@ export default function Page() {
                         columns={results.columns}
                         chartConfig={chartConfig}
                         onChartConfigChange={handleChartConfigChange}
+                        queryTitle={queryTitle}
+                        isTitleLoading={isTitleLoading}
                       />
                     ) : (
                       <Paragraph variant="small" className="p-4 text-text-dimmed">
@@ -853,14 +938,26 @@ function ResultsChart({
   columns,
   chartConfig,
   onChartConfigChange,
+  queryTitle,
+  isTitleLoading,
 }: {
   rows: Record<string, unknown>[];
   columns: OutputColumnMetadata[];
   chartConfig: ChartConfiguration;
   onChartConfigChange: (config: ChartConfiguration) => void;
+  queryTitle: string | null;
+  isTitleLoading: boolean;
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
+  const titleContent = isTitleLoading ? (
+    <span className="flex items-center gap-2 text-text-dimmed">
+      <Spinner className="size-3" /> Generating title...
+    </span>
+  ) : (
+    queryTitle ?? "Chart"
+  );
+
   return (
     <><ResizablePanelGroup className="h-full overflow-hidden">
       <ResizablePanel id="chart-results">
@@ -869,7 +966,7 @@ function ResultsChart({
             <Card.Header>
               <div className="flex items-center gap-1.5">
                 <ArrowTrendingUpIcon className="size-5 text-indigo-500" />
-                Chart
+                {titleContent}
               </div>
               <Card.Accessory>
                 <Button variant="minimal/small" LeadingIcon={ArrowsPointingOutIcon} onClick={() => setIsOpen(true)} />
@@ -890,7 +987,7 @@ function ResultsChart({
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <DialogContent fullscreen>
           <DialogHeader>
-            Chart
+            {queryTitle ?? "Chart"}
           </DialogHeader>
           <div className="h-full min-h-0 flex-1 overflow-hidden w-full pt-4">
             <QueryResultsChart rows={rows} columns={columns} config={chartConfig} fullLegend={true} />
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query.ai-title.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query.ai-title.tsx
@@ -0,0 +1,65 @@
+import { openai } from "@ai-sdk/openai";
+import { json, type ActionFunctionArgs } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { env } from "~/env.server";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import { requireUserId } from "~/services/session.server";
+import { EnvironmentParamSchema } from "~/utils/pathBuilder";
+import { AIQueryTitleService } from "~/v3/services/aiQueryTitleService.server";
+
+const RequestSchema = z.object({
+  query: z.string().min(1, "Query is required"),
+  queryId: z.string().optional(),
+});
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  const userId = await requireUserId(request);
+  const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
+
+  // Parse the request body
+  const data = await request.json();
+  const submission = RequestSchema.safeParse(data);
+
+  if (!submission.success) {
+    return json({ success: false as const, error: "Invalid request data", title: null }, { status: 400 });
+  }
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) {
+    return json({ success: false as const, error: "Project not found", title: null }, { status: 404 });
+  }
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  if (!environment) {
+    return json({ success: false as const, error: "Environment not found", title: null }, { status: 404 });
+  }
+
+  if (!env.OPENAI_API_KEY) {
+    return json(
+      { success: false as const, error: "OpenAI API key is not configured", title: null },
+      { status: 400 }
+    );
+  }
+
+  const { query, queryId } = submission.data;
+
+  const service = new AIQueryTitleService(openai(env.AI_RUN_FILTER_MODEL ?? "gpt-4o-mini"));
+
+  const result = await service.generateTitle(query);
+
+  if (!result.success) {
+    return json({ success: false as const, error: result.error, title: null }, { status: 500 });
+  }
+
+  // If a queryId was provided, update the CustomerQuery record with the title
+  if (queryId) {
+    await prisma.customerQuery.update({
+      where: { id: queryId },
+      data: { title: result.title },
+    });
+  }
+
+  return json({ success: true as const, title: result.title, error: null });
+}
diff --git a/apps/webapp/app/services/queryService.server.ts b/apps/webapp/app/services/queryService.server.ts
@@ -196,16 +196,11 @@ export async function executeQuery<TOut extends z.ZodSchema>(
         lastQuery.filterTo?.getTime() === (timeFilter?.to?.getTime() ?? undefined);
 
       if (!isDuplicate) {
-        const stats = result[1].stats;
-        const byteSeconds = parseFloat(stats.byte_seconds) || 0;
-        const costInCents = byteSeconds * env.CENTS_PER_QUERY_BYTE_SECOND;
-
         await prisma.customerQuery.create({
           data: {
             query: options.query,
             scope: scopeToEnum[scope],
-            stats: { ...stats },
-            costInCents,
+            stats: { ...result[1].stats },
             source: history.source,
             organizationId,
             projectId: scope === "project" || scope === "environment" ? projectId : null,
diff --git a/apps/webapp/app/v3/services/aiQueryTitleService.server.ts b/apps/webapp/app/v3/services/aiQueryTitleService.server.ts
diff --git a/internal-packages/database/prisma/migrations/20260124203524_customer_query_add_title_remove_cost/migration.sql b/internal-packages/database/prisma/migrations/20260124203524_customer_query_add_title_remove_cost/migration.sql
diff --git a/internal-packages/database/prisma/schema.prisma b/internal-packages/database/prisma/schema.prisma
