Add description (optional) to SQL query

src/components/chat/ChatInput.tsx

@@ -38,6 +38,7 @@ import {
   SuggestedAction,
   ProposalResult,
   FileChange,
+  SqlQuery,
 } from "@/lib/schemas";
 import type { Message } from "@/ipc/ipc_types";
 import { isPreviewOpenAtom } from "@/atoms/viewAtoms";
@@ -547,7 +548,7 @@ function ProposalSummary({
   packagesAdded = [],
   filesChanged = [],
 }: {
-  sqlQueries?: string[];
+  sqlQueries?: Array<SqlQuery>;
   serverFunctions?: FileChange[];
   packagesAdded?: string[];
   filesChanged?: FileChange[];
@@ -600,9 +601,12 @@ function ProposalSummary({
 }
 
 // SQL Query item with expandable functionality
-function SqlQueryItem({ query }: { query: string }) {
+function SqlQueryItem({ query }: { query: SqlQuery }) {
   const [isExpanded, setIsExpanded] = useState(false);
 
+  const queryContent = query.content;
+  const queryDescription = query.description;
+
   return (
     <li
       className="bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-3 py-2 border border-border cursor-pointer"
@@ -611,7 +615,9 @@ function SqlQueryItem({ query }: { query: string }) {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Database size={16} className="text-muted-foreground flex-shrink-0" />
-          <span className="text-sm font-medium">SQL Query</span>
+          <span className="text-sm font-medium">
+            {queryDescription || "SQL Query"}
+          </span>
         </div>
         <div>
           {isExpanded ? (
@@ -623,7 +629,9 @@ function SqlQueryItem({ query }: { query: string }) {
       </div>
       {isExpanded && (
         <div className="mt-2 text-xs max-h-[200px] overflow-auto">
-          <CodeHighlight className="language-sql ">{query}</CodeHighlight>
+          <CodeHighlight className="language-sql ">
+            {queryContent}
+          </CodeHighlight>
         </div>
       )}
     </li>

src/components/chat/DyadExecuteSql.tsx

@@ -14,16 +14,19 @@ import { CustomTagState } from "./stateTypes";
 interface DyadExecuteSqlProps {
   children?: ReactNode;
   node?: any;
+  description?: string;
 }
 
 export const DyadExecuteSql: React.FC<DyadExecuteSqlProps> = ({
   children,
   node,
+  description,
 }) => {
   const [isContentVisible, setIsContentVisible] = useState(false);
   const state = node?.properties?.state as CustomTagState;
   const inProgress = state === "pending";
   const aborted = state === "aborted";
+  const queryDescription = description || node?.properties?.description;
 
   return (
     <div
@@ -40,7 +43,7 @@ export const DyadExecuteSql: React.FC<DyadExecuteSqlProps> = ({
         <div className="flex items-center gap-2">
           <Database size={16} />
           <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-            SQL Query
+            {queryDescription || "SQL Query"}
           </span>
           {inProgress && (
             <div className="flex items-center text-amber-600 text-xs">