feat(ui): shared LocationBadge component + fix SSE logs hanging

LocationBadge (src/components/ui/location-badge.tsx):
  Shared component for rendering location codes with country flags.
  Resolves NUTS codes via getLocationLabel, shows flag SVGs.
  Used by: AutomationList, AutomationDetail, AutomationWizard review.

SSE Logs fix (api/automations/[id]/logs/route.ts):
  Stream now closes immediately when no active run exists instead of
  polling for 10 minutes. Prevents Firefox "Blocked" connection state.

Replaced inline location rendering in 3 files with <LocationBadge />.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rorar

src/app/api/automations/[id]/logs/route.ts

@@ -67,15 +67,24 @@ export async function GET(
           completedAt: store.completedAt,
         });
         controller.enqueue(encoder.encode(`data: ${initialData}\n\n`));
+
+        // If run already completed, close the stream immediately
+        if (!store.isRunning && store.completedAt) {
+          cleanup();
+          return;
+        }
       } else {
         controller.enqueue(
           encoder.encode(
             `data: ${JSON.stringify({ logs: [], isRunning: false })}\n\n`,
           ),
         );
+        // No active run and no stored logs — close immediately to prevent hanging
+        cleanup();
+        return;
       }
 
-      // Poll for new logs every second
+      // Poll for new logs every second (only reached when a run is active)
       const interval = setInterval(() => {
         if (isClosed) return;
         const currentStore = automationLogger.getStore(automationId);
@@ -92,6 +101,9 @@ export async function GET(
           if (!currentStore.isRunning && currentStore.completedAt) {
             cleanup();
           }
+        } else {
+          // Store was cleared while streaming — close gracefully
+          cleanup();
         }
       }, 1000);
 

src/app/dashboard/automations/[id]/page.tsx

@@ -44,6 +44,7 @@ import { RunHistoryList } from "@/components/automations/RunHistoryList";
 import { LogsTab } from "@/components/automations/LogsTab";
 import Loading from "@/components/Loading";
 import { parseKeywords, parseLocations } from "@/utils/automation.utils";
+import { LocationBadge } from "@/components/ui/location-badge";
 
 export default function AutomationDetailPage() {
   const params = useParams();
@@ -222,12 +223,13 @@ export default function AutomationDetailPage() {
             </div>
             <div className="flex items-center gap-1.5 flex-wrap">
               <span className="font-medium text-foreground">Location:</span>
-              {parseLocations(automation.location)
-                .map((loc: string) => (
-                  <Badge key={loc} variant="secondary" className="text-xs">
-                    {loc}
-                  </Badge>
-                ))}
+              {parseLocations(automation.location).map((code) => (
+                <LocationBadge
+                  key={code}
+                  code={code}
+                  resolve={automation.jobBoard === "eures" || automation.jobBoard === "arbeitsagentur"}
+                />
+              ))}
             </div>
           </div>
         </div>

src/components/automations/AutomationList.tsx

@@ -49,7 +49,7 @@ import {
   resumeAutomation,
 } from "@/actions/automation.actions";
 import Link from "next/link";
-import { getLocationLabel } from "@/lib/connector/job-discovery/modules/eures/countries";
+import { LocationBadge } from "@/components/ui/location-badge";
 import { parseKeywords, parseLocations } from "@/utils/automation.utils";
 
 interface AutomationListProps {
@@ -66,15 +66,10 @@ const PAUSE_REASON_KEYS: Record<AutomationPauseReason, string> = {
   cb_escalation: "automations.pauseReasonCbEscalation",
 };
 
-/** Resolve a stored location string to readable labels */
-function resolveLocations(location: string, jobBoard: string): string[] {
+/** Parse location string into raw codes for LocationBadge rendering */
+function getLocationCodes(location: string): string[] {
   if (!location) return [];
-  const codes = parseLocations(location);
-  // Only resolve EURES / arbeitsagentur codes; for other boards, return as-is
-  if (jobBoard === "eures" || jobBoard === "arbeitsagentur") {
-    return codes.map((code) => getLocationLabel(code));
-  }
-  return codes;
+  return parseLocations(location);
 }
 
 export function AutomationList({
@@ -162,7 +157,8 @@ export function AutomationList({
           const isLoading = loadingAction === automation.id;
           const resumeMissing = !automation.resume;
           const keywordChips = parseKeywords(automation.keywords);
-          const locationLabels = resolveLocations(automation.location, automation.jobBoard);
+          const locationCodes = getLocationCodes(automation.location);
+          const isEures = automation.jobBoard === "eures" || automation.jobBoard === "arbeitsagentur";
 
           return (
             <Link
@@ -222,10 +218,8 @@ export function AutomationList({
                     </div>
                     <div className="flex items-center gap-1.5 flex-wrap">
                       <span className="font-medium text-foreground">{t("automations.locationLabel")}:</span>
-                      {locationLabels.map((label, idx) => (
-                        <Badge key={idx} variant="secondary" className="text-xs">
-                          {label}
-                        </Badge>
+                      {locationCodes.map((code, idx) => (
+                        <LocationBadge key={idx} code={code} resolve={isEures} />
                       ))}
                     </div>
                     {automation.resume && (

src/components/automations/AutomationWizard.tsx

@@ -47,7 +47,7 @@ import { ConnectorType } from "@/lib/connector/manifest";
 import { toast } from "@/components/ui/use-toast";
 import { useTranslations } from "@/i18n";
 import type { AutomationWithResume } from "@/models/automation.model";
-import { AlertTriangle, Check, CheckCircle2, ChevronLeft, ChevronRight, ChevronsUpDown, HelpCircle, Loader2, Play } from "lucide-react";
+import { AlertTriangle, Check, CheckCircle2, ChevronLeft, ChevronRight, ChevronsUpDown, Loader2, Play } from "lucide-react";
 import {
   Popover,
   PopoverContent,
@@ -64,9 +64,8 @@ import {
 import { cn } from "@/lib/utils";
 import { EuresOccupationCombobox } from "@/components/automations/EuresOccupationCombobox";
 import { EuresLocationCombobox } from "@/components/automations/EuresLocationCombobox";
-import { getLocationLabel, getCountryCode } from "@/lib/connector/job-discovery/modules/eures/countries";
 import { Badge } from "@/components/ui/badge";
-import Image from "next/image";
+import { LocationBadge } from "@/components/ui/location-badge";
 import { parseKeywords, parseLocations } from "@/utils/automation.utils";
 
 interface Resume {
@@ -754,25 +753,9 @@ export function AutomationWizard({
               <span className="text-muted-foreground">{t("automations.reviewLocation")}</span>
               {jobBoard === "eures" && form.getValues("location") ? (
                 <div className="flex flex-wrap gap-1 justify-end max-w-[60%]">
-                  {parseLocations(form.getValues("location")).map((trimmed) => {
-                    const isNS = trimmed.toLowerCase() === "ns" || trimmed.toLowerCase().endsWith("-ns");
-                    return (
-                      <Badge key={trimmed} variant="secondary" className="gap-1">
-                        {isNS ? (
-                          <HelpCircle className="h-3.5 w-3.5 text-muted-foreground" />
-                        ) : (
-                          <Image
-                            src={`/flags/${getCountryCode(trimmed)}.svg`}
-                            alt={trimmed}
-                            className="h-3.5 w-3.5"
-                            width={14}
-                            height={14}
-                          />
-                        )}
-                        {getLocationLabel(trimmed)}
-                      </Badge>
-                    );
-                  })}
+                  {parseLocations(form.getValues("location")).map((code) => (
+                    <LocationBadge key={code} code={code} />
+                  ))}
                 </div>
               ) : (
                 <span className="font-medium">{form.getValues("location") || "-"}</span>

src/components/ui/location-badge.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import Image from "next/image";
+import { Badge } from "@/components/ui/badge";
+import { getLocationLabel, getCountryCode } from "@/lib/connector/job-discovery/modules/eures/countries";
+
+interface LocationBadgeProps {
+  code: string;
+  /** If true, resolve NUTS code to label via getLocationLabel. Default: true */
+  resolve?: boolean;
+  className?: string;
+}
+
+/**
+ * Renders a location code as a Badge with country flag.
+ * Resolves NUTS codes (de1 -> "DE1: Baden-Württemberg") and shows flag SVGs.
+ */
+export function LocationBadge({ code, resolve = true, className }: LocationBadgeProps) {
+  const label = resolve ? getLocationLabel(code) : code;
+  const countryCode = getCountryCode(code);
+
+  return (
+    <Badge variant="secondary" className={`text-xs gap-1 ${className ?? ""}`}>
+      {countryCode && (
+        <Image
+          src={`/flags/${countryCode.toLowerCase()}.svg`}
+          alt={countryCode}
+          width={14}
+          height={14}
+          className="h-3.5 w-3.5"
+        />
+      )}
+      {label}
+    </Badge>
+  );
+}