fix(onboarding): highlight detected apps

apps/docs/docs/getting-started/after-the-installation.mdx

@@ -47,7 +47,7 @@ The studio keeps related choices together:
 
 1. **Essentials** sets the default language, color scheme, analytics preference, and the usual host, IP address, domain, or reverse-proxy path used by your services. URL suggestions can use separate ports, subdomains, or one path per service.
 2. **Discover** checks the actual database, Docker-compatible sockets, Kubernetes configuration, Workshop, and Assistant capabilities. Unavailable sources never block manual setup.
-3. **Connect** combines explicit [`homarr.*` or Homepage Docker labels](/docs/integrations/docker-labels) with image matching. Select several integrations and apps at once, review every URL, and use the service-specific link to open its API-key settings when one is available. If a container has no published port or URL label, add its HTTP or HTTPS address before importing it.
+3. **Connect** shows detected integrations and apps first, identifying whether each app came from an explicit [`homarr.*` or Homepage Docker label](/docs/integrations/docker-labels) or image matching. Select several integrations and apps at once, review every URL, and use the service-specific link to open its API-key settings when one is available. If a container has no published port or URL label, add its HTTP or HTTPS address before importing it.
 4. **Board** previews the Base layout, colors, widget radius, sidebars, selected apps, and widgets inferred from integrations or Docker labels. Choose 8 columns for a focused board, 10 for a balanced board, 12 for a wide board, or use the slider for a custom width up to 24 columns. Homarr still creates and reflows the protected Mobile layout automatically. A fast setup adds the integration-free Clock, Weather, and Bookmarks starter widgets.
 5. **Extend** explains and optionally configures Homarr Assistant, the community Workshop, and the separate Homarr MCP endpoint.
 6. **Review** tests the selected connections, then saves integrations, apps, widgets, settings, and the exact first board together. If any part fails, the database changes are rolled back and your form stays available to correct.

packages/onboarding/src/setup-studio.tsx

@@ -1159,15 +1159,6 @@ const Connections = (props: StudioSectionProps) => {
         </Fieldset>
       ) : null}
 
-      <Fieldset legend={t("otherIntegrations")}>
-        <IntegrationMultiSelectGrid
-          selectedKinds={props.selectedKinds}
-          onSelectionChange={props.setSelectedKinds}
-          detectedKinds={props.detectedKinds}
-          onboarding
-        />
-      </Fieldset>
-
       {props.discoveredApps.length > 0 ? (
         <Fieldset legend={t("discoveredApps", { count: String(props.discoveredApps.length) })}>
           <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
@@ -1196,9 +1187,14 @@ const Connections = (props: StudioSectionProps) => {
                         {app.containerName.at(0)}
                       </Avatar>
                       <Stack gap={0} miw={0}>
-                        <Text size="sm" fw={600} truncate>
-                          {app.containerName}
-                        </Text>
+                        <Group gap="xs" wrap="nowrap">
+                          <Text size="sm" fw={600} truncate>
+                            {app.containerName}
+                          </Text>
+                          <Badge size="xs" variant="light" color={app.source === "label" ? "blue" : "gray"}>
+                            {app.source === "label" ? t("dockerLabelSource") : t("dockerImageSource")}
+                          </Badge>
+                        </Group>
                         <Text size="xs" c="dimmed" truncate>
                           {props.discoveredAppUrls[app.sourceId] || t("addressNeeded")}
                         </Text>
@@ -1221,6 +1217,16 @@ const Connections = (props: StudioSectionProps) => {
           </SimpleGrid>
         </Fieldset>
       ) : null}
+
+      <Fieldset legend={t("otherIntegrations")}>
+        <IntegrationMultiSelectGrid
+          selectedKinds={props.selectedKinds}
+          onSelectionChange={props.setSelectedKinds}
+          detectedKinds={props.detectedKinds}
+          onboarding
+        />
+      </Fieldset>
+
       {props.appError ? (
         <Alert color="red" role="alert">
           {props.appError}

packages/translation/src/lang/en.json

@@ -112,7 +112,9 @@
         "detectedIntegrationLabel": "Import {name}, detected as {kind}",
         "detectedAppLabel": "Import detected app {name}",
         "otherIntegrations": "Add another integration",
-        "discoveredApps": "Additional detected apps ({count})",
+        "discoveredApps": "Detected apps ({count})",
+        "dockerLabelSource": "Docker label",
+        "dockerImageSource": "Docker image",
         "addressNeeded": "Address needed",
         "appUrl": "Address for {name}",
         "appAddressRequired": "Add an HTTP or HTTPS address for {name}, or remove it from the selection.",