From abe0891b0b6e0f5516343bd86ed590bdc8e479b3 Mon Sep 17 00:00:00 2001
From: Mufeed VH <mufeedvh@gmail.com>
Date: Mon, 23 Jun 2025 00:31:13 +0530
Subject: [PATCH] chore: update component exports and fix merge artifacts

- Export new preview components
- Remove unused imports from upstream merge
- Update .gitignore patterns
- Clean up TypeScript errors from merge conflicts
---
 .gitignore                               |  2 ++
 src/App.tsx                              |  2 +-
 src/components/CCAgents.tsx              |  2 +-
 src/components/CollapsibleToolResult.tsx | 10 +++---
 src/components/ToolWidgets.tsx           | 43 +++++++++++++++++++-----
 5 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/.gitignore b/.gitignore
index 66c4917..46aa6e1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 temp_lib/
+
+.cursor/
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 056e984..eefaba1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -217,7 +217,7 @@ function App() {
       
       case "projects":
         return (
-          <div className="flex-1 flex items-center justify-center p-4 overflow-y-auto">
+          <div className="flex h-full items-center justify-center p-4 overflow-y-auto">
             <div className="w-full max-w-2xl">
               {/* Header with back button */}
               <motion.div
diff --git a/src/components/CCAgents.tsx b/src/components/CCAgents.tsx
index 47cf13a..8204bd6 100644
--- a/src/components/CCAgents.tsx
+++ b/src/components/CCAgents.tsx
@@ -298,7 +298,7 @@ export const CCAgents: React.FC<CCAgentsProps> = ({ onBack, className }) => {
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: -20 }}
                 transition={{ duration: 0.2 }}
-                className="space-y-8"
+                className="pt-6 space-y-8"
               >
                 {/* Agents Grid */}
                 <div>
diff --git a/src/components/CollapsibleToolResult.tsx b/src/components/CollapsibleToolResult.tsx
index c904c96..d066345 100644
--- a/src/components/CollapsibleToolResult.tsx
+++ b/src/components/CollapsibleToolResult.tsx
@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { 
-  ChevronDown, 
-  ChevronRight, 
-  Loader2, 
-  CheckCircle2, 
+  ChevronRight,
+  Loader2,
+  CheckCircle2,
   AlertCircle,
   Terminal,
   FileText,
@@ -96,8 +95,7 @@ function getToolDescription(toolCall: ToolCall): string {
 export const CollapsibleToolResult: React.FC<CollapsibleToolResultProps> = ({
   toolCall,
   toolResult,
-  className,
-  children
+  className
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const isPending = !toolResult;
diff --git a/src/components/ToolWidgets.tsx b/src/components/ToolWidgets.tsx
index 3b34c7c..90c4a1a 100644
--- a/src/components/ToolWidgets.tsx
+++ b/src/components/ToolWidgets.tsx
@@ -50,6 +50,7 @@ import { Button } from "@/components/ui/button";
 import { createPortal } from "react-dom";
 import * as Diff from 'diff';
 import { Card, CardContent } from "@/components/ui/card";
+import { detectLinks, makeLinksClickable } from "@/lib/linkDetector";
 
 /**
  * Widget for TodoWrite tool - displays a beautiful TODO list
@@ -1139,33 +1140,57 @@ export const CommandWidget: React.FC<{
  */
 export const CommandOutputWidget: React.FC<{ 
   output: string;
-}> = ({ output }) => {
+  onLinkDetected?: (url: string) => void;
+}> = ({ output, onLinkDetected }) => {
+  // Check for links on mount and when output changes
+  React.useEffect(() => {
+    if (output && onLinkDetected) {
+      const links = detectLinks(output);
+      if (links.length > 0) {
+        // Notify about the first detected link
+        onLinkDetected(links[0].fullUrl);
+      }
+    }
+  }, [output, onLinkDetected]);
+
   // Parse ANSI codes for basic styling
   const parseAnsiToReact = (text: string) => {
     // Simple ANSI parsing - handles bold (\u001b[1m) and reset (\u001b[22m)
     const parts = text.split(/(\u001b\[\d+m)/);
     let isBold = false;
+    const elements: React.ReactNode[] = [];
     
-    return parts.map((part, idx) => {
+    parts.forEach((part, idx) => {
       if (part === '\u001b[1m') {
         isBold = true;
-        return null;
+        return;
       } else if (part === '\u001b[22m') {
         isBold = false;
-        return null;
+        return;
       } else if (part.match(/\u001b\[\d+m/)) {
         // Ignore other ANSI codes for now
-        return null;
+        return;
       }
       
-      if (!part) return null;
+      if (!part) return;
       
-      return (
-        <span key={idx} className={isBold ? 'font-bold' : ''}>
-          {part}
+      // Make links clickable within this part
+      const linkElements = makeLinksClickable(part, (url) => {
+        onLinkDetected?.(url);
+      });
+      
+      if (isBold) {
+        elements.push(
+          <span key={idx} className="font-bold">
+            {linkElements}
         </span>
       );
+      } else {
+        elements.push(...linkElements);
+      }
     });
+    
+    return elements;
   };
 
   return (