[dyad] Added system detection tab - wrote 4 file(s)

src/components/meta-form.tsx

@@ -15,6 +15,7 @@ import { MetaFormInputs } from "./meta-form-inputs";
 import { AnalysisTab } from "./analysis-tab";
 import { SocialTab } from "./social-tab";
 import { LinksDisplay } from "./links-display";
+import { SystemDisplay } from "./system-display";
 import type { MetaData } from "@/lib/types";
 
 export function MetaForm() {
@@ -125,6 +126,10 @@ export function MetaForm() {
       schemaColor = "green";
     }
 
+    // System Tab
+    const systemColor: IndicatorColor =
+      metaData.systems && metaData.systems.length > 0 ? "green" : "gray";
+
     return {
       analysis: analysisColor,
       headlines: headlinesColor,
@@ -133,6 +138,7 @@ export function MetaForm() {
       links: linksColor,
       faq: faqColor,
       schema: schemaColor,
+      system: systemColor,
     };
   }, [metaData, editableTitle, editableDescription]);
 
@@ -218,18 +224,24 @@ export function MetaForm() {
                 Social
               </TabsTrigger>
             )}
-            {metaData.faq && metaData.faq.length > 0 && (
-              <TabsTrigger value="faq">
-                {tabColors && <TabIndicator color={tabColors.faq} />}
-                FAQ
-              </TabsTrigger>
-            )}
             {metaData.schema && metaData.schema.length > 0 && (
               <TabsTrigger value="schema">
                 {tabColors && <TabIndicator color={tabColors.schema} />}
                 Schema
               </TabsTrigger>
             )}
+            {metaData.systems && metaData.systems.length > 0 && (
+              <TabsTrigger value="system">
+                {tabColors && <TabIndicator color={tabColors.system} />}
+                System
+              </TabsTrigger>
+            )}
+            {metaData.faq && metaData.faq.length > 0 && (
+              <TabsTrigger value="faq">
+                {tabColors && <TabIndicator color={tabColors.faq} />}
+                FAQ
+              </TabsTrigger>
+            )}
           </TabsList>
 
           <TabsContent value="analysis">
@@ -313,6 +325,12 @@ export function MetaForm() {
               </Card>
             </TabsContent>
           )}
+
+          {metaData.systems && metaData.systems.length > 0 && (
+            <TabsContent value="system">
+              <SystemDisplay systems={metaData.systems} />
+            </TabsContent>
+          )}
         </Tabs>
       )}
     </div>