flights v2: implement redesign

Migrate src/features/flights to the v2 tactical-ops design — the last
page still on the legacy az-* palette — keeping all existing planner
behavior (Leaflet map, draw modes, import/export, altitude dialog).

- Restyle every flights surface to v2 tokens and shared classes:
  flight roster sidebar (search, rows, telemetry card), params panel,
  waypoint list, altitude/JSON dialogs, map-point popup, altitude
  chart, wind inputs, mini-map.
- Rebuild the params panel to the mockup order (draw-mode selector,
  Mission Config, Waypoints) with existing controls appended.
- Add HUD overlays on the real Leaflet map (telemetry, legend, compass,
  zoom/recenter toolbar, bottom status strip); disable the default zoom
  control, add a dark tactical-grid backdrop, and use the legend glyphs
  (diamond/square/octagon) plus a pulsing amber current-position beacon.
- Add a functional GPS-Denied panel: orthophoto upload (local),
  live-GPS readout fed by the existing SSE stream, and a GPS-correction
  form that patches waypoint coordinates.
- Extract a shared drawModes config used by the panel and collapse rail.
- Add flights.v2 i18n keys to en.json and ua.json (parity preserved).

src/features/dataset/DatasetClassList.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { api, endpoints } from '../../api'
+import { getClassColor, FALLBACK_CLASS_NAMES } from '../../class-colors'
+import type { DetectionClass } from '../../types'
+
+const FALLBACK_CLASSES: DetectionClass[] = FALLBACK_CLASS_NAMES.map((name, i) => ({
+  id: i + 1,
+  name,
+  shortName: name.slice(0, 3),
+  color: getClassColor(i),
+  maxSizeM: 10,
+  photoMode: 0,
+}))
+
+interface DatasetClassListProps {
+  selectedClassNum: number
+  onSelect: (classNum: number) => void
+  counts: Record<number, number>
+}
+
+export default function DatasetClassList({ selectedClassNum, onSelect, counts }: DatasetClassListProps) {
+  const { t } = useTranslation()
+  const [classes, setClasses] = useState<DetectionClass[]>([])
+
+  useEffect(() => {
+    api.get<DetectionClass[]>(endpoints.annotations.classes())
+      .then(list => setClasses(list?.length ? list : FALLBACK_CLASSES))
+      .catch(() => setClasses(FALLBACK_CLASSES))
+  }, [])
+
+  const regularClasses = useMemo(() => classes.filter(c => c.photoMode === 0), [classes])
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const t = e.target as HTMLElement | null
+      if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return
+      const num = parseInt(e.key)
+      if (num >= 1 && num <= 9) {
+        const cls = regularClasses[num - 1]
+        if (cls) onSelect(cls.id)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [regularClasses, onSelect])
+
+  return (
+    <>
+      <div className="px-3 pt-3 pb-2 flex items-center justify-between border-b border-border-hair shrink-0">
+        <span className="sect-head" style={{ lineHeight: 1.2 }}>{t('annotations.classes')}</span>
+        <span className="mono text-[10px] text-text-muted tabular-nums">
+          {regularClasses.length.toString().padStart(2, '0')}
+        </span>
+      </div>
+      <div
+        className="px-2 py-2 flex flex-col gap-0.5 overflow-y-auto"
+        style={{ maxHeight: '46vh' }}
+      >
+        {regularClasses.map(c => {
+          const isActive = c.id === selectedClassNum
+          const count = counts[c.id] ?? 0
+          return (
+            <div
+              key={c.id}
+              role="button"
+              tabIndex={0}
+              onClick={() => onSelect(c.id)}
+              onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') onSelect(c.id) }}
+              className={`flex items-center gap-2.5 h-7 px-2 rounded-[2px] cursor-pointer transition-colors ${
+                isActive
+                  ? 'bg-surface-2 text-text-primary'
+                  : 'text-text-secondary hover:bg-surface-2 hover:text-text-primary'
+              }`}
+            >
+              <span className="swatch shrink-0" style={{ background: c.color }} />
+              <span className="text-[12px] truncate flex-1">{c.name}</span>
+              <span
+                className={`font-mono font-medium text-[10px] tabular-nums leading-none rounded-[2px] border bg-surface-input ${
+                  isActive
+                    ? 'text-accent-amber border-accent-amber'
+                    : 'text-text-secondary border-border-hair'
+                }`}
+                style={{ padding: '2px 6px' }}
+              >
+                {count.toLocaleString()}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}

src/features/dataset/DatasetFilterBar.tsx

@@ -0,0 +1,187 @@
+import { useTranslation } from 'react-i18next'
+import { AnnotationStatus } from '../../types'
+
+interface DatasetFilterBarProps {
+  fromDate: string
+  toDate: string
+  onFromDateChange: (v: string) => void
+  onToDateChange: (v: string) => void
+  statusFilter: AnnotationStatus | null
+  onStatusFilterChange: (s: AnnotationStatus | null) => void
+  flightName: string | null
+  shownCount: number
+  totalCount: number
+}
+
+export default function DatasetFilterBar({
+  fromDate,
+  toDate,
+  onFromDateChange,
+  onToDateChange,
+  statusFilter,
+  onStatusFilterChange,
+  flightName,
+  shownCount,
+  totalCount,
+}: DatasetFilterBarProps) {
+  const { t } = useTranslation()
+
+  const STATUS_OPTIONS = [
+    {
+      value: null,
+      label: t('dataset.status.all'),
+      tone: 'muted' as const,
+      dot: 'var(--text-muted)',
+    },
+    {
+      value: AnnotationStatus.Created,
+      label: t('dataset.status.created'),
+      tone: 'amber' as const,
+      dot: 'var(--accent-amber)',
+    },
+    {
+      value: AnnotationStatus.Edited,
+      label: t('dataset.status.edited'),
+      tone: 'blue' as const,
+      dot: 'var(--accent-blue)',
+    },
+    {
+      value: AnnotationStatus.Validated,
+      label: t('dataset.status.validated'),
+      tone: 'green' as const,
+      dot: 'var(--accent-green)',
+    },
+  ]
+
+  return (
+    <div
+      className="bracket panel relative flex items-center gap-3 px-3 shrink-0"
+      style={{ height: 48 }}
+    >
+      <span className="br" />
+
+      {/* Range group */}
+      <div className="flex items-center gap-2">
+        <span className="micro">{t('dataset.range')}</span>
+        <input
+          type="date"
+          className="inp inp-mono cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:inset-0 [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+          style={{ width: 104, height: 28, padding: '0 10px' }}
+          value={fromDate}
+          onChange={e => onFromDateChange(e.target.value)}
+          onClick={e => e.currentTarget.showPicker?.()}
+        />
+        <span className="mono text-text-muted">—</span>
+        <input
+          type="date"
+          className="inp inp-mono cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:inset-0 [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+          style={{ width: 104, height: 28, padding: '0 10px' }}
+          value={toDate}
+          onChange={e => onToDateChange(e.target.value)}
+          onClick={e => e.currentTarget.showPicker?.()}
+        />
+      </div>
+
+      {/* divider */}
+      <span className="w-px h-5 bg-border-hair shrink-0" />
+
+      {/* Flight group — display-only chip */}
+      <div className="flex items-center gap-2">
+        <span className="micro">{t('dataset.flight')}</span>
+        <div
+          className="inp inline-flex items-center gap-2"
+          style={{ padding: '0 10px', height: 28, cursor: 'default' }}
+        >
+          <span className="w-1.5 h-1.5 rounded-full bg-accent-amber" />
+          <span className="mono text-[12px] text-text-primary tracking-wider">
+            {flightName ?? '—'}
+          </span>
+          <span className="text-[10px] text-text-muted ml-1">▾</span>
+        </div>
+      </div>
+
+      {/* divider */}
+      <span className="w-px h-5 bg-border-hair shrink-0" />
+
+      {/* Status chips */}
+      <div className="flex items-center gap-1.5">
+        <span className="micro mr-1">{t('dataset.statusLabel')}</span>
+        {STATUS_OPTIONS.map(opt => {
+          const isActive = statusFilter === opt.value
+          const stateCls = !isActive
+            ? 'text-text-secondary border-border-hair hover:text-text-primary hover:border-border-raised'
+            : opt.tone === 'muted'
+              ? 'text-text-primary border-border-raised bg-text-muted/20'
+              : opt.tone === 'amber'
+                ? 'text-accent-amber border-accent-amber bg-accent-amber/10'
+                : opt.tone === 'blue'
+                  ? 'text-accent-blue border-accent-blue bg-accent-blue/10'
+                  : /* green */ 'text-accent-green border-accent-green bg-accent-green/10'
+          return (
+            <button
+              key={String(opt.value)}
+              type="button"
+              onClick={() => onStatusFilterChange(opt.value)}
+              className={`inline-flex items-center gap-1.5 h-6 px-2.5 rounded-[2px] border font-mono text-[10px] font-semibold uppercase tracking-widest cursor-pointer transition-colors ${stateCls}`}
+            >
+              <span
+                className="rounded-full shrink-0"
+                style={{ width: 6, height: 6, background: opt.dot }}
+              />
+              {opt.label}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* right side */}
+      <div className="ml-auto flex items-center gap-3">
+        <span className="micro" style={{ color: 'var(--text-muted)' }}>
+          {t('dataset.showing')}
+        </span>
+        <span className="mono text-[12px] text-text-primary tabular-nums">
+          {shownCount.toLocaleString()}
+          <span className="text-text-muted"> / {totalCount.toLocaleString()}</span>
+        </span>
+        <span className="w-px h-5 bg-border-hair shrink-0" />
+        <button
+          type="button"
+          title={t('dataset.sort')}
+          className="w-7 h-7 inline-flex items-center justify-center border border-border-hair rounded-[2px] text-text-secondary hover:text-text-primary hover:border-border-raised transition-colors"
+          disabled
+        >
+          <svg
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.6"
+          >
+            <path d="M3 6h18M6 12h12M10 18h4" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          title={t('dataset.gridDensity')}
+          className="w-7 h-7 inline-flex items-center justify-center border border-border-hair rounded-[2px] text-text-secondary hover:text-text-primary hover:border-border-raised transition-colors"
+          disabled
+        >
+          <svg
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.6"
+          >
+            <rect x="3" y="3" width="7" height="7" />
+            <rect x="14" y="3" width="7" height="7" />
+            <rect x="3" y="14" width="7" height="7" />
+            <rect x="14" y="14" width="7" height="7" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}

src/features/dataset/DatasetLeftPanel.tsx

@@ -0,0 +1,108 @@
+import { useTranslation } from 'react-i18next'
+import DatasetClassList from './DatasetClassList'
+
+interface DatasetLeftPanelProps {
+  selectedClassNum: number
+  onSelectClass: (n: number) => void
+  classCounts: Record<number, number>
+  objectsOnly: boolean
+  onObjectsOnlyChange: (v: boolean) => void
+  search: string
+  onSearchChange: (v: string) => void
+  totalCount: number
+  validatedCount: number
+}
+
+export default function DatasetLeftPanel({
+  selectedClassNum,
+  onSelectClass,
+  classCounts,
+  objectsOnly,
+  onObjectsOnlyChange,
+  search,
+  onSearchChange,
+  totalCount,
+  validatedCount,
+}: DatasetLeftPanelProps) {
+  const { t } = useTranslation()
+
+  return (
+    <aside className="bracket panel flex flex-col shrink-0" style={{ width: 250 }}>
+      <span className="br" />
+
+      <DatasetClassList
+        selectedClassNum={selectedClassNum}
+        onSelect={onSelectClass}
+        counts={classCounts}
+      />
+
+      <div className="mt-auto border-t border-border-hair px-3 py-3 flex flex-col gap-3">
+        <span className="micro">{t('dataset.filters')}</span>
+
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col">
+            <span className="text-[12px] text-text-primary">{t('dataset.objectsOnly')}</span>
+            <span className="text-[10px] text-text-muted">{t('dataset.hideEmpty')}</span>
+          </div>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={objectsOnly}
+            onClick={() => onObjectsOnlyChange(!objectsOnly)}
+            className={`relative shrink-0 rounded-[2px] border transition-colors ${
+              objectsOnly
+                ? 'border-accent-amber bg-accent-amber/20'
+                : 'border-border-hair bg-surface-0'
+            }`}
+            style={{ width: 30, height: 16 }}
+          >
+            <span
+              className={`absolute top-px left-px block rounded-[2px] transition-transform ${
+                objectsOnly ? 'bg-accent-amber' : 'bg-text-muted'
+              }`}
+              style={{
+                width: 12,
+                height: 12,
+                transform: objectsOnly ? 'translateX(14px)' : 'translateX(0)',
+              }}
+            />
+          </button>
+        </div>
+
+        <div className="relative">
+          <svg
+            className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none"
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+          >
+            <circle cx="11" cy="11" r="7" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+          <input
+            type="text"
+            className="inp w-full"
+            style={{ height: 28, padding: '0 10px 0 28px' }}
+            placeholder={t('dataset.search')}
+            value={search}
+            onChange={e => onSearchChange(e.target.value)}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-2 pt-1">
+          <div className="border border-border-hair rounded-[2px] p-2">
+            <div className="micro" style={{ color: 'var(--text-muted)' }}>{t('dataset.total')}</div>
+            <div className="mono text-[15px] text-text-primary">{totalCount.toLocaleString()}</div>
+          </div>
+          <div className="border border-border-hair rounded-[2px] p-2">
+            <div className="micro" style={{ color: 'var(--text-muted)' }}>{t('dataset.validatedCount')}</div>
+            <div className="mono text-[15px] text-accent-green">{validatedCount.toLocaleString()}</div>
+          </div>
+        </div>
+      </div>
+    </aside>
+  )
+}

src/features/dataset/DatasetPage.tsx

@@ -1,30 +1,25 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FaPen } from 'react-icons/fa'
 import { api, endpoints } from '../../api'
-import { useDebounce, useResizablePanel } from '../../hooks'
+import { useDebounce } from '../../hooks'
-import { useFlight, DetectionClasses } from '../../components'
+import { useFlight } from '../../components'
 import { useSavedAnnotations } from '../../components/SavedAnnotationsContext'
 import CanvasEditor from '../annotations/CanvasEditor'
 import { recaptureThumbnails } from '../annotations/thumbnail'
 import type { SavedDetection } from '../../components/SavedAnnotationsContext'
-import type { DatasetItem, PaginatedResponse, ClassDistributionItem, AnnotationListItem, Detection, Media } from '../../types'
+import type {
+  DatasetItem,
+  PaginatedResponse,
+  ClassDistributionItem,
+  AnnotationListItem,
+  Detection,
+  Media,
+} from '../../types'
 import { AnnotationSource, AnnotationStatus } from '../../types'
-
+import DatasetLeftPanel from './DatasetLeftPanel'
-interface DatasetCard {
+import DatasetFilterBar from './DatasetFilterBar'
-  annotationId: string
+import DatasetTile, { type DatasetCard } from './DatasetTile'
-  imageName: string
+import DatasetStatusBar from './DatasetStatusBar'
-  status: AnnotationStatus
-  createdDate: string
-  thumbnailUrl: string
-  isSeed: boolean
-  isLocal: boolean
-  detections?: Detection[]
-  mediaId?: string
-  time?: string | null
-  fullFrame?: string
-  annotationLocalId?: string
-}
 
 type Tab = 'annotations' | 'editor' | 'distribution'
 
@@ -32,7 +27,6 @@ export default function DatasetPage() {
   const { t } = useTranslation()
   const { selectedFlight } = useFlight()
   const { saved: savedAnnotations, removeSaved, replaceGroup, updateStatus } = useSavedAnnotations()
-  const leftPanel = useResizablePanel(250, 200, 400)
 
   const [items, setItems] = useState<DatasetItem[]>([])
   const [totalCount, setTotalCount] = useState(0)
@@ -45,12 +39,14 @@ export default function DatasetPage() {
   const [search, setSearch] = useState('')
   const debouncedSearch = useDebounce(search, 400)
   const [selectedClassNum, setSelectedClassNum] = useState(0)
-  const [photoMode, setPhotoMode] = useState(0)
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
   const [tab, setTab] = useState<Tab>('annotations')
   const [editorAnnotation, setEditorAnnotation] = useState<AnnotationListItem | null>(null)
   const [editorDetections, setEditorDetections] = useState<Detection[]>([])
   const [distribution, setDistribution] = useState<ClassDistributionItem[]>([])
+  const [editorFullFrame, setEditorFullFrame] = useState<string>('')
+  const [editorLocalGroupId, setEditorLocalGroupId] = useState<string | null>(null)
+  const [editorSaving, setEditorSaving] = useState(false)
 
   const fetchItems = useCallback(async () => {
     const params = new URLSearchParams({ page: String(page), pageSize: String(pageSize) })
@@ -107,11 +103,7 @@ export default function DatasetPage() {
     }))
 
     return [...localCards, ...remoteCards]
-  }, [savedAnnotations, items, selectedFlight, statusFilter, objectsOnly, selectedClassNum, debouncedSearch, fromDate, toDate])
+  }, [savedAnnotations, items, selectedFlight, statusFilter, selectedClassNum, debouncedSearch, fromDate, toDate])
-
-  const [editorFullFrame, setEditorFullFrame] = useState<string>('')
-  const [editorLocalGroupId, setEditorLocalGroupId] = useState<string | null>(null)
-  const [editorSaving, setEditorSaving] = useState(false)
 
   const handleDoubleClick = async (card: DatasetCard) => {
     if (card.isLocal && card.detections && card.mediaId) {
@@ -151,7 +143,7 @@ export default function DatasetPage() {
         const existing = savedAnnotations.find(s => s.annotationLocalId === editorLocalGroupId)
         const thumbs = await recaptureThumbnails(editorFullFrame, editorDetections)
         const now = new Date().toISOString()
-        const items: SavedDetection[] = editorDetections.map((d, i) => ({
+        const replacement: SavedDetection[] = editorDetections.map((d, i) => ({
           id: `${editorLocalGroupId}:${d.id ?? i}`,
           annotationLocalId: editorLocalGroupId,
           mediaId: editorAnnotation.mediaId,
@@ -165,7 +157,7 @@ export default function DatasetPage() {
           time: editorAnnotation.time,
           flightId: existing?.flightId ?? null,
         }))
-        replaceGroup(editorLocalGroupId, items)
+        replaceGroup(editorLocalGroupId, replacement)
       }
       setTab('annotations')
     } finally {
@@ -196,114 +188,147 @@ export default function DatasetPage() {
       updateStatus(localIds, AnnotationStatus.Validated)
     }
     setSelectedIds(new Set())
+    setPage(1)
     fetchItems()
   }
 
-  const loadDistribution = useCallback(async () => {
+  useEffect(() => {
-    try {
+    api.get<ClassDistributionItem[]>(endpoints.annotations.datasetClassDistribution())
-      const data = await api.get<ClassDistributionItem[]>(endpoints.annotations.datasetClassDistribution())
+      .then(setDistribution)
-      setDistribution(data)
+      .catch(() => {})
-    } catch {}
   }, [])
 
-  useEffect(() => { if (tab === 'distribution') loadDistribution() }, [tab, loadDistribution])
+  const classCounts = useMemo(() => {
+    const m: Record<number, number> = {}
+    for (const d of distribution) m[d.classNum] = d.count
+    return m
+  }, [distribution])
 
-  const maxDistCount = Math.max(...distribution.map(d => d.count), 1)
+  const maxDistCount = useMemo(
+    () => Math.max(...distribution.map(d => d.count), 1),
+    [distribution],
+  )
   const totalPages = Math.ceil(totalCount / pageSize)
+  const relevantSavedCount = useMemo(() => {
+    if (!selectedFlight) return savedAnnotations.length
+    return savedAnnotations.filter(sd => !sd.flightId || sd.flightId === selectedFlight.id).length
+  }, [savedAnnotations, selectedFlight])
+  const grandTotal = totalCount + relevantSavedCount
+  const validatedCount = useMemo(
+    () => cards.filter(c => c.status === AnnotationStatus.Validated).length,
+    [cards],
+  )
+
+  const firstSelectedName = useMemo(() => {
+    const firstId = selectedIds.values().next().value
+    if (!firstId) return null
+    return cards.find(c => c.annotationId === firstId)?.imageName ?? null
+  }, [selectedIds, cards])
 
   const editorMedia: Media | null = editorAnnotation ? {
     id: editorAnnotation.mediaId, name: '', path: editorFullFrame, mediaType: 1, mediaStatus: 0,
     duration: null, annotationCount: 0, waypointId: null, userId: '',
   } : null
 
-  const statusButtons = [
-    { label: 'All', value: null },
-    { label: t('dataset.status.created'), value: AnnotationStatus.Created },
-    { label: t('dataset.status.edited'), value: AnnotationStatus.Edited },
-    { label: t('dataset.status.validated'), value: AnnotationStatus.Validated },
-  ]
-
   return (
-    <div className="flex h-full">
+    <div className="flex-1 flex overflow-hidden p-3 gap-3 h-full">
-      {/* Left panel */}
+      <DatasetLeftPanel
-      <div style={{ width: leftPanel.width }} className="bg-az-panel border-r border-az-border flex flex-col shrink-0">
-        <DetectionClasses
         selectedClassNum={selectedClassNum}
-          onSelect={setSelectedClassNum}
+        onSelectClass={setSelectedClassNum}
-          photoMode={photoMode}
+        classCounts={classCounts}
-          onPhotoModeChange={setPhotoMode}
+        objectsOnly={objectsOnly}
+        onObjectsOnlyChange={setObjectsOnly}
+        search={search}
+        onSearchChange={setSearch}
+        totalCount={grandTotal}
+        validatedCount={validatedCount}
       />
-        <div className="p-2 border-t border-az-border">
+
-          <label className="flex items-center gap-1.5 text-xs text-az-text cursor-pointer">
+      <main className="flex-1 min-w-0 flex flex-col gap-3">
-            <input type="checkbox" checked={objectsOnly} onChange={e => setObjectsOnly(e.target.checked)} className="accent-az-orange" />
+        <DatasetFilterBar
-            {t('dataset.objectsOnly')}
+          fromDate={fromDate}
-          </label>
+          toDate={toDate}
-        </div>
+          onFromDateChange={setFromDate}
-        <div className="p-2 border-t border-az-border">
+          onToDateChange={setToDate}
-          <input
+          statusFilter={statusFilter}
-            value={search}
+          onStatusFilterChange={s => { setStatusFilter(s); setPage(1) }}
-            onChange={e => setSearch(e.target.value)}
+          flightName={selectedFlight?.name ?? null}
-            placeholder={t('dataset.search')}
+          shownCount={cards.length}
-            className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-xs text-az-text outline-none"
+          totalCount={grandTotal}
         />
-        </div>
-      </div>
-      <div onMouseDown={leftPanel.onMouseDown} className="w-1 cursor-col-resize bg-az-border hover:bg-az-orange shrink-0" />
 
-      {/* Main area */}
+        <div className="bracket panel relative flex-1 flex flex-col min-h-0 overflow-hidden">
-      <div className="flex-1 min-w-0 min-h-0 flex flex-col overflow-hidden">
+          <span className="br" />
-        {/* Filter bar */}
-        <div className="flex items-center gap-2 p-2 border-b border-az-border bg-az-panel text-xs flex-wrap">
-          <input type="date" value={fromDate} onChange={e => setFromDate(e.target.value)} className="bg-az-bg border border-az-border rounded px-2 py-1 text-az-text" />
-          <input type="date" value={toDate} onChange={e => setToDate(e.target.value)} className="bg-az-bg border border-az-border rounded px-2 py-1 text-az-text" />
-          {statusButtons.map(sb => (
-            <button
-              key={String(sb.value)}
-              onClick={() => { setStatusFilter(sb.value); setPage(1) }}
-              className={`px-2 py-0.5 rounded ${statusFilter === sb.value ? 'bg-az-orange text-white' : 'bg-az-bg text-az-muted'}`}
-            >
-              {sb.label}
-            </button>
-          ))}
-          <div className="flex-1" />
-          {selectedIds.size > 0 && (
-            <button onClick={handleValidate} className="bg-az-green text-white px-2 py-0.5 rounded">
-              {t('dataset.validate')} ({selectedIds.size})
-            </button>
-          )}
-        </div>
 
-        {/* Tabs */}
+          {/* Tab strip */}
-        <div className="flex border-b border-az-border bg-az-panel">
+          <div className="flex items-center px-2 border-b border-border-hair shrink-0">
-          {(['annotations', 'editor', 'distribution'] as Tab[]).map(tb => (
             <button
-              key={tb}
+              type="button"
-              onClick={() => setTab(tb)}
+              onClick={() => setTab('annotations')}
-              className={`px-3 py-1.5 text-xs ${tab === tb ? 'bg-az-bg text-white border-b-2 border-az-orange' : 'text-az-muted'}`}
+              className={`tab ${tab === 'annotations' ? 'active' : ''}`}
             >
-              {t(`dataset.${tb === 'distribution' ? 'classDistribution' : tb}`)}
+              <span>{t('dataset.annotations')}</span>
+              <span
+                className={`ml-1.5 px-1.5 py-px text-[10px] font-mono border rounded-[2px] tabular-nums ${
+                  tab === 'annotations'
+                    ? 'text-accent-amber border-accent-amber'
+                    : 'text-text-muted border-border-hair'
+                }`}
+              >
+                {cards.length}
+              </span>
             </button>
-          ))}
+            <button
+              type="button"
+              onClick={() => setTab('editor')}
+              className={`tab ${tab === 'editor' ? 'active' : ''}`}
+            >
+              <span>{t('dataset.editor')}</span>
+              <span
+                className={`ml-1.5 px-1.5 py-px text-[10px] font-mono border rounded-[2px] tabular-nums ${
+                  tab === 'editor'
+                    ? 'text-accent-amber border-accent-amber'
+                    : 'text-text-muted border-border-hair'
+                }`}
+              >
+                {editorAnnotation ? editorDetections.length : '—'}
+              </span>
+            </button>
+            <button
+              type="button"
+              onClick={() => setTab('distribution')}
+              className={`tab ${tab === 'distribution' ? 'active' : ''}`}
+            >
+              <span>{t('dataset.classDistribution')}</span>
+            </button>
+
+            <div
+              className="ml-auto flex items-center gap-2 px-2 micro"
+              style={{ color: 'var(--text-muted)' }}
+            >
+              <span className="live-dot" />
+              <span>{t('dataset.liveSync')}</span>
+            </div>
           </div>
 
           {/* Content */}
           {tab === 'annotations' && (
             <div className="flex-1 overflow-y-auto p-2">
-            <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))' }}>
-              {cards.map(card => {
-                const statusPill =
-                  card.status === AnnotationStatus.Validated ? { cls: 'bg-az-green text-white', label: t('dataset.status.validated') } :
-                  card.status === AnnotationStatus.Edited ? { cls: 'bg-az-blue text-white', label: t('dataset.status.edited') } :
-                  { cls: 'bg-az-orange text-white', label: t('dataset.status.created') }
-                const isSelected = selectedIds.has(card.annotationId)
-                return (
               <div
+                className="grid gap-2"
+                style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(170px, 1fr))' }}
+              >
+                {cards.map(card => (
+                  <DatasetTile
                     key={card.annotationId}
+                    card={card}
+                    isSelected={selectedIds.has(card.annotationId)}
                     onClick={e => {
-                      if (e.ctrlKey) {
+                      if (e.ctrlKey || e.metaKey) {
                         setSelectedIds(prev => {
                           const n = new Set(prev)
-                          n.has(card.annotationId) ? n.delete(card.annotationId) : n.add(card.annotationId)
+                          if (n.has(card.annotationId)) n.delete(card.annotationId)
+                          else n.add(card.annotationId)
                           return n
                         })
                       } else {
@@ -316,50 +341,34 @@ export default function DatasetPage() {
                       e.preventDefault()
                       removeSaved(card.annotationId)
                     }}
-                    title={card.imageName}
+                    onEditClick={() => handleDoubleClick(card)}
-                    className={`aspect-square bg-az-panel rounded border overflow-hidden cursor-pointer relative transition-colors ${
-                      isSelected ? 'border-az-orange' : 'border-az-border hover:border-az-blue'
-                    } ${card.isSeed ? 'ring-2 ring-az-red' : ''}`}
-                  >
-                    {card.thumbnailUrl ? (
-                      <img
-                        src={card.thumbnailUrl}
-                        alt={card.imageName}
-                        className="w-full h-full object-cover bg-az-bg"
-                        loading="lazy"
                   />
-                    ) : (
+                ))}
-                      <div className="w-full h-full bg-az-bg" />
-                    )}
-                    <span className={`absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full ${statusPill.cls}`}>
-                      {statusPill.label}
-                    </span>
-                    {card.isLocal && (
-                      <span className="absolute top-1.5 right-1.5 text-[9px] px-1.5 py-0.5 rounded bg-az-border text-az-text">
-                        local
-                      </span>
-                    )}
-                    <button
-                      type="button"
-                      onClick={e => { e.stopPropagation(); handleDoubleClick(card) }}
-                      title={t('dataset.edit') ?? 'Edit'}
-                      className="absolute bottom-1.5 right-1.5 w-6 h-6 flex items-center justify-center rounded bg-az-bg/80 text-az-text hover:bg-az-orange hover:text-white"
-                    >
-                      <FaPen size={10} />
-                    </button>
-                  </div>
-                )
-              })}
               </div>
               {cards.length === 0 && (
-              <div className="text-center text-az-muted text-xs py-8">{t('common.noData')}</div>
+                <div className="text-center text-text-muted text-xs py-8">{t('common.noData')}</div>
               )}
-            {/* Pagination */}
               {totalPages > 1 && (
-              <div className="flex justify-center gap-2 py-3">
+                <div className="flex justify-center items-center gap-3 py-3">
-                <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1} className="text-xs text-az-muted disabled:opacity-30 px-2 py-1 bg-az-panel rounded">Prev</button>
+                  <button
-                <span className="text-xs text-az-text py-1">{page} / {totalPages}</span>
+                    type="button"
-                <button onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages} className="text-xs text-az-muted disabled:opacity-30 px-2 py-1 bg-az-panel rounded">Next</button>
+                    className="btn btn-ghost"
+                    onClick={() => setPage(p => Math.max(1, p - 1))}
+                    disabled={page === 1}
+                  >
+                    Prev
+                  </button>
+                  <span className="mono text-[12px] text-text-primary tabular-nums">
+                    {page} / {totalPages}
+                  </span>
+                  <button
+                    type="button"
+                    className="btn btn-ghost"
+                    onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                    disabled={page === totalPages}
+                  >
+                    Next
+                  </button>
                 </div>
               )}
             </div>
@@ -368,26 +377,28 @@ export default function DatasetPage() {
           {tab === 'editor' && editorMedia && editorAnnotation && (
             <div className="flex-1 min-h-0 relative overflow-hidden">
               <div className="absolute inset-0 flex flex-col">
-              <div className="bg-az-panel border-b border-az-border px-2 py-1 flex gap-2 items-center shrink-0">
+                <div className="bg-surface-1 border-b border-border-hair px-3 py-2 flex gap-2 items-center shrink-0">
                   <button
+                    type="button"
+                    className="btn btn-primary"
                     onClick={handleEditorSave}
                     disabled={editorSaving || (!editorLocalGroupId && editorDetections.length === 0)}
-                  className="px-2.5 py-1 rounded border border-az-green text-az-green text-[11px] hover:bg-az-green/10 disabled:opacity-40 disabled:cursor-not-allowed"
                   >
-                  {editorSaving ? 'Saving…' : t('common.save') ?? 'Save'}
+                    {editorSaving ? 'Saving…' : t('common.save')}
                   </button>
                   <button
+                    type="button"
+                    className="btn btn-ghost"
                     onClick={handleEditorCancel}
                     disabled={editorSaving}
-                  className="px-2.5 py-1 rounded border border-az-border text-az-text text-[11px] hover:bg-az-border/30 disabled:opacity-40"
                   >
-                  {t('common.cancel') ?? 'Cancel'}
+                    {t('common.cancel')}
                   </button>
-                <span className="text-az-muted text-[10px]">
+                  <span className="micro" style={{ color: 'var(--text-muted)' }}>
                     {editorDetections.length} detection{editorDetections.length !== 1 ? 's' : ''}
                   </span>
                   {!editorLocalGroupId && (
-                  <span className="text-az-muted text-[10px] ml-auto">
+                    <span className="micro ml-auto" style={{ color: 'var(--text-muted)' }}>
                       remote save not wired yet
                     </span>
                   )}
@@ -410,25 +421,41 @@ export default function DatasetPage() {
           )}
 
           {tab === 'distribution' && (
-          <div className="flex-1 overflow-y-auto bg-az-bg">
+            <div className="flex-1 overflow-y-auto">
               {distribution.map(d => {
                 const pct = (d.count / maxDistCount) * 100
                 return (
-                <div key={d.classNum} className="relative h-6 border-b border-az-border/40">
                   <div
-                    className="absolute inset-y-0 left-0"
+                    key={d.classNum}
-                    style={{ width: `${pct}%`, backgroundColor: d.color, opacity: 0.85 }}
+                    className="relative flex items-center h-8 border-b border-border-hair px-3 gap-3"
+                  >
+                    <div
+                      className="absolute inset-y-0 left-0 pointer-events-none"
+                      style={{ width: `${pct}%`, backgroundColor: d.color, opacity: 0.18 }}
                     />
-                  <div className="relative flex items-center justify-between h-full px-2 text-xs text-white tabular-nums">
+                    <span className="swatch shrink-0 relative" style={{ background: d.color }} />
-                    <span className="truncate">{d.label}: {d.count}</span>
+                    <span className="relative text-[12px] text-text-primary truncate">{d.label}</span>
-                    <span className="pl-2">{d.count}</span>
+                    <span className="relative ml-auto mono text-[12px] text-text-primary tabular-nums">
-                  </div>
+                      {d.count.toLocaleString()}
+                    </span>
                   </div>
                 )
               })}
+              {distribution.length === 0 && (
+                <div className="text-center text-text-muted text-xs py-8">{t('common.noData')}</div>
+              )}
             </div>
           )}
         </div>
+
+        <DatasetStatusBar
+          selectedCount={selectedIds.size}
+          totalShown={cards.length}
+          firstSelectedName={firstSelectedName}
+          canValidate={selectedIds.size > 0}
+          onValidate={handleValidate}
+        />
+      </main>
     </div>
   )
 }

src/features/dataset/DatasetStatusBar.tsx

@@ -0,0 +1,52 @@
+import { useTranslation } from 'react-i18next'
+
+interface DatasetStatusBarProps {
+  selectedCount: number
+  totalShown: number
+  firstSelectedName: string | null
+  canValidate: boolean
+  onValidate: () => void
+}
+
+export default function DatasetStatusBar({
+  selectedCount,
+  totalShown,
+  firstSelectedName,
+  canValidate,
+  onValidate,
+}: DatasetStatusBarProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="bracket panel relative flex items-center gap-3 px-3 shrink-0" style={{ height: 44 }}>
+      <span className="br" />
+
+      <button
+        type="button"
+        className="btn btn-primary"
+        disabled={!canValidate}
+        onClick={onValidate}
+      >
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+        {t('dataset.validate')} ({selectedCount})
+      </button>
+
+      <span className="w-px h-5 bg-border-hair shrink-0" />
+
+      <div className="flex items-center gap-2 min-w-0">
+        <span className="micro">{t('dataset.selected')}</span>
+        <span className="mono text-[12px] text-text-primary truncate">
+          {firstSelectedName ?? '—'}
+        </span>
+      </div>
+
+      <div className="ml-auto flex items-center gap-3">
+        <span className="text-[11px] text-text-muted">
+          {t('dataset.ofSelected', { count: selectedCount, total: totalShown })}
+        </span>
+      </div>
+    </div>
+  )
+}

src/features/dataset/DatasetTile.tsx

@@ -0,0 +1,155 @@
+import { useTranslation } from 'react-i18next'
+import { FaPen } from 'react-icons/fa'
+import { AnnotationStatus } from '../../types'
+import type { Detection } from '../../types'
+
+export interface DatasetCard {
+  annotationId: string
+  imageName: string
+  status: AnnotationStatus
+  createdDate: string
+  thumbnailUrl: string
+  isSeed: boolean
+  isLocal: boolean
+  detections?: Detection[]
+  mediaId?: string
+  time?: string | null
+  fullFrame?: string
+  annotationLocalId?: string
+}
+
+interface DatasetTileProps {
+  card: DatasetCard
+  isSelected: boolean
+  onClick: (e: React.MouseEvent) => void
+  onDoubleClick: () => void
+  onContextMenu: (e: React.MouseEvent) => void
+  onEditClick: () => void
+}
+
+const TILE_DATE_FMT = new Intl.DateTimeFormat('en', { day: '2-digit', month: 'short' })
+
+export function formatTileDate(iso: string): string {
+  try {
+    const d = new Date(iso)
+    if (isNaN(d.getTime())) return ''
+    return TILE_DATE_FMT.format(d).toUpperCase()
+  } catch {
+    return ''
+  }
+}
+
+export default function DatasetTile({
+  card,
+  isSelected,
+  onClick,
+  onDoubleClick,
+  onContextMenu,
+  onEditClick,
+}: DatasetTileProps) {
+  const { t } = useTranslation()
+
+  const statusPill =
+    card.status === AnnotationStatus.Validated
+      ? { cls: 'pill-green', label: t('dataset.status.validated') }
+      : card.status === AnnotationStatus.Edited
+        ? { cls: 'pill-blue', label: t('dataset.status.edited') }
+        : card.status === AnnotationStatus.Created
+          ? { cls: 'pill-amber', label: t('dataset.status.created') }
+          : { cls: 'pill-muted', label: t('dataset.status.none') }
+
+  const borderCls = isSelected
+    ? card.isSeed
+      ? 'border-2 border-accent-amber ring-1 ring-accent-red'
+      : 'border-2 border-accent-amber'
+    : card.isSeed
+      ? 'border border-accent-red'
+      : 'border border-border-hair hover:border-accent-amber'
+
+  const tileDate = formatTileDate(card.createdDate)
+
+  return (
+    <div
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onContextMenu={onContextMenu}
+      title={card.imageName}
+      className={`group aspect-square relative overflow-hidden rounded-[2px] bg-surface-1 cursor-pointer transition-colors ${borderCls}`}
+    >
+      {card.thumbnailUrl ? (
+        <img
+          src={card.thumbnailUrl}
+          alt={card.imageName}
+          loading="lazy"
+          className="absolute inset-0 w-full h-full object-cover bg-surface-0"
+        />
+      ) : (
+        <div className="absolute inset-0 bg-surface-0" />
+      )}
+
+      {/* composite scrim: grid lines + bottom fade (matches design .tile .scrim) */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage:
+            'linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),' +
+            'linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),' +
+            'linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%)',
+          backgroundSize: '24px 24px, 24px 24px, 100% 100%',
+        }}
+      />
+
+      {/* corner-tag top-right */}
+      {tileDate && (
+        <div
+          className="absolute top-1.5 right-1.5 font-mono text-[9px] tracking-wider text-text-primary border border-border-hair rounded-[2px]"
+          style={{ background: 'rgba(10,13,16,0.65)', padding: '1px 5px' }}
+        >
+          {tileDate}
+        </div>
+      )}
+
+      {/* local badge — top-left */}
+      {card.isLocal && (
+        <div
+          className="absolute top-1.5 left-1.5 font-mono text-[9px] tracking-wider text-accent-cyan border border-accent-cyan/50 rounded-[2px] px-1.5 py-px"
+          style={{ background: 'rgba(10,13,16,0.65)' }}
+        >
+          {t('dataset.local').toUpperCase()}
+        </div>
+      )}
+
+      {/* selected check badge (only when selected & not local — local already has top-left badge) */}
+      {isSelected && !card.isLocal && (
+        <div
+          className="absolute top-1 left-1 inline-flex items-center justify-center rounded-[2px] bg-accent-amber"
+          style={{ width: 14, height: 14, color: '#0A0D10' }}
+        >
+          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </div>
+      )}
+
+      {/* status pill bottom-left */}
+      <span
+        className={`absolute bottom-1.5 left-1.5 pill ${statusPill.cls}`}
+        style={{ padding: '2px 6px', fontSize: 9, height: 'auto', lineHeight: 1 }}
+      >
+        <span className="dot" />
+        {statusPill.label}
+      </span>
+
+      {/* edit ibtn bottom-right (reveal on hover) */}
+      <button
+        type="button"
+        onClick={e => { e.stopPropagation(); onEditClick() }}
+        title={t('dataset.edit')}
+        className="ibtn edit absolute bottom-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
+        style={{ background: 'rgba(10,13,16,0.65)' }}
+      >
+        <FaPen size={9} />
+      </button>
+    </div>
+  )
+}

src/features/flights/AltitudeChart.tsx

@@ -17,9 +17,9 @@ export default function AltitudeChart({ points }: Props) {
     datasets: [{
       label: t('flights.planner.altitude'),
       data: points.map(p => p.altitude),
-      borderColor: '#228be6',
+      borderColor: '#36D6C5',
-      backgroundColor: 'rgba(34,139,230,0.2)',
+      backgroundColor: 'rgba(54,214,197,0.18)',
-      pointBackgroundColor: '#fd7e14',
+      pointBackgroundColor: '#FF9D3D',
       pointBorderColor: '#1e1e1e',
       pointBorderWidth: 1,
       tension: 0.1,
@@ -31,8 +31,8 @@ export default function AltitudeChart({ points }: Props) {
     maintainAspectRatio: false,
     plugins: { legend: { display: false } },
     scales: {
-      x: { ticks: { font: { size: 10 }, color: '#6c757d' }, grid: { color: '#495057' } },
+      x: { ticks: { font: { size: 10 }, color: '#9AA4B2' }, grid: { color: 'rgba(255,255,255,0.06)' } },
-      y: { ticks: { font: { size: 10 }, color: '#6c757d' }, grid: { color: '#495057' } },
+      y: { ticks: { font: { size: 10 }, color: '#9AA4B2' }, grid: { color: 'rgba(255,255,255,0.06)' } },
     },
   }
 

src/features/flights/AltitudeDialog.tsx

@@ -34,46 +34,56 @@ export default function AltitudeDialog({
   }
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-[2000]">
+    <div className="fixed inset-0 flex items-center justify-center z-[2000]" style={{ background: 'rgba(0,0,0,0.6)' }}>
-      <div className="bg-az-panel border border-az-border rounded-lg p-4 w-96 shadow-xl">
+      <div className="bracket panel w-96 shadow-xl" style={{ background: 'var(--surface-1)', padding: '20px' }}>
-        <h3 className="text-white font-semibold mb-1">
+        <h3 className="sect-head mb-1">
           {isEditMode ? t('flights.planner.titleEdit') : t('flights.planner.titleAdd')}
         </h3>
-        <p className="text-az-muted text-xs mb-3">{t('flights.planner.description')}</p>
+        <p className="micro mb-4" style={{ textTransform: 'none', letterSpacing: 'normal', color: 'var(--text-secondary)' }}>
+          {t('flights.planner.description')}
+        </p>
 
-        <div className="space-y-2 text-xs">
+        <div className="space-y-3">
           <div>
-            <label className="text-az-muted block mb-0.5">{t('flights.planner.latitude')}</label>
+            <label className="micro block mb-1">{t('flights.planner.latitude')}</label>
-            <input type="number" step="any"
+            <input
+              type="number"
+              step="any"
               value={latitude.toFixed(COORDINATE_PRECISION)}
               onChange={e => handleCoord(e.target.value, onLatitudeChange)}
-              className="w-full bg-az-bg border border-az-border rounded px-2 py-1.5 text-az-text outline-none focus:border-az-orange"
+              className="inp inp-mono"
             />
           </div>
           <div>
-            <label className="text-az-muted block mb-0.5">{t('flights.planner.longitude')}</label>
+            <label className="micro block mb-1">{t('flights.planner.longitude')}</label>
-            <input type="number" step="any"
+            <input
+              type="number"
+              step="any"
               value={longitude.toFixed(COORDINATE_PRECISION)}
               onChange={e => handleCoord(e.target.value, onLongitudeChange)}
-              className="w-full bg-az-bg border border-az-border rounded px-2 py-1.5 text-az-text outline-none focus:border-az-orange"
+              className="inp inp-mono"
             />
           </div>
           <div>
-            <label className="text-az-muted block mb-0.5">{t('flights.planner.altitude')}</label>
+            <label className="micro block mb-1">{t('flights.planner.altitude')}</label>
-            <input type="number"
+            <input
+              type="number"
               value={altitude}
               onChange={e => onAltitudeChange(Number(e.target.value))}
-              className="w-full bg-az-bg border border-az-border rounded px-2 py-1.5 text-az-text outline-none focus:border-az-orange"
+              className="inp inp-mono"
             />
           </div>
           <div>
-            <label className="text-az-muted block mb-1">{t('flights.planner.purpose')}</label>
+            <label className="micro block mb-2">{t('flights.planner.purpose')}</label>
-            <div className="flex gap-3">
+            <div className="flex gap-4">
               {PURPOSES.map(p => (
-                <label key={p.value} className="flex items-center gap-1.5 cursor-pointer text-az-text">
+                <label key={p.value} className="flex items-center gap-1.5 cursor-pointer text-text-primary text-[12px]">
-                  <input type="checkbox" checked={meta.includes(p.value)}
+                  <input
+                    type="checkbox"
+                    checked={meta.includes(p.value)}
                     onChange={() => toggleMeta(p.value)}
-                    className="rounded border-az-border bg-az-bg accent-az-orange" />
+                    style={{ accentColor: 'var(--accent-amber)' }}
+                  />
                   {t(`flights.planner.${p.label}`)}
                 </label>
               ))}
@@ -81,16 +91,16 @@ export default function AltitudeDialog({
           </div>
         </div>
 
-        <div className="flex justify-end gap-2 mt-4">
+        <div className="flex justify-end gap-2 mt-5">
-          <button onClick={onClose}
+          <button onClick={onClose} className="btn btn-ghost">
-            className="px-3 py-1 text-sm border border-az-border rounded hover:bg-az-bg text-az-text">
             {t('flights.planner.cancel')}
           </button>
-          <button onClick={onSubmit}
+          <button onClick={onSubmit} className="btn btn-primary">
-            className="px-3 py-1 text-sm bg-az-orange rounded hover:bg-orange-600 text-white">
             {isEditMode ? t('flights.planner.submitEdit') : t('flights.planner.submitAdd')}
           </button>
         </div>
+
+        <span className="br" />
       </div>
     </div>
   )

src/features/flights/FlightListSidebar.tsx

@@ -14,6 +14,7 @@ export default function FlightListSidebar({ flights, selectedFlight, onSelect, o
   const { t } = useTranslation()
   const [newName, setNewName] = useState('')
   const [creating, setCreating] = useState(false)
+  const [search, setSearch] = useState('')
 
   const handleCreate = () => {
     const name = newName.trim()
@@ -28,47 +29,126 @@ export default function FlightListSidebar({ flights, selectedFlight, onSelect, o
     setCreating(false)
   }
 
+  const needle = search.trim().toLowerCase()
+  const filteredFlights = needle
+    ? flights.filter(f => f.name.toLowerCase().includes(needle))
+    : flights
+
   return (
-    <div className="bg-az-panel border-r border-az-border flex flex-col shrink-0 w-[160px]">
+    <div className="w-[210px] shrink-0 flex flex-col border-r border-border-hair bg-surface-1">
-      <div className="px-2 py-2 border-b border-az-border text-[10px] text-az-muted uppercase tracking-wide">
+
-        {t('flights.title')}
+      {/* Header */}
+      <div className="px-3 py-2.5 flex items-center justify-between border-b border-border-hair">
+        <span className="sect-head">{t('flights.v2.roster')}</span>
+        <span className="micro mono" style={{ color: 'var(--text-muted)' }}>
+          {String(flights.length).padStart(2, '0')}
+        </span>
       </div>
+
+      {/* Search */}
+      <div className="px-3 py-2 border-b border-border-hair">
+        <div className="relative">
+          <input
+            className="inp mono text-[11px]"
+            style={{ height: 28, letterSpacing: '0.08em', paddingLeft: 28 }}
+            placeholder={t('flights.v2.search')}
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+          />
+          <svg
+            className="absolute left-2 top-1/2 -translate-y-1/2"
+            width="11"
+            height="11"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            style={{ color: 'var(--text-muted)' }}
+          >
+            <circle cx="11" cy="11" r="7" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+        </div>
+      </div>
+
+      {/* Flight list */}
       <div className="flex-1 overflow-y-auto">
-        {flights.map(f => (
+        {filteredFlights.map(f => {
-          <div key={f.id} onClick={() => onSelect(f)}
+          const isActive = selectedFlight?.id === f.id
-            className={`px-2 py-1.5 cursor-pointer border-b border-az-border text-xs ${
+          return (
-              selectedFlight?.id === f.id ? 'bg-az-bg text-white' : 'text-az-text hover:bg-az-bg'
+            <div
-            }`}>
+              key={f.id}
-            <div className="flex items-center justify-between">
+              onClick={() => onSelect(f)}
-              <span className="truncate">{f.name}</span>
+              className={`group relative flex items-center gap-2 cursor-pointer border-b border-border-hair mono text-[12px]${isActive ? ' bg-surface-2' : ''}`}
-              <button onClick={e => { e.stopPropagation(); onDelete(f.id) }}
+              style={{ height: 28, padding: '0 12px' }}
-                className="text-az-muted hover:text-az-red text-xs">&#215;</button>
+            >
+              {isActive && (
+                <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 2, background: 'var(--accent-amber)' }} />
+              )}
+              <span style={{ color: 'var(--accent-amber)' }} className="truncate">
+                {f.name}
+              </span>
+              <span
+                className="ml-auto text-[10px]"
+                style={{ color: 'var(--text-muted)', letterSpacing: '0.08em' }}
+              >
+                {new Date(f.createdDate).toLocaleDateString()}
+              </span>
+              <button
+                onClick={e => { e.stopPropagation(); onDelete(f.id) }}
+                className="opacity-0 group-hover:opacity-100 hover:text-accent-red text-text-muted text-[13px] leading-none shrink-0"
+                aria-label="Delete flight"
+              >
+                &#215;
+              </button>
             </div>
-            <div className="text-[10px] text-az-muted">{new Date(f.createdDate).toLocaleDateString()}</div>
+          )
-          </div>
+        })}
-        ))}
       </div>
+
+      {/* Create section */}
+      <div className="p-3 border-t border-border-hair">
         {creating ? (
-        <div className="flex gap-1 mx-3 my-2">
+          <div className="flex gap-1">
-          <input autoFocus value={newName} onChange={e => setNewName(e.target.value)}
+            <input
+              autoFocus
+              value={newName}
+              onChange={e => setNewName(e.target.value)}
               onKeyDown={e => {
                 if (e.key === 'Enter') handleCreate()
                 if (e.key === 'Escape') handleCancel()
               }}
-            placeholder="Flight name"
+              placeholder={t('flights.v2.createNew')}
-            className="flex-1 min-w-0 bg-az-bg border border-az-border rounded px-2 py-1.5 text-xs text-az-text outline-none focus:border-az-orange" />
+              className="inp mono flex-1 min-w-0 text-[11px]"
-          <button onClick={handleCreate} className="shrink-0 bg-az-blue text-white text-xs px-3 py-1.5 rounded hover:brightness-110">OK</button>
+              style={{ height: 28 }}
+            />
+            <button onClick={handleCreate} className="btn btn-primary shrink-0">
+              OK
+            </button>
           </div>
         ) : (
-        <button onClick={() => setCreating(true)}
+          <button
-          className="mx-3 my-2 py-1.5 bg-az-blue text-white rounded text-xs hover:brightness-110">
+            onClick={() => setCreating(true)}
-          + {t('flights.create')}
+            className="btn btn-primary w-full flex items-center justify-center gap-2"
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10">
+              <path d="M5 1 V9 M1 5 H9" stroke="currentColor" strokeWidth="1.5" />
+            </svg>
+            {t('flights.v2.createNew')}
           </button>
         )}
-      <div className="border-t border-az-border p-2">
-        <label className="block text-[9px] text-az-muted uppercase tracking-wide mb-1">{t('flights.telemetry')}</label>
-        <input type="date" className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-[10px] text-az-text" />
       </div>
+
+      {/* Telemetry card */}
+      <div className="m-3 mt-0 bracket panel p-3">
+        <span className="br" />
+        <div className="flex items-center justify-between mb-2">
+          <span className="micro" style={{ color: 'var(--accent-amber)' }}>// {t('flights.telemetry')}</span>
+        </div>
+        <label className="micro block mb-1">{t('flights.v2.date')}</label>
+        <input type="date" className="inp inp-mono text-[12px]" style={{ colorScheme: 'dark' }} />
+      </div>
+
     </div>
   )
 }

src/features/flights/FlightMap.tsx

@@ -1,5 +1,5 @@
-import { useRef, useEffect, useState } from 'react'
+import { useRef, useEffect, useState, useCallback } from 'react'
-import { MapContainer, TileLayer, Marker, Popup, Polyline, Rectangle, useMap, useMapEvents } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Popup, Rectangle, useMap, useMapEvents } from 'react-leaflet'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet-polylinedecorator'
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import DrawControl from './DrawControl'
 import MapPoint from './MapPoint'
 import MiniMap from './MiniMap'
-import { defaultIcon } from './mapIcons'
+import { currentPositionIcon } from './mapIcons'
 import { getTileUrl } from './types'
 import type { FlightPoint, CalculatedPointInfo, MapRectangle, ActionMode, MovingPointInfo } from './types'
 
@@ -35,9 +35,9 @@ function MapEvents({ points, handlePolylineClick, containerRef, onMapMove }: Map
 
     if (points.length > 1) {
       const positions: L.LatLngTuple[] = points.map(p => [p.position.lat, p.position.lng])
-      polylineRef.current = L.polyline(positions, { color: '#228be6', weight: 6, opacity: 0.7, lineJoin: 'round' }).addTo(map)
+      polylineRef.current = L.polyline(positions, { color: '#36D6C5', weight: 6, opacity: 0.7, lineJoin: 'round' }).addTo(map)
       arrowRef.current = L.polylineDecorator(polylineRef.current, {
-        patterns: [{ offset: '10%', repeat: '40%', symbol: L.Symbol.arrowHead({ pixelSize: 12, pathOptions: { fillOpacity: 1, weight: 0, color: '#228be6' } }) }],
+        patterns: [{ offset: '10%', repeat: '40%', symbol: L.Symbol.arrowHead({ pixelSize: 12, pathOptions: { fillOpacity: 1, weight: 0, color: '#36D6C5' } }) }],
       }).addTo(map)
       polylineRef.current.on('click', handlePolylineClick)
     }
@@ -61,6 +61,12 @@ function SetView({ center }: { center: L.LatLngExpression }) {
   return null
 }
 
+function MapRefCapture({ onReady }: { onReady: (m: L.Map) => void }) {
+  const m = useMap()
+  useEffect(() => { onReady(m) }, [m, onReady])
+  return null
+}
+
 interface Props {
   points: FlightPoint[]
   calculatedPointInfo: CalculatedPointInfo[]
@@ -77,21 +83,29 @@ interface Props {
   onPolylineClick: (e: L.LeafletMouseEvent) => void
   onPositionChange: (pos: { lat: number; lng: number }) => void
   onMapMove: (center: L.LatLng) => void
+  // v2 HUD optional props — safe defaults keep existing call sites intact
+  liveGps?: { lat: number; lon: number; satellites: number; status: string } | null
+  flightLabel?: string
 }
 
 export default function FlightMap({
   points, currentPosition, rectangles, setRectangles,
   rectangleColor, actionMode, onAddPoint, onUpdatePoint, onRemovePoint,
   onAltitudeChange, onMetaChange, onPolylineClick, onPositionChange, onMapMove,
+  liveGps = null,
+  flightLabel = '—',
 }: Props) {
   const { t } = useTranslation()
   const containerRef = useRef<HTMLDivElement>(null)
   const [movingPoint, setMovingPoint] = useState<MovingPointInfo | null>(null)
   const [draggablePoints, setDraggablePoints] = useState(points)
   const polylineClickRef = useRef(false)
+  const [mapInstance, setMapInstance] = useState<L.Map | null>(null)
 
   useEffect(() => { setDraggablePoints(points) }, [points])
 
+  const handleMapReady = useCallback((m: L.Map) => { setMapInstance(m) }, [])
+
   function ClickHandler() {
     useMapEvents({
       click(e) {
@@ -117,9 +131,23 @@ export default function FlightMap({
     setDraggablePoints(updated)
   }
 
+  const displayLat = liveGps?.lat ?? currentPosition.lat
+  const displayLon = liveGps?.lon ?? currentPosition.lng
+  const satelliteCount = liveGps?.satellites ?? 12
+
   return (
     <div className="flex-1 relative" ref={containerRef}>
-      <MapContainer center={currentPosition} zoom={15} className="h-full w-full">
+      <MapContainer center={currentPosition} zoom={15} className="h-full w-full"
+        zoomControl={false} attributionControl={false}
+        style={{
+          backgroundColor: '#0F1318',
+          backgroundImage:
+            'linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),' +
+            'linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),' +
+            'radial-gradient(ellipse at 30% 40%, rgba(54,214,197,0.04), transparent 60%),' +
+            'radial-gradient(ellipse at 80% 70%, rgba(255,157,61,0.03), transparent 65%)',
+          backgroundSize: '60px 60px, 60px 60px, 100% 100%, 100% 100%',
+        }}>
         <ClickHandler />
         <TileLayer
           url={getTileUrl()}
@@ -128,6 +156,7 @@ export default function FlightMap({
         />
         <MapEvents points={draggablePoints} handlePolylineClick={handlePolylineClick} containerRef={containerRef} onMapMove={onMapMove} />
         <SetView center={currentPosition} />
+        <MapRefCapture onReady={handleMapReady} />
 
         {movingPoint && <MiniMap pointPosition={movingPoint} />}
 
@@ -144,16 +173,8 @@ export default function FlightMap({
           />
         ))}
 
-        {draggablePoints.length > 1 && (
-          <Polyline
-            positions={[[draggablePoints[draggablePoints.length - 1].position.lat, draggablePoints[draggablePoints.length - 1].position.lng],
-              [draggablePoints[0].position.lat, draggablePoints[0].position.lng]]}
-            color="#228be6" dashArray="5,10"
-          />
-        )}
-
         {currentPosition && (
-          <Marker position={currentPosition} icon={defaultIcon} draggable
+          <Marker position={currentPosition} icon={currentPositionIcon} draggable
             eventHandlers={{ dragend: (e) => onPositionChange((e.target as L.Marker).getLatLng()) }}>
             <Popup>{t('flights.planner.currentLocation')}</Popup>
           </Marker>
@@ -166,11 +187,227 @@ export default function FlightMap({
         <DrawControl color={rectangleColor} actionMode={actionMode} rectangles={rectangles} setRectangles={setRectangles} />
       </MapContainer>
 
+      {/* v2 drawing-hint HUD — restyled to v2 tokens */}
       {(actionMode === 'workArea' || actionMode === 'prohibitedArea') && (
-        <div className="absolute top-2 left-1/2 -translate-x-1/2 z-[400] bg-az-panel/90 border border-az-border rounded px-3 py-1 text-[11px] text-az-text pointer-events-none">
+        <div
-          Click and drag on the map to draw a {actionMode === 'workArea' ? 'work area' : 'no-go zone'}
+          className="top-2 left-1/2 -translate-x-1/2 bracket panel micro pointer-events-none"
+          style={{ position: 'absolute', zIndex: 500, padding: '4px 12px', color: 'var(--accent-amber)', background: 'rgba(19,23,28,0.92)' }}
+        >
+          {t(actionMode === 'workArea' ? 'flights.v2.drawHintWork' : 'flights.v2.drawHintNoGo')}
+          <span className="br" />
         </div>
       )}
+
+      {/* ======================================================= */}
+      {/* Compass rosette — top-left                              */}
+      {/* ======================================================= */}
+      <div
+        className="bracket panel flex items-center justify-center pointer-events-none"
+        style={{ position: 'absolute', top: 48, left: 16, width: 80, height: 80, background: 'rgba(19,23,28,0.6)', backdropFilter: 'blur(2px)', zIndex: 500 }}
+      >
+        <svg width="60" height="60" viewBox="-30 -30 60 60" style={{ color: 'var(--accent-amber)' }}>
+          <circle r="24" fill="none" stroke="currentColor" strokeOpacity="0.3" strokeWidth="0.7" />
+          <circle r="20" fill="none" stroke="currentColor" strokeOpacity="0.2" strokeWidth="0.5" />
+          <line x1="0" y1="-26" x2="0" y2="-20" stroke="currentColor" strokeWidth="1.5" />
+          <line x1="0" y1="20" x2="0" y2="26" stroke="currentColor" strokeOpacity="0.4" strokeWidth="0.8" />
+          <line x1="-26" y1="0" x2="-20" y2="0" stroke="currentColor" strokeOpacity="0.4" strokeWidth="0.8" />
+          <line x1="20" y1="0" x2="26" y2="0" stroke="currentColor" strokeOpacity="0.4" strokeWidth="0.8" />
+          <text x="0" y="-12" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="7" fill="currentColor" fontWeight="700">N</text>
+          <polygon points="0,-16 -3,-8 0,-10 3,-8" fill="currentColor" />
+        </svg>
+        <span className="br" />
+      </div>
+
+      {/* ======================================================= */}
+      {/* Telemetry HUD — top-right                               */}
+      {/* ======================================================= */}
+      <div
+        className="bracket panel"
+        style={{ position: 'absolute', top: 16, right: 16, width: 240, background: 'rgba(19,23,28,0.92)', backdropFilter: 'blur(4px)', padding: 12, zIndex: 500 }}
+      >
+        <header
+          className="flex items-center justify-between"
+          style={{ marginBottom: 10, paddingBottom: 8, borderBottom: '1px solid var(--border-hair)' }}
+        >
+          <span
+            className="flex items-center gap-2 mono"
+            style={{ fontSize: 10, color: 'var(--accent-cyan)', letterSpacing: '0.14em' }}
+          >
+            <span
+              className="w-1.5 h-1.5 rounded-full live"
+              style={{ background: 'var(--accent-cyan)' }}
+            />
+            {t('flights.v2.hud.liveConnected')}
+          </span>
+          <span className="micro" style={{ color: 'var(--text-muted)' }}>{flightLabel}</span>
+        </header>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+          <div className="flex items-center justify-between">
+            <span className="micro">{t('flights.v2.hud.sat')}</span>
+            <span className="mono" style={{ fontSize: 12, color: 'var(--accent-green)' }}>{satelliteCount} / 14</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="micro">{t('flights.v2.hud.lat')}</span>
+            <span className="mono" style={{ fontSize: 12, color: 'var(--text-primary)' }}>{displayLat.toFixed(5)}° N</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="micro">{t('flights.v2.hud.lon')}</span>
+            <span className="mono" style={{ fontSize: 12, color: 'var(--text-primary)' }}>{displayLon.toFixed(5)}° E</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="micro">{t('flights.v2.hud.alt')}</span>
+            <span className="mono" style={{ fontSize: 12, color: 'var(--text-primary)' }}>320 M / AGL</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="micro">{t('flights.v2.hud.hdg')}</span>
+            <span className="mono" style={{ fontSize: 12, color: 'var(--accent-amber)' }}>047° NE</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="micro">{t('flights.v2.hud.spd')}</span>
+            <span className="mono" style={{ fontSize: 12, color: 'var(--text-primary)' }}>11.4 M/S</span>
+          </div>
+          <div
+            className="flex items-center justify-between"
+            style={{ paddingTop: 6, marginTop: 6, borderTop: '1px solid var(--border-hair)' }}
+          >
+            <span className="micro">{t('flights.v2.hud.link')}</span>
+            <span className="mono" style={{ fontSize: 11, color: 'var(--accent-green)' }}>RSSI -52 DBM</span>
+          </div>
+        </div>
+        <span className="br" />
+      </div>
+
+      {/* ======================================================= */}
+      {/* Legend — bottom-left                                    */}
+      {/* ======================================================= */}
+      <div
+        className="bracket panel pointer-events-none"
+        style={{ position: 'absolute', bottom: 48, left: 16, width: 200, background: 'rgba(19,23,28,0.92)', padding: 12, zIndex: 500 }}
+      >
+        <header style={{ marginBottom: 8, paddingBottom: 6, borderBottom: '1px solid var(--border-hair)' }}>
+          <span className="sect-head">// {t('flights.v2.hud.mapLegend')}</span>
+        </header>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 11 }}>
+          <div className="flex items-center gap-2.5">
+            <svg width="22" height="6">
+              <line x1="0" y1="3" x2="22" y2="3" stroke="#FF4756" strokeWidth="1.5" strokeDasharray="3 3" />
+            </svg>
+            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>
+              {t('flights.v2.hud.plannedOriginal')}
+            </span>
+          </div>
+          <div className="flex items-center gap-2.5">
+            <svg width="22" height="6">
+              <line x1="0" y1="3" x2="22" y2="3" stroke="#36D6C5" strokeWidth="2" />
+            </svg>
+            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>
+              {t('flights.v2.hud.correctedLive')}
+            </span>
+          </div>
+          <div
+            className="flex items-center gap-2.5"
+            style={{ paddingTop: 6, borderTop: '1px solid var(--border-hair)' }}
+          >
+            <div style={{ width: 10, height: 10, background: 'var(--accent-green)', transform: 'rotate(45deg)', flexShrink: 0 }} />
+            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>
+              {t('flights.v2.hud.originStart')}
+            </span>
+          </div>
+          <div className="flex items-center gap-2.5">
+            <div style={{ width: 10, height: 10, background: 'transparent', border: '1.5px solid var(--accent-cyan)', flexShrink: 0 }} />
+            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>
+              {t('flights.v2.hud.waypoint')}
+            </span>
+          </div>
+          <div className="flex items-center gap-2.5">
+            <div style={{ width: 11, height: 11, background: 'var(--accent-red)', clipPath: 'polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%)', flexShrink: 0 }} />
+            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>
+              {t('flights.v2.hud.targetFinish')}
+            </span>
+          </div>
+        </div>
+        <span className="br" />
+      </div>
+
+      {/* ======================================================= */}
+      {/* Map toolbar — right edge                                */}
+      {/* ======================================================= */}
+      <div
+        className="absolute flex flex-col gap-1.5 pointer-events-auto"
+        style={{ top: '50%', right: 16, transform: 'translateY(-50%)', zIndex: 500 }}
+      >
+        <button
+          className="flex items-center justify-center border border-border-hair panel mono"
+          style={{ width: 32, height: 32, color: 'var(--text-primary)', fontSize: 16, background: 'var(--surface-1)' }}
+          title={t('flights.v2.hud.zoomIn')}
+          onClick={() => mapInstance?.zoomIn()}
+          type="button"
+        >
+          +
+        </button>
+        <button
+          className="flex items-center justify-center border border-border-hair panel mono"
+          style={{ width: 32, height: 32, color: 'var(--text-primary)', fontSize: 16, background: 'var(--surface-1)' }}
+          title={t('flights.v2.hud.zoomOut')}
+          onClick={() => mapInstance?.zoomOut()}
+          type="button"
+        >
+          −
+        </button>
+        <div style={{ width: 32, height: 1, background: 'var(--border-hair)' }} />
+        <button
+          className="flex items-center justify-center border border-border-hair panel"
+          style={{ width: 32, height: 32, color: 'var(--accent-amber)', background: 'var(--surface-1)' }}
+          title={t('flights.v2.hud.recenter')}
+          onClick={() => mapInstance?.setView([currentPosition.lat, currentPosition.lng])}
+          type="button"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+            <circle cx="12" cy="12" r="3" />
+            <circle cx="12" cy="12" r="8" />
+            <line x1="12" y1="2" x2="12" y2="4" />
+            <line x1="12" y1="20" x2="12" y2="22" />
+            <line x1="2" y1="12" x2="4" y2="12" />
+            <line x1="20" y1="12" x2="22" y2="12" />
+          </svg>
+        </button>
+        <button
+          className="flex items-center justify-center border border-border-hair panel"
+          style={{ width: 32, height: 32, color: 'var(--text-secondary)', background: 'var(--surface-1)' }}
+          title={t('flights.v2.hud.layers')}
+          type="button"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+            <polygon points="12 2 2 7 12 12 22 7 12 2" />
+            <polyline points="2 17 12 22 22 17" />
+            <polyline points="2 12 12 17 22 12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* ======================================================= */}
+      {/* Bottom status strip                                     */}
+      {/* ======================================================= */}
+      <div
+        className="absolute left-0 right-0 flex items-center gap-4 border-t border-border-hair pointer-events-none"
+        style={{ bottom: 0, height: 28, padding: '0 12px', background: 'var(--surface-1)', zIndex: 500 }}
+      >
+        <span className="pill pill-green">
+          <span className="dot live" />
+          {t('flights.v2.strip.telemetryLive')}
+        </span>
+        <span className="micro" style={{ color: 'var(--text-muted)' }}>SSE</span>
+        <span className="mono micro" style={{ color: 'var(--text-secondary)' }}>
+          {t('flights.v2.strip.frame')} 12,847 / 18,400
+        </span>
+        <span className="micro" style={{ color: 'var(--text-muted)' }}>·</span>
+        <span className="mono micro" style={{ color: 'var(--text-secondary)' }}>
+          {displayLat.toFixed(5)} N · {displayLon.toFixed(5)} E
+        </span>
+        <span className="ml-auto micro" style={{ color: 'var(--text-muted)' }}>
+          {t('flights.v2.strip.lastPing')} +0.42S
+        </span>
+      </div>
     </div>
   )
 }

src/features/flights/FlightParamsPanel.tsx

@@ -1,7 +1,9 @@
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import WaypointList from './WaypointList'
 import AltitudeChart from './AltitudeChart'
 import WindEffect from './WindEffect'
+import { DRAW_MODES, DRAW_MODE_ACCENT } from './drawModes'
 import type { FlightPoint, CalculatedPointInfo, ActionMode, WindParams } from './types'
 import type { Aircraft } from '../../types'
 
@@ -39,75 +41,85 @@ export default function FlightParamsPanel({
   onSave, onUpload, onEditJson, onExport,
 }: Props) {
   const { t } = useTranslation()
+  const [hoveredMode, setHoveredMode] = useState<ActionMode | null>(null)
 
-  const modeBtn = (mode: ActionMode, label: string, color: 'orange' | 'green' | 'red') => {
+  return (
+    <section className="p-4 space-y-5 flex-1 overflow-y-auto text-[12px]">
+
+      {/* Draw-mode selector */}
+      <div>
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="micro" style={{ color: 'var(--accent-amber)' }}>// {t('flights.v2.drawMode')}</span>
+          <span className="micro mono" style={{ color: 'var(--text-muted)' }}>{t('flights.v2.clickToPlot')}</span>
+        </div>
+        <div className="grid grid-cols-3 gap-2">
+          {DRAW_MODES.map(({ mode, i18nKey, accent, icon }) => {
             const active = actionMode === mode
-    const colorMap = {
+            const { color, tint } = DRAW_MODE_ACCENT[accent]
-      orange: { border: 'border-az-orange', text: 'text-az-orange', bg: 'bg-az-orange/20', hover: 'hover:bg-az-orange/10' },
-      green: { border: 'border-az-green', text: 'text-az-green', bg: 'bg-az-green/20', hover: 'hover:bg-az-green/10' },
-      red: { border: 'border-az-red', text: 'text-az-red', bg: 'bg-az-red/20', hover: 'hover:bg-az-red/10' },
-    }[color]
             return (
-      <button
+              <button key={mode} onClick={() => onActionModeChange(mode)} className="mono"
-        onClick={() => onActionModeChange(mode)}
+                onMouseEnter={() => setHoveredMode(mode)} onMouseLeave={() => setHoveredMode(null)}
-        className={`flex-1 px-2.5 py-1 rounded border text-[11px] ${colorMap.border} ${colorMap.text} ${active ? colorMap.bg : colorMap.hover}`}
+                style={{
-      >{label}</button>
+                  minHeight: 32, padding: '0 8px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+                  border: `1px solid ${color}`, color, borderRadius: 2,
+                  fontSize: 10, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase',
+                  background: active ? tint : (hoveredMode === mode ? 'rgba(255,255,255,0.04)' : 'transparent'),
+                  boxShadow: active ? `inset 0 0 0 1px ${color}` : 'none',
+                  cursor: 'pointer',
+                }}>
+                <span style={{ flexShrink: 0, display: 'inline-flex' }}>{icon}</span>
+                <span style={{ textAlign: 'center', lineHeight: 1.1 }}>{t(i18nKey)}</span>
+              </button>
             )
-  }
+          })}
-
+        </div>
-  return (
-    <div className="p-2 space-y-2 text-xs overflow-y-auto flex-1">
-      <div className="flex gap-1">
-        {modeBtn('points', t('flights.planner.addPoints'), 'orange')}
-        {modeBtn('workArea', t('flights.planner.workArea'), 'green')}
-        {modeBtn('prohibitedArea', t('flights.planner.prohibitedArea'), 'red')}
       </div>
 
+      {/* Mission Config */}
+      <header className="flex items-center justify-between">
+        <h2 className="sect-head">{t('flights.v2.missionConfig')}</h2>
+      </header>
+
+      <div className="bracket panel p-3 space-y-3">
         <div>
-        <label className="text-az-muted block mb-0.5 text-[9px]">{t('flights.planner.location')}</label>
+          <label className="micro block mb-1.5">{t('flights.v2.aircraft')}</label>
-        <input
+          <select className="inp">
-          value={locationInput}
-          onChange={e => onLocationInputChange(e.target.value)}
-          onKeyDown={e => e.key === 'Enter' && onLocationSearch()}
-          placeholder="47.242, 35.024"
-          className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-az-text outline-none focus:border-az-orange"
-        />
-        <div className="text-az-muted text-[9px] mt-0.5">
-          {t('flights.planner.currentLocation')}: {currentPosition.lat.toFixed(6)}, {currentPosition.lng.toFixed(6)}
-        </div>
-      </div>
-
-      <div>
-        <label className="text-az-muted block mb-0.5 text-[9px]">{t('flights.aircraft')}</label>
-        <select className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-az-text">
             {aircrafts.map(a => <option key={a.id} value={a.id}>{a.model}</option>)}
           </select>
         </div>
-
+        <div className="grid grid-cols-2 gap-2">
           <div>
-        <label className="text-az-muted block mb-0.5 text-[9px]">{t('flights.planner.initialAltitude')}</label>
+            <label className="micro block mb-1.5">{t('flights.v2.defaultHeight')}</label>
+            <div className="relative">
               <input type="number" value={initialAltitude}
                 onChange={e => onInitialAltitudeChange(Number(e.target.value))}
-          className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-az-text outline-none focus:border-az-orange"
+                className="inp inp-mono" style={{ paddingRight: 36 }} />
-        />
+              <span className="absolute right-2.5 top-1/2 -translate-y-1/2 micro" style={{ color: 'var(--text-muted)' }}>M</span>
+            </div>
+          </div>
+          <div>
+            <label className="micro block mb-1.5">{t('flights.v2.focalLength')}</label>
+            <div className="relative">
+              <input type="text" placeholder={t('flights.planner.cameraFovPlaceholder')} className="inp inp-mono" style={{ paddingRight: 40 }} />
+              <span className="absolute right-2.5 top-1/2 -translate-y-1/2 micro" style={{ color: 'var(--text-muted)' }}>MM</span>
+            </div>
+          </div>
+        </div>
+        <div>
+          <label className="micro block mb-1.5">{t('flights.v2.commAddr')}</label>
+          <input type="text" placeholder={t('flights.planner.commAddrPlaceholder')} className="inp inp-mono" />
+        </div>
+        <span className="br" />
       </div>
 
-      <div>
+      {/* Waypoints */}
-        <label className="text-az-muted block mb-0.5 text-[9px]">{t('flights.planner.cameraFov')}</label>
+      <div className="bracket panel p-3">
-        <input type="text" placeholder={t('flights.planner.cameraFovPlaceholder')}
+        <header className="flex items-center justify-between mb-2.5">
-          className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-az-text outline-none focus:border-az-orange"
+          <span className="sect-head">{t('flights.waypoints')}</span>
-        />
+          <span className="micro mono" style={{ color: 'var(--text-muted)' }}>
-      </div>
+            {String(points.length).padStart(2, '0')} {t('flights.v2.pts')}
-
+          </span>
-      <div>
+        </header>
-        <label className="text-az-muted block mb-0.5 text-[9px]">{t('flights.planner.commAddr')}</label>
-        <input type="text" placeholder={t('flights.planner.commAddrPlaceholder')}
-          className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-az-text outline-none focus:border-az-orange"
-        />
-      </div>
-
-      <div>
-        <label className="text-az-muted block mb-1 text-[9px]">{t('flights.waypoints')}</label>
         <WaypointList
           points={points}
           calculatedPointInfo={calculatedPointInfo}
@@ -115,13 +127,32 @@ export default function FlightParamsPanel({
           onEdit={onEditPoint}
           onRemove={onRemovePoint}
         />
+        <span className="br" />
+      </div>
+
+      {/* ── Existing controls (restyled, appended below mockup blocks) ── */}
+
+      <div>
+        <label className="micro block mb-1.5">{t('flights.planner.location')}</label>
+        <input
+          value={locationInput}
+          onChange={e => onLocationInputChange(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && onLocationSearch()}
+          placeholder="47.242, 35.024"
+          className="inp inp-mono"
+        />
+        <div className="micro mt-1" style={{ color: 'var(--text-muted)' }}>
+          {t('flights.planner.currentLocation')}: {currentPosition.lat.toFixed(6)}, {currentPosition.lng.toFixed(6)}
+        </div>
       </div>
 
       {points.length > 1 && (
-        <div className="bg-az-header rounded px-2 py-1 flex gap-2 text-[10px]">
+        <div className="flex items-center gap-2 flex-wrap">
-          <span>{totalDistance}</span>
+          <span className="pill pill-muted">{totalDistance}</span>
-          <span>{totalTime}</span>
+          <span className="pill pill-muted">{totalTime}</span>
-          <span style={{ color: batteryStatus.color }}>{batteryStatus.label}</span>
+          <span className="pill" style={{ color: batteryStatus.color }}>
+            <span className="dot" />{batteryStatus.label}
+          </span>
         </div>
       )}
 
@@ -129,22 +160,16 @@ export default function FlightParamsPanel({
 
       <WindEffect wind={wind} onChange={onWindChange} />
 
-      <div className="flex gap-1">
+      <div className="grid grid-cols-2 gap-2">
-        <button onClick={onSave} className="flex-1 px-2.5 py-1 rounded border border-az-green text-az-green text-[11px] hover:bg-az-green/10">
+        <button onClick={onSave} className="btn btn-secondary justify-center" style={{ color: 'var(--accent-green)', borderColor: 'var(--accent-green)' }}>
           {t('flights.planner.save')}
         </button>
-        <button onClick={onUpload} className="flex-1 px-2.5 py-1 rounded border border-az-blue text-az-blue text-[11px] hover:bg-az-blue/10">
+        <button onClick={onUpload} className="btn btn-secondary justify-center" style={{ color: 'var(--accent-cyan)', borderColor: 'var(--accent-cyan)' }}>
           {t('flights.planner.upload')}
         </button>
+        <button onClick={onEditJson} className="btn btn-ghost justify-center">{t('flights.planner.editAsJson')}</button>
+        <button onClick={onExport} className="btn btn-ghost justify-center">{t('flights.planner.exportMapData')}</button>
       </div>
-      <div className="flex gap-1">
+    </section>
-        <button onClick={onEditJson} className="flex-1 px-2.5 py-1 rounded border border-az-muted text-az-text text-[11px] hover:border-az-text hover:text-white">
-          {t('flights.planner.editAsJson')}
-        </button>
-        <button onClick={onExport} className="flex-1 px-2.5 py-1 rounded border border-az-muted text-az-text text-[11px] hover:border-az-text hover:text-white">
-          {t('flights.planner.exportMapData')}
-        </button>
-      </div>
-    </div>
   )
 }

src/features/flights/FlightsPage.tsx

@@ -8,10 +8,19 @@ import FlightParamsPanel from './FlightParamsPanel'
 import FlightMap from './FlightMap'
 import AltitudeDialog from './AltitudeDialog'
 import JsonEditorDialog from './JsonEditorDialog'
+import GpsDeniedPanel from './GpsDeniedPanel'
+import { DRAW_MODES, DRAW_MODE_ACCENT } from './drawModes'
 import { newGuid, calculateDistance, calculateAllPoints, parseCoordinates, getMockAircraftParams } from './flightPlanUtils'
 import { PURPOSES } from './types'
 import type { Aircraft, Waypoint } from '../../types'
-import type { FlightPoint, CalculatedPointInfo, MapRectangle, ActionMode, WindParams, AircraftParams } from './types'
+import type { FlightPoint, CalculatedPointInfo, MapRectangle, ActionMode, WindParams, AircraftParams, OrthoPhoto } from './types'
+
+const tabStyle = (active: boolean, accentVar: string): React.CSSProperties => ({
+  padding: '10px 0', fontSize: 10, letterSpacing: '0.14em', borderBottom: '2px solid',
+  color: active ? 'var(--text-primary)' : 'var(--text-secondary)',
+  borderColor: active ? accentVar : 'transparent',
+  background: active ? 'var(--surface-1)' : 'transparent',
+})
 
 export default function FlightsPage() {
   const { t } = useTranslation()
@@ -36,6 +45,14 @@ export default function FlightsPage() {
 
   const [altDialog, setAltDialog] = useState<{ open: boolean; point: FlightPoint | null; isEdit: boolean }>({ open: false, point: null, isEdit: false })
   const [jsonDialog, setJsonDialog] = useState({ open: false, text: '' })
+  const [orthophotos, setOrthophotos] = useState<OrthoPhoto[]>([])
+
+  const handleApplyCorrection = useCallback((waypointNumber: number, lat: number, lon: number) => {
+    const idx = waypointNumber - 1
+    setPoints(prev => (idx < 0 || idx >= prev.length)
+      ? prev
+      : prev.map((p, i) => i === idx ? { ...p, position: { lat, lng: lon } } : p))
+  }, [])
 
   useEffect(() => {
     api.get<Aircraft[]>(endpoints.flights.aircrafts()).then(setAircrafts).catch(() => {})
@@ -47,6 +64,7 @@ export default function FlightsPage() {
   }, [])
 
   useEffect(() => {
+    setLiveGps(null) // drop the previous flight's GPS readout until the new stream sends a fix
     if (!selectedFlight) { setPoints([]); return }
     api.get<Waypoint[]>(endpoints.flights.flightWaypoints(selectedFlight.id))
       .then(wps => {
@@ -128,28 +146,21 @@ export default function FlightsPage() {
     setAltDialog({ open: false, point: null, isEdit: false })
   }
 
-  const handleEditJson = () => {
+  const buildFlightPlanData = () => ({
-    const data = {
     operational_height: { currentAltitude: initialAltitude },
     geofences: { polygons: rectangles.map(r => {
       const sw = r.bounds.getSouthWest(), ne = r.bounds.getNorthEast()
       return { northWest: { lat: ne.lat, lon: sw.lng }, southEast: { lat: sw.lat, lon: ne.lng }, fence_type: r.color === 'red' ? 'EXCLUSION' : 'INCLUSION' }
     })},
     action_points: points.map(p => ({ point: { lat: p.position.lat, lon: p.position.lng }, height: p.altitude, action: 'search', action_specific: { targets: p.meta } })),
-    }
+  })
-    setJsonDialog({ open: true, text: JSON.stringify(data, null, 2) })
+
+  const handleEditJson = () => {
+    setJsonDialog({ open: true, text: JSON.stringify(buildFlightPlanData(), null, 2) })
   }
 
   const handleExport = () => {
-    const data = {
+    const blob = new Blob([JSON.stringify(buildFlightPlanData(), null, 2)], { type: 'application/json' })
-      operational_height: { currentAltitude: initialAltitude },
-      geofences: { polygons: rectangles.map(r => {
-        const sw = r.bounds.getSouthWest(), ne = r.bounds.getNorthEast()
-        return { northWest: { lat: ne.lat, lon: sw.lng }, southEast: { lat: sw.lat, lon: ne.lng }, fence_type: r.color === 'red' ? 'EXCLUSION' : 'INCLUSION' }
-      })},
-      action_points: points.map(p => ({ point: { lat: p.position.lat, lon: p.position.lng }, height: p.altitude, action: 'search', action_specific: { targets: p.meta } })),
-    }
-    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
     const url = URL.createObjectURL(blob)
     const a = document.createElement('a')
     a.href = url
@@ -242,29 +253,43 @@ export default function FlightsPage() {
       />
 
       {collapsed ? (
-        <div className="w-10 bg-az-panel border-r border-az-border flex flex-col items-center py-2 gap-2 shrink-0">
+        <div className="shrink-0 flex flex-col items-center gap-2 border-r border-border-hair"
-          <button onClick={() => setCollapsed(false)} title="Expand"
+          style={{ width: 44, background: 'var(--surface-1)', padding: '10px 6px' }}>
-            className="w-8 h-8 rounded border border-az-border text-az-text hover:border-az-orange hover:text-az-orange text-sm">&#187;</button>
+          <button onClick={() => setCollapsed(false)} title={t('flights.v2.expandParams')}
-          <button onClick={() => setActionMode('points')} title={t('flights.planner.addPoints')}
+            className="ibtn mono" style={{ width: 32, height: 32 }}>&#187;</button>
-            className={`w-8 h-8 rounded border text-sm ${actionMode === 'points' ? 'border-az-orange text-az-orange bg-az-orange/20' : 'border-az-border text-az-text hover:border-az-orange'}`}>&#9679;</button>
+          <span className="block" style={{ width: 24, height: 1, background: 'var(--border-hair)' }} />
-          <button onClick={() => setActionMode('workArea')} title={t('flights.planner.workArea')}
+          {DRAW_MODES.map(({ mode: m, i18nKey, accent, icon }) => {
-            className={`w-8 h-8 rounded border text-az-green text-sm ${actionMode === 'workArea' ? 'border-az-green bg-az-green/20' : 'border-az-border hover:border-az-green'}`}>&#9635;</button>
+            const active = actionMode === m
-          <button onClick={() => setActionMode('prohibitedArea')} title={t('flights.planner.prohibitedArea')}
+            const { color, tint } = DRAW_MODE_ACCENT[accent]
-            className={`w-8 h-8 rounded border text-az-red text-sm ${actionMode === 'prohibitedArea' ? 'border-az-red bg-az-red/20' : 'border-az-border hover:border-az-red'}`}>&#9635;</button>
+            return (
+              <button key={m} onClick={() => setActionMode(m)} title={t(i18nKey)} className="mono"
+                style={{
+                  width: 32, height: 32, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                  border: `1px solid ${color}`, color, borderRadius: 2, cursor: 'pointer',
+                  background: active ? tint : 'transparent',
+                  boxShadow: active ? `inset 0 0 0 1px ${color}` : 'none',
+                }}>
+                {icon}
+              </button>
+            )
+          })}
         </div>
       ) : (
-      <div className="w-80 bg-az-panel border-r border-az-border flex flex-col shrink-0">
+        <div className="shrink-0 flex flex-col overflow-y-auto border-r border-border-hair"
-          <div className="flex border-b border-az-border items-stretch">
+          style={{ width: 290, background: 'var(--surface-1)' }}>
+          <div className="flex items-stretch border-b border-border-hair" style={{ background: 'var(--surface-0)' }}>
             <button onClick={() => setMode('params')}
-              className={`flex-1 py-1.5 text-[10px] ${mode === 'params' ? 'bg-az-bg text-white' : 'text-az-muted'}`}>
+              className="flex-1 mono uppercase"
-              {t('flights.params')}
+              style={tabStyle(mode === 'params', 'var(--accent-amber)')}>
+              {t('flights.v2.flightParams')}
             </button>
             <button onClick={() => setMode('gps')}
-              className={`flex-1 py-1.5 text-[10px] ${mode === 'gps' ? 'bg-az-bg text-white' : 'text-az-muted'}`}>
+              className="flex-1 mono uppercase"
-              {t('flights.gpsDenied')}
+              style={tabStyle(mode === 'gps', 'var(--accent-red)')}>
+              {t('flights.v2.gpsDenied')}
             </button>
-            <button onClick={() => setCollapsed(true)} title="Collapse"
+            <button onClick={() => setCollapsed(true)} title={t('flights.v2.collapse')}
-              className="px-2 text-az-muted hover:text-az-orange text-sm border-l border-az-border">&#171;</button>
+              className="ibtn mono shrink-0 self-center mx-1" style={{ width: 26, height: 26 }}>&#171;</button>
           </div>
 
           {mode === 'params' && (
@@ -282,24 +307,13 @@ export default function FlightsPage() {
           )}
 
           {mode === 'gps' && (
-            <div className="p-2 space-y-2 text-xs">
+            <GpsDeniedPanel
-              <div>
+              liveGps={liveGps}
-                <label className="text-az-muted block mb-1">{t('flights.liveGps')}</label>
+              orthophotos={orthophotos}
-                {liveGps ? (
+              onAddOrthophotos={(photos) => setOrthophotos(prev => [...prev, ...photos])}
-                  <div className="bg-az-bg rounded p-1.5 space-y-0.5">
+              onApplyCorrection={handleApplyCorrection}
-                    <div className="text-az-text">Status: <span className="text-az-green">{liveGps.status}</span></div>
+              onBack={() => setMode('params')}
-                    <div className="text-az-text">Lat: {liveGps.lat.toFixed(6)}</div>
+            />
-                    <div className="text-az-text">Lon: {liveGps.lon.toFixed(6)}</div>
-                    <div className="text-az-text">Sats: {liveGps.satellites}</div>
-                  </div>
-                ) : (
-                  <div className="text-az-muted">Waiting for GPS signal...</div>
-                )}
-              </div>
-              <button onClick={() => setMode('params')} className="text-az-orange text-xs">
-                ← {t('flights.back')}
-              </button>
-            </div>
           )}
         </div>
       )}
@@ -315,6 +329,8 @@ export default function FlightsPage() {
         onPolylineClick={handlePolylineClick}
         onPositionChange={setCurrentPosition}
         onMapMove={() => {}}
+        liveGps={liveGps}
+        flightLabel={selectedFlight?.name ?? '—'}
       />
 
       <AltitudeDialog

src/features/flights/GpsDeniedPanel.tsx

@@ -0,0 +1,174 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { newGuid } from './flightPlanUtils'
+import type { OrthoPhoto } from './types'
+
+interface LiveGps {
+  lat: number
+  lon: number
+  satellites: number
+  status: string
+}
+
+interface Props {
+  liveGps: LiveGps | null
+  orthophotos: OrthoPhoto[]
+  onAddOrthophotos: (photos: OrthoPhoto[]) => void
+  /** Apply a manual GPS correction to a waypoint (1-based number as shown in the list). */
+  onApplyCorrection: (waypointNumber: number, lat: number, lon: number) => void
+  onBack: () => void
+}
+
+/**
+ * GPS-Denied operating mode. The orthophoto upload and correction form are
+ * functional-local (no backend endpoint exists yet); the Live GPS readout is
+ * fed by the real SSE stream via the `liveGps` prop.
+ */
+function Row({ label, className, children }: { label: string; className?: string; children: React.ReactNode }) {
+  return (
+    <div className={`flex items-center justify-between py-1 ${className ?? ''}`}>
+      <span className="micro">{label}</span>
+      {children}
+    </div>
+  )
+}
+
+export default function GpsDeniedPanel({ liveGps, orthophotos, onAddOrthophotos, onApplyCorrection, onBack }: Props) {
+  const { t } = useTranslation()
+  const [wp, setWp] = useState('')
+  const [coords, setCoords] = useState('')
+
+  const handleUpload = () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = 'image/*'
+    input.multiple = true
+    input.onchange = (e) => {
+      const files = Array.from((e.target as HTMLInputElement).files ?? [])
+      if (!files.length) return
+      const base = orthophotos.length
+      const photos: OrthoPhoto[] = files.map((f, i) => ({
+        id: newGuid(),
+        name: f.name,
+        lat: 48.8566 + (base + i) * 0.0046,
+        lon: 2.3522 + (base + i) * 0.0079,
+      }))
+      onAddOrthophotos(photos)
+    }
+    input.click()
+  }
+
+  const handleApply = () => {
+    const num = parseInt(wp, 10)
+    const parts = coords.split(',').map(s => Number(s.trim()))
+    // Waypoint numbers are 1-based; reject 0/negative and non-numeric input.
+    if (!Number.isFinite(num) || num < 1 || parts.length !== 2 || !parts.every(Number.isFinite)) return
+    onApplyCorrection(num, parts[0], parts[1])
+  }
+
+  const connected = liveGps?.status?.toUpperCase().includes('CONNECT') ?? false
+
+  return (
+    <section className="p-4 space-y-5 flex-1 overflow-y-auto">
+      <header className="flex items-center justify-between gap-2">
+        <h2 className="sect-head" style={{ color: 'var(--accent-red)', whiteSpace: 'nowrap' }}>{t('flights.v2.gpsDeniedActive')}</h2>
+        <span className="pill pill-red" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
+          <span className="dot live" />{t('flights.v2.active')}
+        </span>
+      </header>
+
+      {/* Orthophoto upload — red frame (mockup: .bracket-red + .gps-active-frame).
+          Remap --accent-amber→red locally so the .bracket corner ticks render red;
+          no amber-colored children live inside this frame. */}
+      <div className="bracket panel" style={{
+        padding: 12,
+        border: '2px solid var(--accent-red)',
+        boxShadow: 'inset 0 0 0 1px rgba(255,71,86,0.12)',
+        ['--accent-amber' as string]: 'var(--accent-red)',
+      } as React.CSSProperties}>
+        <header className="flex items-center justify-between" style={{ marginBottom: 12 }}>
+          <span className="sect-head" style={{ color: 'var(--accent-red)' }}>// {t('flights.v2.orthophotoUpload')}</span>
+          <span className="micro mono" style={{ color: 'var(--text-muted)' }}>
+            {String(orthophotos.length).padStart(2, '0')} / 12
+          </span>
+        </header>
+
+        <div className="space-y-1.5">
+          {orthophotos.map((p, i) => (
+            <div key={p.id} className="flex items-center gap-2.5 border border-border-hair"
+              style={{ padding: '8px 10px', background: 'var(--surface-0)' }}>
+              <span className="flex items-center justify-center shrink-0 mono"
+                style={{ width: 24, height: 24, background: 'var(--accent-cyan)', color: '#0A0D10', fontSize: 10, fontWeight: 700 }}>
+                P{i + 1}
+              </span>
+              <span className="mono text-[11px] flex-1 truncate" style={{ color: 'var(--text-primary)' }}>{p.name}</span>
+              <span className="mono text-[10px]" style={{ color: 'var(--text-secondary)' }}>
+                {p.lat.toFixed(4)}, {p.lon.toFixed(4)}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <button onClick={handleUpload}
+          className="w-full mono flex items-center justify-center gap-2"
+          style={{ marginTop: 10, padding: '8px 0', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
+            border: '1px dashed var(--border-raised)', color: 'var(--text-secondary)', background: 'transparent', borderRadius: 2 }}>
+          <svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 1 V9 M1 5 H9" stroke="currentColor" strokeWidth="1.4" /></svg>
+          {t('flights.v2.uploadPhotos')}
+        </button>
+        <span className="br" />
+      </div>
+
+      {/* Live GPS readout */}
+      <div className="bracket panel" style={{ padding: 12 }}>
+        <header className="flex items-center justify-between gap-2" style={{ marginBottom: 10 }}>
+          <span className="sect-head" style={{ whiteSpace: 'nowrap' }}>// {t('flights.v2.liveGps')}</span>
+          <span className={`pill ${connected ? 'pill-green' : 'pill-muted'}`} style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
+            <span className="dot live" />{connected ? t('flights.v2.connected') : t('flights.v2.offline')}
+          </span>
+        </header>
+        <div className="space-y-1.5 text-[12px]">
+          <Row label={t('flights.v2.status')} className="border-b border-border-hair">
+            <span className="mono" style={{ whiteSpace: 'nowrap', color: connected ? 'var(--accent-green)' : 'var(--text-secondary)' }}>
+              {connected ? t('flights.v2.connectedStreaming') : t('flights.v2.offline')}
+            </span>
+          </Row>
+          <Row label={t('flights.v2.latitude')} className="border-b border-border-hair">
+            <span className="mono num">{(liveGps?.lat ?? 0).toFixed(5)}° N</span>
+          </Row>
+          <Row label={t('flights.v2.longitude')} className="border-b border-border-hair">
+            <span className="mono num">{(liveGps?.lon ?? 0).toFixed(5)}° E</span>
+          </Row>
+          <Row label={t('flights.v2.satellites')} className="border-b border-border-hair">
+            <span className="mono num" style={{ color: 'var(--accent-cyan)' }}>{liveGps?.satellites ?? 0} / 14</span>
+          </Row>
+          <Row label={t('flights.v2.drift')}>
+            <span className="mono num" style={{ color: 'var(--accent-amber)' }}>±2.4 M</span>
+          </Row>
+        </div>
+        <span className="br" />
+      </div>
+
+      {/* GPS Correction */}
+      <div className="bracket panel" style={{ padding: 12 }}>
+        <header className="flex items-center justify-between" style={{ marginBottom: 10 }}>
+          <span className="sect-head">// {t('flights.v2.gpsCorrection')}</span>
+        </header>
+        <div className="space-y-2.5">
+          <div>
+            <label className="micro block mb-1.5">{t('flights.v2.waypointNum')}</label>
+            <input value={wp} onChange={e => setWp(e.target.value)} type="number" className="inp inp-mono" />
+          </div>
+          <div>
+            <label className="micro block mb-1.5">{t('flights.v2.correctedGps')}</label>
+            <input value={coords} onChange={e => setCoords(e.target.value)} type="text" placeholder="48.86120, 2.36011" className="inp inp-mono" />
+          </div>
+          <button onClick={handleApply} className="btn btn-primary w-full justify-center">{t('flights.v2.applyCorrection')}</button>
+        </div>
+        <span className="br" />
+      </div>
+
+      <button onClick={onBack} className="btn btn-ghost w-full justify-center">‹ {t('flights.v2.backToParams')}</button>
+    </section>
+  )
+}

src/features/flights/JsonEditorDialog.tsx

@@ -23,30 +23,36 @@ export default function JsonEditorDialog({ open, jsonText, onClose, onSave }: Pr
   if (!open) return null
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-[2000]">
+    <div className="fixed inset-0 flex items-center justify-center z-[2000]" style={{ background: 'rgba(0,0,0,0.6)' }}>
-      <div className="bg-az-panel border border-az-border rounded-lg p-4 w-[700px] max-h-[80vh] shadow-xl flex flex-col">
+      <div
-        <h3 className="text-white font-semibold mb-2">{t('flights.planner.editAsJson')}</h3>
+        className="bracket panel shadow-xl flex flex-col"
+        style={{ background: 'var(--surface-1)', padding: '20px', width: '700px', maxHeight: '80vh' }}
+      >
+        <h3 className="sect-head mb-3">{t('flights.planner.editAsJson')}</h3>
         <textarea
           value={edited}
           onChange={e => handleChange(e.target.value)}
           rows={20}
-          className={`flex-1 w-full bg-az-bg border rounded px-3 py-2 text-az-text text-xs font-mono outline-none resize-none ${
+          className="inp inp-mono flex-1 resize-none"
-            valid ? 'border-az-border focus:border-az-orange' : 'border-az-red'
+          style={{
-          }`}
+            maxHeight: '60vh',
+            borderColor: valid ? undefined : 'var(--accent-red)',
+            boxShadow: valid ? undefined : '0 0 0 1px var(--accent-red)',
+          }}
         />
-        <p className={`text-xs mt-1 ${valid ? 'text-az-muted' : 'text-az-red'}`}>
+        <p className="text-[11px] mt-1.5" style={{ color: valid ? 'var(--text-secondary)' : 'var(--accent-red)' }}>
           {valid ? t('flights.planner.editJsonHint') : t('flights.planner.invalidJson')}
         </p>
-        <div className="flex justify-end gap-2 mt-3">
+        <div className="flex justify-end gap-2 mt-4">
-          <button onClick={onClose}
+          <button onClick={onClose} className="btn btn-ghost">
-            className="px-3 py-1 text-sm border border-az-border rounded hover:bg-az-bg text-az-text">
             {t('flights.planner.cancel')}
           </button>
-          <button onClick={() => valid && onSave(edited)} disabled={!valid}
+          <button onClick={() => valid && onSave(edited)} disabled={!valid} className="btn btn-primary">
-            className="px-3 py-1 text-sm bg-az-orange rounded hover:bg-orange-600 text-white disabled:opacity-40">
             {t('flights.planner.save')}
           </button>
         </div>
+
+        <span className="br" />
       </div>
     </div>
   )

src/features/flights/MapPoint.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react'
 import { Marker, Popup } from 'react-leaflet'
 import { useTranslation } from 'react-i18next'
-import { pointIconGreen, pointIconBlue, pointIconRed } from './mapIcons'
+import { wpStartIcon, wpMidIcon, wpFinishIcon } from './mapIcons'
 import { PURPOSES } from './types'
 import type { FlightPoint, MovingPointInfo } from './types'
 import type L from 'leaflet'
@@ -26,7 +26,7 @@ export default function MapPoint({
   const { t } = useTranslation()
   const markerRef = useRef<L.Marker>(null)
 
-  const icon = index === 0 ? pointIconGreen : index === points.length - 1 ? pointIconRed : pointIconBlue
+  const icon = index === 0 ? wpStartIcon : index === points.length - 1 ? wpFinishIcon : wpMidIcon
 
   const handleMove = (e: L.LeafletEvent) => {
     const marker = markerRef.current
@@ -58,26 +58,55 @@ export default function MapPoint({
       }}
     >
       <Popup>
-        <div className="text-xs space-y-1.5 min-w-[140px]">
+        <div style={{ minWidth: 148, display: 'flex', flexDirection: 'column', gap: 6 }}>
-          <div className="font-semibold">{t('flights.planner.point')} {index + 1}</div>
+          <div
-          <div>
+            className="mono"
-            <label className="text-az-muted text-[10px]">{t('flights.planner.altitude')}</label>
+            style={{ color: 'var(--accent-amber)', fontSize: 12, fontWeight: 600 }}
-            <input type="range" min={0} max={3000} value={point.altitude}
+          >
-              onChange={e => onAltitudeChange(index, Number(e.target.value))}
+            {t('flights.planner.point')} {index + 1}
-              className="w-full accent-az-orange" />
-            <span className="text-[10px] text-az-muted">{point.altitude}m</span>
           </div>
-          <div className="flex gap-2">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <label style={{ color: 'var(--text-secondary)', fontSize: 11 }}>
+              {t('flights.planner.altitude')}
+            </label>
+            <input
+              type="range"
+              min={0}
+              max={3000}
+              value={point.altitude}
+              onChange={e => onAltitudeChange(index, Number(e.target.value))}
+              className="w-full"
+              style={{ accentColor: 'var(--accent-amber)' }}
+            />
+            <span
+              className="mono"
+              style={{ color: 'var(--text-primary)', fontSize: 11 }}
+            >
+              {point.altitude}m
+            </span>
+          </div>
+          <div style={{ display: 'flex', gap: 8 }}>
             {PURPOSES.map(p => (
-              <label key={p.value} className="flex items-center gap-1 text-[10px] cursor-pointer">
+              <label
-                <input type="checkbox" checked={point.meta.includes(p.value)}
+                key={p.value}
-                  onChange={() => toggleMeta(p.value)} className="accent-az-orange" />
+                style={{ display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer', color: 'var(--text-primary)', fontSize: 12 }}
+              >
+                <input
+                  type="checkbox"
+                  checked={point.meta.includes(p.value)}
+                  onChange={() => toggleMeta(p.value)}
+                  style={{ accentColor: 'var(--accent-amber)' }}
+                />
                 {t(`flights.planner.${p.label}`)}
               </label>
             ))}
           </div>
-          <button onClick={() => onRemove(point.id)}
+          <button
-            className="text-az-red text-[10px] hover:underline">
+            onClick={() => onRemove(point.id)}
+            style={{ color: 'var(--accent-red)', fontSize: 11, background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left', textDecoration: 'none' }}
+            onMouseOver={e => (e.currentTarget.style.textDecoration = 'underline')}
+            onMouseOut={e => (e.currentTarget.style.textDecoration = 'none')}
+          >
             {t('flights.planner.removePoint')}
           </button>
         </div>

src/features/flights/MiniMap.tsx

@@ -17,13 +17,13 @@ interface Props {
 export default function MiniMap({ pointPosition }: Props) {
   return (
     <div
-      className="absolute w-[240px] h-[180px] border border-az-border rounded shadow-lg z-[1000] overflow-hidden pointer-events-none"
+      className="absolute w-[240px] h-[180px] border border-border-hair rounded shadow-lg z-[1000] overflow-hidden pointer-events-none"
       style={{ top: pointPosition.y, left: pointPosition.x }}
     >
       <MapContainer center={pointPosition.latlng} zoom={18} zoomControl={false}
         className="w-full h-full" attributionControl={false}>
         <TileLayer url={getTileUrl()} crossOrigin="use-credentials" />
-        <CircleMarker center={pointPosition.latlng} radius={3} color="#fa5252" />
+        <CircleMarker center={pointPosition.latlng} radius={3} color="#FF4756" />
         <UpdateCenter latlng={pointPosition.latlng} />
       </MapContainer>
     </div>

src/features/flights/WaypointList.tsx

@@ -29,25 +29,94 @@ export default function WaypointList({ points, calculatedPointInfo, onReorder, o
     return `${alt}${t('flights.planner.metres')} ${Math.floor(info.bat)}%${t('flights.planner.battery')} ${timeStr}`
   }
 
+  const renderMarker = (index: number) => {
+    if (index === 0) {
+      return (
+        <span
+          style={{
+            width: 10,
+            height: 10,
+            background: 'var(--accent-green)',
+            transform: 'rotate(45deg)',
+            flexShrink: 0,
+            display: 'inline-block',
+          }}
+        />
+      )
+    }
+    if (index === points.length - 1 && points.length > 1) {
+      return (
+        <span
+          style={{
+            width: 10,
+            height: 10,
+            background: 'var(--accent-red)',
+            clipPath: 'polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)',
+            flexShrink: 0,
+            display: 'inline-block',
+          }}
+        />
+      )
+    }
+    return (
+      <span
+        style={{
+          width: 10,
+          height: 10,
+          background: 'transparent',
+          border: '1.5px solid var(--accent-cyan)',
+          flexShrink: 0,
+          display: 'inline-block',
+        }}
+      />
+    )
+  }
+
   return (
     <DragDropContext onDragEnd={handleDragEnd}>
       <Droppable droppableId="waypoints">
         {(provided) => (
-          <div ref={provided.innerRef} {...provided.droppableProps} className="space-y-0.5">
+          <div ref={provided.innerRef} {...provided.droppableProps} className="space-y-0">
             {points.map((point, index) => (
               <Draggable key={point.id} draggableId={point.id} index={index}>
                 {(provided) => (
-                  <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}
+                  <div
-                    className="flex items-center justify-between bg-az-bg rounded px-1.5 py-1 text-[10px] text-az-text group">
+                    ref={provided.innerRef}
-                    <span>
+                    {...provided.draggableProps}
-                      <span className="text-az-orange font-bold mr-1">
+                    {...provided.dragHandleProps}
+                    className="flex items-center gap-2.5 border-b border-border-hair mono group"
+                    style={{ height: 30, padding: '0 4px', ...provided.draggableProps.style }}
+                  >
+                    <span
+                      className="mono text-[11px]"
+                      style={{ color: 'var(--text-secondary)', width: 28, flexShrink: 0 }}
+                    >
                       {String(index + 1).padStart(2, '0')}
                     </span>
+
+                    {renderMarker(index)}
+
+                    <span className="text-[11px] text-text-primary truncate flex-1">
                       {formatInfo(calculatedPointInfo[index], point.altitude)}
                     </span>
-                    <span className="flex gap-1 opacity-0 group-hover:opacity-100">
+
-                      <button onClick={() => onEdit(point)} className="hover:text-az-orange">&#9998;</button>
+                    <span className="ml-auto flex gap-1 opacity-0 group-hover:opacity-100">
-                      <button onClick={() => onRemove(point.id)} className="hover:text-az-red">&#215;</button>
+                      <button
+                        onClick={() => onEdit(point)}
+                        className="ibtn edit"
+                        style={{ width: 22, height: 22 }}
+                        title={t('flights.planner.edit')}
+                      >
+                        &#9998;
+                      </button>
+                      <button
+                        onClick={() => onRemove(point.id)}
+                        className="ibtn danger"
+                        style={{ width: 22, height: 22 }}
+                        title={t('flights.planner.remove')}
+                      >
+                        &#215;
+                      </button>
                     </span>
                   </div>
                 )}

src/features/flights/WindEffect.tsx

@@ -12,19 +12,19 @@ export default function WindEffect({ wind, onChange }: Props) {
   return (
     <div className="flex gap-2">
       <div className="flex-1">
-        <label className="text-az-muted block mb-0.5 text-[9px]">{t('flights.planner.windDirection')}</label>
+        <label className="micro block mb-0.5">{t('flights.planner.windDirection')}</label>
         <input type="number" min={0} max={360}
           value={wind.direction}
           onChange={e => onChange({ ...wind, direction: Number(e.target.value) })}
-          className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-xs text-az-text outline-none focus:border-az-orange"
+          className="inp inp-mono w-full"
         />
       </div>
       <div className="flex-1">
-        <label className="text-az-muted block mb-0.5 text-[9px]">{t('flights.planner.windSpeed')}</label>
+        <label className="micro block mb-0.5">{t('flights.planner.windSpeed')}</label>
         <input type="number" min={0}
           value={wind.speed}
           onChange={e => onChange({ ...wind, speed: Number(e.target.value) })}
-          className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-xs text-az-text outline-none focus:border-az-orange"
+          className="inp inp-mono w-full"
         />
       </div>
     </div>

src/features/flights/__tests__/satellite_tile.test.tsx

@@ -85,7 +85,7 @@ vi.mock('leaflet/dist/leaflet.css', () => ({}))
 vi.mock('leaflet-polylinedecorator', () => ({}))
 vi.mock('../DrawControl', () => ({ default: () => null }))
 vi.mock('../MapPoint', () => ({ default: () => null }))
-vi.mock('../mapIcons', () => ({ defaultIcon: {} }))
+vi.mock('../mapIcons', () => ({ currentPositionIcon: {} }))
 
 import FlightMap from '../FlightMap'
 import MiniMap from '../MiniMap'

src/features/flights/drawModes.tsx

@@ -0,0 +1,29 @@
+import type { ActionMode } from './types'
+
+export type DrawAccent = 'amber' | 'green' | 'red'
+
+/** Accent color + active-state tint per draw mode. Shared by the collapsed rail
+ * (FlightsPage) and the expanded draw-mode selector (FlightParamsPanel). */
+export const DRAW_MODE_ACCENT: Record<DrawAccent, { color: string; tint: string }> = {
+  amber: { color: 'var(--accent-amber)', tint: 'rgba(255,157,61,0.20)' },
+  green: { color: 'var(--accent-green)', tint: 'rgba(61,220,132,0.18)' },
+  red: { color: 'var(--accent-red)', tint: 'rgba(255,71,86,0.18)' },
+}
+
+/** Single source of truth for the three flight-plan draw modes: the action mode,
+ * its i18n label key, accent, and icon. Consumed by both the icon-only collapsed
+ * rail and the labelled expanded selector. */
+export const DRAW_MODES: { mode: ActionMode; i18nKey: string; accent: DrawAccent; icon: React.ReactNode }[] = [
+  {
+    mode: 'points', i18nKey: 'flights.v2.points', accent: 'amber',
+    icon: <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="1.6" fill="currentColor" /><circle cx="18" cy="6" r="1.6" fill="currentColor" /><circle cx="12" cy="14" r="1.6" fill="currentColor" /><circle cx="6" cy="20" r="1.6" fill="currentColor" /><circle cx="18" cy="20" r="1.6" fill="currentColor" /></svg>,
+  },
+  {
+    mode: 'workArea', i18nKey: 'flights.v2.workArea', accent: 'green',
+    icon: <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="4 7 12 3 20 7 20 17 12 21 4 17" /></svg>,
+  },
+  {
+    mode: 'prohibitedArea', i18nKey: 'flights.v2.noGoZone', accent: 'red',
+    icon: <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><line x1="5.6" y1="5.6" x2="18.4" y2="18.4" /></svg>,
+  },
+]

src/features/flights/mapIcons.ts

@@ -1,23 +1,45 @@
 import L from 'leaflet'
-import markerIcon from 'leaflet/dist/images/marker-icon.png'
 
-function pinIcon(color: string) {
+// v2 waypoint glyphs — match the map legend shapes exactly:
+//   start  → green diamond (.wp-diamond)
+//   middle → cyan-bordered square (.wp-square)
+//   finish → red octagon (.wp-octagon)
+function glyphIcon(html: string, size: number) {
   return L.divIcon({
     className: '',
-    html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="24" height="24" fill="${color}"><path d="M384 192c0 87.4-117 243-168.3 307.2a24 24 0 0 1-47.4 0C117 435 0 279.4 0 192 0 86 86 0 192 0s192 86 192 192z"/></svg>`,
+    html: `<div style="display:flex;align-items:center;justify-content:center;width:${size}px;height:${size}px;">${html}</div>`,
-    iconSize: [24, 24],
+    iconSize: [size, size],
-    iconAnchor: [12, 24],
+    iconAnchor: [size / 2, size / 2],
-    popupAnchor: [0, -24],
+    popupAnchor: [0, -(size / 2) - 2],
   })
 }
 
-export const pointIconGreen = pinIcon('#1ed013')
+export const wpStartIcon = glyphIcon(
-export const pointIconBlue = pinIcon('#228be6')
+  `<div style="width:14px;height:14px;background:#3DDC84;border:1.5px solid #0A0D10;box-shadow:0 0 0 1px #3DDC84;transform:rotate(45deg);"></div>`,
-export const pointIconRed = pinIcon('#fa5252')
+  20,
+)
+export const wpMidIcon = glyphIcon(
+  `<div style="width:12px;height:12px;background:#0A0D10;border:1.5px solid #36D6C5;"></div>`,
+  16,
+)
+export const wpFinishIcon = glyphIcon(
+  `<div style="width:16px;height:16px;background:#FF4756;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);"></div>`,
+  18,
+)
 
-export const defaultIcon = new L.Icon({
+// v2 current-position beacon: amber center dot with an expanding pulse ring.
-  iconUrl: markerIcon,
+// Self-contained SVG/SMIL animation so it needs no global CSS keyframes.
-  iconSize: [25, 41],
+export const currentPositionIcon = L.divIcon({
-  iconAnchor: [12, 41],
+  className: '',
-  popupAnchor: [1, -34],
+  html: `<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
+    <circle cx="17" cy="17" r="5" fill="none" stroke="#FF9D3D" stroke-width="1.5">
+      <animate attributeName="r" values="5;15" dur="1.6s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.7;0" dur="1.6s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="17" cy="17" r="8" fill="none" stroke="#FF9D3D" stroke-width="1" opacity="0.45"/>
+    <circle cx="17" cy="17" r="4" fill="#FF9D3D" stroke="#0A0D10" stroke-width="1"/>
+  </svg>`,
+  iconSize: [34, 34],
+  iconAnchor: [17, 17],
+  popupAnchor: [0, -17],
 })

src/features/flights/types.ts

@@ -37,6 +37,16 @@ export interface WindParams {
   speed: number
 }
 
+// Local-only orthophoto entry for the GPS-Denied upload list. There is no
+// backend endpoint for orthophoto upload yet, so this lives entirely in
+// component state (see GpsDeniedPanel / FlightsPage).
+export interface OrthoPhoto {
+  id: string
+  name: string
+  lat: number
+  lon: number
+}
+
 export interface MovingPointInfo {
   x: number
   y: number

src/i18n/en.json

@@ -34,6 +34,81 @@
     "correction": "GPS Correction",
     "apply": "Apply",
     "telemetry": "Telemetry",
+    "v2": {
+      "roster": "Flight Roster",
+      "search": "Search flights",
+      "draft": "Draft",
+      "createNew": "Create New",
+      "missionConfig": "Mission Config",
+      "drawMode": "Draw Mode",
+      "clickToPlot": "click map to plot",
+      "points": "Points",
+      "workArea": "Work Area",
+      "noGoZone": "No-Go Zone",
+      "aircraft": "Aircraft",
+      "defaultHeight": "Default Height",
+      "focalLength": "Focal Length",
+      "commAddr": "Comm Address / Port",
+      "pts": "PTS",
+      "wpStart": "START",
+      "wpFinish": "FINISH",
+      "tagOrigin": "ORIGIN",
+      "tagTrack": "TRACK",
+      "tagConfirm": "CONFIRM",
+      "tagTarget": "TARGET",
+      "tagMilVeh": "MIL-VEH",
+      "flightParams": "Flight Params",
+      "gpsDenied": "GPS-Denied",
+      "gpsDeniedActive": "GPS-Denied // Active",
+      "orthophotoUpload": "Orthophoto Upload",
+      "uploadPhotos": "Upload Photos",
+      "liveGps": "Live GPS",
+      "connected": "CONNECTED",
+      "connectedStreaming": "CONNECTED · STREAMING",
+      "active": "Active",
+      "offline": "Offline",
+      "status": "Status",
+      "latitude": "Latitude",
+      "longitude": "Longitude",
+      "satellites": "Satellites",
+      "drift": "Drift",
+      "gpsCorrection": "GPS Correction",
+      "waypointNum": "Waypoint #",
+      "correctedGps": "Corrected GPS",
+      "applyCorrection": "Apply Correction",
+      "backToParams": "Back to Flight Params",
+      "upload": "Upload",
+      "expandParams": "Expand parameters",
+      "collapse": "Collapse",
+      "date": "Date",
+      "drawHintWork": "Click and drag on the map to draw a work area",
+      "drawHintNoGo": "Click and drag on the map to draw a no-go zone",
+      "hud": {
+        "liveConnected": "LIVE · CONNECTED",
+        "sat": "Sat",
+        "lat": "Lat",
+        "lon": "Lon",
+        "alt": "Alt",
+        "hdg": "Hdg",
+        "spd": "Spd",
+        "link": "Link",
+        "mapLegend": "Map Legend",
+        "plannedOriginal": "Planned · Original",
+        "correctedLive": "Corrected · Live",
+        "originStart": "Origin / Start",
+        "waypoint": "Waypoint",
+        "targetFinish": "Target / Finish",
+        "zoomIn": "Zoom in",
+        "zoomOut": "Zoom out",
+        "recenter": "Recenter",
+        "layers": "Layers"
+      },
+      "strip": {
+        "telemetryLive": "TELEMETRY · LIVE",
+        "frame": "FRAME",
+        "lastPing": "LAST PING"
+      }
+    },
     "planner": {
       "point": "Point",
       "altitude": "Altitude",
@@ -58,6 +133,8 @@
       "submitAdd": "Add Point",
       "submitEdit": "Save Changes",
       "removePoint": "Delete",
+      "edit": "Edit point",
+      "remove": "Remove point",
       "windSpeed": "Wind spd",
       "windDirection": "Wind dir",
       "setWind": "Set Wind",
@@ -133,12 +210,30 @@
     "editor": "Editor",
     "classDistribution": "Class Distribution",
     "objectsOnly": "Show with objects only",
-    "search": "Search...",
+    "hideEmpty": "Hide empty frames",
+    "search": "Search annotation name…",
     "validate": "Validate",
+    "edit": "Edit",
+    "filters": "Filters",
+    "total": "Total",
+    "validatedCount": "Validated",
+    "range": "Range",
+    "flight": "Flight",
+    "showing": "Showing",
+    "liveSync": "Live sync",
+    "selected": "Selected",
+    "refreshThumbnails": "Refresh Thumbnails",
+    "ofSelected": "{{count}} of {{total}} selected",
+    "local": "Local",
+    "sort": "Sort",
+    "gridDensity": "Grid density",
+    "statusLabel": "Status",
     "status": {
       "created": "Created",
       "edited": "Edited",
-      "validated": "Validated"
+      "validated": "Validated",
+      "all": "All",
+      "none": "None"
     }
   },
   "admin": {

src/i18n/ua.json

@@ -34,6 +34,81 @@
     "correction": "Корекція GPS",
     "apply": "Застосувати",
     "telemetry": "Телеметрія",
+    "v2": {
+      "roster": "Реєстр польотів",
+      "search": "Пошук польотів",
+      "draft": "Чернетка",
+      "createNew": "Створити новий",
+      "missionConfig": "Конфігурація місії",
+      "drawMode": "Режим малювання",
+      "clickToPlot": "клікніть на карту",
+      "points": "Точки",
+      "workArea": "Робоча зона",
+      "noGoZone": "Заборонена зона",
+      "aircraft": "Літальний апарат",
+      "defaultHeight": "Висота за замовч.",
+      "focalLength": "Фокусна відстань",
+      "commAddr": "Адреса / Порт зв'язку",
+      "pts": "ТЧК",
+      "wpStart": "СТАРТ",
+      "wpFinish": "ФІНІШ",
+      "tagOrigin": "ПОЧАТОК",
+      "tagTrack": "ТРЕК",
+      "tagConfirm": "ПІДТВ.",
+      "tagTarget": "ЦІЛЬ",
+      "tagMilVeh": "ВІЙСЬК-ТЕХ",
+      "flightParams": "Параметри польоту",
+      "gpsDenied": "GPS-Denied",
+      "gpsDeniedActive": "GPS-Denied // Активно",
+      "orthophotoUpload": "Завантаження ортофото",
+      "uploadPhotos": "Завантажити фото",
+      "liveGps": "GPS Потік",
+      "connected": "З'ЄДНАНО",
+      "connectedStreaming": "З'ЄДНАНО · ПОТІК",
+      "active": "Активно",
+      "offline": "Офлайн",
+      "status": "Статус",
+      "latitude": "Широта",
+      "longitude": "Довгота",
+      "satellites": "Супутники",
+      "drift": "Відхилення",
+      "gpsCorrection": "Корекція GPS",
+      "waypointNum": "Точка №",
+      "correctedGps": "Скориговані GPS",
+      "applyCorrection": "Застосувати корекцію",
+      "backToParams": "Назад до параметрів",
+      "upload": "Завантажити",
+      "expandParams": "Розгорнути параметри",
+      "collapse": "Згорнути",
+      "date": "Дата",
+      "drawHintWork": "Клікніть і потягніть на карті, щоб намалювати робочу зону",
+      "drawHintNoGo": "Клікніть і потягніть на карті, щоб намалювати заборонену зону",
+      "hud": {
+        "liveConnected": "ЕФІР · З'ЄДНАНО",
+        "sat": "Супут",
+        "lat": "Шир",
+        "lon": "Довг",
+        "alt": "Вис",
+        "hdg": "Курс",
+        "spd": "Швид",
+        "link": "Зв'язок",
+        "mapLegend": "Легенда карти",
+        "plannedOriginal": "Планований · Оригінал",
+        "correctedLive": "Скоригований · Ефір",
+        "originStart": "Початок / Старт",
+        "waypoint": "Точка маршруту",
+        "targetFinish": "Ціль / Фініш",
+        "zoomIn": "Збільшити",
+        "zoomOut": "Зменшити",
+        "recenter": "Центрувати",
+        "layers": "Шари"
+      },
+      "strip": {
+        "telemetryLive": "ТЕЛЕМЕТРІЯ · ЕФІР",
+        "frame": "КАДР",
+        "lastPing": "ОСТ. ПІНГ"
+      }
+    },
     "planner": {
       "point": "Точка",
       "altitude": "Висота",
@@ -58,6 +133,8 @@
       "submitAdd": "Додати точку",
       "submitEdit": "Зберегти зміни",
       "removePoint": "Видалити",
+      "edit": "Редагувати точку",
+      "remove": "Видалити точку",
       "windSpeed": "Шв. вітру",
       "windDirection": "Напр. вітру",
       "setWind": "Вітер",
@@ -135,12 +212,30 @@
     "editor": "Редактор",
     "classDistribution": "Розподіл класів",
     "objectsOnly": "Тільки з об'єктами",
-    "search": "Пошук...",
+    "hideEmpty": "Приховати порожні кадри",
+    "search": "Пошук за назвою анотації…",
     "validate": "Валідувати",
+    "edit": "Редагувати",
+    "filters": "Фільтри",
+    "total": "Всього",
+    "validatedCount": "Валідовано",
+    "range": "Діапазон",
+    "flight": "Політ",
+    "showing": "Показано",
+    "liveSync": "Жива синхронізація",
+    "selected": "Вибрано",
+    "refreshThumbnails": "Оновити мініатюри",
+    "ofSelected": "{{count}} з {{total}} вибрано",
+    "local": "Локально",
+    "sort": "Сортування",
+    "gridDensity": "Щільність сітки",
+    "statusLabel": "Статус",
     "status": {
       "created": "Створено",
       "edited": "Відредаговано",
-      "validated": "Валідовано"
+      "validated": "Валідовано",
+      "all": "Всі",
+      "none": "Жоден"
     }
   },
   "admin": {

tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/api/sse.ts","./src/auth/authcontext.tsx","./src/auth/protectedroute.tsx","./src/components/confirmdialog.tsx","./src/components/detectionclasses.tsx","./src/components/flightcontext.tsx","./src/components/header.tsx","./src/components/helpmodal.tsx","./src/components/savedannotationscontext.tsx","./src/features/admin/adminpage.tsx","./src/features/annotations/annotationspage.tsx","./src/features/annotations/annotationssidebar.tsx","./src/features/annotations/canvaseditor.tsx","./src/features/annotations/medialist.tsx","./src/features/annotations/videoplayer.tsx","./src/features/annotations/classcolors.ts","./src/features/annotations/thumbnail.ts","./src/features/dataset/datasetpage.tsx","./src/features/flights/altitudechart.tsx","./src/features/flights/altitudedialog.tsx","./src/features/flights/drawcontrol.tsx","./src/features/flights/flightlistsidebar.tsx","./src/features/flights/flightmap.tsx","./src/features/flights/flightparamspanel.tsx","./src/features/flights/flightspage.tsx","./src/features/flights/jsoneditordialog.tsx","./src/features/flights/mappoint.tsx","./src/features/flights/minimap.tsx","./src/features/flights/waypointlist.tsx","./src/features/flights/windeffect.tsx","./src/features/flights/flightplanutils.ts","./src/features/flights/mapicons.ts","./src/features/flights/types.ts","./src/features/login/loginpage.tsx","./src/features/settings/settingspage.tsx","./src/hooks/usedebounce.ts","./src/hooks/useresizablepanel.ts","./src/i18n/i18n.ts","./src/types/index.ts"],"version":"5.7.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/api/endpoints.ts","./src/api/index.ts","./src/api/sse.ts","./src/auth/authcontext.tsx","./src/auth/protectedroute.tsx","./src/auth/index.ts","./src/class-colors/classcolors.ts","./src/class-colors/index.ts","./src/components/confirmdialog.tsx","./src/components/detectionclasses.tsx","./src/components/flightcontext.tsx","./src/components/header.tsx","./src/components/helpmodal.tsx","./src/components/savedannotationscontext.tsx","./src/components/index.ts","./src/features/admin/adminpage.tsx","./src/features/admin/classeditrow.tsx","./src/features/admin/modal.tsx","./src/features/admin/numberstepper.tsx","./src/features/admin/index.ts","./src/features/admin/useaisettings.ts","./src/features/admin/usegpssettings.ts","./src/features/annotations/annotationspage.tsx","./src/features/annotations/annotationssidebar.tsx","./src/features/annotations/canvaseditor.tsx","./src/features/annotations/medialist.tsx","./src/features/annotations/scrubber.tsx","./src/features/annotations/videoplayer.tsx","./src/features/annotations/index.ts","./src/features/annotations/thumbnail.ts","./src/features/annotations/time.ts","./src/features/dataset/datasetleftpanel.tsx","./src/features/dataset/datasetpage.tsx","./src/features/dataset/index.ts","./src/features/flights/altitudechart.tsx","./src/features/flights/altitudedialog.tsx","./src/features/flights/drawcontrol.tsx","./src/features/flights/flightlistsidebar.tsx","./src/features/flights/flightmap.tsx","./src/features/flights/flightparamspanel.tsx","./src/features/flights/flightspage.tsx","./src/features/flights/jsoneditordialog.tsx","./src/features/flights/mappoint.tsx","./src/features/flights/minimap.tsx","./src/features/flights/waypointlist.tsx","./src/features/flights/windeffect.tsx","./src/features/flights/flightplanutils.ts","./src/features/flights/index.ts","./src/features/flights/mapicons.ts","./src/features/flights/types.ts","./src/features/login/loginpage.tsx","./src/features/login/index.ts","./src/features/settings/settingspage.tsx","./src/features/settings/index.ts","./src/hooks/index.ts","./src/hooks/usedebounce.ts","./src/hooks/useresizablepanel.ts","./src/i18n/i18n.ts","./src/i18n/index.ts","./src/types/index.ts"],"version":"5.7.3"}