+ {/* Top Controller Row: Stream Status & Global Action Bar */}
+
+ {/* Stream Status indicator */}
+
+
+
+
+ SHOWING {filteredCount} OF{' '}
+ {totalCount} EVENTS
+
+
+
+ {/* Action Controls */}
+
+
+
+
+
+ {/* Sort order toggle */}
+
+
+
+
+ {/* Category Pills Row */}
+
+ {CATEGORIES.map((cat) => {
+ const isActive = filters.category === cat.value;
+ return (
+
+ );
+ })}
+
+
+ {/* Search Input & Secondary Filters Grid */}
+
+ {/* Real-time Search Input */}
+
+
+ onFilterChange('searchQuery', e.target.value)}
+ placeholder="SEARCH TITLE, NORAD ID, SATELLITE..."
+ className="w-full bg-surface-container-low border border-border-panel/80 rounded px-3 py-2 pl-9 text-xs font-technical-data text-on-surface placeholder:text-primary/30 focus:outline-none focus:border-primary-container transition-ui"
+ />
+ {filters.searchQuery && (
+
+ )}
+
+
+ {/* Severity Selector Dropdown */}
+
+
+
+
+ {/* Time Range Selector Dropdown */}
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/components/timeline/HighPriorityIncidentBanner.tsx b/frontend/src/components/timeline/HighPriorityIncidentBanner.tsx
new file mode 100644
index 0000000..d69ec3d
--- /dev/null
+++ b/frontend/src/components/timeline/HighPriorityIncidentBanner.tsx
@@ -0,0 +1,154 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+import { MaterialIcon } from '@/components/MaterialIcon';
+import type { TimelineEvent } from '@/types/events';
+
+interface HighPriorityIncidentBannerProps {
+ incidents: TimelineEvent[];
+ onAcknowledge: (id: string) => void;
+}
+
+export const HighPriorityIncidentBanner: React.FC