From 9c834fa8e06de34972818e957983f78f2bd6484b Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 15 May 2026 18:17:54 +0200
Subject: [PATCH 1/5] feat(card): add third-party warning integration

---
 app/components/Analysis/Card.vue          | 64 ++++++++++++++++++++++-
 app/composables/useIntegrations.ts        |  7 +++
 server/api/integration/unsafe-labs.get.ts | 41 +++++++++++++++
 shared/types/integrations.ts              |  6 +++
 4 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 app/composables/useIntegrations.ts
 create mode 100644 server/api/integration/unsafe-labs.get.ts
 create mode 100644 shared/types/integrations.ts

diff --git a/app/components/Analysis/Card.vue b/app/components/Analysis/Card.vue
index e776199..b6367c6 100644
--- a/app/components/Analysis/Card.vue
+++ b/app/components/Analysis/Card.vue
@@ -25,7 +25,7 @@ const { data, status, error } = useFetch(
 
 const { data: verifiedAutomations } = useVerifiedAutomations();
 
-const verifiedAutomation = computed(() => {
+const verifiedAutomation = computed<VerifiedAutomation | undefined>(() => {
   return verifiedAutomations.value?.find((account) => {
     return (
       account.username.toLowerCase() === username.value?.toLowerCase() ||
@@ -34,6 +34,13 @@ const verifiedAutomation = computed(() => {
   });
 });
 
+const { data: integrations } = useIntegrations();
+const matchedIntegration = computed<IntegrationItem | undefined>(() => {
+  return integrations.value?.find((item) => {
+    return item.username.toLowerCase() === username.value?.toLowerCase();
+  });
+});
+
 const hasCommunityFlag = computed<boolean>(() => !!verifiedAutomation.value);
 
 const flagCreatedAt = computed<string | undefined>(() => {
@@ -120,12 +127,67 @@ const identifyAnalysis = computed<IdentifyReplicantResult | undefined>(() => {
 useSeoAnalysis(identifyAnalysis, {
   hasCommunityFlag,
 });
+
+const isActivityDisclosureOpen = ref(false);
 </script>
 
 <template>
   <AnalysisCardSkeleton v-if="status === 'pending'" />
   <ErrorCardGeneric :error v-else-if="error" />
   <template v-else-if="data">
+    <section v-if="matchedIntegration">
+      <button
+        @click="isActivityDisclosureOpen = !isActivityDisclosureOpen"
+        class="w-full bg-orange-500/10 text-orange-500/70 rounded-lg border-orange-500/40 border px-4 py-2 text-left transition-colors"
+        :class="{
+          'border-b-none rounded-b-none': isActivityDisclosureOpen,
+          'hover:border-orange-500': !isActivityDisclosureOpen,
+        }"
+      >
+        <div class="flex items-center justify-between">
+          <h3 class="flex items-center gap-2 text-sm">
+            <span class="i-carbon:warning"></span>
+            <span>Suspicious Activity Reported</span>
+          </h3>
+          <div class="flex items-center gap-3">
+            <span
+              class="bg-gh-danger/20 text-gh-danger text-xs font-semibold px-2 py-1 rounded"
+            >
+              <!-- TODO: this should be dynamic once I we decide to have multiple integrations -->
+              <!-- I could also make an array and check later -->
+              1
+            </span>
+            <span
+              :class="[
+                'i-carbon:chevron-down text-base transition-transform',
+                isActivityDisclosureOpen && 'rotate-180',
+              ]"
+            />
+          </div>
+        </div>
+      </button>
+
+      <div
+        v-if="isActivityDisclosureOpen"
+        class="bg-orange-500/5 border border-t-orange-500/10 rounded-b-md border-orange-500/40 p-4 space-y-4"
+      >
+        <div class="p-3 space-y-2">
+          <p class="text-white/90 text-sm">UnsafeLabs Bounty Hunters</p>
+          <p class="text-white/70 text-sm">
+            {{ matchedIntegration.reason }}
+          </p>
+          <NuxtLink
+            external
+            :to="matchedIntegration.link"
+            class="inline-block text-white/80 underline text-xs font-semibold hover:text-white"
+            target="_blank"
+          >
+            View Report →
+          </NuxtLink>
+        </div>
+      </div>
+    </section>
+
     <div
       class="flex gap-6 bg-gh-card p-6 rounded-2 border-2 border-solid flex-col @lg:flex-row"
       :class="scoreStyle.border"
diff --git a/app/composables/useIntegrations.ts b/app/composables/useIntegrations.ts
new file mode 100644
index 0000000..979798f
--- /dev/null
+++ b/app/composables/useIntegrations.ts
@@ -0,0 +1,7 @@
+import type { IntegrationItem } from "~~/shared/types/integrations";
+
+export function useIntegrations() {
+  return useLazyAsyncData("integrations", async () => {
+    return $fetch<IntegrationItem[]>("/api/integration/unsafe-labs");
+  });
+}
diff --git a/server/api/integration/unsafe-labs.get.ts b/server/api/integration/unsafe-labs.get.ts
new file mode 100644
index 0000000..2666bfe
--- /dev/null
+++ b/server/api/integration/unsafe-labs.get.ts
@@ -0,0 +1,41 @@
+import { Octokit } from "octokit";
+import dayjs from "dayjs";
+import type { IntegrationItem } from "~~/shared/types/integrations";
+
+export type IntegrationUsafeLab = {
+  username: string;
+  total_prs: number;
+  first_pr: string;
+  last_pr: string;
+};
+
+export default defineEventHandler(async () => {
+  const config = useRuntimeConfig();
+  const octokit = new Octokit({ auth: config.githubToken });
+
+  try {
+    const { data } = await octokit.rest.repos.getContent({
+      owner: "UnsafeLabs",
+      repo: "Bounty-Hunters",
+      path: "clankers.json",
+    });
+
+    if ("content" in data) {
+      const content = Buffer.from(data.content, "base64").toString("utf-8");
+      const integrationData = JSON.parse(content) as IntegrationUsafeLab[];
+      return integrationData.map((d) => ({
+        username: d.username,
+        createdAt: d.first_pr,
+        reason: `This account appears in the UnsafeLabs bounty hunters database. Submitted a total of ${d.total_prs} PR${d.total_prs === 1 ? "" : "s"} to the project. Activity detected from ${dayjs(d.first_pr).format("MMM D, YYYY")} through ${dayjs(d.last_pr).format("MMM D, YYYY")}.`,
+        link: `https://github.com/UnsafeLabs/Bounty-Hunters/pulls?q=is%3Apr+author%3A${d.username}`,
+      })) satisfies IntegrationItem[];
+    }
+
+    return [];
+  } catch {
+    throw createError({
+      statusCode: 500,
+      message: "Failed to fetch verified automations list",
+    });
+  }
+});
diff --git a/shared/types/integrations.ts b/shared/types/integrations.ts
new file mode 100644
index 0000000..1828251
--- /dev/null
+++ b/shared/types/integrations.ts
@@ -0,0 +1,6 @@
+export type IntegrationItem = {
+  username: string;
+  createdAt?: string;
+  reason: string;
+  link: string;
+};

From 5f561f3f4391643fd08731b3374dcbf262e9163e Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 15 May 2026 19:05:06 +0200
Subject: [PATCH 2/5] feat: move block in activity signal section

---
 app/components/Analysis/Card.vue          | 78 +++++------------------
 app/components/ExternalAnlysis/Card.vue   | 63 ++++++++++++++++++
 server/api/integration/unsafe-labs.get.ts |  1 +
 shared/types/integrations.ts              |  1 +
 4 files changed, 80 insertions(+), 63 deletions(-)
 create mode 100644 app/components/ExternalAnlysis/Card.vue

diff --git a/app/components/Analysis/Card.vue b/app/components/Analysis/Card.vue
index b6367c6..6b70720 100644
--- a/app/components/Analysis/Card.vue
+++ b/app/components/Analysis/Card.vue
@@ -35,12 +35,13 @@ const verifiedAutomation = computed<VerifiedAutomation | undefined>(() => {
 });
 
 const { data: integrations } = useIntegrations();
-const matchedIntegration = computed<IntegrationItem | undefined>(() => {
+const activityReport = computed<IntegrationItem | undefined>(() => {
   return integrations.value?.find((item) => {
     return item.username.toLowerCase() === username.value?.toLowerCase();
   });
 });
 
+const hasActivityReport = computed<boolean>(() => !!activityReport.value);
 const hasCommunityFlag = computed<boolean>(() => !!verifiedAutomation.value);
 
 const flagCreatedAt = computed<string | undefined>(() => {
@@ -77,14 +78,14 @@ const scoreStyle = computed<ScoreStyle>(() => {
     };
   }
 
-  if (classification.value === "organic") {
+  if (classification.value === "automation") {
     return {
-      text: "text-green-500",
-      border: "border-green-500",
+      text: "text-orange-500",
+      border: "border-orange-500",
     };
   }
 
-  if (classification.value === "mixed") {
+  if (classification.value === "mixed" || hasActivityReport) {
     return {
       text: "text-amber-500",
       border: "border-amber-500",
@@ -92,8 +93,8 @@ const scoreStyle = computed<ScoreStyle>(() => {
   }
 
   return {
-    text: "text-orange-500",
-    border: "border-orange-500",
+    text: "text-green-500",
+    border: "border-green-500",
   };
 });
 
@@ -127,67 +128,12 @@ const identifyAnalysis = computed<IdentifyReplicantResult | undefined>(() => {
 useSeoAnalysis(identifyAnalysis, {
   hasCommunityFlag,
 });
-
-const isActivityDisclosureOpen = ref(false);
 </script>
 
 <template>
   <AnalysisCardSkeleton v-if="status === 'pending'" />
   <ErrorCardGeneric :error v-else-if="error" />
   <template v-else-if="data">
-    <section v-if="matchedIntegration">
-      <button
-        @click="isActivityDisclosureOpen = !isActivityDisclosureOpen"
-        class="w-full bg-orange-500/10 text-orange-500/70 rounded-lg border-orange-500/40 border px-4 py-2 text-left transition-colors"
-        :class="{
-          'border-b-none rounded-b-none': isActivityDisclosureOpen,
-          'hover:border-orange-500': !isActivityDisclosureOpen,
-        }"
-      >
-        <div class="flex items-center justify-between">
-          <h3 class="flex items-center gap-2 text-sm">
-            <span class="i-carbon:warning"></span>
-            <span>Suspicious Activity Reported</span>
-          </h3>
-          <div class="flex items-center gap-3">
-            <span
-              class="bg-gh-danger/20 text-gh-danger text-xs font-semibold px-2 py-1 rounded"
-            >
-              <!-- TODO: this should be dynamic once I we decide to have multiple integrations -->
-              <!-- I could also make an array and check later -->
-              1
-            </span>
-            <span
-              :class="[
-                'i-carbon:chevron-down text-base transition-transform',
-                isActivityDisclosureOpen && 'rotate-180',
-              ]"
-            />
-          </div>
-        </div>
-      </button>
-
-      <div
-        v-if="isActivityDisclosureOpen"
-        class="bg-orange-500/5 border border-t-orange-500/10 rounded-b-md border-orange-500/40 p-4 space-y-4"
-      >
-        <div class="p-3 space-y-2">
-          <p class="text-white/90 text-sm">UnsafeLabs Bounty Hunters</p>
-          <p class="text-white/70 text-sm">
-            {{ matchedIntegration.reason }}
-          </p>
-          <NuxtLink
-            external
-            :to="matchedIntegration.link"
-            class="inline-block text-white/80 underline text-xs font-semibold hover:text-white"
-            target="_blank"
-          >
-            View Report →
-          </NuxtLink>
-        </div>
-      </div>
-    </section>
-
     <div
       class="flex gap-6 bg-gh-card p-6 rounded-2 border-2 border-solid flex-col @lg:flex-row"
       :class="scoreStyle.border"
@@ -275,7 +221,7 @@ const isActivityDisclosureOpen = ref(false);
     </div>
 
     <div
-      v-if="data.analysis.flags.length > 0"
+      v-if="data.analysis.flags.length > 0 || hasActivityReport"
       class="bg-gh-card p-6 rounded-2 border-1 border-solid border-gh-border"
     >
       <h3 class="mb-4 text-gh-text text-xl font-mono">Activity Signals</h3>
@@ -291,6 +237,12 @@ const isActivityDisclosureOpen = ref(false);
           </p>
         </li>
       </ul>
+
+      <ExternalAnlysisCard
+        v-if="activityReport"
+        :items="[activityReport]"
+        class="mt-4"
+      />
     </div>
 
     <ChartAccountEventsTimeline
diff --git a/app/components/ExternalAnlysis/Card.vue b/app/components/ExternalAnlysis/Card.vue
new file mode 100644
index 0000000..c9387dd
--- /dev/null
+++ b/app/components/ExternalAnlysis/Card.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const props = defineProps<{
+  items: IntegrationItem[];
+}>();
+
+const isDisclosureOpen = ref<boolean>(false);
+const counter = computed<number>(() => {
+  return props.items.length;
+});
+</script>
+
+<template>
+  <section>
+    <button
+      @click="isDisclosureOpen = !isDisclosureOpen"
+      class="w-full bg-amber-500/10 text-amber-500/70 rounded-lg border-amber-500/40 border px-3 py-2 text-left transition-colors"
+      :class="{
+        'border-b-none rounded-b-none': isDisclosureOpen,
+        'hover:border-amber-500': !isDisclosureOpen,
+      }"
+    >
+      <div class="flex items-center justify-between">
+        <h3 class="flex items-center gap-2 text-sm">
+          <span class="i-carbon:warning"></span>
+          <span>Suspicious Activity Reported</span>
+        </h3>
+        <div class="flex items-center gap-3">
+          <span
+            class="bg-amber-500/20 text-amber-500 text-xs font-semibold px-2 py-1 rounded"
+          >
+            {{ counter }}
+          </span>
+          <span
+            :class="[
+              'i-carbon:chevron-down text-base transition-transform',
+              isDisclosureOpen && 'rotate-180',
+            ]"
+          />
+        </div>
+      </div>
+    </button>
+
+    <ul
+      v-if="isDisclosureOpen"
+      class="bg-amber-500/5 border border-t-amber-500/10 rounded-b-md border-amber-500/40 p-4 space-y-4"
+    >
+      <li v-for="(item, index) in items" :key="index" class="p-3 space-y-2">
+        <h4 class="text-white/90 text-sm">{{ item.label }}</h4>
+        <p class="text-white/70 text-sm">
+          {{ item.reason }}
+        </p>
+        <NuxtLink
+          external
+          :to="item.link"
+          class="inline-block text-white/80 underline text-xs font-semibold hover:text-white"
+          target="_blank"
+        >
+          View Report →
+        </NuxtLink>
+      </li>
+    </ul>
+  </section>
+</template>
diff --git a/server/api/integration/unsafe-labs.get.ts b/server/api/integration/unsafe-labs.get.ts
index 2666bfe..537c39a 100644
--- a/server/api/integration/unsafe-labs.get.ts
+++ b/server/api/integration/unsafe-labs.get.ts
@@ -24,6 +24,7 @@ export default defineEventHandler(async () => {
       const content = Buffer.from(data.content, "base64").toString("utf-8");
       const integrationData = JSON.parse(content) as IntegrationUsafeLab[];
       return integrationData.map((d) => ({
+        label: "UnsafeLabs Bounty Hunters",
         username: d.username,
         createdAt: d.first_pr,
         reason: `This account appears in the UnsafeLabs bounty hunters database. Submitted a total of ${d.total_prs} PR${d.total_prs === 1 ? "" : "s"} to the project. Activity detected from ${dayjs(d.first_pr).format("MMM D, YYYY")} through ${dayjs(d.last_pr).format("MMM D, YYYY")}.`,
diff --git a/shared/types/integrations.ts b/shared/types/integrations.ts
index 1828251..7eaece0 100644
--- a/shared/types/integrations.ts
+++ b/shared/types/integrations.ts
@@ -1,4 +1,5 @@
 export type IntegrationItem = {
+  label: string;
   username: string;
   createdAt?: string;
   reason: string;

From 1bb0cb3eebac6b6ca87209e2d8f720d17b7d6f5f Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 15 May 2026 19:22:46 +0200
Subject: [PATCH 3/5] fix: color for light theme

---
 app/components/ExternalAnlysis/Card.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/ExternalAnlysis/Card.vue b/app/components/ExternalAnlysis/Card.vue
index c9387dd..d43c6f3 100644
--- a/app/components/ExternalAnlysis/Card.vue
+++ b/app/components/ExternalAnlysis/Card.vue
@@ -13,7 +13,7 @@ const counter = computed<number>(() => {
   <section>
     <button
       @click="isDisclosureOpen = !isDisclosureOpen"
-      class="w-full bg-amber-500/10 text-amber-500/70 rounded-lg border-amber-500/40 border px-3 py-2 text-left transition-colors"
+      class="w-full bg-amber-500/10 text-amber-500 rounded-lg border-amber-500/40 border px-3 py-2 text-left transition-colors"
       :class="{
         'border-b-none rounded-b-none': isDisclosureOpen,
         'hover:border-amber-500': !isDisclosureOpen,
@@ -42,17 +42,17 @@ const counter = computed<number>(() => {
 
     <ul
       v-if="isDisclosureOpen"
-      class="bg-amber-500/5 border border-t-amber-500/10 rounded-b-md border-amber-500/40 p-4 space-y-4"
+      class="bg-amber-500/5 border border-t-amber-500/30 rounded-b-md border-amber-500/40 p-4 space-y-4"
     >
       <li v-for="(item, index) in items" :key="index" class="p-3 space-y-2">
-        <h4 class="text-white/90 text-sm">{{ item.label }}</h4>
-        <p class="text-white/70 text-sm">
+        <h4 class="text-gh-text/90 text-sm">{{ item.label }}</h4>
+        <p class="text-gh-text/70 text-sm">
           {{ item.reason }}
         </p>
         <NuxtLink
           external
           :to="item.link"
-          class="inline-block text-white/80 underline text-xs font-semibold hover:text-white"
+          class="inline-block text-gh-text/80 underline text-xs font-semibold hover:text-gh-text"
           target="_blank"
         >
           View Report →

From 182845bab2127388df02e772b43bddc639eaa73f Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 15 May 2026 19:31:01 +0200
Subject: [PATCH 4/5] fix: key and aria

---
 app/components/ExternalAnlysis/Card.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/components/ExternalAnlysis/Card.vue b/app/components/ExternalAnlysis/Card.vue
index d43c6f3..9e36ce6 100644
--- a/app/components/ExternalAnlysis/Card.vue
+++ b/app/components/ExternalAnlysis/Card.vue
@@ -13,6 +13,8 @@ const counter = computed<number>(() => {
   <section>
     <button
       @click="isDisclosureOpen = !isDisclosureOpen"
+      :aria-expanded="isDisclosureOpen"
+      aria-controls="disclosure-external-analysis"
       class="w-full bg-amber-500/10 text-amber-500 rounded-lg border-amber-500/40 border px-3 py-2 text-left transition-colors"
       :class="{
         'border-b-none rounded-b-none': isDisclosureOpen,
@@ -42,9 +44,14 @@ const counter = computed<number>(() => {
 
     <ul
       v-if="isDisclosureOpen"
+      id="disclosure-external-analysis"
       class="bg-amber-500/5 border border-t-amber-500/30 rounded-b-md border-amber-500/40 p-4 space-y-4"
     >
-      <li v-for="(item, index) in items" :key="index" class="p-3 space-y-2">
+      <li
+        v-for="item in items"
+        :key="`${item.username}-${item.link}`"
+        class="p-3 space-y-2"
+      >
         <h4 class="text-gh-text/90 text-sm">{{ item.label }}</h4>
         <p class="text-gh-text/70 text-sm">
           {{ item.reason }}

From 475ef4ef38528012dfb4ebd5d7a098268100ede6 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 15 May 2026 19:37:45 +0200
Subject: [PATCH 5/5] chore: change message

---
 server/api/integration/unsafe-labs.get.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/server/api/integration/unsafe-labs.get.ts b/server/api/integration/unsafe-labs.get.ts
index 537c39a..17a955a 100644
--- a/server/api/integration/unsafe-labs.get.ts
+++ b/server/api/integration/unsafe-labs.get.ts
@@ -33,10 +33,11 @@ export default defineEventHandler(async () => {
     }
 
     return [];
-  } catch {
+  } catch (error) {
     throw createError({
       statusCode: 500,
-      message: "Failed to fetch verified automations list",
+      message: "Failed to fetch integration list",
+      cause: error,
     });
   }
 });