Save the titles

Author: matt-aitken

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

@@ -36,9 +36,14 @@ const SQL_KEYWORDS = [
 ];
 
 function highlightSQL(query: string): React.ReactNode[] {
-  // Normalize whitespace for display (let CSS line-clamp handle truncation)
-  const normalized = query.replace(/\s+/g, " ").slice(0, 200);
-  const suffix = "";
+  // Normalize: collapse multiple spaces/tabs to single space, but preserve newlines
+  // Then trim each line and limit total length
+  const normalized = query
+    .split("\n")
+    .map((line) => line.replace(/[ \t]+/g, " ").trim())
+    .filter((line) => line.length > 0)
+    .join("\n")
+    .slice(0, 500);
 
   // Create a regex pattern that matches keywords as whole words (case insensitive)
   const keywordPattern = new RegExp(
@@ -69,10 +74,6 @@ function highlightSQL(query: string): React.ReactNode[] {
     parts.push(normalized.slice(lastIndex));
   }
 
-  if (suffix) {
-    parts.push(suffix);
-  }
-
   return parts;
 }
 
@@ -118,10 +119,21 @@ export function QueryHistoryPopover({
                   }}
                   className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900"
                 >
-                  <div className="flex flex-1 flex-col items-start overflow-hidden">
-                    <p className="line-clamp-2 w-full break-words text-left font-mono text-xs text-[#9b99ff]">
-                      {highlightSQL(item.query)}
-                    </p>
+                  <div className="flex flex-1 flex-col items-start gap-0.5 overflow-hidden">
+                    {item.title ? (
+                      <>
+                        <p className="w-full truncate text-left text-sm font-medium text-text-bright">
+                          {item.title}
+                        </p>
+                        <p className="line-clamp-4 w-full whitespace-pre-wrap text-left font-mono text-xs text-text-dimmed">
+                          {highlightSQL(item.query)}
+                        </p>
+                      </>
+                    ) : (
+                      <p className="line-clamp-4 w-full whitespace-pre-wrap text-left font-mono text-xs text-[#9b99ff]">
+                        {highlightSQL(item.query)}
+                      </p>
+                    )}
                     <div className="flex items-center gap-1.5 text-xs text-text-dimmed">
                       <span className="capitalize">{item.scope}</span>
                       {valueLabel && <span>· {valueLabel}</span>}

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

@@ -289,7 +289,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
   }
 
   try {
-    const [error, result] = await executeQuery({
+    const [error, result, queryId] = await executeQuery({
       name: "query-page",
       query,
       schema: z.record(z.any()),
@@ -327,6 +327,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
           hiddenColumns: null,
           explainOutput: null,
           generatedSql: null,
+          queryId: null,
         },
         { status: 400 }
       );
@@ -340,6 +341,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
       hiddenColumns: result.hiddenColumns ?? null,
       explainOutput: result.explainOutput ?? null,
       generatedSql: result.generatedSql ?? null,
+      queryId,
     });
   } catch (err) {
     const errorMessage = err instanceof Error ? err.message : "Unknown error executing query";
@@ -352,6 +354,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
         hiddenColumns: null,
         explainOutput: null,
         generatedSql: null,
+        queryId: null,
       },
       { status: 500 }
     );
@@ -571,14 +574,15 @@ export default function Page() {
     if (
       results?.rows &&
       !results.error &&
+      results.queryId &&
       shouldGenerateTitle &&
       !historyTitle &&
       titleFetcher.state === "idle"
     ) {
       const currentQuery = editorRef.current?.getQuery();
       if (currentQuery) {
         titleFetcher.submit(
-          { query: currentQuery },
+          { query: currentQuery, queryId: results.queryId },
           {
             method: "POST",
             action: `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/query/ai-title`,

apps/webapp/app/services/queryService.server.ts

@@ -89,13 +89,21 @@ export type ExecuteQueryOptions<TOut extends z.ZodSchema> = Omit<
   customOrgConcurrencyLimit?: number;
 };
 
+/**
+ * Extended result type that includes the optional queryId when saved to history
+ */
+export type ExecuteQueryResult<T> =
+  | [error: Error, result: null, queryId: null]
+  | [error: null, result: T, queryId: string | null];
+
 /**
  * Execute a TSQL query against ClickHouse with tenant isolation
  * Handles building tenant options, field mappings, and optionally saves to history
+ * Returns [error, result, queryId] where queryId is the CustomerQuery ID if saved to history
  */
 export async function executeQuery<TOut extends z.ZodSchema>(
   options: ExecuteQueryOptions<TOut>
-): Promise<TSQLQueryResult<z.output<TOut>>> {
+): Promise<ExecuteQueryResult<Exclude<TSQLQueryResult<z.output<TOut>>[1], null>>> {
   const {
     scope,
     organizationId,
@@ -112,20 +120,20 @@ export async function executeQuery<TOut extends z.ZodSchema>(
   const orgLimit = customOrgConcurrencyLimit ?? DEFAULT_ORG_CONCURRENCY_LIMIT;
 
   // Acquire concurrency slot
-  const acquireResult = await queryConcurrencyLimiter.acquire({
-    key: organizationId,
-    requestId,
-    keyLimit: orgLimit,
-    globalLimit: GLOBAL_CONCURRENCY_LIMIT,
-  });
-
-  if (!acquireResult.success) {
-    const errorMessage =
-      acquireResult.reason === "key_limit"
-        ? `You've exceeded your query concurrency of ${orgLimit} for this organization. Please try again later.`
-        : "We're experiencing a lot of queries at the moment. Please try again later.";
-    return [new QueryError(errorMessage, { query: options.query }), null];
-  }
+    const acquireResult = await queryConcurrencyLimiter.acquire({
+      key: organizationId,
+      requestId,
+      keyLimit: orgLimit,
+      globalLimit: GLOBAL_CONCURRENCY_LIMIT,
+    });
+
+    if (!acquireResult.success) {
+      const errorMessage =
+        acquireResult.reason === "key_limit"
+          ? `You've exceeded your query concurrency of ${orgLimit} for this organization. Please try again later.`
+          : "We're experiencing a lot of queries at the moment. Please try again later.";
+      return [new QueryError(errorMessage, { query: options.query }), null, null];
+    }
 
   try {
     // Build tenant IDs based on scope
@@ -172,9 +180,16 @@ export async function executeQuery<TOut extends z.ZodSchema>(
       },
     });
 
+    // If query failed, return early with no queryId
+    if (result[0] !== null) {
+      return [result[0], null, null];
+    }
+
+    let queryId: string | null = null;
+
     // If query succeeded and history options provided, save to history
     // Skip history for EXPLAIN queries (admin debugging) and when explicitly skipped (e.g., impersonating)
-    if (result[0] === null && history && !history.skip && !baseOptions.explain) {
+    if (history && !history.skip && !baseOptions.explain) {
       // Check if this query is the same as the last one saved (avoid duplicate history entries)
       const lastQuery = await prisma.customerQuery.findFirst({
         where: {
@@ -183,7 +198,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
           userId: history.userId ?? null,
         },
         orderBy: { createdAt: "desc" },
-        select: { query: true, scope: true, filterPeriod: true, filterFrom: true, filterTo: true },
+        select: { id: true, query: true, scope: true, filterPeriod: true, filterFrom: true, filterTo: true },
       });
 
       const timeFilter = history.timeFilter;
@@ -195,8 +210,11 @@ export async function executeQuery<TOut extends z.ZodSchema>(
         lastQuery.filterFrom?.getTime() === (timeFilter?.from?.getTime() ?? undefined) &&
         lastQuery.filterTo?.getTime() === (timeFilter?.to?.getTime() ?? undefined);
 
-      if (!isDuplicate) {
-        await prisma.customerQuery.create({
+      if (isDuplicate && lastQuery) {
+        // Return the existing query's ID for duplicate queries
+        queryId = lastQuery.id;
+      } else {
+        const created = await prisma.customerQuery.create({
           data: {
             query: options.query,
             scope: scopeToEnum[scope],
@@ -211,10 +229,11 @@ export async function executeQuery<TOut extends z.ZodSchema>(
             filterTo: history.timeFilter?.to ?? null,
           },
         });
+        queryId = created.id;
       }
     }
 
-    return result;
+    return [null, result[1], queryId];
   } finally {
     // Always release the concurrency slot
     await queryConcurrencyLimiter.release({