[dyad] Refactored results into separate panels - wrote 3 file(s)

src/components/headlines-display.tsx

@@ -20,8 +20,6 @@ interface HeadlinesDisplayProps {
 
 export function HeadlinesDisplay({ headlines }: HeadlinesDisplayProps) {
   return (
-    <div>
-      <h3 className="font-semibold text-card-foreground mb-2">Headlines</h3>
     <div className="border rounded-lg max-h-80 overflow-y-auto relative">
       <Table>
         <TableHeader className="sticky top-0 bg-muted/95 backdrop-blur-sm">
@@ -46,6 +44,5 @@ export function HeadlinesDisplay({ headlines }: HeadlinesDisplayProps) {
         </TableBody>
       </Table>
     </div>
-    </div>
   );
 }

src/components/meta-form.tsx

@@ -121,10 +121,11 @@ export function MetaForm() {
       )}
 
       {!loading && metaData && (
+        <div className="space-y-6">
           <Card className="w-full shadow-lg rounded-lg">
             <CardHeader>
               <CardTitle className="text-xl text-card-foreground">
-              Extraction Results
+                Meta Analysis
               </CardTitle>
             </CardHeader>
             <CardContent>
@@ -273,13 +274,24 @@ export function MetaForm() {
                       </p>
                     )}
                   </div>
-                {metaData.headlines && metaData.headlines.length > 0 && (
-                  <HeadlinesDisplay headlines={metaData.headlines} />
-                )}
                 </div>
               </div>
             </CardContent>
           </Card>
+
+          {metaData.headlines && metaData.headlines.length > 0 && (
+            <Card className="w-full shadow-lg rounded-lg">
+              <CardHeader>
+                <CardTitle className="text-xl text-card-foreground">
+                  Headlines
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <HeadlinesDisplay headlines={metaData.headlines} />
+              </CardContent>
+            </Card>
+          )}
+        </div>
       )}
     </div>
   );

src/components/results-skeleton.tsx

@@ -5,6 +5,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export function ResultsSkeleton() {
   return (
+    <div className="space-y-6">
       <Card className="w-full shadow-lg rounded-lg">
         <CardHeader>
           <Skeleton className="h-6 w-48" />
@@ -36,7 +37,6 @@ export function ResultsSkeleton() {
                 <div className="space-y-2">
                   <Skeleton className="h-10 w-full" />
                   <Skeleton className="h-10 w-full" />
-                <Skeleton className="h-10 w-full" />
                 </div>
               </div>
             </div>
@@ -44,10 +44,6 @@ export function ResultsSkeleton() {
               <div>
                 <div className="flex items-center justify-between mb-2">
                   <Skeleton className="h-5 w-24" />
-                <div className="flex items-center gap-2">
-                  <Skeleton className="h-8 w-8" />
-                  <Skeleton className="h-8 w-8" />
-                </div>
                 </div>
                 <Skeleton className="h-4 w-full mb-2" />
                 <Skeleton className="h-10 w-full" />
@@ -55,26 +51,27 @@ export function ResultsSkeleton() {
               <div>
                 <div className="flex items-center justify-between mb-2">
                   <Skeleton className="h-5 w-36" />
-                <div className="flex items-center gap-2">
-                  <Skeleton className="h-8 w-8" />
-                  <Skeleton className="h-8 w-8" />
-                </div>
                 </div>
                 <Skeleton className="h-4 w-full mb-2" />
                 <Skeleton className="h-24 w-full" />
               </div>
-            <div>
+            </div>
-              <Skeleton className="h-5 w-24 mb-2" />
+          </div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-32" />
+        </CardHeader>
+        <CardContent>
           <div className="border rounded-lg p-2 space-y-2">
             <Skeleton className="h-8 w-full" />
             <Skeleton className="h-8 w-full" />
             <Skeleton className="h-8 w-full" />
             <Skeleton className="h-8 w-full" />
           </div>
-            </div>
-          </div>
-        </div>
         </CardContent>
       </Card>
+    </div>
   );
 }