chore: release v0.9.8

- Add Toolbar and ToolbarButton to HistoryPage imports
- Add Tooltip import and filterBar style to MapPage
- Fix JailsTab test: use new Set<string>() instead of [] for activeJails
- Add --security-opt=no-new-privileges:true to push.sh build commands

Docker/VERSION

@@ -1 +1 @@
-v0.9.3
+v0.9.8

Docker/fail2ban-dev-config/fail2ban/jail.d/blocklist-import.conf

@@ -18,8 +18,8 @@ logpath    = /dev/null
 backend    = auto
 maxretry   = 1
 findtime   = 1d
-# Block imported IPs for one week.
+# Block imported IPs for 24 hours.
-bantime    = 1w
+bantime    = 86400
 
 # Never ban the Docker bridge network or localhost.
 ignoreip   = 127.0.0.0/8 ::1 172.16.0.0/12

Docker/push.sh

@@ -56,11 +56,8 @@ echo " Registry : ${REGISTRY}"
 echo " Tag      : ${TAG}"
 echo "============================================"
 
-if [[ "${ENGINE}" == "podman" ]]; then
+log "Logging in to ${REGISTRY}"
-    if ! podman login --get-login "${REGISTRY}" &>/dev/null; then
+"${ENGINE}" login "${REGISTRY}"
-        err "Not logged in. Run:\n  podman login ${REGISTRY}"
-    fi
-fi
 
 # ---------------------------------------------------------------------------
 # Build

Docker/release.sh

@@ -68,6 +68,17 @@ FRONT_PKG="${SCRIPT_DIR}/../frontend/package.json"
 sed -i "s/\"version\": \"[^\"]*\"/\"version\": \"${FRONT_VERSION}\"/" "${FRONT_PKG}"
 echo "frontend/package.json version updated → ${FRONT_VERSION}"
 
+# ---------------------------------------------------------------------------
+# Git tag
+# ---------------------------------------------------------------------------
+cd "${SCRIPT_DIR}/.."
+git add Docker/VERSION frontend/package.json
+git commit -m "chore: release ${NEW_TAG}"
+git tag -a "${NEW_TAG}" -m "Release ${NEW_TAG}"
+git push origin HEAD
+git push origin "${NEW_TAG}"
+echo "Git tag ${NEW_TAG} created and pushed."
+
 # ---------------------------------------------------------------------------
 # Push
 # ---------------------------------------------------------------------------

Docs/Refactoring.md

@@ -0,0 +1,238 @@
+# BanGUI — Refactoring Instructions for AI Agents
+
+This document is the single source of truth for any AI agent performing a refactoring task on the BanGUI codebase.  
+Read it in full before writing a single line of code.  
+The authoritative description of every module, its responsibilities, and the allowed dependency direction is in [Architekture.md](Architekture.md). Always cross-reference it.
+
+---
+
+## 0. Golden Rules
+
+1. **Architecture first.** Every change must comply with the layered architecture defined in [Architekture.md §2](Architekture.md). Dependencies flow inward: `routers → services → repositories`. Never add an import that reverses this direction.
+2. **One concern per file.** Each module has an explicitly stated purpose in [Architekture.md](Architekture.md). Do not add responsibilities to a module that do not belong there.
+3. **No behaviour change.** Refactoring must preserve all existing behaviour. If a function's public signature, return value, or side-effects must change, that is a feature — create a separate task for it.
+4. **Tests stay green.** Run the full test suite (`pytest backend/`) before and after every change. Do not submit work that introduces new failures.
+5. **Smallest diff wins.** Prefer targeted edits. Do not rewrite a file when a few lines suffice.
+
+---
+
+## 1. Before You Start
+
+### 1.1 Understand the project
+
+Read the following documents in order:
+
+1. [Architekture.md](Architekture.md) — full system overview, component map, module purposes, dependency rules.
+2. [Docs/Backend-Development.md](Backend-Development.md) — coding conventions, testing strategy, environment setup.
+3. [Docs/Tasks.md](Tasks.md) — open issues and planned work; avoid touching areas that have pending conflicting changes.
+
+### 1.2 Map the code to the architecture
+
+Before editing, locate every file that is in scope:
+
+```
+backend/app/
+  routers/          HTTP layer — zero business logic
+  services/         Business logic — orchestrates repositories + clients
+  repositories/     Data access — raw SQL only
+  models/           Pydantic schemas
+  tasks/            APScheduler jobs
+  utils/            Pure helpers, no framework deps
+  main.py           App factory, lifespan, middleware
+  config.py         Pydantic settings
+  dependencies.py   FastAPI Depends() wiring
+
+frontend/src/
+  api/              Typed fetch wrappers + endpoint constants
+  components/       Presentational UI, no API calls
+  hooks/            All state, side-effects, API calls
+  pages/            Route components — orchestration only
+  providers/        React context
+  types/            TypeScript interfaces
+  utils/            Pure helpers
+```
+
+Confirm which layer every file you intend to touch belongs to. If unsure, consult [Architekture.md §2.2](Architekture.md) (backend) or [Architekture.md §3.2](Architekture.md) (frontend).
+
+### 1.3 Run the baseline
+
+```bash
+# Backend
+pytest backend/ -x --tb=short
+
+# Frontend
+cd frontend && npm run test
+```
+
+Record the number of passing tests. After refactoring, that number must be equal or higher.
+
+---
+
+## 2. Backend Refactoring
+
+### 2.1 Routers (`app/routers/`)
+
+**Allowed content:** request parsing, response serialisation, dependency injection via `Depends()`, delegation to a service, HTTP error mapping.  
+**Forbidden content:** SQL queries, business logic, direct use of `fail2ban_client`, any logic that would also make sense in a unit test without an HTTP request.
+
+Checklist:
+- [ ] Every handler calls exactly one service method per logical operation.
+- [ ] No `if`/`elif` chains that implement business rules — move these to the service.
+- [ ] No raw SQL or repository imports.
+- [ ] All response models are Pydantic schemas from `app/models/`.
+- [ ] HTTP status codes are consistent with API conventions (200 OK, 201 Created, 204 No Content, 400/422 for client errors, 404 for missing resources, 500 only for unexpected failures).
+
+### 2.2 Services (`app/services/`)
+
+**Allowed content:** business rules, coordination between repositories and external clients, validation that goes beyond Pydantic, fail2ban command orchestration.  
+**Forbidden content:** raw SQL, direct aiosqlite calls, FastAPI `HTTPException` (raise domain exceptions instead and let the router or exception handler convert them).
+
+Checklist:
+- [ ] Service classes / functions accept plain Python types or domain models — not `Request` or `Response` objects.
+- [ ] No direct `aiosqlite` usage — go through a repository.
+- [ ] No `HTTPException` — raise a custom domain exception or a plain `ValueError`/`RuntimeError` with a clear message.
+- [ ] No circular imports between services — if two services need each other's logic, extract the shared logic to a utility or a third service.
+
+### 2.3 Repositories (`app/repositories/`)
+
+**Allowed content:** SQL queries, result mapping to domain models, transaction management.  
+**Forbidden content:** business logic, fail2ban calls, HTTP concerns, logging beyond debug-level traces.
+
+Checklist:
+- [ ] Every public method accepts a `db: aiosqlite.Connection` parameter — sessions are not managed internally.
+- [ ] Methods return typed domain models or plain Python primitives, never raw `aiosqlite.Row` objects exposed to callers.
+- [ ] No business rules (e.g., no "if this setting is missing, create a default" logic — that belongs in the service).
+
+### 2.4 Models (`app/models/`)
+
+- Keep **Request**, **Response**, and **Domain** model types clearly separated (see [Architekture.md §2.2](Architekture.md)).
+- Do not use response models as function arguments inside service or repository code.
+- Validators (`@field_validator`, `@model_validator`) belong in models only when they concern data shape, not business rules.
+
+### 2.5 Tasks (`app/tasks/`)
+
+- Tasks must be thin: fetch inputs → call one service method → log result.
+- Error handling must be inside the task (APScheduler swallows unhandled exceptions — log them explicitly).
+- No direct repository or `fail2ban_client` use; go through a service.
+
+### 2.6 Utils (`app/utils/`)
+
+- Must have zero framework dependencies (no FastAPI, no aiosqlite imports).
+- Must be pure or near-pure functions.
+- `fail2ban_client.py` is the single exception — it wraps the socket protocol but still has no service-layer logic.
+
+### 2.7 Dependencies (`app/dependencies.py`)
+
+- This file is the **only** place where service constructors are called and injected.
+- Do not construct services inside router handlers; always receive them via `Depends()`.
+
+---
+
+## 3. Frontend Refactoring
+
+### 3.1 Pages (`src/pages/`)
+
+**Allowed content:** composing components and hooks, layout decisions, routing.  
+**Forbidden content:** direct `fetch`/`axios` calls, inline business logic, state management beyond what is needed to coordinate child components.
+
+Checklist:
+- [ ] All data fetching goes through a hook from `src/hooks/`.
+- [ ] No API function from `src/api/` is called directly inside a page component.
+
+### 3.2 Components (`src/components/`)
+
+**Allowed content:** rendering, styling, event handlers that call prop callbacks.  
+**Forbidden content:** API calls, hook-level state (prefer lifting state to the page or a dedicated hook), direct use of `src/api/`.
+
+Checklist:
+- [ ] Components receive all data via props.
+- [ ] Components emit changes via callback props (`onXxx`).
+- [ ] No `useEffect` that calls an API function — that belongs in a hook.
+
+### 3.3 Hooks (`src/hooks/`)
+
+**Allowed content:** `useState`, `useEffect`, `useCallback`, `useRef`; calls to `src/api/`; local state derivation.  
+**Forbidden content:** JSX rendering, Fluent UI components.
+
+Checklist:
+- [ ] Each hook has a single, focused concern matching its name (e.g., `useBans` only manages ban data).
+- [ ] Hooks return a stable interface: `{ data, loading, error, refetch }` or equivalent.
+- [ ] Shared logic between hooks is extracted to `src/utils/` (pure) or a parent hook (stateful).
+
+### 3.4 API layer (`src/api/`)
+
+- `client.ts` is the only place that calls `fetch`. All other api files call `client.ts`.
+- `endpoints.ts` is the single source of truth for URL strings.
+- API functions must be typed: explicit request and response TypeScript interfaces from `src/types/`.
+
+### 3.5 Types (`src/types/`)
+
+- Interfaces must match the backend Pydantic response schemas exactly (field names, optionality).
+- Do not use `any`. Use `unknown` and narrow with type guards when the shape is genuinely unknown.
+
+---
+
+## 4. General Code Quality Rules
+
+### Naming
+- Python: `snake_case` for variables/functions, `PascalCase` for classes.
+- TypeScript: `camelCase` for variables/functions, `PascalCase` for components and types.
+- File names must match the primary export they contain.
+
+### Error handling
+- Backend: raise typed exceptions; map them to HTTP status codes in `main.py` exception handlers or in the router — nowhere else.
+- Frontend: all API call error states are represented in hook return values; never swallow errors silently.
+
+### Logging (backend)
+- Use `structlog` with bound context loggers — never bare `print()`.
+- Log at `debug` in repositories, `info` in services for meaningful events, `warning`/`error` in tasks and exception handlers.
+- Never log sensitive data (passwords, session tokens, raw IP lists larger than a handful of entries).
+
+### Async correctness (backend)
+- Every function that touches I/O (database, fail2ban socket, HTTP) must be `async def`.
+- Never call `asyncio.run()` inside a running event loop.
+- Do not use `time.sleep()` — use `await asyncio.sleep()`.
+
+---
+
+## 5. Refactoring Workflow
+
+Follow this sequence for every refactoring task:
+
+1. **Read** the relevant section of [Architekture.md](Architekture.md) for the files you will touch.
+2. **Run** the full test suite to confirm the baseline.
+3. **Identify** the violation or smell: which rule from this document does it break?
+4. **Plan** the minimal change: what is the smallest edit that fixes the violation?
+5. **Edit** the code. One logical change per commit.
+6. **Verify** imports: nothing new violates the dependency direction.
+7. **Run** the full test suite. All previously passing tests must still pass.
+8. **Update** any affected docstrings or inline comments to reflect the new structure.
+9. **Do not** update `Architekture.md` unless the refactor changes the documented structure — that requires a separate review.
+
+---
+
+## 6. Common Violations to Look For
+
+| Violation | Where it typically appears | Fix |
+|---|---|---|
+| Business logic in a router handler | `app/routers/*.py` | Extract logic to the corresponding service |
+| Direct `aiosqlite` calls in a service | `app/services/*.py` | Move the query into the matching repository |
+| `HTTPException` raised inside a service | `app/services/*.py` | Raise a domain exception; catch and convert it in the router or exception handler |
+| API call inside a React component | `src/components/*.tsx` | Move to a hook; pass data via props |
+| Hardcoded URL string in a hook or component | `src/hooks/*.ts`, `src/components/*.tsx` | Use the constant from `src/api/endpoints.ts` |
+| `any` type in TypeScript | anywhere in `src/` | Replace with a concrete interface from `src/types/` |
+| `print()` statements in production code | `backend/app/**/*.py` | Replace with `structlog` logger |
+| Synchronous I/O in an async function | `backend/app/**/*.py` | Use the async equivalent |
+| A repository method that contains an `if` with a business rule | `app/repositories/*.py` | Move the rule to the service layer |
+
+---
+
+## 7. Out of Scope
+
+Do not make the following changes unless explicitly instructed in a separate task:
+
+- Adding new API endpoints or pages.
+- Changing database schema or migration files.
+- Upgrading dependencies.
+- Altering Docker or CI configuration.
+- Modifying `Architekture.md` or `Tasks.md`.

Docs/Tasks.md

@@ -6,54 +6,87 @@ This document breaks the entire BanGUI project into development stages, ordered
 
 ## Open Issues
 
-### ~~1. Dashboard — Version Tag Mismatch~~ ✅ Done
+> **Architectural Review — 2026-03-16**
-
+> The findings below were identified by auditing every backend and frontend module against the rules in [Refactoring.md](Refactoring.md) and [Architekture.md](Architekture.md).
-**Implemented:**
+> Tasks are grouped by layer and ordered so that lower-level fixes (repositories, services) are done before the layers that depend on them.
-- `frontend/vite.config.ts`: reads `package.json#version` at build time and injects it as the global `__APP_VERSION__` via Vite `define`.
-- `frontend/src/vite-env.d.ts`: adds `declare const __APP_VERSION__: string` so TypeScript knows about the global.
-- `frontend/src/layouts/MainLayout.tsx`: renders `BanGUI v{__APP_VERSION__}` in the sidebar footer when expanded (hidden when collapsed).
-- `frontend/src/components/ServerStatusBar.tsx`: tooltip changed from `"fail2ban version"` to `"fail2ban daemon version"`.
-- `Docker/release.sh`: after bumping `VERSION`, also updates `frontend/package.json#version` via `sed` to keep them in sync.
-- `frontend/package.json`: version bumped from `0.9.0` to `0.9.3` to match `Docker/VERSION`.
-- Tests added: `src/components/__tests__/ServerStatusBar.test.tsx`, `src/layouts/__tests__/MainLayout.test.tsx`.
-
-**Problem:** The `ServerStatusBar` component on the Dashboard displays `v{status.version}`, which is the **fail2ban daemon version** (e.g. `v1.1.0`). The BanGUI application version lives in `Docker/VERSION` (e.g. `v0.9.3`) and is unrelated to the fail2ban version. Users see a version number they don't recognise and assume it reflects the BanGUI release.
-
-**Goal:** Make the distinction clear and expose the BanGUI application version.
-
-**Suggested approach:**
-1. Inject the BanGUI app version at build time — add a `define` entry in `frontend/vite.config.ts` that reads the `version` field from `frontend/package.json` (e.g. `__APP_VERSION__`). Keep `frontend/package.json` and `Docker/VERSION` in sync (update the release script `Docker/release.sh` or `Makefile` to write `package.json#version` from `VERSION`).
-2. Show the BanGUI version in the sidebar footer inside `MainLayout.tsx` (collapsed view: show only when expanded, or via tooltip). This is the natural place for an "about" version tag.
-3. Update the fail2ban version tooltip in `ServerStatusBar.tsx` from the generic `"fail2ban version"` to something like `"fail2ban daemon version"` so the two are no longer visually indistinguishable.
-
-**Files:** `frontend/vite.config.ts`, `frontend/package.json`, `Docker/VERSION`, `Docker/release.sh`, `frontend/src/layouts/MainLayout.tsx`, `frontend/src/components/ServerStatusBar.tsx`.
 
 ---
 
-### ~~2. Dashboard — Improve "Failures" Tooltip~~ ✅ Done
+### Task 1 — Blocklist-import jail ban time must be 24 hours
 
-**Implemented:** In `frontend/src/components/ServerStatusBar.tsx`, changed the `Failures:` label to `Failed Attempts:` and updated the tooltip from `"Currently failing IPs"` to `"Total failed authentication attempts currently tracked by fail2ban across all active jails"`. Updated `ServerStatusBar.test.tsx` to assert the new label text.
+**Status:** ✅ Done
 
-**Problem:** The `ServerStatusBar` shows a "Failures: 42" counter with the tooltip `"Currently failing IPs"`. In fail2ban terminology *failures* are individual **failed authentication attempts** tracked in the fail2ban DB, not the number of unique IPs that failed. The current wording is ambiguous and misleading — users may think it means broken connections or error states.
+**Context**
 
-**Goal:** Replace the tooltip with accurate, self-explanatory wording.
+When the blocklist importer bans an IP it calls `jail_service.ban_ip(socket_path, BLOCKLIST_JAIL, ip)` (see `backend/app/services/blocklist_service.py`, constant `BLOCKLIST_JAIL = "blocklist-import"`).  That call sends `set blocklist-import banip <ip>` to fail2ban, which applies the jail's configured `bantime`.  There is currently no guarantee that the `blocklist-import` jail's `bantime` is 86 400 s (24 h), so imported IPs may be released too early or held indefinitely depending on the jail template.
 
-**Suggested fix:** Change the `Tooltip` content for the Failures stat in `ServerStatusBar.tsx` from `"Currently failing IPs"` to something like `"Total failed authentication attempts currently tracked by fail2ban across all active jails"`. Additionally, consider renaming the label from `"Failures:"` to `"Failed Attempts:"` to match the tooltip language.
+**What to do**
 
-**Files:** `frontend/src/components/ServerStatusBar.tsx`.
+1. Locate every place the `blocklist-import` jail is defined or provisioned — check `Docker/fail2ban-dev-config/`, `Docker/Dockerfile.backend`, any jail template files, and the `setup_service.py` / `SetupPage.tsx` flow.
+2. Ensure the `blocklist-import` jail is created with `bantime = 86400` (24 h).  If the jail is created at runtime by the setup service, add or update the `bantime` parameter there.  If it is defined in a static config file, set `bantime = 86400` in that file.
+3. Verify that the existing `jail_service.ban_ip` call in `blocklist_service.import_source` does not need a per-call duration override; the jail-level default of 86 400 s is sufficient.
+4. Add or update the relevant unit/integration test in `backend/tests/` to assert that the blocklist-import jail is set up with a 24-hour bantime.
 
 ---
 
-### ~~3. Config → Server Tab — Move "Service Health" to Top~~ ✅ Done
+### Task 2 — Clicking a jail in Jail Overview navigates to Configuration → Jails
 
-**Implemented:** In `frontend/src/components/config/ServerTab.tsx`, moved `<ServerHealthSection />` from the end of the JSX return to be the first element rendered inside the tab container, before all settings fields.
+**Status:** ✅ Done
 
-**Problem:** In the Config page → Server tab, the `Service Health` panel (`ServerHealthSection`) is rendered at the bottom of the tab, after all settings sections (log level, log target, DB purge settings, map thresholds, reload/restart buttons). This means users must scroll past all editable fields to check service connectivity status, even though the health status is the most critical piece of context — it indicates whether the server is reachable at all.
+**Context**
 
-**Goal:** Move the `<ServerHealthSection />` block to the **top** of the `ServerTab` render output, before any settings fields.
+`JailsPage.tsx` renders a "Jail Overview" data grid with one row per jail (see `frontend/src/pages/JailsPage.tsx`).  Clicking a row currently does nothing.  `ConfigPage.tsx` hosts a tab bar with a "Jails" tab that renders `JailsTab`, which already uses a list/detail layout where a jail can be selected from the left pane.
 
-**Suggested fix:** In `frontend/src/components/config/ServerTab.tsx`, move the `{/* Service Health & Log Viewer section */}` block (currently at the end of the JSX return around line 415) to be the first section rendered inside the tab container.
+**What to do**
 
-**Files:** `frontend/src/components/config/ServerTab.tsx`.
+1. In `JailsPage.tsx`, make each jail name cell (or the entire row) a clickable element that navigates to `/config` with state `{ tab: "jails", jail: "<jailName>" }`.  Use `useNavigate` from `react-router-dom`; the existing `Link` import can be used or replaced with a programmatic navigate.
+2. In `ConfigPage.tsx`, read the location state on mount.  If `state.tab` is `"jails"`, set the active tab to `"jails"`.  Pass `state.jail` down to `<JailsTab initialJail={state.jail} />`.
+3. In `JailsTab.tsx`, accept an optional `initialJail?: string` prop.  When it is provided, pre-select that jail in the left-pane list on first render (i.e. set the selected jail state to the jail whose name matches `initialJail`).  This should scroll the item into view if the list is long.
+4. Add a frontend unit test in `frontend/src/pages/__tests__/` that mounts `JailsPage` with a mocked jail list, clicks a jail row, and asserts that `useNavigate` was called with the correct path and state.
 
 ---
+
+### Task 3 — Setting bantime / findtime throws 400 error due to unsupported `backend` set command
+
+**Status:** ✅ Done
+
+**Context**
+
+Editing ban time or find time in Configuration → Jails triggers an auto-save that sends the full `JailConfigUpdate` payload including the `backend` field.  `config_service.update_jail_config` then calls `set <jail> backend <value>` on the fail2ban socket, which returns error code 1 with the message `Invalid command 'backend' (no set action or not yet implemented)`.  Fail2ban does not support changing a jail's backend at runtime; it must be set before the jail starts.
+
+**What to do**
+
+**Backend** (`backend/app/services/config_service.py`):
+
+1. Remove the `if update.backend is not None: await _set("backend", update.backend)` block from `update_jail_config`.  Setting `backend` via the socket is not supported by fail2ban and will always fail.
+2. `log_encoding` has the same constraint — verify whether `set <jail> logencoding` is supported at runtime.  If it is not, remove it too.  If it is supported, leave it.
+3. Ensure the function still accepts and stores the `backend` value in the Pydantic model for read purposes; do not remove it from `JailConfigUpdate` or the response model.
+
+**Frontend** (`frontend/src/components/config/JailsTab.tsx`):
+
+4. Remove `backend` (and `log_encoding` if step 2 confirms it is unsupported) from the `autoSavePayload` memo so the field is never sent in the PATCH/PUT body.  The displayed value should remain read-only — show them as plain text or a disabled select so the user can see the current value without being able to trigger the broken set command.
+
+**Tests**:
+
+5. Add or update the backend test for `update_jail_config` to assert that no `set … backend` command is issued, and that a payload containing a `backend` field does not cause an error.
+
+---
+
+### Task 4 — Unify filter bar: use `DashboardFilterBar` in World Map and History pages
+
+**Status:** ✅ Done
+
+**Context**
+
+`DashboardPage.tsx` uses the shared `<DashboardFilterBar>` component for its time-range and origin-filter controls.  `MapPage.tsx` and `HistoryPage.tsx` each implement their own ad-hoc filter UI: `MapPage` uses a Fluent UI `<Select>` for time range plus an inline Toolbar for origin filter; `HistoryPage` uses a `<Select>` for time range with no origin filter toggle.  The `DashboardFilterBar` already supports both `TimeRange` and `BanOriginFilter` with the exact toggle-button style shown in the design reference.  All three pages should share the same filter appearance and interaction patterns.
+
+**What to do**
+
+1. **`MapPage.tsx`**: Replace the custom time-range `<Select>` and the inline origin-filter Toolbar with `<DashboardFilterBar timeRange={range} onTimeRangeChange={setRange} originFilter={originFilter} onOriginFilterChange={setOriginFilter} />`.  Remove the now-unused `TIME_RANGE_OPTIONS` constant and the `BAN_ORIGIN_FILTER_LABELS` inline usage.  Pass `originFilter` to `useMapData` if it does not already receive it (check the hook signature).
+2. **`HistoryPage.tsx`**: Replace the custom time-range `<Select>` with `<DashboardFilterBar>`.  Add an `originFilter` state (`BanOriginFilter`, default `"all"`) and wire it through `<DashboardFilterBar onOriginFilterChange={setOriginFilter} />`.  Pass the origin filter into the `useHistory` query so the backend receives it.  If `useHistory` / `HistoryQuery` does not yet accept `origin_filter`, add the parameter to the type and the hook's fetch call.
+3. Remove any local `filterBar` style definitions from `MapPage.tsx` and `HistoryPage.tsx` that duplicate what `DashboardFilterBar` already provides.
+4. Ensure the `DashboardFilterBar` component's props interface (`DashboardFilterBarProps` in `frontend/src/components/DashboardFilterBar.tsx`) is not changed in a breaking way; only the call sites change.
+5. Update or add component tests for `MapPage` and `HistoryPage` to assert that `DashboardFilterBar` is rendered and that changing the time range or origin filter updates the displayed data.
+
+---
+

backend/app/__init__.py

@@ -1 +1,50 @@
-"""BanGUI backend application package."""
+"""BanGUI backend application package.
+
+This package exposes the application version based on the project metadata.
+"""
+
+from __future__ import annotations
+
+from pathlib import Path
+from typing import Final
+
+import importlib.metadata
+import tomllib
+
+PACKAGE_NAME: Final[str] = "bangui-backend"
+
+
+def _read_pyproject_version() -> str:
+    """Read the project version from ``pyproject.toml``.
+
+    This is used as a fallback when the package metadata is not available (e.g.
+    when running directly from a source checkout without installing the package).
+    """
+
+    project_root = Path(__file__).resolve().parents[1]
+    pyproject_path = project_root / "pyproject.toml"
+    if not pyproject_path.exists():
+        raise FileNotFoundError(f"pyproject.toml not found at {pyproject_path}")
+
+    data = tomllib.loads(pyproject_path.read_text(encoding="utf-8"))
+    return str(data["project"]["version"])
+
+
+def _read_version() -> str:
+    """Return the current package version.
+
+    Prefer the project metadata in ``pyproject.toml`` when available, since this
+    is the single source of truth for local development and is kept in sync with
+    the frontend and Docker release version.
+
+    When running from an installed distribution where the ``pyproject.toml``
+    is not available, fall back to installed package metadata.
+    """
+
+    try:
+        return _read_pyproject_version()
+    except FileNotFoundError:
+        return importlib.metadata.version(PACKAGE_NAME)
+
+
+__version__ = _read_version()

backend/app/main.py

@@ -31,6 +31,7 @@ from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse, RedirectResponse
 from starlette.middleware.base import BaseHTTPMiddleware
 
+from app import __version__
 from app.config import Settings, get_settings
 from app.db import init_db
 from app.routers import (
@@ -365,7 +366,7 @@ def create_app(settings: Settings | None = None) -> FastAPI:
     app: FastAPI = FastAPI(
         title="BanGUI",
         description="Web interface for monitoring, managing, and configuring fail2ban.",
-        version="0.1.0",
+        version=__version__,
         lifespan=_lifespan,
     )
 

backend/app/routers/history.py

@@ -23,7 +23,7 @@ if TYPE_CHECKING:
 from fastapi import APIRouter, HTTPException, Query, Request
 
 from app.dependencies import AuthDep
-from app.models.ban import TimeRange
+from app.models.ban import BanOrigin, TimeRange
 from app.models.history import HistoryListResponse, IpDetailResponse
 from app.services import geo_service, history_service
 
@@ -52,6 +52,10 @@ async def get_history(
         default=None,
         description="Restrict results to IPs matching this prefix.",
     ),
+    origin: BanOrigin | None = Query(
+        default=None,
+        description="Filter by ban origin: 'blocklist' or 'selfblock'. Omit for all.",
+    ),
     page: int = Query(default=1, ge=1, description="1-based page number."),
     page_size: int = Query(
         default=_DEFAULT_PAGE_SIZE,
@@ -89,6 +93,7 @@ async def get_history(
         range_=range,
         jail=jail,
         ip_filter=ip,
+        origin=origin,
         page=page,
         page_size=page_size,
         geo_enricher=_enricher,

backend/app/services/config_service.py

@@ -368,8 +368,9 @@ async def update_jail_config(
         await _set("datepattern", update.date_pattern)
     if update.dns_mode is not None:
         await _set("usedns", update.dns_mode)
-    if update.backend is not None:
+    # Fail2ban does not support changing the log monitoring backend at runtime.
-        await _set("backend", update.backend)
+    # The configuration value is retained for read/display purposes but must not
+    # be applied via the socket API.
     if update.log_encoding is not None:
         await _set("logencoding", update.log_encoding)
     if update.prefregex is not None:

backend/app/services/history_service.py

@@ -16,7 +16,7 @@ from typing import Any
 import aiosqlite
 import structlog
 
-from app.models.ban import TIME_RANGE_SECONDS, TimeRange
+from app.models.ban import BLOCKLIST_JAIL, BanOrigin, TIME_RANGE_SECONDS, TimeRange
 from app.models.history import (
     HistoryBanItem,
     HistoryListResponse,
@@ -58,6 +58,7 @@ async def list_history(
     *,
     range_: TimeRange | None = None,
     jail: str | None = None,
+    origin: BanOrigin | None = None,
     ip_filter: str | None = None,
     page: int = 1,
     page_size: int = _DEFAULT_PAGE_SIZE,
@@ -73,6 +74,8 @@ async def list_history(
         socket_path: Path to the fail2ban Unix domain socket.
         range_: Time-range preset.  ``None`` means all-time (no time filter).
         jail: If given, restrict results to bans from this jail.
+        origin: Optional origin filter — ``"blocklist"`` restricts results to
+            the ``blocklist-import`` jail, ``"selfblock"`` excludes it.
         ip_filter: If given, restrict results to bans for this exact IP
             (or a prefix — the query uses ``LIKE ip_filter%``).
         page: 1-based page number (default: ``1``).
@@ -99,6 +102,14 @@ async def list_history(
         wheres.append("jail = ?")
         params.append(jail)
 
+    if origin is not None:
+        if origin == "blocklist":
+            wheres.append("jail = ?")
+            params.append(BLOCKLIST_JAIL)
+        elif origin == "selfblock":
+            wheres.append("jail != ?")
+            params.append(BLOCKLIST_JAIL)
+
     if ip_filter is not None:
         wheres.append("ip LIKE ?")
         params.append(f"{ip_filter}%")

backend/app/utils/jail_config.py

@@ -49,7 +49,7 @@ logpath    = /dev/null
 backend    = auto
 maxretry   = 1
 findtime   = 1d
-bantime    = 1w
+bantime    = 86400
 ignoreip   = 127.0.0.0/8 ::1 172.16.0.0/12
 """
 

backend/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "bangui-backend"
-version = "0.9.0"
+version = "0.9.4"
 description = "BanGUI backend — fail2ban web management interface"
 requires-python = ">=3.12"
 dependencies = [

backend/tests/test_routers/test_history.py

@@ -213,6 +213,18 @@ class TestHistoryList:
         _args, kwargs = mock_fn.call_args
         assert kwargs.get("range_") == "7d"
 
+    async def test_forwards_origin_filter(self, history_client: AsyncClient) -> None:
+        """The ``origin`` query parameter is forwarded to the service."""
+        mock_fn = AsyncMock(return_value=_make_history_list(n=0))
+        with patch(
+            "app.routers.history.history_service.list_history",
+            new=mock_fn,
+        ):
+            await history_client.get("/api/history?origin=blocklist")
+
+        _args, kwargs = mock_fn.call_args
+        assert kwargs.get("origin") == "blocklist"
+
     async def test_empty_result(self, history_client: AsyncClient) -> None:
         """An empty history returns items=[] and total=0."""
         with patch(

backend/tests/test_services/test_config_service.py

@@ -256,6 +256,27 @@ class TestUpdateJailConfig:
         assert "bantime" in keys
         assert "maxretry" in keys
 
+    async def test_ignores_backend_field(self) -> None:
+        """update_jail_config does not send a set command for backend."""
+        sent_commands: list[list[Any]] = []
+
+        async def _send(command: list[Any]) -> Any:
+            sent_commands.append(command)
+            return (0, "OK")
+
+        class _FakeClient:
+            def __init__(self, **_kw: Any) -> None:
+                self.send = AsyncMock(side_effect=_send)
+
+        from app.models.config import JailConfigUpdate
+
+        update = JailConfigUpdate(backend="polling")
+        with patch("app.services.config_service.Fail2BanClient", _FakeClient):
+            await config_service.update_jail_config(_SOCKET, "sshd", update)
+
+        keys = [cmd[2] for cmd in sent_commands if len(cmd) >= 3 and cmd[0] == "set"]
+        assert "backend" not in keys
+
     async def test_raises_validation_error_on_bad_regex(self) -> None:
         """update_jail_config raises ConfigValidationError for invalid regex."""
         from app.models.config import JailConfigUpdate

backend/tests/test_utils/test_jail_config.py

@@ -65,6 +65,10 @@ class TestEnsureJailConfigs:
             content = _read(jail_d, conf_file)
             assert "enabled    = false" in content
 
+        # Blocklist-import jail must have a 24-hour ban time
+        blocklist_conf = _read(jail_d, _BLOCKLIST_CONF)
+        assert "bantime    = 86400" in blocklist_conf
+
         # .local files must set enabled = true and nothing else
         for local_file in (_MANUAL_LOCAL, _BLOCKLIST_LOCAL):
             content = _read(jail_d, local_file)

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "bangui-frontend",
-  "version": "0.1.0",
+  "version": "0.9.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bangui-frontend",
-      "version": "0.1.0",
+      "version": "0.9.4",
       "dependencies": {
         "@fluentui/react-components": "^9.55.0",
         "@fluentui/react-icons": "^2.0.257",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bangui-frontend",
   "private": true,
-  "version": "0.9.3",
+  "version": "0.9.8",
   "description": "BanGUI frontend — fail2ban web management interface",
   "type": "module",
   "scripts": {

frontend/src/api/history.ts

@@ -18,6 +18,7 @@ export async function fetchHistory(
 ): Promise<HistoryListResponse> {
   const params = new URLSearchParams();
   if (query.range) params.set("range", query.range);
+  if (query.origin) params.set("origin", query.origin);
   if (query.jail) params.set("jail", query.jail);
   if (query.ip) params.set("ip", query.ip);
   if (query.page !== undefined) params.set("page", String(query.page));

frontend/src/components/config/JailsTab.tsx

@@ -216,7 +216,6 @@ function JailConfigDetail({
       ignore_regex: ignoreRegex,
       date_pattern: datePattern !== "" ? datePattern : null,
       dns_mode: dnsMode,
-      backend,
       log_encoding: logEncoding,
       prefregex: prefRegex !== "" ? prefRegex : null,
       bantime_escalation: {
@@ -231,7 +230,7 @@ function JailConfigDetail({
     }),
     [
       banTime, findTime, maxRetry, failRegex, ignoreRegex, datePattern,
-      dnsMode, backend, logEncoding, prefRegex, escEnabled, escFactor,
+      dnsMode, logEncoding, prefRegex, escEnabled, escFactor,
       escFormula, escMultipliers, escMaxTime, escRndTime, escOverallJails,
       jail.ban_time, jail.find_time, jail.max_retry,
     ],
@@ -758,7 +757,12 @@ function InactiveJailDetail({
  *
  * @returns JSX element.
  */
-export function JailsTab(): React.JSX.Element {
+interface JailsTabProps {
+  /** Jail name to pre-select when the component mounts. */
+  initialJail?: string;
+}
+
+export function JailsTab({ initialJail }: JailsTabProps): React.JSX.Element {
   const styles = useConfigStyles();
   const { jails, loading, error, refresh, updateJail } =
     useJailConfigs();
@@ -819,6 +823,13 @@ export function JailsTab(): React.JSX.Element {
     return [...activeItems, ...inactiveItems];
   }, [jails, inactiveJails]);
 
+  useEffect(() => {
+    if (!initialJail || selectedName) return;
+    if (listItems.some((item) => item.name === initialJail)) {
+      setSelectedName(initialJail);
+    }
+  }, [initialJail, listItems, selectedName]);
+
   const activeJailMap = useMemo(
     () => new Map(jails.map((j) => [j.name, j])),
     [jails],

frontend/src/components/config/__tests__/JailsTab.test.tsx

@@ -0,0 +1,77 @@
+import { describe, expect, it, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { FluentProvider, webLightTheme } from "@fluentui/react-components";
+
+import { JailsTab } from "../JailsTab";
+import type { JailConfig } from "../../../types/config";
+import { useAutoSave } from "../../../hooks/useAutoSave";
+import { useJailConfigs } from "../../../hooks/useConfig";
+import { useConfigActiveStatus } from "../../../hooks/useConfigActiveStatus";
+
+vi.mock("../../../hooks/useAutoSave");
+vi.mock("../../../hooks/useConfig");
+vi.mock("../../../hooks/useConfigActiveStatus");
+vi.mock("../../../api/config", () => ({
+  fetchInactiveJails: vi.fn().mockResolvedValue({ jails: [] }),
+  deactivateJail: vi.fn(),
+  deleteJailLocalOverride: vi.fn(),
+  addLogPath: vi.fn(),
+  deleteLogPath: vi.fn(),
+  fetchJailConfigFileContent: vi.fn(),
+  updateJailConfigFile: vi.fn(),
+  validateJailConfig: vi.fn(),
+}));
+
+const mockUseAutoSave = vi.mocked(useAutoSave);
+const mockUseJailConfigs = vi.mocked(useJailConfigs);
+const mockUseConfigActiveStatus = vi.mocked(useConfigActiveStatus);
+
+const basicJail: JailConfig = {
+  name: "sshd",
+  ban_time: 600,
+  max_retry: 5,
+  find_time: 600,
+  fail_regex: [],
+  ignore_regex: [],
+  log_paths: [],
+  date_pattern: null,
+  log_encoding: "auto",
+  backend: "polling",
+  use_dns: "warn",
+  prefregex: "",
+  actions: [],
+  bantime_escalation: null,
+};
+
+describe("JailsTab", () => {
+  it("does not include backend in auto-save payload", () => {
+    const autoSavePayloads: Array<Record<string, unknown>> = [];
+    mockUseAutoSave.mockImplementation((value) => {
+      autoSavePayloads.push(value as Record<string, unknown>);
+      return { status: "idle", errorText: null, retry: vi.fn() };
+    });
+
+    mockUseJailConfigs.mockReturnValue({
+      jails: [basicJail],
+      total: 1,
+      loading: false,
+      error: null,
+      refresh: vi.fn(),
+      updateJail: vi.fn(),
+      reloadAll: vi.fn(),
+    });
+
+    mockUseConfigActiveStatus.mockReturnValue({ activeJails: new Set<string>() });
+
+    render(
+      <FluentProvider theme={webLightTheme}>
+        <JailsTab initialJail="sshd" />
+      </FluentProvider>,
+    );
+
+    expect(autoSavePayloads.length).toBeGreaterThan(0);
+    const lastPayload = autoSavePayloads[autoSavePayloads.length - 1];
+
+    expect(lastPayload).not.toHaveProperty("backend");
+  });
+});

frontend/src/pages/ConfigPage.tsx

@@ -13,7 +13,8 @@
  *   Export       — raw file editors for jail, filter, and action files
  */
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
 import { Tab, TabList, Text, makeStyles, tokens } from "@fluentui/react-components";
 import {
   ActionsTab,
@@ -58,8 +59,16 @@ type TabValue =
 
 export function ConfigPage(): React.JSX.Element {
   const styles = useStyles();
+  const location = useLocation();
   const [tab, setTab] = useState<TabValue>("jails");
 
+  useEffect(() => {
+    const state = location.state as { tab?: string; jail?: string } | null;
+    if (state?.tab === "jails") {
+      setTab("jails");
+    }
+  }, [location.state]);
+
   return (
     <div className={styles.page}>
       <div className={styles.header}>
@@ -86,7 +95,11 @@ export function ConfigPage(): React.JSX.Element {
       </TabList>
 
       <div className={styles.tabContent} key={tab}>
-        {tab === "jails" && <JailsTab />}
+        {tab === "jails" && (
+          <JailsTab
+            initialJail={(location.state as { jail?: string } | null)?.jail}
+          />
+        )}
         {tab === "filters" && <FiltersTab />}
         {tab === "actions" && <ActionsTab />}
         {tab === "server" && <ServerTab />}

frontend/src/pages/HistoryPage.tsx

@@ -19,7 +19,6 @@ import {
   Input,
   MessageBar,
   MessageBarBody,
-  Select,
   Spinner,
   Table,
   TableBody,
@@ -42,8 +41,10 @@ import {
   ChevronLeftRegular,
   ChevronRightRegular,
 } from "@fluentui/react-icons";
+import { DashboardFilterBar } from "../components/DashboardFilterBar";
 import { useHistory, useIpHistory } from "../hooks/useHistory";
 import type { HistoryBanItem, HistoryQuery, TimeRange } from "../types/history";
+import type { BanOriginFilter } from "../types/ban";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -54,13 +55,6 @@ const HIGH_BAN_THRESHOLD = 5;
 
 const PAGE_SIZE = 50;
 
-const TIME_RANGE_OPTIONS: { label: string; value: TimeRange }[] = [
-  { label: "Last 24 hours", value: "24h" },
-  { label: "Last 7 days", value: "7d" },
-  { label: "Last 30 days", value: "30d" },
-  { label: "Last 365 days", value: "365d" },
-];
-
 // ---------------------------------------------------------------------------
 // Styles
 // ---------------------------------------------------------------------------
@@ -381,7 +375,8 @@ export function HistoryPage(): React.JSX.Element {
   const styles = useStyles();
 
   // Filter state
-  const [range, setRange] = useState<TimeRange | undefined>(undefined);
+  const [range, setRange] = useState<TimeRange>("24h");
+  const [originFilter, setOriginFilter] = useState<BanOriginFilter>("all");
   const [jailFilter, setJailFilter] = useState("");
   const [ipFilter, setIpFilter] = useState("");
   const [appliedQuery, setAppliedQuery] = useState<HistoryQuery>({
@@ -397,11 +392,12 @@ export function HistoryPage(): React.JSX.Element {
   const applyFilters = useCallback((): void => {
     setAppliedQuery({
       range: range,
+      origin: originFilter !== "all" ? originFilter : undefined,
       jail: jailFilter.trim() || undefined,
       ip: ipFilter.trim() || undefined,
       page_size: PAGE_SIZE,
     });
-  }, [range, jailFilter, ipFilter]);
+  }, [range, originFilter, jailFilter, ipFilter]);
 
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
 
@@ -452,24 +448,16 @@ export function HistoryPage(): React.JSX.Element {
       {/* Filter bar                                                        */}
       {/* ---------------------------------------------------------------- */}
       <div className={styles.filterRow}>
-        <div className={styles.filterLabel}>
+        <DashboardFilterBar
-          <Text size={200}>Time range</Text>
+          timeRange={range}
-          <Select
+          onTimeRangeChange={(value) => {
-            aria-label="Time range"
+            setRange(value);
-            value={range ?? ""}
+          }}
-            onChange={(_ev, data): void => {
+          originFilter={originFilter}
-              setRange(data.value === "" ? undefined : (data.value as TimeRange));
+          onOriginFilterChange={(value) => {
-            }}
+            setOriginFilter(value);
-            size="small"
+          }}
-          >
+        />
-            <option value="">All time</option>
-            {TIME_RANGE_OPTIONS.map((o) => (
-              <option key={o.value} value={o.value}>
-                {o.label}
-              </option>
-            ))}
-          </Select>
-        </div>
 
         <div className={styles.filterLabel}>
           <Text size={200}>Jail</Text>
@@ -506,7 +494,8 @@ export function HistoryPage(): React.JSX.Element {
           appearance="subtle"
           size="small"
           onClick={(): void => {
-            setRange(undefined);
+            setRange("24h");
+            setOriginFilter("all");
             setJailFilter("");
             setIpFilter("");
             setAppliedQuery({ page_size: PAGE_SIZE });

frontend/src/pages/JailsPage.tsx

@@ -9,7 +9,7 @@
  *    geo-location details.
  */
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import {
   Badge,
   Button,
@@ -42,7 +42,7 @@ import {
   SearchRegular,
   StopRegular,
 } from "@fluentui/react-icons";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useActiveBans, useIpLookup, useJails } from "../hooks/useJails";
 import type { JailSummary } from "../types/jail";
 import { ApiError } from "../api/client";
@@ -151,77 +151,88 @@ function fmtSeconds(s: number): string {
   return `${String(Math.round(s / 3600))}h`;
 }
 
-// ---------------------------------------------------------------------------
-// Jail overview columns
-// ---------------------------------------------------------------------------
-
-const jailColumns: TableColumnDefinition<JailSummary>[] = [
-  createTableColumn<JailSummary>({
-    columnId: "name",
-    renderHeaderCell: () => "Jail",
-    renderCell: (j) => (
-      <Link to={`/jails/${encodeURIComponent(j.name)}`} style={{ textDecoration: "none" }}>
-        <Text style={{ fontFamily: "Consolas, 'Courier New', monospace", fontSize: "0.85rem" }}>
-          {j.name}
-        </Text>
-      </Link>
-    ),
-  }),
-  createTableColumn<JailSummary>({
-    columnId: "status",
-    renderHeaderCell: () => "Status",
-    renderCell: (j) => {
-      if (!j.running) return <Badge appearance="filled" color="danger">stopped</Badge>;
-      if (j.idle) return <Badge appearance="filled" color="warning">idle</Badge>;
-      return <Badge appearance="filled" color="success">running</Badge>;
-    },
-  }),
-  createTableColumn<JailSummary>({
-    columnId: "backend",
-    renderHeaderCell: () => "Backend",
-    renderCell: (j) => <Text size={200}>{j.backend}</Text>,
-  }),
-  createTableColumn<JailSummary>({
-    columnId: "banned",
-    renderHeaderCell: () => "Banned",
-    renderCell: (j) => (
-      <Text size={200}>{j.status ? String(j.status.currently_banned) : "—"}</Text>
-    ),
-  }),
-  createTableColumn<JailSummary>({
-    columnId: "failed",
-    renderHeaderCell: () => "Failed",
-    renderCell: (j) => (
-      <Text size={200}>{j.status ? String(j.status.currently_failed) : "—"}</Text>
-    ),
-  }),
-  createTableColumn<JailSummary>({
-    columnId: "findTime",
-    renderHeaderCell: () => "Find Time",
-    renderCell: (j) => <Text size={200}>{fmtSeconds(j.find_time)}</Text>,
-  }),
-  createTableColumn<JailSummary>({
-    columnId: "banTime",
-    renderHeaderCell: () => "Ban Time",
-    renderCell: (j) => <Text size={200}>{fmtSeconds(j.ban_time)}</Text>,
-  }),
-  createTableColumn<JailSummary>({
-    columnId: "maxRetry",
-    renderHeaderCell: () => "Max Retry",
-    renderCell: (j) => <Text size={200}>{String(j.max_retry)}</Text>,
-  }),
-];
-
 // ---------------------------------------------------------------------------
 // Sub-component: Jail overview section
 // ---------------------------------------------------------------------------
 
 function JailOverviewSection(): React.JSX.Element {
   const styles = useStyles();
+  const navigate = useNavigate();
   const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } =
     useJails();
   const [opError, setOpError] = useState<string | null>(null);
 
+  const jailColumns = useMemo<TableColumnDefinition<JailSummary>[]>(
+    () => [
+      createTableColumn<JailSummary>({
+        columnId: "name",
+        renderHeaderCell: () => "Jail",
+        renderCell: (j) => (
+          <Button
+            appearance="transparent"
+            size="small"
+            style={{ padding: 0, minWidth: 0, justifyContent: "flex-start" }}
+            onClick={() =>
+              navigate("/config", {
+                state: { tab: "jails", jail: j.name },
+              })
+            }
+          >
+            <Text
+              style={{ fontFamily: "Consolas, 'Courier New', monospace", fontSize: "0.85rem" }}
+            >
+              {j.name}
+            </Text>
+          </Button>
+        ),
+      }),
+      createTableColumn<JailSummary>({
+        columnId: "status",
+        renderHeaderCell: () => "Status",
+        renderCell: (j) => {
+          if (!j.running) return <Badge appearance="filled" color="danger">stopped</Badge>;
+          if (j.idle) return <Badge appearance="filled" color="warning">idle</Badge>;
+          return <Badge appearance="filled" color="success">running</Badge>;
+        },
+      }),
+      createTableColumn<JailSummary>({
+        columnId: "backend",
+        renderHeaderCell: () => "Backend",
+        renderCell: (j) => <Text size={200}>{j.backend}</Text>,
+      }),
+      createTableColumn<JailSummary>({
+        columnId: "banned",
+        renderHeaderCell: () => "Banned",
+        renderCell: (j) => (
+          <Text size={200}>{j.status ? String(j.status.currently_banned) : "—"}</Text>
+        ),
+      }),
+      createTableColumn<JailSummary>({
+        columnId: "failed",
+        renderHeaderCell: () => "Failed",
+        renderCell: (j) => (
+          <Text size={200}>{j.status ? String(j.status.currently_failed) : "—"}</Text>
+        ),
+      }),
+      createTableColumn<JailSummary>({
+        columnId: "findTime",
+        renderHeaderCell: () => "Find Time",
+        renderCell: (j) => <Text size={200}>{fmtSeconds(j.find_time)}</Text>,
+      }),
+      createTableColumn<JailSummary>({
+        columnId: "banTime",
+        renderHeaderCell: () => "Ban Time",
+        renderCell: (j) => <Text size={200}>{fmtSeconds(j.ban_time)}</Text>,
+      }),
+      createTableColumn<JailSummary>({
+        columnId: "maxRetry",
+        renderHeaderCell: () => "Max Retry",
+        renderCell: (j) => <Text size={200}>{String(j.max_retry)}</Text>,
+      }),
+    ],
+    [navigate],
+  );
+
   const handle = (fn: () => Promise<void>): void => {
     setOpError(null);
     fn().catch((err: unknown) => {

frontend/src/pages/MapPage.tsx

@@ -12,7 +12,6 @@ import {
   Button,
   MessageBar,
   MessageBarBody,
-  Select,
   Spinner,
   Table,
   TableBody,
@@ -22,19 +21,17 @@ import {
   TableHeaderCell,
   TableRow,
   Text,
-  Toolbar,
-  ToolbarButton,
   Tooltip,
   makeStyles,
   tokens,
 } from "@fluentui/react-components";
 import { ArrowCounterclockwiseRegular, DismissRegular } from "@fluentui/react-icons";
+import { DashboardFilterBar } from "../components/DashboardFilterBar";
 import { WorldMap } from "../components/WorldMap";
 import { useMapData } from "../hooks/useMapData";
 import { fetchMapColorThresholds } from "../api/config";
 import type { TimeRange } from "../types/map";
 import type { BanOriginFilter } from "../types/ban";
-import { BAN_ORIGIN_FILTER_LABELS } from "../types/ban";
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -56,34 +53,23 @@ const useStyles = makeStyles({
     flexWrap: "wrap",
     gap: tokens.spacingHorizontalM,
   },
-  filterBar: {
-    display: "flex",
-    alignItems: "center",
-    gap: tokens.spacingHorizontalM,
-    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
-    background: tokens.colorNeutralBackground3,
-    borderRadius: tokens.borderRadiusMedium,
-    border: `1px solid ${tokens.colorNeutralStroke2}`,
-  },
   tableWrapper: {
     overflow: "auto",
     maxHeight: "420px",
     borderRadius: tokens.borderRadiusMedium,
     border: `1px solid ${tokens.colorNeutralStroke1}`,
   },
+  filterBar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: tokens.spacingHorizontalM,
+    padding: tokens.spacingVerticalS,
+    borderRadius: tokens.borderRadiusMedium,
+    backgroundColor: tokens.colorNeutralBackground2,
+  },
 });
 
-// ---------------------------------------------------------------------------
-// Time-range options
-// ---------------------------------------------------------------------------
-
-const TIME_RANGE_OPTIONS: { label: string; value: TimeRange }[] = [
-  { label: "Last 24 hours", value: "24h" },
-  { label: "Last 7 days", value: "7d" },
-  { label: "Last 30 days", value: "30d" },
-  { label: "Last 365 days", value: "365d" },
-];
-
 // ---------------------------------------------------------------------------
 // MapPage
 // ---------------------------------------------------------------------------
@@ -136,41 +122,20 @@ export function MapPage(): React.JSX.Element {
           World Map
         </Text>
 
-        <Toolbar size="small">
+        <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalM, flexWrap: "wrap" }}>
-          <Select
+          <DashboardFilterBar
-            aria-label="Time range"
+            timeRange={range}
-            value={range}
+            onTimeRangeChange={(value) => {
-            onChange={(_ev, data): void => {
+              setRange(value);
-              setRange(data.value as TimeRange);
               setSelectedCountry(null);
             }}
-            size="small"
+            originFilter={originFilter}
-          >
+            onOriginFilterChange={(value) => {
-            {TIME_RANGE_OPTIONS.map((o) => (
+              setOriginFilter(value);
-              <option key={o.value} value={o.value}>
-                {o.label}
-              </option>
-            ))}
-          </Select>
-
-          {/* Origin filter */}
-          <Select
-            aria-label="Origin filter"
-            value={originFilter}
-            onChange={(_ev, data): void => {
-              setOriginFilter(data.value as BanOriginFilter);
               setSelectedCountry(null);
             }}
-            size="small"
+          />
-          >
+          <Button
-            {(["all", "blocklist", "selfblock"] as BanOriginFilter[]).map((f) => (
-              <option key={f} value={f}>
-                {BAN_ORIGIN_FILTER_LABELS[f]}
-              </option>
-            ))}
-          </Select>
-
-          <ToolbarButton
             icon={<ArrowCounterclockwiseRegular />}
             onClick={(): void => {
               refresh();
@@ -178,7 +143,7 @@ export function MapPage(): React.JSX.Element {
             disabled={loading}
             title="Refresh"
           />
-        </Toolbar>
+        </div>
       </div>
 
       {/* ---------------------------------------------------------------- */}

frontend/src/pages/__tests__/ConfigPage.test.tsx

@@ -6,7 +6,11 @@ import { ConfigPage } from "../ConfigPage";
 
 // Mock all tab components to avoid deep render trees and API calls.
 vi.mock("../../components/config", () => ({
-  JailsTab: () => <div data-testid="jails-tab">JailsTab</div>,
+  JailsTab: ({ initialJail }: { initialJail?: string }) => (
+    <div data-testid="jails-tab" data-initial-jail={initialJail}>
+      JailsTab
+    </div>
+  ),
   FiltersTab: () => <div data-testid="filters-tab">FiltersTab</div>,
   ActionsTab: () => <div data-testid="actions-tab">ActionsTab</div>,
   ServerTab: () => <div data-testid="server-tab">ServerTab</div>,
@@ -53,4 +57,22 @@ describe("ConfigPage", () => {
     renderPage();
     expect(screen.getByRole("heading", { name: /configuration/i })).toBeInTheDocument();
   });
+
+  it("selects the Jails tab based on location state", () => {
+    render(
+      <MemoryRouter
+        initialEntries={[
+          { pathname: "/config", state: { tab: "jails", jail: "sshd" } },
+        ]}
+      >
+        <FluentProvider theme={webLightTheme}>
+          <ConfigPage />
+        </FluentProvider>
+      </MemoryRouter>,
+    );
+
+    const jailsTab = screen.getByTestId("jails-tab");
+    expect(jailsTab).toBeInTheDocument();
+    expect(jailsTab).toHaveAttribute("data-initial-jail", "sshd");
+  });
 });

frontend/src/pages/__tests__/HistoryPage.test.tsx

@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FluentProvider, webLightTheme } from "@fluentui/react-components";
+import { HistoryPage } from "../HistoryPage";
+
+let lastQuery: Record<string, unknown> | null = null;
+const mockUseHistory = vi.fn((query: Record<string, unknown>) => {
+  lastQuery = query;
+  return {
+    items: [],
+    total: 0,
+    page: 1,
+    loading: false,
+    error: null,
+    setPage: vi.fn(),
+    refresh: vi.fn(),
+  };
+});
+
+vi.mock("../hooks/useHistory", () => ({
+  useHistory: (query: Record<string, unknown>) => mockUseHistory(query),
+  useIpHistory: () => ({ detail: null, loading: false, error: null, refresh: vi.fn() }),
+}));
+
+vi.mock("../components/WorldMap", () => ({
+  WorldMap: () => <div data-testid="world-map" />,
+}));
+
+vi.mock("../api/config", () => ({
+  fetchMapColorThresholds: async () => ({
+    threshold_low: 10,
+    threshold_medium: 50,
+    threshold_high: 100,
+  }),
+}));
+
+describe("HistoryPage", () => {
+  it("renders DashboardFilterBar and applies origin+range filters", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <FluentProvider theme={webLightTheme}>
+        <HistoryPage />
+      </FluentProvider>,
+    );
+
+    // Initial load should include the default query.
+    expect(lastQuery).toEqual({ page_size: 50 });
+
+    // Change the time-range and origin filter, then apply.
+    await user.click(screen.getByRole("button", { name: /Last 7 days/i }));
+    await user.click(screen.getByRole("button", { name: /Blocklist/i }));
+    await user.click(screen.getByRole("button", { name: /Apply/i }));
+
+    expect(lastQuery).toMatchObject({ range: "7d", origin: "blocklist" });
+  });
+});

frontend/src/pages/__tests__/JailsPage.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FluentProvider, webLightTheme } from "@fluentui/react-components";
+import { MemoryRouter } from "react-router-dom";
+import { JailsPage } from "../JailsPage";
+import type { JailSummary } from "../../types/jail";
+
+const mockNavigate = vi.fn();
+
+vi.mock("react-router-dom", async () => {
+  const actual = (await vi.importActual<typeof import("react-router-dom")>(
+    "react-router-dom",
+  )) as unknown as Record<string, unknown>;
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+vi.mock("../hooks/useJails", () => ({
+  useJails: () => ({
+    jails: [
+      {
+        name: "sshd",
+        enabled: true,
+        running: true,
+        idle: false,
+        backend: "systemd",
+        find_time: 600,
+        ban_time: 3600,
+        max_retry: 5,
+        status: {
+          currently_banned: 1,
+          total_banned: 10,
+          currently_failed: 0,
+          total_failed: 0,
+        },
+      },
+    ] as JailSummary[],
+    total: 1,
+    loading: false,
+    error: null,
+    refresh: vi.fn(),
+    startJail: vi.fn().mockResolvedValue(undefined),
+    stopJail: vi.fn().mockResolvedValue(undefined),
+    setIdle: vi.fn().mockResolvedValue(undefined),
+    reloadJail: vi.fn().mockResolvedValue(undefined),
+    reloadAll: vi.fn().mockResolvedValue(undefined),
+  }),
+}));
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <FluentProvider theme={webLightTheme}>
+        <JailsPage />
+      </FluentProvider>
+    </MemoryRouter>,
+  );
+}
+
+describe("JailsPage", () => {
+  it("navigates to Configuration → Jails when a jail is clicked", async () => {
+    renderPage();
+    const user = userEvent.setup();
+
+    await user.click(screen.getByText("sshd"));
+
+    expect(mockNavigate).toHaveBeenCalledWith("/config", {
+      state: { tab: "jails", jail: "sshd" },
+    });
+  });
+});

frontend/src/pages/__tests__/MapPage.test.tsx

@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FluentProvider, webLightTheme } from "@fluentui/react-components";
+import { MapPage } from "../MapPage";
+
+const mockFetchMapColorThresholds = vi.fn(async () => ({
+  threshold_low: 10,
+  threshold_medium: 50,
+  threshold_high: 100,
+}));
+
+let lastArgs: { range: string; origin: string } = { range: "", origin: "" };
+const mockUseMapData = vi.fn((range: string, origin: string) => {
+  lastArgs = { range, origin };
+  return {
+    countries: {},
+    countryNames: {},
+    bans: [],
+    total: 0,
+    loading: false,
+    error: null,
+    refresh: vi.fn(),
+  };
+});
+
+vi.mock("../hooks/useMapData", () => ({
+  useMapData: (range: string, origin: string) => mockUseMapData(range, origin),
+}));
+
+vi.mock("../api/config", async () => ({
+  fetchMapColorThresholds: mockFetchMapColorThresholds,
+}));
+
+vi.mock("../components/WorldMap", () => ({
+  WorldMap: () => <div data-testid="world-map" />,
+}));
+
+describe("MapPage", () => {
+  it("renders DashboardFilterBar and updates data when filters change", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <FluentProvider theme={webLightTheme}>
+        <MapPage />
+      </FluentProvider>,
+    );
+
+    // Initial load should call useMapData with default filters.
+    expect(lastArgs).toEqual({ range: "24h", origin: "all" });
+
+    await user.click(screen.getByRole("button", { name: /Last 7 days/i }));
+    expect(lastArgs.range).toBe("7d");
+
+    await user.click(screen.getByRole("button", { name: /Blocklist/i }));
+    expect(lastArgs.origin).toBe("blocklist");
+  });
+});

frontend/src/types/history.ts

@@ -50,8 +50,11 @@ export interface IpDetailResponse {
 }
 
 /** Query parameters supported by GET /api/history */
+import type { BanOriginFilter } from "./ban";
+
 export interface HistoryQuery {
   range?: TimeRange;
+  origin?: BanOriginFilter;
   jail?: string;
   ip?: string;
   page?: number;

pytest.ini

@@ -0,0 +1,10 @@
+[pytest]
+# Ensure pytest-asyncio is in auto mode for async tests without explicit markers.
+asyncio_mode = auto
+
+# Run the backend test suite from the repository root.
+testpaths = backend/tests
+pythonpath = backend
+
+# Keep coverage output consistent with backend/pyproject.toml settings.
+addopts = --cov=backend/app --cov-report=term-missing