Add configurable scheduling, UI health/task indicators, and auto-load map with default filters

crawler/frontend/src/components/Header.tsx

@@ -0,0 +1,80 @@
+import type { User } from 'oidc-client-ts';
+import { Button } from './ui/button';
+import { Separator } from './ui/separator';
+import { LogOut, Home, Filter } from 'lucide-react';
+import { logout } from '@/auth/authService';
+import { HealthIndicator } from './HealthIndicator';
+import { TaskIndicator } from './TaskIndicator';
+
+interface HeaderProps {
+    user: User;
+    activeFilterCount?: number;
+    taskID?: string | null;
+    isLoading?: boolean;
+    onToggleFilters?: () => void;
+    showFilterToggle?: boolean;
+    onTaskCancelled?: () => void;
+}
+
+export function Header({
+    user,
+    activeFilterCount = 0,
+    taskID,
+    onToggleFilters,
+    showFilterToggle = false,
+    onTaskCancelled,
+}: HeaderProps) {
+    return (
+        <header className="flex h-14 shrink-0 items-center gap-3 border-b bg-background px-4">
+            {/* Logo / Brand */}
+            <div className="flex items-center gap-2">
+                <Home className="h-5 w-5 text-primary" />
+                <span className="font-semibold text-lg hidden sm:inline">Wrongmove</span>
+            </div>
+
+            <Separator orientation="vertical" className="h-6" />
+
+            {/* Health Indicator */}
+            <HealthIndicator />
+
+            {/* Task Indicator */}
+            <TaskIndicator taskID={taskID ?? null} onTaskCancelled={onTaskCancelled} />
+
+            {/* Filter Toggle (mobile) */}
+            {showFilterToggle && (
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="sm:hidden"
+                    onClick={onToggleFilters}
+                >
+                    <Filter className="h-4 w-4" />
+                    {activeFilterCount > 0 && (
+                        <span className="ml-1 bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full">
+                            {activeFilterCount}
+                        </span>
+                    )}
+                </Button>
+            )}
+
+            {/* Spacer */}
+            <div className="flex-1" />
+
+            {/* User Menu */}
+            <div className="flex items-center gap-3">
+                <span className="text-sm text-muted-foreground hidden md:inline">
+                    {user.profile.email}
+                </span>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={logout}
+                    className="gap-2"
+                >
+                    <LogOut className="h-4 w-4" />
+                    <span className="hidden sm:inline">Logout</span>
+                </Button>
+            </div>
+        </header>
+    );
+}