feat(32-02): add Build Workflow button to ChatPanel

Add "Build Workflow" button that appears after conversation starts. Button
extracts user messages to form a description and passes to parent via callback.
Includes loading state support via isBuildingWorkflow prop.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/ChatPanel.tsx

@@ -7,9 +7,11 @@ import { DefaultChatTransport } from "ai";
 interface ChatPanelProps {
   isOpen: boolean;
   onClose: () => void;
+  onBuildWorkflow?: (description: string) => Promise<void>;
+  isBuildingWorkflow?: boolean;
 }
 
-export function ChatPanel({ isOpen, onClose }: ChatPanelProps) {
+export function ChatPanel({ isOpen, onClose, onBuildWorkflow, isBuildingWorkflow = false }: ChatPanelProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState("");
 
@@ -19,6 +21,34 @@ export function ChatPanel({ isOpen, onClose }: ChatPanelProps) {
 
   const isLoading = status === "streaming" || status === "submitted";
 
+  // Extract conversation description from user messages
+  const getConversationDescription = () => {
+    const userMessages = messages
+      .filter((m) => m.role === "user")
+      .map((m) => {
+        const textContent = m.parts
+          ?.filter((part): part is { type: "text"; text: string } => part.type === "text")
+          .map((part) => part.text)
+          .join("") || "";
+        return textContent;
+      })
+      .filter((text) => text.trim().length > 0);
+
+    return userMessages.join("\n");
+  };
+
+  const handleBuildWorkflow = async () => {
+    if (!onBuildWorkflow) return;
+
+    const description = getConversationDescription();
+    if (!description.trim()) return;
+
+    await onBuildWorkflow(description);
+  };
+
+  // Check if conversation has started (has assistant messages)
+  const hasConversation = messages.some((m) => m.role === "assistant");
+
   // Auto-scroll to bottom on new messages
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -97,6 +127,7 @@ export function ChatPanel({ isOpen, onClose }: ChatPanelProps) {
       </div>
 
       {/* Input area */}
+      <div className="border-t border-neutral-700">
         <form
           onSubmit={(e) => {
             e.preventDefault();
@@ -105,7 +136,7 @@ export function ChatPanel({ isOpen, onClose }: ChatPanelProps) {
               setInput("");
             }
           }}
-        className="p-3 border-t border-neutral-700"
+          className="p-3"
         >
           <div className="flex gap-2">
             <input
@@ -127,6 +158,27 @@ export function ChatPanel({ isOpen, onClose }: ChatPanelProps) {
             </button>
           </div>
         </form>
+
+        {/* Build Workflow button */}
+        {hasConversation && onBuildWorkflow && (
+          <div className="px-3 pb-3">
+            <button
+              onClick={handleBuildWorkflow}
+              disabled={isBuildingWorkflow || isLoading}
+              className="w-full bg-green-600 hover:bg-green-500 text-white rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
+            >
+              {isBuildingWorkflow ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                  <span>Building...</span>
+                </>
+              ) : (
+                <span>Build Workflow</span>
+              )}
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 }