From c8ba0eac817464af5814ecd3efece79692e58bf4 Mon Sep 17 00:00:00 2001
From: "A.Shakhmatov" <dev@shakhmatov.com>
Date: Fri, 13 Feb 2026 19:10:36 +0300
Subject: [PATCH] fix: enable text selection in results panel and preserve AI
 prompt

Add select-text to override global user-select:none on results table,
JSON view, error messages, and AI explanation. Also keep AI prompt text
after generation with a clear button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/ai/AiBar.tsx                | 15 +++++++++++++--
 src/components/results/ResultsJsonView.tsx |  2 +-
 src/components/results/ResultsPanel.tsx    |  4 ++--
 src/components/results/ResultsTable.tsx    |  2 +-
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/ai/AiBar.tsx b/src/components/ai/AiBar.tsx
index b110ea8..86ecdad 100644
--- a/src/components/ai/AiBar.tsx
+++ b/src/components/ai/AiBar.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { AiSettingsPopover } from "./AiSettingsPopover";
 import { useGenerateSql } from "@/hooks/use-ai";
-import { Sparkles, Loader2, X } from "lucide-react";
+import { Sparkles, Loader2, X, Eraser } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
@@ -24,7 +24,6 @@ export function AiBar({ connectionId, onSqlGenerated, onClose, onExecute }: Prop
       {
         onSuccess: (sql) => {
           onSqlGenerated(sql);
-          setPrompt("");
         },
         onError: (err) => {
           toast.error("AI generation failed", { description: String(err) });
@@ -77,6 +76,18 @@ export function AiBar({ connectionId, onSqlGenerated, onClose, onExecute }: Prop
           "Generate"
         )}
       </Button>
+      {prompt.trim() && (
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-6 w-6 p-0"
+          onClick={() => setPrompt("")}
+          title="Clear prompt"
+          disabled={generateMutation.isPending}
+        >
+          <Eraser className="h-3 w-3" />
+        </Button>
+      )}
       <AiSettingsPopover />
       <Button
         size="sm"
diff --git a/src/components/results/ResultsJsonView.tsx b/src/components/results/ResultsJsonView.tsx
index 9c37c6d..29b6990 100644
--- a/src/components/results/ResultsJsonView.tsx
+++ b/src/components/results/ResultsJsonView.tsx
@@ -43,7 +43,7 @@ export function ResultsJsonView({ columns, rows }: Props) {
   );
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex h-full select-text flex-col">
       <div className="border-b px-3 py-1">
         <span className="text-xs text-muted-foreground">
           {rows.length} row{rows.length !== 1 ? "s" : ""}
diff --git a/src/components/results/ResultsPanel.tsx b/src/components/results/ResultsPanel.tsx
index c57cf7b..9067499 100644
--- a/src/components/results/ResultsPanel.tsx
+++ b/src/components/results/ResultsPanel.tsx
@@ -44,7 +44,7 @@ export function ResultsPanel({
 
   if (aiExplanation) {
     return (
-      <div className="h-full overflow-auto p-4">
+      <div className="h-full select-text overflow-auto p-4">
         <div className="rounded-md border bg-muted/30 p-4">
           <div className="mb-2 flex items-center gap-2 text-xs font-medium text-muted-foreground">
             <Sparkles className="h-3.5 w-3.5" />
@@ -60,7 +60,7 @@ export function ResultsPanel({
 
   if (error) {
     return (
-      <div className="flex h-full flex-col items-center justify-center gap-3 p-4">
+      <div className="flex h-full select-text flex-col items-center justify-center gap-3 p-4">
         <div className="flex items-start gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
           <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
           <pre className="whitespace-pre-wrap font-mono text-xs">{error}</pre>
diff --git a/src/components/results/ResultsTable.tsx b/src/components/results/ResultsTable.tsx
index 4271941..7986ee7 100644
--- a/src/components/results/ResultsTable.tsx
+++ b/src/components/results/ResultsTable.tsx
@@ -139,7 +139,7 @@ export function ResultsTable({
   if (colNames.length === 0) return null;
 
   return (
-    <div ref={parentRef} className="h-full overflow-auto">
+    <div ref={parentRef} className="h-full select-text overflow-auto">
       {/* Header */}
       <div className="sticky top-0 z-10 flex bg-card border-b">
         {table.getHeaderGroups().map((headerGroup) =>