From 38b9fc59cfbff6d8b5a9a60154cf6fb5f86966e0 Mon Sep 17 00:00:00 2001
From: Tim de Groot <tim-degroot@live.nl>
Date: Sun, 14 Jun 2026 23:45:40 +0200
Subject: [PATCH 1/5] docs: add CLAUDE.md project instructions for AI agents

Provides AI agents with context on the pipeline architecture, entry
points, and pointers to the .github/skills/ domain-specific guides.
---
 CLAUDE.md | 135 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000..b14b0dce
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,135 @@
+# robotframework-dashboard — Copilot Instructions
+
+This file gives AI agents and contributors the context needed to work effectively in this codebase.
+
+## How to Use the Skills Files
+
+Before starting work on any non-trivial task, read the relevant skill file from `.github/skills/`. Each file contains deep domain knowledge that avoids re-exploring the codebase from scratch. Use the table in the **Skills** section below to pick the right one(s). Read the skill file with a file-read tool before making any changes.
+
+---
+
+## Project Purpose
+
+`robotframework-dashboard` is a Python CLI tool that reads Robot Framework `output.xml` execution results, stores them in a SQLite database, and generates a fully self-contained HTML dashboard with interactive charts, tables, and filters. No web server is required to view the output — a single `.html` file contains all data, JS, and CSS.
+
+---
+
+## Core Pipeline: Python CLI → HTML Template → JavaScript
+
+The entire system is this three-stage pipeline:
+
+```
+1. PYTHON CLI
+   output.xml files
+       └─► OutputProcessor (robot.api ResultVisitor)
+               └─► SQLite database (runs / suites / tests / keywords tables)
+
+2. HTML TEMPLATE
+   database.get_data()
+       └─► DashboardGenerator
+               ├─► DependencyProcessor: merges all JS modules (topological sort) → inline <script>
+               ├─► DependencyProcessor: merges all CSS files → inline <style>
+               ├─► CDN or offline dependency tags
+               ├─► Data encoded as: JSON → zlib compress → base64 → string literal in HTML
+               └─► templates/dashboard.html (string placeholder replacement) → robot_dashboard.html
+
+3. JAVASCRIPT (runs in the browser)
+   js/variables/data.js decodes the embedded base64 data back to JS arrays
+       └─► Chart.js charts, DataTables, filters, layout — all from local data, zero server calls
+```
+
+The output is a **single `.html` file** that is entirely self-contained. All Robot Framework data is embedded as compressed strings; all JS and CSS is inlined.
+
+---
+
+## Entry Points
+
+| File | Role |
+|---|---|
+| `robotframework_dashboard/main.py` | CLI entry point (`robotdashboard` command) |
+| `robotframework_dashboard/robotdashboard.py` | `RobotDashboard` class — orchestrates all 5 pipeline steps |
+| `robotframework_dashboard/arguments.py` | `ArgumentParser` wrapping `argparse` |
+| `robotframework_dashboard/processors.py` | `OutputProcessor` + 4 `ResultVisitor` subclasses |
+| `robotframework_dashboard/database.py` | Built-in SQLite implementation |
+| `robotframework_dashboard/abstractdb.py` | `AbstractDatabaseProcessor` ABC (custom DB backends) |
+| `robotframework_dashboard/queries.py` | All SQL strings as module-level constants |
+| `robotframework_dashboard/dashboard.py` | `DashboardGenerator` — template rendering |
+| `robotframework_dashboard/dependencies.py` | `DependencyProcessor` — JS/CSS inlining and CDN switching |
+| `robotframework_dashboard/server.py` | Optional FastAPI server (`--server` flag) |
+
+---
+
+## JavaScript and CSS
+
+All frontend source lives under `robotframework_dashboard/js/` and `robotframework_dashboard/css/`. **There is no Node.js bundler (no webpack, Vite, or Rollup) for the dashboard.** Bundling is done in Python by `DependencyProcessor` at HTML generation time.
+
+Key JS directories:
+
+| Path | Contents |
+|---|---|
+| `js/variables/` | Global state, data decoding, settings, graph registry |
+| `js/graph_creation/` | Chart.js setup per tab (overview, run, suite, test, keyword, compare, tables) |
+| `js/graph_data/` | Data transformation modules that feed Chart.js |
+| `js/main.js` | Startup entry — imports and calls all setup functions |
+| `js/admin_page/` | Separate JS bundle for the server's `/admin` page only |
+
+See `.github/skills/js-bundling.md` for details on how JS modules are resolved, ordered, and embedded.
+
+---
+
+## HTML Templates
+
+Templates live in `robotframework_dashboard/templates/`. They use simple string placeholder tokens (not Jinja2):
+
+- `templates/dashboard.html` → generates `robot_dashboard.html`
+- `templates/admin.html` → generates the server's `/admin` page
+
+Key placeholders: `<!-- placeholder_javascript -->`, `<!-- placeholder_css -->`, `<!-- placeholder_dependencies -->`, `"placeholder_runs"`, `"placeholder_suites"`, `"placeholder_tests"`, `"placeholder_keywords"`.
+
+---
+
+## Database
+
+- Built-in: SQLite via `database.py`. Tables: `runs`, `suites`, `tests`, `keywords`.
+- Custom backends: implement `AbstractDatabaseProcessor` from `abstractdb.py`, point to it with `--databaseclass`.
+- Run identity: `run_start` timestamp. Duplicate runs are silently skipped.
+- Schema migrations are handled inline at DB open time via `ALTER TABLE ADD COLUMN`.
+
+---
+
+## Skills
+
+The `.github/skills/` directory contains domain-specific knowledge files:
+
+| Skill file | When to use |
+|---|---|
+| `.github/skills/project-architecture.md` | Understanding how components connect and navigating the codebase |
+| `.github/skills/dashboard.md` | Dashboard pages, Chart.js graphs, chart types, graph data/creation modules |
+| `.github/skills/js-bundling.md` | How JS/CSS is bundled and embedded into the HTML (no Node.js bundler) |
+| `.github/skills/js-feature-patterns.md` | **End-to-end patterns for adding new JS features**: custom widget checklist, GridStack item lifecycle, undo/redo snapshot pattern, localStorage-only keys |
+| `.github/skills/conventions-and-gotchas.md` | Edge cases, run identity, offline mode, custom DBs, server auth model |
+| `.github/skills/coding-style.md` | Python/JS/CSS style conventions |
+| `.github/skills/workflows.md` | CLI usage, running tests, server mode, docs site |
+| `.github/skills/dev-workflow.md` | How to run the tool locally during development (no install required), dev loop for JS/CSS/template changes |
+| `.github/skills/robotframework-tests.md` | Test suite structure, pabot parallelism, how to add tests |
+| `.github/skills/fix-robot-tests.md` | **Step-by-step workflow for fixing failing robot tests** — parsing output.xml, updating stale screenshots, fixing tab-navigation timeouts, using Docker to regenerate references |
+| `.github/skills/python-unit-tests.md` | Python unit tests (pytest, coverage, test layout, fixtures) |
+| `.github/skills/javascript-unit-tests.md` | JavaScript unit tests (Vitest, mocking patterns, which modules are testable) |
+| `.github/skills/server-api.md` | All REST endpoints, authentication, log linking, auto-update behavior |
+| `.github/skills/filtering-and-settings.md` | Filter pipeline, settings object, localStorage persistence, layout/GridStack system, **filter profiles** (data structure, all profile functions, merge modal) |
+| `.github/skills/listener-integration.md` | Listener script (`robotdashboardlistener.py`), all listener arguments, pabot/RobotCode usage, server endpoints called |
+| `.github/skills/documentation.md` | All documentation locations (docs/, README.md, CONTRIBUTING.md, setup.py), page map, and checklist for keeping docs in sync when features change |
+| `.github/skills/js-patterns.md` | How JavaScript code is currently structured in this project: module layout, variable placement, naming patterns, GridStack/Chart.js usage |
+| `.github/skills/js-coding-standards.md` | Rules for writing JavaScript: naming conventions, where to put variables, function patterns, scope, localStorage, DOM access |
+| `.github/skills/release-actions.md` | **Step-by-step release workflow** — bump version, update test fixtures, regenerate example dashboard/database, update changelog, produce Slack notes |
+
+---
+
+## Key Rules for AI Agents
+
+- **Never break the placeholder token names** in templates. Replacement is positional string substitution.
+- **When adding a new JS module**, import it from an existing module so `DependencyProcessor` can discover it via the dependency graph. The topological sort handles ordering automatically.
+- **Data always flows**: parse → DB → HTML. Do not bypass the pipeline.
+- **`package.json` is for the VitePress docs site only.** It has nothing to do with bundling dashboard JS.
+- **Offline mode** (`--offlinedependencies`) reads from `robotframework_dashboard/dependencies/`. Keep local copies in sync when upgrading library versions.
+- **Validate JS/CSS/template changes by regenerating and opening the HTML** — see `.github/skills/dev-workflow.md` ("Validating JS/CSS/Template Changes"). A clean `import`/syntax check is not sufficient; rendering, layout, and click-handler bugs only surface in the bundled output. The `tests/` folder has ready-made output.xml fixtures: `python -m robotframework_dashboard.main -f tests -n robot_dashboard.html`.

From 465b2b3f53e970837481486e967c8d2419231a65 Mon Sep 17 00:00:00 2001
From: Tim de Groot <tim-degroot@live.nl>
Date: Sun, 14 Jun 2026 23:45:49 +0200
Subject: [PATCH 2/5] docs: fix CLI flag documentation in dev-workflow skill

-g/--generatedashboard is a boolean flag, not an output path; use
-n/--namedashboard for a custom HTML filename. Also correct the
default output filename pattern and database name (robot_results.db),
and document the Git Bash trailing-backslash path gotcha.
---
 .github/skills/dev-workflow.md | 40 ++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/.github/skills/dev-workflow.md b/.github/skills/dev-workflow.md
index f78916fa..60fa6001 100644
--- a/.github/skills/dev-workflow.md
+++ b/.github/skills/dev-workflow.md
@@ -21,7 +21,7 @@ This invokes `robotframework_dashboard/main.py:main()` directly and supports all
 ## Common Dev Invocations
 
 ```powershell
-# Generate a dashboard from a single output.xml into robot_dashboard.html (default output)
+# Generate a dashboard from a single output.xml (default output: robot_dashboard_<timestamp>.html)
 python -m robotframework_dashboard.main -o results\output-20251225-172034.xml
 
 # Generate from multiple output.xml files
@@ -30,18 +30,20 @@ python -m robotframework_dashboard.main -o results\output-20251225-172034.xml re
 # Generate from a folder of output.xml files
 python -m robotframework_dashboard.main -f results
 
-# Use a custom output HTML path
-python -m robotframework_dashboard.main -o results\output-20251225-172034.xml -g my_dashboard.html
+# Use a custom output HTML path (-n / --namedashboard, NOT -g)
+python -m robotframework_dashboard.main -o results\output-20251225-172034.xml -n my_dashboard.html
 
 # Offline mode (no CDN, all dependencies embedded)
 python -m robotframework_dashboard.main -o results\output-20251225-172034.xml --offlinedependencies
 ```
 
+`-g` / `--generatedashboard` is a **boolean** flag (default `True`) — it does not take a filename. Use `-n` / `--namedashboard` for a custom output path.
+
 ## Generated Output
 
-- Default output file: `robot_dashboard.html` in the current working directory.
+- Default output file: `robot_dashboard_<yyyymmdd-hhmmss>.html` in the current working directory, unless `-n` is given.
 - The file is fully self-contained: all JS, CSS, and data are embedded — open it directly in a browser with no server needed.
-- Re-running does **not** overwrite an existing database by default. To reset, delete the `.db` file (default: `robot_database.db`) before re-running, or specify a different `-d DATABASEPATH`.
+- Default database file: `robot_results.db`. Re-running does **not** overwrite an existing database. To reset, delete the `.db` file before re-running, or specify a different `-d DATABASEPATH`.
 
 ## Inspecting JS/CSS Changes
 
@@ -61,7 +63,31 @@ Template changes in `robotframework_dashboard/templates/dashboard.html` also req
 ```powershell
 # 1. Make changes to js/, css/, or templates/
 # 2. Regenerate (delete old db if you want a clean state)
-Remove-Item robot_database.db -ErrorAction SilentlyContinue
-python -m robotframework_dashboard.main -o results\output-20251225-172034.xml
+Remove-Item robot_results.db -ErrorAction SilentlyContinue
+python -m robotframework_dashboard.main -o results\output-20251225-172034.xml -n robot_dashboard.html
 # 3. Open robot_dashboard.html in a browser
 ```
+
+## Validating JS/CSS/Template Changes
+
+After any change to `robotframework_dashboard/js/`, `css/`, or `templates/dashboard.html`, **regenerate the HTML** to confirm the bundler/template still produce valid output — importing a module and checking it doesn't throw is not enough, since most bugs (rendering, layout, icon sizing, click handlers) only show up in the bundled, rendered output.
+
+The repo ships with output.xml fixtures under `tests/` that work as a ready-made dataset:
+
+```bash
+# From the repo root (Git Bash / Linux / macOS)
+python -m robotframework_dashboard.main -f tests -n robot_dashboard.html
+```
+
+```powershell
+# Windows PowerShell
+python -m robotframework_dashboard.main -f tests -n robot_dashboard.html
+```
+
+**Do not install or drive a browser (Playwright, Selenium, etc.) as part of this validation.** Regenerating the dashboard without errors, plus a careful read of the diff, is the AI agent's verification step. Actually opening `robot_dashboard.html` and exercising the feature in a browser (e.g. enabling "Customize Layout" to check edit-mode controls) is a manual step left to the developer — describe what to click and what to expect instead of trying to automate it.
+
+Clean up the generated `robot_dashboard.html` and `robot_results.db` once done if they aren't meant to be committed.
+
+### Gotcha: trailing backslashes in paths (Git Bash)
+
+In Git Bash on Windows, a Windows-style path with a trailing backslash (e.g. `-f .\tests\`) gets the backslash interpreted as escaping the following space — this silently merges the *next* argument (and its value) into the path, so e.g. `-f .\tests\ -n robot_dashboard.html` is parsed as a single `-f` value and `-n`/`robot_dashboard.html` are swallowed, silently falling back to defaults. Use a forward-slash path with no trailing slash instead: `-f tests`.

From 9f0476bf488d7bf7a347c4722704f720fa3cb77c Mon Sep 17 00:00:00 2001
From: Tim de Groot <tim-degroot@live.nl>
Date: Sun, 14 Jun 2026 23:46:04 +0200
Subject: [PATCH 3/5] feat: add move-to-first/last controls, section action
 icons, and multi-widget add modal

- Add "Move to First" / "Move to Last" controls to every graph, stat
  widget, link widget, and custom section in edit mode, repacking the
  grid via a new move_widget_in_grid() helper.
- Replace the dashed "+ Add ..." drop tiles with action icons in each
  section header (add stat widget / add link widget / add custom
  section), wired through a shared build_move_controls_html() and
  apply_widget_control_icons() helper.
- Add a "Multiple" tab to the Add Stat Widget modal that lets users
  toggle on any number of stats at once, optionally edit their titles,
  and add them all with shared or random colors.
- Update CSS for the new pinned top-right control cluster and remove
  the now-unused add-widget tile styles.
- Update customization docs for the new controls and modal tabs.
---
 docs/customization.md                         |  22 +-
 robotframework_dashboard/css/base.css         |  16 ++
 robotframework_dashboard/css/components.css   | 187 ++++++----------
 robotframework_dashboard/js/common.js         |  11 +
 robotframework_dashboard/js/customsections.js |  38 +---
 robotframework_dashboard/js/layout.js         |  96 +++++++-
 robotframework_dashboard/js/linkwidgets.js    |  37 +---
 robotframework_dashboard/js/statwidgets.js    | 207 +++++++++++++++---
 robotframework_dashboard/js/theme.js          |  37 +++-
 .../js/variables/graphmetadata.js             |  26 +++
 .../js/variables/information.js               |   9 +
 robotframework_dashboard/js/variables/svg.js  |  16 ++
 .../templates/dashboard.html                  |  95 ++++++--
 13 files changed, 554 insertions(+), 243 deletions(-)

diff --git a/docs/customization.md b/docs/customization.md
index 57a1f309..cc9082e5 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -20,7 +20,7 @@ The video above walks through three examples of how you can tailor the dashboard
 See how you can reshape the main dashboard layout by:
 
 - resizing individual graphs  
-- reordering graphs within their sections  
+- reordering graphs within their sections, either by dragging or using the **Move to First** / **Move to Last** buttons (see [Move to First / Move to Last](#12-move-to-first-move-to-last))
 - hiding graphs you don’t want to display  
 - rearranging entire sections to match your preferred workflow  
 - it is also possible to combine all sections into a single unified view, see [Settings - Defaults Tab](/settings#defaults-settings-defaults-tab), for the details
@@ -100,9 +100,11 @@ Stat widgets display a single KPI value (executed runs, failed tests, etc.) as a
 To add a stat widget:
 
 1. Enter **Customize view** mode.
-2. Click the **"+ Add stat widget"** tile that appears at the bottom of the target grid.
-3. In the popup, choose the **statistic** to display and optionally pick a **text color** and **background color**.
-4. Click **Add** — the widget is placed in the grid and can be dragged or resized like any other graph.
+2. Click the **"Add stat widget"** icon in the section header (top-right of the section, next to the other header icons) of the target grid.
+3. The popup has two tabs:
+   - **Single** — choose one **statistic** to display and optionally pick a **text color** and **background color**, then click **Add Widget**.
+   - **Multiple** — toggle on any number of stats from the list (use **Toggle all** to select/deselect everything at once), optionally adjust each widget's title, and either use **random colors** or pick a shared **text color** and **background color** for all of them. Click **Add Selected Widgets** to add them all at once.
+4. The widget(s) are placed in the grid and can be dragged or resized like any other graph.
 5. Click **Save** to persist the layout to localStorage.
 
 To remove a stat widget, enter Customize view mode and click the **✕** button in its top-right corner.
@@ -116,7 +118,7 @@ Custom section dividers are full-width horizontal bars you can place anywhere in
 To add a section divider:
 
 1. Enter **Customize view** mode.
-2. Click the **"+ Add custom section"** tile at the bottom of the unified grid.
+2. Click the **"Add custom section"** icon in the unified section's header (top-right, next to the other header icons).
 3. In the popup, enter a **title** (up to 60 characters) and optionally choose a **text color** and **background color**.
 4. Click **Add** — the divider spans the full grid width and can be dragged to any row.
 5. Click **Save** to persist the layout to localStorage.
@@ -132,7 +134,7 @@ Link widgets are clickable tiles you can add to any dashboard section grid. Each
 To add a link widget:
 
 1. Enter **Customize view** mode.
-2. Click the **"+ Add link widget"** tile that appears at the bottom of the target grid.
+2. Click the **"Add link widget"** icon in the section header (top-right of the section, next to the other header icons) of the target grid.
 3. In the popup, enter a **label** (the display name shown on the tile) and the **URL** to navigate to.
 4. Check **Open in new tab** if you want the link to open in a new browser tab. Leave it unchecked to navigate in the current tab.
 5. Optionally pick a **text color** and **background color** for the tile.
@@ -143,4 +145,10 @@ To remove a link widget, enter Customize view mode and click the **✕** button
 
 > Link widgets are not clickable while Customize view mode is active — this prevents accidental navigation while you are rearranging the layout. Clicking the tile in normal mode navigates to the configured URL.
 
-Link widgets are stored in localStorage and survive page reloads.
\ No newline at end of file
+Link widgets are stored in localStorage and survive page reloads.
+
+## 12. Move to First / Move to Last
+
+While in **Customize view** mode, every graph and widget shows a **"Move to First"** and **"Move to Last"** control alongside its other edit icons. Clicking one of these instantly moves the item to the start or end of its grid, without needing to drag it past every other item in between.
+
+This works for regular graphs as well as stat widgets, link widgets, and custom section dividers. Click **Save** to persist the new order to localStorage.
\ No newline at end of file
diff --git a/robotframework_dashboard/css/base.css b/robotframework_dashboard/css/base.css
index 3778cb7b..f4d5080b 100644
--- a/robotframework_dashboard/css/base.css
+++ b/robotframework_dashboard/css/base.css
@@ -124,6 +124,14 @@ body {
 .boxplot-graph:hover svg,
 .shown-graph:hover svg,
 .hidden-graph:hover svg,
+.move-to-first-graph:hover svg,
+.move-to-last-graph:hover svg,
+.add-stat-widget-header:hover svg,
+.add-link-widget-header:hover svg,
+.add-section-header:hover svg,
+.delete-custom-stat-widget:hover svg,
+.delete-custom-link-widget:hover svg,
+.delete-custom-section:hover svg,
 .shown-section:hover svg,
 .hidden-section:hover svg,
 .collapse-icon:hover svg,
@@ -188,6 +196,14 @@ body.lock-scroll {
 .boxplot-graph,
 .shown-graph,
 .hidden-graph,
+.move-to-first-graph,
+.move-to-last-graph,
+.add-stat-widget-header,
+.add-link-widget-header,
+.add-section-header,
+.delete-custom-stat-widget,
+.delete-custom-link-widget,
+.delete-custom-section,
 .shown-section,
 .hidden-section,
 .move-up-table,
diff --git a/robotframework_dashboard/css/components.css b/robotframework_dashboard/css/components.css
index 62ff4e47..64d7b3b8 100644
--- a/robotframework_dashboard/css/components.css
+++ b/robotframework_dashboard/css/components.css
@@ -152,80 +152,44 @@
   align-items: center;
 }
 
-/* Add Widget tile shown in customize-view mode */
-.add-stat-widget-tile {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px dashed var(--bs-border-color, rgba(128,128,128,0.4));
-  border-radius: 8px;
-  transition: border-color 0.15s, background-color 0.15s;
+/* Color picker buttons inside the Add Stat Widget modal */
+.stat-color-btn {
+  min-width: 60px;
 }
 
-.add-stat-widget-tile:hover {
-  border-color: var(--color-text);
-  background-color: rgba(128,128,128,0.08);
+/* "All" tab stat list inside the Add Stat Widget modal */
+.add-all-widgets-list {
+  max-height: 300px;
+  overflow-y: auto;
 }
 
-.add-stat-widget-tile-inner {
+.add-all-widgets-row {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 0.25rem;
-  transition: opacity 0.15s;
-  user-select: none;
-}
-
-.add-stat-widget-plus {
-  font-size: 2rem;
-  font-weight: 300;
-  line-height: 1;
-}
-
-.add-stat-widget-tile-label {
-  font-size: 0.8rem;
-  font-weight: 500;
-}
-
-/* Color picker buttons inside the Add Stat Widget modal */
-.stat-color-btn {
-  min-width: 60px;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
-/* Add custom section horizontal tile — shown in customize-view mode (unified grid only) */
-.add-section-tile {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px dashed var(--bs-border-color, rgba(128,128,128,0.4));
-  border-radius: 8px;
-  transition: border-color 0.15s, background-color 0.15s;
+.add-all-widgets-row .form-check {
+  margin-bottom: 0;
 }
 
-.add-section-tile:hover {
-  border-color: var(--color-text);
-  background-color: rgba(128,128,128,0.08);
+.add-all-widgets-row .add-all-widgets-title {
+  flex: 1 1 auto;
 }
 
-.add-section-tile-inner {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-  user-select: none;
+.add-all-widgets-row .add-all-widgets-badge {
+  flex: 0 0 auto;
 }
 
-.add-section-plus {
-  font-size: 1.5rem;
-  font-weight: 300;
-  line-height: 1;
+.add-all-widgets-group-heading {
+  font-weight: 600;
+  margin-top: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
-.add-section-tile-label {
-  font-size: 0.85rem;
-  font-weight: 500;
+.add-all-widgets-group-heading:first-child {
+  margin-top: 0;
 }
 
 /* Custom section divider bar rendered inside the unified GridStack */
@@ -247,28 +211,16 @@
   user-select: none;
 }
 
-/* Delete button on custom section dividers — pinned to top-right */
-.delete-custom-section {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 1;
-}
-
-/* Delete button on custom stat widgets — pinned to top-right, out of flex flow */
-.delete-custom-stat-widget {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 1;
-}
-
-/* Delete button on custom link widgets — pinned to top-right, out of flex flow */
-.delete-custom-link-widget {
+/* Move to first/last + delete controls on custom widgets/sections — pinned to top-right,
+   out of flex flow, sized and spaced like the icons in graph headers */
+.custom-widget-move-controls {
   position: absolute;
   top: 5px;
   right: 5px;
   z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 /* Compact flex layout for custom stat widgets — works at any GridStack size */
@@ -292,7 +244,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: calc(100% - 20px); /* leave room so text doesn't run under the delete button */
+  max-width: 100%;
+}
+
+/* Leave room for the move/delete controls pinned to the top-right in edit mode */
+.stat-widget-inner:has(.custom-widget-move-controls) .stat-widget-title {
+  max-width: calc(100% - 96px);
 }
 
 /* When the item is very short (h=1 row ≈ 60px) switch to a side-by-side row */
@@ -312,14 +269,25 @@
 .grid-stack-item[data-gs-h="1"] .stat-widget-title {
   flex: 1 1 0;
   text-align: left;
-  max-width: calc(100% - 40px); /* value + delete button */
+  max-width: calc(100% - 40px); /* leave room for the value */
+}
+
+/* Leave room for the move/delete controls pinned to the top-right in edit mode */
+.grid-stack-item[gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-widget-title,
+.grid-stack-item[data-gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-widget-title {
+  max-width: calc(100% - 136px); /* value + move/delete controls */
 }
 
 .grid-stack-item[gs-h="1"] .stat-value,
 .grid-stack-item[data-gs-h="1"] .stat-value {
   flex-shrink: 0;
   font-size: 1.1rem;
-  margin-right: 20px; /* keep clear of the absolute delete button */
+}
+
+/* Leave room for the move/delete controls pinned to the top-right in edit mode */
+.grid-stack-item[gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-value,
+.grid-stack-item[data-gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-value {
+  margin-right: 96px;
 }
 
 .grid-stack-item-content.blue-bg   { background-color: rgba(13, 110, 253, 0.15); }
@@ -329,42 +297,6 @@
 
 /* ─── Custom link widget ─────────────────────────────────────────────────── */
 
-/* Add link widget tile — same visual language as add-stat-widget-tile */
-.add-link-widget-tile {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px dashed var(--bs-border-color, rgba(128,128,128,0.4));
-  border-radius: 8px;
-  transition: border-color 0.15s, background-color 0.15s;
-}
-
-.add-link-widget-tile:hover {
-  border-color: var(--color-text);
-  background-color: rgba(128,128,128,0.08);
-}
-
-.add-link-widget-tile-inner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  transition: opacity 0.15s;
-  user-select: none;
-}
-
-.add-link-widget-plus {
-  font-size: 2rem;
-  font-weight: 300;
-  line-height: 1;
-}
-
-.add-link-widget-tile-label {
-  font-size: 0.8rem;
-  font-weight: 500;
-}
-
 /* Inner layout — mirrors stat-widget-inner */
 .link-widget-inner {
   position: relative;
@@ -387,7 +319,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: calc(100% - 20px); /* leave room so text doesn't run under delete button */
+  max-width: 100%;
 }
 
 /* URL preview — small muted text below the label */
@@ -397,7 +329,13 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: calc(100% - 20px);
+  max-width: 100%;
+}
+
+/* Leave room for the move/delete controls pinned to the top-right in edit mode */
+.link-widget-inner:has(.custom-widget-move-controls) .link-widget-label,
+.link-widget-inner:has(.custom-widget-move-controls) .link-widget-url {
+  max-width: calc(100% - 96px);
 }
 
 /* Clickable in non-edit mode */
@@ -432,7 +370,13 @@
   flex-shrink: 0;
   font-size: 0.72rem;
   text-align: right;
-  max-width: calc(40% - 30px); /* keep clear of the absolute delete button */
+  max-width: 40%;
+}
+
+/* Leave room for the move/delete controls pinned to the top-right in edit mode */
+.grid-stack-item[gs-h="1"] .link-widget-inner:has(.custom-widget-move-controls) .link-widget-url {
+  max-width: calc(40% - 96px);
+  margin-right: 96px;
 }
 
 /* ─────────────────────────────────────────────────────────────────────────── */
@@ -543,6 +487,13 @@
   gap: 8px;
 }
 
+/* Icon row in section card headers (add stat/link widget, add section, move/show/hide section) */
+.section-header-icons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .grid-stack-item-content .graph-body {
   flex: 1 1 auto;
   display: flex;
diff --git a/robotframework_dashboard/js/common.js b/robotframework_dashboard/js/common.js
index deae2b3e..ef0f3d85 100644
--- a/robotframework_dashboard/js/common.js
+++ b/robotframework_dashboard/js/common.js
@@ -235,6 +235,16 @@ function apply_bg_class(itemEl, bgColor) {
     if (bgColor) content.classList.add(bgColor);
 }
 
+// Builds the "Move to First" / "Move to Last" controls (and optional delete button) shared by
+// custom widgets/sections in edit mode — pinned together in the top-right corner
+function build_move_controls_html(deleteBtnHtml = '') {
+    return `<div class="custom-widget-move-controls">
+                <a class="move-to-first-graph information" data-title="Move to First"></a>
+                <a class="move-to-last-graph information" data-title="Move to Last"></a>
+                ${deleteBtnHtml}
+            </div>`;
+}
+
 // Populates a color picker container with button-per-color entries
 function fill_color_picker(picker, colors, defaultValue) {
     picker.innerHTML = '';
@@ -275,4 +285,5 @@ export {
     generate_id,
     apply_bg_class,
     fill_color_picker,
+    build_move_controls_html,
 };
\ No newline at end of file
diff --git a/robotframework_dashboard/js/customsections.js b/robotframework_dashboard/js/customsections.js
index b9904765..83745aa4 100644
--- a/robotframework_dashboard/js/customsections.js
+++ b/robotframework_dashboard/js/customsections.js
@@ -1,16 +1,18 @@
 import { settings } from './variables/settings.js';
 import { set_local_storage_item } from './localstorage.js';
-import { generate_id, apply_bg_class, fill_color_picker } from './common.js';
+import { generate_id, apply_bg_class, fill_color_picker, build_move_controls_html } from './common.js';
 import { STAT_WIDGET_COLORS, STAT_WIDGET_BG_COLORS } from './variables/statwidgetdefs.js';
+import { apply_widget_control_icons } from './theme.js';
 
 // Builds the inner HTML for a custom section divider bar
 function build_section_divider_html(section, editMode) {
     const deleteBtn = editMode
-        ? `<button type="button" class="btn-close btn-close-sm delete-custom-section" aria-label="Remove section" data-section-id="${section.id}"></button>`
+        ? `<a class="delete-custom-section information" role="button" aria-label="Remove section" data-title="Remove section" data-section-id="${section.id}"></a>`
         : '';
+    const moveBtns = editMode ? build_move_controls_html(deleteBtn) : '';
     return `<div class="custom-section-divider ${section.textColor || 'white-text'}">
+                ${moveBtns}
                 <span class="custom-section-title">${section.title}</span>
-                ${deleteBtn}
             </div>`;
 }
 
@@ -43,33 +45,6 @@ function render_custom_sections(gridStack, editMode) {
     }
 }
 
-// Adds a special "Add custom section" horizontal tile to the unified GridStack for edit mode
-function render_add_section_tile(gridStack) {
-    const tileId = 'addSectionTile-unified';
-    if (gridStack.el.querySelector(`[data-gs-id="${tileId}"]`)) return;
-
-    const item = document.createElement('div');
-    item.classList.add('grid-stack-item');
-    item.setAttribute('gs-w',       12);
-    item.setAttribute('gs-h',        1);
-    item.setAttribute('gs-min-w',   12);
-    item.setAttribute('gs-max-w',   12);
-    item.setAttribute('gs-min-h',    1);
-    item.setAttribute('gs-max-h',    1);
-    item.setAttribute('gs-no-resize', 'true');
-    item.setAttribute('data-gs-id', tileId);
-    item.innerHTML = `<div class="grid-stack-item-content add-section-tile">
-        <div class="add-section-tile-inner">
-            <div class="add-section-plus">+</div>
-            <div class="add-section-tile-label">Add custom section</div>
-        </div>
-    </div>`;
-    gridStack.makeWidget(item);
-    item.querySelector('.add-section-tile').addEventListener('click', () => {
-        open_add_custom_section_modal();
-    });
-}
-
 // Saves a new custom section divider to localStorage and returns it
 function add_custom_section(title, bgColor, textColor) {
     const id      = generate_id();
@@ -129,6 +104,7 @@ function setup_add_custom_section_modal() {
             item.innerHTML = `<div class="grid-stack-item-content">${build_section_divider_html(section, true)}</div>`;
             grid.makeWidget(item);
             apply_bg_class(item, section.bgColor);
+            apply_widget_control_icons(item);
             const deleteBtn = item.querySelector(`.delete-custom-section[data-section-id="${section.id}"]`);
             if (deleteBtn) {
                 deleteBtn.addEventListener('click', () => handle_delete_section(section.id, grid));
@@ -177,7 +153,7 @@ function open_add_custom_section_modal() {
 
 export {
     render_custom_sections,
-    render_add_section_tile,
     setup_add_custom_section_modal,
     wire_delete_section_buttons,
+    open_add_custom_section_modal,
 };
diff --git a/robotframework_dashboard/js/layout.js b/robotframework_dashboard/js/layout.js
index c9e7f580..150e04ec 100644
--- a/robotframework_dashboard/js/layout.js
+++ b/robotframework_dashboard/js/layout.js
@@ -14,22 +14,21 @@ import {
 import { setup_data_and_graphs } from "./menu.js";
 import {
     render_custom_stat_widgets,
-    render_add_stat_widget_tile,
     setup_add_stat_widget_modal,
     wire_delete_buttons,
     open_add_stat_widget_modal,
 } from "./statwidgets.js";
 import {
     render_custom_link_widgets,
-    render_add_link_widget_tile,
     setup_add_link_widget_modal,
     wire_link_delete_buttons,
+    open_add_link_widget_modal,
 } from "./linkwidgets.js";
 import {
     render_custom_sections,
-    render_add_section_tile,
     setup_add_custom_section_modal,
     wire_delete_section_buttons,
+    open_add_custom_section_modal,
 } from "./customsections.js";
 
 // Layout history state for undo/redo in edit mode
@@ -294,6 +293,9 @@ function setup_section_order() {
     });
 
     if (gridEditMode) {
+        document.querySelectorAll(".add-stat-widget-header").forEach(btn => { btn.hidden = false })
+        document.querySelectorAll(".add-link-widget-header").forEach(btn => { btn.hidden = false })
+        document.querySelectorAll(".add-section-header").forEach(btn => { btn.hidden = false })
         document.querySelectorAll(".move-up-section").forEach(btn => { btn.hidden = false })
         document.querySelectorAll(".move-down-section").forEach(btn => { btn.hidden = false })
         document.querySelectorAll(".shown-section, .hidden-section").forEach(btn => {
@@ -314,6 +316,9 @@ function setup_section_order() {
             }
         });
     } else {
+        document.querySelectorAll(".add-stat-widget-header").forEach(btn => { btn.hidden = true })
+        document.querySelectorAll(".add-link-widget-header").forEach(btn => { btn.hidden = true })
+        document.querySelectorAll(".add-section-header").forEach(btn => { btn.hidden = true })
         document.querySelectorAll(".move-up-section").forEach(btn => { btn.hidden = true })
         document.querySelectorAll(".move-down-section").forEach(btn => { btn.hidden = true })
         document.querySelectorAll(".shown-section").forEach(btn => { btn.hidden = true })
@@ -459,9 +464,13 @@ function setup_grid_graphs(section) {
                 html = html.replace("showGraphHidden", "hidden")
                 html = html.replace("hideGraphHidden", "")
             }
+            html = html.replace("moveToFirstHidden", "")
+            html = html.replace("moveToLastHidden", "")
         } else {
             html = html.replace("showGraphHidden", "hidden")
             html = html.replace("hideGraphHidden", "hidden")
+            html = html.replace("moveToFirstHidden", "hidden")
+            html = html.replace("moveToLastHidden", "hidden")
         }
         item.innerHTML = html
         window[grid].makeWidget(item);
@@ -480,13 +489,11 @@ function setup_grid_graphs(section) {
         render_custom_stat_widgets(window[grid], sectionKey, gridEditMode);
         if (gridEditMode) {
             wire_delete_buttons(window[grid], sectionKey);
-            render_add_stat_widget_tile(window[grid], sectionKey);
         }
         // Render custom link widgets for this section
         render_custom_link_widgets(window[grid], sectionKey, gridEditMode);
         if (gridEditMode) {
             wire_link_delete_buttons(window[grid], sectionKey);
-            render_add_link_widget_tile(window[grid], sectionKey);
         }
     }
 
@@ -495,7 +502,6 @@ function setup_grid_graphs(section) {
         render_custom_sections(window[grid], gridEditMode);
         if (gridEditMode) {
             wire_delete_section_buttons(window[grid]);
-            render_add_section_tile(window[grid]);
         }
     }
 }
@@ -694,6 +700,50 @@ function setup_edit_mode_icons(hidden) {
     }
 }
 
+// Repacks all widgets in a grid, placing the given item first (toFirst) or last (toLast)
+function move_widget_in_grid(gridStack, itemEl, toFirst) {
+    const target = gridStack.engine.nodes.find(n => n.el === itemEl);
+    if (!target) return;
+    const ordered = gridStack.engine.nodes.slice().sort((a, b) => (a.y - b.y) || (a.x - b.x));
+    const others = ordered.filter(n => n !== target);
+    const sequence = toFirst ? [target, ...others] : [...others, target];
+
+    // Compute the final row-flow positions up front
+    const maxColumns = 12;
+    let x = 0, y = 0, rowHeight = 0;
+    const positions = sequence.map(node => {
+        if (x + node.w > maxColumns) {
+            x = 0;
+            y += rowHeight;
+            rowHeight = 0;
+        }
+        const pos = { node, x, y };
+        x += node.w;
+        rowHeight = Math.max(rowHeight, node.h);
+        return pos;
+    });
+
+    gridStack.batchUpdate();
+    try {
+        // Phase 1: move every widget into a non-overlapping holding area below the grid,
+        // so the final placements in phase 2 can't collide with stale positions and
+        // trigger GridStack's own (unpredictable) collision-avoidance shuffling.
+        const maxY = Math.max(0, ...ordered.map(node => node.y + node.h));
+        let holdY = maxY;
+        sequence.forEach(node => {
+            gridStack.update(node.el, { x: 0, y: holdY, w: node.w, h: node.h });
+            holdY += node.h;
+        });
+        // Phase 2: place every widget at its intended final position
+        positions.forEach(({ node, x, y }) => {
+            gridStack.update(node.el, { x, y, w: node.w, h: node.h });
+        });
+    } finally {
+        gridStack.batchUpdate(false);
+    }
+    capture_dom_snapshot_and_push();
+}
+
 // Reusable handler to wire show/hide and move controls within a container
 function attach_section_order_buttons(containerId) {
     const root = `#${containerId}`;
@@ -774,6 +824,40 @@ function setup_dashboard_section_layout_buttons() {
     document.addEventListener("layout-user-action", () => capture_dom_snapshot_and_push());
     attach_section_order_buttons("dashboard");
 
+    // Move widget to first/last position in its grid (delegated so it works after grid re-renders)
+    document.addEventListener("click", (e) => {
+        const firstBtn = e.target.closest(".move-to-first-graph");
+        const lastBtn = e.target.closest(".move-to-last-graph");
+        const btn = firstBtn || lastBtn;
+        if (!btn || btn.hidden) return;
+        const item = btn.closest(".grid-stack-item");
+        const gridEl = btn.closest(".grid-stack");
+        if (!item || !gridEl) return;
+        const gridStack = window[gridEl.id];
+        if (!gridStack) return;
+        move_widget_in_grid(gridStack, item, !!firstBtn);
+    });
+
+    // Open the Add Stat Widget / Add Link Widget / Add Custom Section modals from the section header icons
+    document.addEventListener("click", (e) => {
+        const statBtn = e.target.closest(".add-stat-widget-header");
+        const linkBtn = e.target.closest(".add-link-widget-header");
+        const sectionBtn = e.target.closest(".add-section-header");
+        const btn = statBtn || linkBtn || sectionBtn;
+        if (!btn || btn.hidden) return;
+        if (sectionBtn) {
+            open_add_custom_section_modal();
+            return;
+        }
+        const sectionKey = btn.dataset.section;
+        if (!sectionKey) return;
+        if (statBtn) {
+            open_add_stat_widget_modal(sectionKey);
+        } else {
+            open_add_link_widget_modal(sectionKey);
+        }
+    });
+
     // Setup the add stat widget modal (populate dropdowns, wire confirm/cancel)
     setup_add_stat_widget_modal();
     // Setup the add link widget modal (populate color pickers, wire confirm/cancel)
diff --git a/robotframework_dashboard/js/linkwidgets.js b/robotframework_dashboard/js/linkwidgets.js
index f22f8b52..955b594a 100644
--- a/robotframework_dashboard/js/linkwidgets.js
+++ b/robotframework_dashboard/js/linkwidgets.js
@@ -1,8 +1,9 @@
 import { settings } from './variables/settings.js';
 import { set_local_storage_item } from './localstorage.js';
-import { generate_id, apply_bg_class, fill_color_picker } from './common.js';
+import { generate_id, apply_bg_class, fill_color_picker, build_move_controls_html } from './common.js';
 import { gridEditMode } from './variables/globals.js';
 import { STAT_WIDGET_COLORS, STAT_WIDGET_BG_COLORS } from './variables/statwidgetdefs.js';
+import { apply_widget_control_icons } from './theme.js';
 
 // Strips the protocol from a URL for compact display (https://foo.com/x → foo.com/x)
 function strip_protocol(url) {
@@ -12,15 +13,16 @@ function strip_protocol(url) {
 // Builds the inner HTML for one custom link widget card
 function build_link_widget_html(widget, editMode) {
     const deleteBtn = editMode
-        ? `<button type="button" class="btn-close btn-close-sm delete-custom-link-widget" aria-label="Remove widget" data-widget-id="${widget.id}"></button>`
+        ? `<a class="delete-custom-link-widget information" role="button" aria-label="Remove widget" data-title="Remove widget" data-widget-id="${widget.id}"></a>`
         : '';
     // In non-edit mode wrap in a clickable div (not an <a> to avoid GridStack drag conflicts)
     const clickable = editMode ? '' : ' link-widget-clickable';
+    const moveBtns = editMode ? build_move_controls_html(deleteBtn) : '';
     const displayUrl = strip_protocol(widget.url);
     return `<div class="link-widget-inner${clickable}" data-href="${widget.url}" data-newtab="${widget.newTab ? '1' : '0'}">
+                ${moveBtns}
                 <div class="link-widget-label ${widget.color}" id="customLinkWidget-${widget.id}-label">${widget.label}</div>
                 <div class="link-widget-url">${displayUrl}</div>
-                ${deleteBtn}
             </div>`;
 }
 
@@ -101,33 +103,6 @@ function populate_link_widget_colors() {
     if (bgPicker)    fill_color_picker(bgPicker,    STAT_WIDGET_BG_COLORS, '');
 }
 
-// Adds a special "+ Add link widget" tile to the GridStack for edit mode
-function render_add_link_widget_tile(gridStack, sectionKey) {
-    const tileId = `addLinkWidgetTile-${sectionKey}`;
-    // Avoid duplicates
-    if (gridStack.el.querySelector(`[data-gs-id="${tileId}"]`)) return;
-    const item = document.createElement('div');
-    item.classList.add('grid-stack-item');
-    item.setAttribute('gs-w', 2);
-    item.setAttribute('gs-h', 2);
-    item.setAttribute('gs-min-w', 2);
-    item.setAttribute('gs-min-h', 2);
-    item.setAttribute('gs-max-w', 2);
-    item.setAttribute('gs-max-h', 2);
-    item.setAttribute('gs-no-resize', 'true');
-    item.setAttribute('data-gs-id', tileId);
-    item.innerHTML = `<div class="grid-stack-item-content add-link-widget-tile" data-section="${sectionKey}">
-        <div class="add-link-widget-tile-inner">
-            <div class="add-link-widget-plus">+</div>
-            <div class="add-link-widget-tile-label">Add link widget</div>
-        </div>
-    </div>`;
-    gridStack.makeWidget(item);
-    item.querySelector('.add-link-widget-tile').addEventListener('click', () => {
-        open_add_link_widget_modal(sectionKey);
-    });
-}
-
 // Wires all events inside the Add Link Widget modal (call once after DOM ready)
 function setup_add_link_widget_modal() {
     populate_link_widget_colors();
@@ -166,6 +141,7 @@ function setup_add_link_widget_modal() {
             item.innerHTML = `<div class="grid-stack-item-content">${build_link_widget_html(widget, true)}</div>`;
             grid.makeWidget(item);
             apply_bg_class(item, widget.bgColor);
+            apply_widget_control_icons(item);
             // Wire delete on the newly created widget
             const deleteBtn = item.querySelector(`.delete-custom-link-widget[data-widget-id="${widget.id}"]`);
             if (deleteBtn) {
@@ -214,7 +190,6 @@ function open_add_link_widget_modal(sectionKey) {
 
 export {
     render_custom_link_widgets,
-    render_add_link_widget_tile,
     setup_add_link_widget_modal,
     wire_link_delete_buttons,
     open_add_link_widget_modal,
diff --git a/robotframework_dashboard/js/statwidgets.js b/robotframework_dashboard/js/statwidgets.js
index 07ecae16..3f751797 100644
--- a/robotframework_dashboard/js/statwidgets.js
+++ b/robotframework_dashboard/js/statwidgets.js
@@ -1,6 +1,8 @@
 import { settings } from './variables/settings.js';
 import { set_local_storage_item } from './localstorage.js';
-import { format_duration, generate_id, apply_bg_class, fill_color_picker } from './common.js';
+import { setup_data_and_graphs } from './menu.js';
+import { apply_widget_control_icons } from './theme.js';
+import { format_duration, generate_id, apply_bg_class, fill_color_picker, build_move_controls_html } from './common.js';
 import {
     filteredRuns,
     filteredSuites,
@@ -40,12 +42,13 @@ function get_stat_value(statKey) {
 // Builds the inner HTML for one custom stat widget card slot
 function build_widget_html(widget, editMode) {
     const deleteBtn = editMode
-        ? `<button type="button" class="btn-close btn-close-sm delete-custom-stat-widget" aria-label="Remove widget" data-widget-id="${widget.id}"></button>`
+        ? `<a class="delete-custom-stat-widget information" role="button" aria-label="Remove widget" data-title="Remove widget" data-widget-id="${widget.id}"></a>`
         : '';
+    const moveBtns = editMode ? build_move_controls_html(deleteBtn) : '';
     return `<div class="stat-widget-inner">
+                ${moveBtns}
                 <h6 class="stat-widget-title" id="customStatWidget-${widget.id}-title">${widget.title}</h6>
                 <div class="stat-value ${widget.color}" id="customStatWidget-${widget.id}-value"></div>
-                ${deleteBtn}
             </div>`;
 }
 
@@ -165,31 +168,109 @@ function sync_modal_defaults_from_stat(opt) {
     if (titleEl && !titleEl.dataset.userEdited) titleEl.value = opt.textContent;
 }
 
-// Adds a special "+ Add Widget" tile to the GridStack for edit mode
-function render_add_stat_widget_tile(gridStack, sectionKey) {
-    const tileId = `addStatWidgetTile-${sectionKey}`;
-    // Avoid duplicates
-    if (gridStack.el.querySelector(`[data-gs-id="${tileId}"]`)) return;
-    const item = document.createElement('div');
-    item.classList.add('grid-stack-item');
-    item.setAttribute('gs-w', 2);
-    item.setAttribute('gs-h', 2);
-    item.setAttribute('gs-min-w', 2);
-    item.setAttribute('gs-min-h', 2);
-    item.setAttribute('gs-max-w', 2);
-    item.setAttribute('gs-max-h', 2);
-    item.setAttribute('gs-no-resize', 'true');
-    item.setAttribute('data-gs-id', tileId);
-    item.innerHTML = `<div class="grid-stack-item-content add-stat-widget-tile" data-section="${sectionKey}">
-        <div class="add-stat-widget-tile-inner">
-            <div class="add-stat-widget-plus">+</div>
-            <div class="add-stat-widget-tile-label">Add stat widget</div>
-        </div>
-    </div>`;
-    gridStack.makeWidget(item);
-    item.querySelector('.add-stat-widget-tile').addEventListener('click', () => {
-        open_add_stat_widget_modal(sectionKey);
+// Returns all stat widget definitions available for the given section ("run"/"suite"/"test"/"keyword"/"unified")
+function get_all_stat_defs(sectionKey) {
+    return sectionKey === 'unified'
+        ? STAT_WIDGET_DEFS
+        : STAT_WIDGET_DEFS.filter(d => d.section.toLowerCase() === sectionKey);
+}
+
+// Populates the "All" tab list with one toggle + title input row per available stat for the given section
+function populate_all_widgets_list(sectionKey) {
+    const container = document.getElementById('addAllWidgetsList');
+    if (!container) return;
+    container.innerHTML = '';
+
+    const existingKeys = new Set((settings.statWidgets || []).filter(w => w.section === sectionKey).map(w => w.statKey));
+    const defs = get_all_stat_defs(sectionKey);
+
+    let currentGroup = null;
+    for (const def of defs) {
+        if (sectionKey === 'unified' && def.section !== currentGroup) {
+            currentGroup = def.section;
+            const heading = document.createElement('div');
+            heading.className = 'add-all-widgets-group-heading';
+            heading.textContent = currentGroup;
+            container.appendChild(heading);
+        }
+
+        const row = document.createElement('div');
+        row.classList.add('add-all-widgets-row');
+
+        const switchWrapper = document.createElement('div');
+        switchWrapper.classList.add('form-check', 'form-switch');
+        const toggle = document.createElement('input');
+        toggle.classList.add('form-check-input', 'add-all-widgets-toggle');
+        toggle.type = 'checkbox';
+        toggle.role = 'switch';
+        toggle.id = `addAllWidgetsToggle-${def.key}`;
+        toggle.dataset.statKey = def.key;
+        toggle.checked = true;
+        switchWrapper.appendChild(toggle);
+
+        const titleInput = document.createElement('input');
+        titleInput.type = 'text';
+        titleInput.classList.add('form-control', 'form-control-sm', 'add-all-widgets-title');
+        titleInput.id = `addAllWidgetsTitle-${def.key}`;
+        titleInput.maxLength = 40;
+        titleInput.value = def.label;
+
+        row.appendChild(switchWrapper);
+        row.appendChild(titleInput);
+
+        if (existingKeys.has(def.key)) {
+            const badge = document.createElement('span');
+            badge.classList.add('badge', 'bg-secondary', 'add-all-widgets-badge');
+            badge.textContent = 'Added';
+            row.appendChild(badge);
+        }
+
+        container.appendChild(row);
+    }
+
+    const toggleAll = document.getElementById('addAllWidgetsToggleAll');
+    if (toggleAll) {
+        toggleAll.checked = true;
+        toggleAll.indeterminate = false;
+    }
+}
+
+// Updates the "Toggle all" switch to reflect the checked/unchecked/mixed state of the individual toggles
+function sync_toggle_all_widgets_state() {
+    const toggleAll = document.getElementById('addAllWidgetsToggleAll');
+    const container = document.getElementById('addAllWidgetsList');
+    if (!toggleAll || !container) return;
+    const toggles = [...container.querySelectorAll('.add-all-widgets-toggle')];
+    const checkedCount = toggles.filter(t => t.checked).length;
+    toggleAll.checked = checkedCount === toggles.length;
+    toggleAll.indeterminate = checkedCount > 0 && checkedCount < toggles.length;
+}
+
+// Adds a stat widget for every toggled-on row in the "All" tab list
+function add_selected_stat_widgets(sectionKey, randomColors, color, bgColor) {
+    const container = document.getElementById('addAllWidgetsList');
+    if (!container) return 0;
+
+    const list = settings.statWidgets ? [...settings.statWidgets] : [];
+    let added = 0;
+    container.querySelectorAll('.add-all-widgets-toggle:checked').forEach(toggle => {
+        const statKey = toggle.dataset.statKey;
+        const def = STAT_WIDGET_DEFS.find(d => d.key === statKey);
+        if (!def) return;
+
+        const titleInput = document.getElementById(`addAllWidgetsTitle-${statKey}`);
+        const title = titleInput?.value.trim() || def.label;
+        const widgetColor = randomColors
+            ? STAT_WIDGET_COLORS[Math.floor(Math.random() * STAT_WIDGET_COLORS.length)].value
+            : color;
+        const widgetBgColor = randomColors
+            ? STAT_WIDGET_BG_COLORS[Math.floor(Math.random() * STAT_WIDGET_BG_COLORS.length)].value
+            : bgColor;
+        list.push({ id: generate_id(), section: sectionKey, statKey, title, color: widgetColor, bgColor: widgetBgColor });
+        added++;
     });
+    set_local_storage_item('statWidgets', list);
+    return added;
 }
 
 // Wires all events inside the Add Stat Widget modal (call once after DOM ready)
@@ -197,9 +278,70 @@ function setup_add_stat_widget_modal() {
     populate_stat_widget_select();
     populate_stat_widget_colors();
     populate_stat_widget_bg_colors();
+    fill_color_picker(document.getElementById('addAllWidgetsColorPicker'), STAT_WIDGET_COLORS, 'white-text');
+    fill_color_picker(document.getElementById('addAllWidgetsBgColorPicker'), STAT_WIDGET_BG_COLORS, '');
 
     const statSelect = document.getElementById('addStatWidgetStat');
     const titleInput = document.getElementById('addStatWidgetTitle');
+    const singleConfirm = document.getElementById('addStatWidgetConfirm');
+    const allConfirm = document.getElementById('addAllWidgetsConfirm');
+
+    // Toggle footer confirm buttons based on the active tab
+    document.querySelectorAll('#addStatWidgetTab button[data-bs-toggle="tab"]').forEach(tabBtn => {
+        tabBtn.addEventListener('shown.bs.tab', (e) => {
+            const isAllTab = e.target.id === 'addStatWidgetAllTab-tab';
+            if (singleConfirm) singleConfirm.hidden = isAllTab;
+            if (allConfirm) allConfirm.hidden = !isAllTab;
+            if (isAllTab) {
+                const modal = document.getElementById('addStatWidgetModal');
+                populate_all_widgets_list(modal.dataset.pendingSection || 'run');
+            }
+        });
+    });
+
+    // Toggle the "All" tab's color pickers based on the random colors switch
+    document.getElementById('addAllWidgetsRandom')?.addEventListener('change', (e) => {
+        const group = document.getElementById('addAllWidgetsColorGroup');
+        if (group) group.hidden = e.target.checked;
+    });
+
+    // "Toggle all" switch turns every stat toggle in the "All" tab on or off
+    document.getElementById('addAllWidgetsToggleAll')?.addEventListener('change', (e) => {
+        const checked = e.target.checked;
+        e.target.indeterminate = false;
+        document.querySelectorAll('#addAllWidgetsList .add-all-widgets-toggle').forEach(toggle => {
+            toggle.checked = checked;
+        });
+    });
+
+    // Keep the "Toggle all" switch in sync when individual stat toggles change
+    document.getElementById('addAllWidgetsList')?.addEventListener('change', (e) => {
+        if (e.target.classList.contains('add-all-widgets-toggle')) {
+            sync_toggle_all_widgets_state();
+        }
+    });
+
+    // Add All confirm button
+    allConfirm?.addEventListener('click', () => {
+        const modal      = document.getElementById('addStatWidgetModal');
+        const sectionKey = modal.dataset.pendingSection || 'run';
+        const random     = document.getElementById('addAllWidgetsRandom')?.checked !== false;
+        const colorBtn   = document.querySelector('#addAllWidgetsColorPicker .stat-color-btn.active');
+        const color      = colorBtn?.dataset.color || 'white-text';
+        const bgBtn      = document.querySelector('#addAllWidgetsBgColorPicker .stat-color-btn.active');
+        const bgColor    = bgBtn?.dataset.color || '';
+
+        const added = add_selected_stat_widgets(sectionKey, random, color, bgColor);
+        if (added > 0) {
+            setup_data_and_graphs();
+            const on_finalized = () => {
+                document.dispatchEvent(new CustomEvent("layout-user-action"));
+                document.removeEventListener("graphs-finalized", on_finalized);
+            };
+            document.addEventListener("graphs-finalized", on_finalized);
+        }
+        bootstrap.Modal.getInstance(modal)?.hide();
+    });
 
     // When stat changes: auto-fill title and color (only if user hasn't overridden title)
     statSelect?.addEventListener('change', () => {
@@ -249,6 +391,7 @@ function setup_add_stat_widget_modal() {
             item.innerHTML = `<div class="grid-stack-item-content">${build_widget_html(widget, true)}</div>`;
             grid.makeWidget(item);
             apply_bg_class(item, widget.bgColor);
+            apply_widget_control_icons(item);
             // Wire delete on the newly created widget
             const deleteBtn = item.querySelector(`.delete-custom-stat-widget[data-widget-id="${widget.id}"]`);
             if (deleteBtn) {
@@ -268,9 +411,15 @@ function setup_add_stat_widget_modal() {
         bootstrap.Modal.getInstance(modal)?.hide();
     });
 
-    // Reset user-edited flag on modal open
+    // Reset user-edited flag and tab state on modal open
     document.getElementById('addStatWidgetModal')?.addEventListener('show.bs.modal', () => {
         if (titleInput) titleInput.dataset.userEdited = '';
+        const singleTab = document.getElementById('addStatWidgetSingleTab-tab');
+        if (singleTab && !singleTab.classList.contains('active')) {
+            bootstrap.Tab.getOrCreateInstance(singleTab).show();
+        }
+        if (singleConfirm) singleConfirm.hidden = false;
+        if (allConfirm) allConfirm.hidden = true;
     });
 }
 
@@ -302,12 +451,12 @@ function open_add_stat_widget_modal(sectionKey) {
     if (!modal) return;
     modal.dataset.pendingSection = sectionKey;
     preselectStatSection(sectionKey);
+    populate_all_widgets_list(sectionKey);
     bootstrap.Modal.getOrCreateInstance(modal).show();
 }
 
 export {
     render_custom_stat_widgets,
-    render_add_stat_widget_tile,
     update_custom_stat_widgets,
     add_custom_stat_widget,
     remove_custom_stat_widget,
diff --git a/robotframework_dashboard/js/theme.js b/robotframework_dashboard/js/theme.js
index 2c0deed5..4e114a2b 100644
--- a/robotframework_dashboard/js/theme.js
+++ b/robotframework_dashboard/js/theme.js
@@ -32,8 +32,14 @@ import {
     informationSmallSVG,
     eyeSVG,
     eyeOffSVG,
+    xSVG,
     moveUpSVG,
     moveDownSVG,
+    moveToFirstGraphSVG,
+    moveToLastGraphSVG,
+    addStatWidgetSVG,
+    addLinkWidgetSVG,
+    addCustomSectionSVG,
     clockSVG,
     menuSVG,
 } from "./variables/svg.js";
@@ -125,6 +131,14 @@ function setup_theme() {
                 ".move-down-table": moveDownSVG(color),
                 ".move-up-section": moveUpSVG(color),
                 ".move-down-section": moveDownSVG(color),
+                ".move-to-first-graph": moveToFirstGraphSVG(color),
+                ".move-to-last-graph": moveToLastGraphSVG(color),
+                ".add-stat-widget-header": addStatWidgetSVG(color),
+                ".add-link-widget-header": addLinkWidgetSVG(color),
+                ".add-section-header": addCustomSectionSVG(color),
+                ".delete-custom-stat-widget": xSVG(color),
+                ".delete-custom-link-widget": xSVG(color),
+                ".delete-custom-section": xSVG(color),
                 ".clock-icon": clockSVG(color),
             }
         };
@@ -253,9 +267,30 @@ function apply_custom_branding() {
     }
 }
 
+// Applies the move/delete control icons (SVGs) to widget controls within root.
+// Used right after a custom widget/section is added live to the grid, since
+// those controls are created without the SVG markup that setup_theme() normally fills in.
+function apply_widget_control_icons(root = document) {
+    const isDark = document.documentElement.classList.contains("dark-mode");
+    const color = isDark ? "white" : "black";
+    const iconMap = {
+        ".move-to-first-graph": moveToFirstGraphSVG(color),
+        ".move-to-last-graph": moveToLastGraphSVG(color),
+        ".delete-custom-stat-widget": xSVG(color),
+        ".delete-custom-link-widget": xSVG(color),
+        ".delete-custom-section": xSVG(color),
+    };
+    for (const [selector, svg] of Object.entries(iconMap)) {
+        root.querySelectorAll(selector).forEach(el => {
+            if (!el.innerHTML) el.innerHTML = svg;
+        });
+    }
+}
+
 export {
     toggle_theme,
     setup_theme,
     apply_theme_colors,
-    apply_custom_branding
+    apply_custom_branding,
+    apply_widget_control_icons
 };
\ No newline at end of file
diff --git a/robotframework_dashboard/js/variables/graphmetadata.js b/robotframework_dashboard/js/variables/graphmetadata.js
index 8f0d5437..83bd276a 100644
--- a/robotframework_dashboard/js/variables/graphmetadata.js
+++ b/robotframework_dashboard/js/variables/graphmetadata.js
@@ -27,6 +27,8 @@ function _graphHtml(key, title, viewOptions, { hasVertical = false, titleId = tr
                         ${controls}
                         <a class="fullscreen-graph information" id="${key}Fullscreen"></a>
                         <a class="close-graph information" id="${key}Close" hidden></a>
+                        <a class="move-to-first-graph information" id="${key}MoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="${key}MoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="${key}Shown" showGraphHidden></a>
                         <a class="hidden-graph information" id="${key}Hidden" hideGraphHidden></a>
                     </div>
@@ -41,6 +43,8 @@ function _statWidgetHtml(key, title, valueClass) {
     return `<div class="graph-header">
                 <h6 id="${key}Title">${title}</h6>
                 <div class="graph-controls">
+                    <a class="move-to-first-graph information" id="${key}MoveToFirst" moveToFirstHidden></a>
+                    <a class="move-to-last-graph information" id="${key}MoveToLast" moveToLastHidden></a>
                     <a class="shown-graph information" id="${key}Shown" showGraphHidden></a>
                     <a class="hidden-graph information" id="${key}Hidden" hideGraphHidden></a>
                 </div>
@@ -87,6 +91,8 @@ const graphMetadata = [
                         <a class="pie-graph information" id="runDonutGraphDonut"></a>
                         <a class="fullscreen-graph information" id="runDonutFullscreen"></a>
                         <a class="close-graph information" id="runDonutClose" hidden></a>
+                        <a class="move-to-first-graph information" id="runDonutMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="runDonutMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="runDonutShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="runDonutHidden" hideGraphHidden></a>
                     </div>
@@ -186,6 +192,8 @@ const graphMetadata = [
                         <a class="heatmap-graph information" id="runHeatmapGraphHeatmap"></a>
                         <a class="fullscreen-graph information" id="runHeatmapFullscreen"></a>
                         <a class="close-graph information" id="runHeatmapClose" hidden></a>
+                        <a class="move-to-first-graph information" id="runHeatmapMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="runHeatmapMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="runHeatmapShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="runHeatmapHidden" hideGraphHidden></a>
                     </div>
@@ -213,6 +221,8 @@ const graphMetadata = [
                         <a class="pie-graph information" id="suiteFolderDonutGraphDonut"></a>
                         <a class="fullscreen-graph information" id="suiteFolderDonutFullscreen"></a>
                         <a class="close-graph information" id="suiteFolderDonutClose" hidden></a>
+                        <a class="move-to-first-graph information" id="suiteFolderDonutMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="suiteFolderDonutMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="suiteFolderDonutShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="suiteFolderDonutHidden" hideGraphHidden></a>
                     </div>
@@ -279,6 +289,8 @@ const graphMetadata = [
                         <a class="timeline-graph information" id="suiteMostTimeConsumingGraphTimeline"></a>
                         <a class="fullscreen-graph information" id="suiteMostTimeConsumingFullscreen"></a>
                         <a class="close-graph information" id="suiteMostTimeConsumingClose" hidden></a>
+                        <a class="move-to-first-graph information" id="suiteMostTimeConsumingMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="suiteMostTimeConsumingMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="suiteMostTimeConsumingShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="suiteMostTimeConsumingHidden" hideGraphHidden></a>
                     </div>
@@ -319,6 +331,8 @@ const graphMetadata = [
                         <a class="line-graph information" id="testStatisticsGraphLine"></a>
                         <a class="fullscreen-graph information" id="testStatisticsFullscreen"></a>
                         <a class="close-graph information" id="testStatisticsClose" hidden></a>
+                        <a class="move-to-first-graph information" id="testStatisticsMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="testStatisticsMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="testStatisticsShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="testStatisticsHidden" hideGraphHidden></a>
                     </div>
@@ -372,6 +386,8 @@ const graphMetadata = [
                         <a class="timeline-graph information" id="testMostFlakyGraphTimeline"></a>
                         <a class="fullscreen-graph information" id="testMostFlakyFullscreen"></a>
                         <a class="close-graph information" id="testMostFlakyClose" hidden></a>
+                        <a class="move-to-first-graph information" id="testMostFlakyMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="testMostFlakyMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="testMostFlakyShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="testMostFlakyHidden" hideGraphHidden></a>
                     </div>
@@ -401,6 +417,8 @@ const graphMetadata = [
                         <a class="timeline-graph information" id="testRecentMostFlakyGraphTimeline"></a>
                         <a class="fullscreen-graph information" id="testRecentMostFlakyFullscreen"></a>
                         <a class="close-graph information" id="testRecentMostFlakyClose" hidden></a>
+                        <a class="move-to-first-graph information" id="testRecentMostFlakyMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="testRecentMostFlakyMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="testRecentMostFlakyShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="testRecentMostFlakyHidden" hideGraphHidden></a>
                     </div>
@@ -446,6 +464,8 @@ const graphMetadata = [
                         <a class="timeline-graph information" id="testMostTimeConsumingGraphTimeline"></a>
                         <a class="fullscreen-graph information" id="testMostTimeConsumingFullscreen"></a>
                         <a class="close-graph information" id="testMostTimeConsumingClose" hidden></a>
+                        <a class="move-to-first-graph information" id="testMostTimeConsumingMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="testMostTimeConsumingMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="testMostTimeConsumingShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="testMostTimeConsumingHidden" hideGraphHidden></a>
                     </div>
@@ -531,6 +551,8 @@ const graphMetadata = [
                         <a class="timeline-graph information" id="keywordMostTimeConsumingGraphTimeline"></a>
                         <a class="fullscreen-graph information" id="keywordMostTimeConsumingFullscreen"></a>
                         <a class="close-graph information" id="keywordMostTimeConsumingClose" hidden></a>
+                        <a class="move-to-first-graph information" id="keywordMostTimeConsumingMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="keywordMostTimeConsumingMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="keywordMostTimeConsumingShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="keywordMostTimeConsumingHidden" hideGraphHidden></a>
                     </div>
@@ -560,6 +582,8 @@ const graphMetadata = [
                         <a class="timeline-graph information" id="keywordMostUsedGraphTimeline"></a>
                         <a class="fullscreen-graph information" id="keywordMostUsedFullscreen"></a>
                         <a class="close-graph information" id="keywordMostUsedClose" hidden></a>
+                        <a class="move-to-first-graph information" id="keywordMostUsedMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="keywordMostUsedMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="keywordMostUsedShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="keywordMostUsedHidden" hideGraphHidden></a>
                     </div>
@@ -640,6 +664,8 @@ const graphMetadata = [
                         <a class="timeline-graph information" id="compareTestsGraphTimeline"></a>
                         <a class="fullscreen-graph information" id="compareTestsFullscreen"></a>
                         <a class="close-graph information" id="compareTestsClose" hidden></a>
+                        <a class="move-to-first-graph information" id="compareTestsMoveToFirst" moveToFirstHidden></a>
+                        <a class="move-to-last-graph information" id="compareTestsMoveToLast" moveToLastHidden></a>
                         <a class="shown-graph information" id="compareTestsShown" showGraphHidden></a>
                         <a class="hidden-graph information" id="compareTestsHidden" hideGraphHidden></a>
                     </div>
diff --git a/robotframework_dashboard/js/variables/information.js b/robotframework_dashboard/js/variables/information.js
index d049adbb..800c1c09 100644
--- a/robotframework_dashboard/js/variables/information.js
+++ b/robotframework_dashboard/js/variables/information.js
@@ -219,6 +219,8 @@ const graphKeys = [
 graphKeys.forEach(key => {
     informationMap[`${key}Fullscreen`] = "Fullscreen";
     informationMap[`${key}Close`] = "Close";
+    informationMap[`${key}MoveToFirst`] = "Move to First";
+    informationMap[`${key}MoveToLast`] = "Move to Last";
     informationMap[`${key}Shown`] = "Hide Graph";
     informationMap[`${key}Hidden`] = "Show Graph";
 });
@@ -237,4 +239,11 @@ graphKeys.forEach(key => {
     informationMap[`${key}Hidden`] = "Show Section";
 });
 
+["run", "suite", "test", "keyword", "unified"].forEach(key => {
+    informationMap[`${key}AddStatWidgetHeader`] = "Add Stat Widget";
+    informationMap[`${key}AddLinkWidgetHeader`] = "Add Link Widget";
+});
+
+informationMap["unifiedAddSectionHeader"] = "Add Custom Section";
+
 export { informationMap };
\ No newline at end of file
diff --git a/robotframework_dashboard/js/variables/svg.js b/robotframework_dashboard/js/variables/svg.js
index 88ef1519..fe986e1c 100644
--- a/robotframework_dashboard/js/variables/svg.js
+++ b/robotframework_dashboard/js/variables/svg.js
@@ -48,11 +48,21 @@ const fullscreenSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width
 const closeSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minimize-icon lucide-minimize"><path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/></svg>`;
 const eyeSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`
 const eyeOffSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`
+const xSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`
 
 // layout history
 const undoSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw-icon lucide-rotate-ccw"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>`
 const redoSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw-icon lucide-rotate-cw"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>`
 
+// move to first / last graph
+const moveToFirstGraphSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line"><path d="M5 3h14"/><path d="m18 13-6-6-6 6"/><path d="M12 7v14"/></svg>`
+const moveToLastGraphSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>`
+
+// add stat / link widget (section header actions)
+const addStatWidgetSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-plus-icon lucide-square-plus"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>`
+const addLinkWidgetSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link2-icon lucide-link-2"><path d="M9 17H7A5 5 0 0 1 7 7h2"/><path d="M15 7h2a5 5 0 1 1 0 10h-2"/><line x1="8" x2="16" y1="12" y2="12"/></svg>`
+const addCustomSectionSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-dashed-icon lucide-square-dashed"><path d="M5 3a2 2 0 0 0-2 2"/><path d="M19 3a2 2 0 0 1 2 2"/><path d="M21 19a2 2 0 0 1-2 2"/><path d="M5 21a2 2 0 0 1-2-2"/><path d="M9 3h1"/><path d="M9 21h1"/><path d="M14 3h1"/><path d="M14 21h1"/><path d="M3 9v1"/><path d="M21 9v1"/><path d="M3 14v1"/><path d="M21 14v1"/></svg>`
+
 const decorations = [
     {
         name: 'christmas',
@@ -238,8 +248,14 @@ export {
     closeSVG,
     eyeSVG,
     eyeOffSVG,
+    xSVG,
     moveDownSVG,
     moveUpSVG,
+    moveToFirstGraphSVG,
+    moveToLastGraphSVG,
+    addStatWidgetSVG,
+    addLinkWidgetSVG,
+    addCustomSectionSVG,
     menuSVG,
     undoSVG,
     redoSVG,
diff --git a/robotframework_dashboard/templates/dashboard.html b/robotframework_dashboard/templates/dashboard.html
index d4c73241..f360f58c 100644
--- a/robotframework_dashboard/templates/dashboard.html
+++ b/robotframework_dashboard/templates/dashboard.html
@@ -136,6 +136,11 @@ <h4 id="unifiedTitle"></h4>
                                 <a type="button" class="information information-icon ms-2 mt-1"
                                     id="unifiedStatisticsInformation"></a>
                             </div>
+                            <div class="col-auto ms-auto section-header-icons">
+                                <a class="add-stat-widget-header information" id="unifiedAddStatWidgetHeader" data-section="unified" hidden></a>
+                                <a class="add-link-widget-header information" id="unifiedAddLinkWidgetHeader" data-section="unified" hidden></a>
+                                <a class="add-section-header information" id="unifiedAddSectionHeader" data-section="unified" hidden></a>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -156,7 +161,9 @@ <h4 id="unifiedTitle"></h4>
                         <div class="col">
                             <h4 id="runTitle"></h4>
                         </div>
-                        <div class="col-auto ms-auto">
+                        <div class="col-auto ms-auto section-header-icons">
+                            <a class="add-stat-widget-header information" id="runAddStatWidgetHeader" data-section="run" hidden></a>
+                            <a class="add-link-widget-header information" id="runAddLinkWidgetHeader" data-section="run" hidden></a>
                             <a class="move-up-section information" id="runSectionMoveUp" hidden></a>
                             <a class="move-down-section information" id="runSectionMoveDown" hidden></a>
                             <a class="shown-section information" id="runSectionShown" hidden></a>
@@ -207,7 +214,9 @@ <h4 id="suiteTitle"></h4>
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto ms-auto">
+                            <div class="col-auto ms-auto section-header-icons">
+                                <a class="add-stat-widget-header information" id="suiteAddStatWidgetHeader" data-section="suite" hidden></a>
+                                <a class="add-link-widget-header information" id="suiteAddLinkWidgetHeader" data-section="suite" hidden></a>
                                 <a class="move-up-section information" id="suiteSectionMoveUp" hidden></a>
                                 <a class="move-down-section information" id="suiteSectionMoveDown" hidden></a>
                                 <a class="shown-section information" id="suiteSectionShown" hidden></a>
@@ -259,7 +268,9 @@ <h4 id="testTitle"></h4>
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto ms-auto">
+                            <div class="col-auto ms-auto section-header-icons">
+                                <a class="add-stat-widget-header information" id="testAddStatWidgetHeader" data-section="test" hidden></a>
+                                <a class="add-link-widget-header information" id="testAddLinkWidgetHeader" data-section="test" hidden></a>
                                 <a class="move-up-section information" id="testSectionMoveUp" hidden></a>
                                 <a class="move-down-section information" id="testSectionMoveDown" hidden></a>
                                 <a class="shown-section information" id="testSectionShown" hidden></a>
@@ -304,7 +315,9 @@ <h4 id="keywordTitle"></h4>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-auto ms-auto">
+                        <div class="col-auto ms-auto section-header-icons">
+                            <a class="add-stat-widget-header information" id="keywordAddStatWidgetHeader" data-section="keyword" hidden></a>
+                            <a class="add-link-widget-header information" id="keywordAddLinkWidgetHeader" data-section="keyword" hidden></a>
                             <a class="move-up-section information" id="keywordSectionMoveUp" hidden></a>
                             <a class="move-down-section information" id="keywordSectionMoveDown" hidden></a>
                             <a class="shown-section information" id="keywordSectionShown" hidden></a>
@@ -1092,22 +1105,62 @@ <h5 class="modal-title" id="addStatWidgetModalLabel">Add Stat Widget</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
-                        <div class="mb-3">
-                            <label class="form-label" for="addStatWidgetStat">Stat</label>
-                            <select id="addStatWidgetStat" class="form-select"></select>
-                        </div>
-                        <div class="mb-3">
-                            <label class="form-label" for="addStatWidgetTitle">Title</label>
-                            <input type="text" id="addStatWidgetTitle" class="form-control"
-                                placeholder="Widget title" maxlength="40">
-                        </div>
-                        <div class="mb-3">
-                            <label class="form-label d-block">Text Color</label>
-                            <div class="d-flex flex-wrap gap-2" id="addStatWidgetColorPicker"></div>
-                        </div>
-                        <div class="mb-3">
-                            <label class="form-label d-block">Background Color</label>
-                            <div class="d-flex flex-wrap gap-2" id="addStatWidgetBgColorPicker"></div>
+                        <ul class="nav nav-tabs" id="addStatWidgetTab" role="tablist">
+                            <li class="nav-item" role="presentation">
+                                <button class="nav-link active" id="addStatWidgetSingleTab-tab" data-bs-toggle="tab"
+                                    data-bs-target="#addStatWidgetSingleTab" type="button" role="tab"
+                                    aria-controls="addStatWidgetSingleTab" aria-selected="true">Single</button>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <button class="nav-link" id="addStatWidgetAllTab-tab" data-bs-toggle="tab"
+                                    data-bs-target="#addStatWidgetAllTab" type="button" role="tab"
+                                    aria-controls="addStatWidgetAllTab" aria-selected="false">Multiple </button>
+                            </li>
+                        </ul>
+                        <div class="tab-content pt-3" id="addStatWidgetTabContent">
+                            <div class="tab-pane fade show active" id="addStatWidgetSingleTab" role="tabpanel"
+                                aria-labelledby="addStatWidgetSingleTab-tab">
+                                <div class="mb-3">
+                                    <label class="form-label" for="addStatWidgetStat">Stat</label>
+                                    <select id="addStatWidgetStat" class="form-select"></select>
+                                </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="addStatWidgetTitle">Title</label>
+                                    <input type="text" id="addStatWidgetTitle" class="form-control"
+                                        placeholder="Widget title" maxlength="40">
+                                </div>
+                                <div class="mb-3">
+                                    <label class="form-label d-block">Text Color</label>
+                                    <div class="d-flex flex-wrap gap-2" id="addStatWidgetColorPicker"></div>
+                                </div>
+                                <div class="mb-3">
+                                    <label class="form-label d-block">Background Color</label>
+                                    <div class="d-flex flex-wrap gap-2" id="addStatWidgetBgColorPicker"></div>
+                                </div>
+                            </div>
+                            <div class="tab-pane fade" id="addStatWidgetAllTab" role="tabpanel"
+                                aria-labelledby="addStatWidgetAllTab-tab">
+                                <p class="mb-2">Toggle the stats you want to add and optionally adjust their titles.</p>
+                                <div class="mb-2 form-check form-switch">
+                                    <input class="form-check-input" type="checkbox" role="switch" id="addAllWidgetsToggleAll" checked>
+                                    <label class="form-check-label" for="addAllWidgetsToggleAll">Toggle all</label>
+                                </div>
+                                <div id="addAllWidgetsList" class="mb-3 add-all-widgets-list"></div>
+                                <div class="mb-3 form-check form-switch">
+                                    <input class="form-check-input" type="checkbox" role="switch" id="addAllWidgetsRandom" checked>
+                                    <label class="form-check-label" for="addAllWidgetsRandom">Use random colors</label>
+                                </div>
+                                <div id="addAllWidgetsColorGroup" hidden>
+                                    <div class="mb-3">
+                                        <label class="form-label d-block">Text Color</label>
+                                        <div class="d-flex flex-wrap gap-2" id="addAllWidgetsColorPicker"></div>
+                                    </div>
+                                    <div class="mb-3">
+                                        <label class="form-label d-block">Background Color</label>
+                                        <div class="d-flex flex-wrap gap-2" id="addAllWidgetsBgColorPicker"></div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <div class="modal-footer">
@@ -1115,6 +1168,8 @@ <h5 class="modal-title" id="addStatWidgetModalLabel">Add Stat Widget</h5>
                             data-bs-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-outline-light btn-sm"
                             id="addStatWidgetConfirm">Add Widget</button>
+                        <button type="button" class="btn btn-outline-light btn-sm"
+                            id="addAllWidgetsConfirm" hidden>Add Selected Widgets</button>
                     </div>
                 </div>
             </div>

From 3bf5d7fbfc4e9794fb40567e3249a991c8606e60 Mon Sep 17 00:00:00 2001
From: Tim de Groot <tim-degroot@live.nl>
Date: Thu, 25 Jun 2026 01:51:46 +0200
Subject: [PATCH 4/5] docs: add Commands section to CLAUDE.md

Surface canonical test/build/dashboard-gen commands directly in
CLAUDE.md so the right invocation is in context without opening a
skill file. Covers JS/Python/Robot tests, docs, and the package
dashboard-generation command used to validate bundled output.
---
 CLAUDE.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index b14b0dce..77950af1 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -8,6 +8,23 @@ Before starting work on any non-trivial task, read the relevant skill file from
 
 ---
 
+## Commands
+
+Use the project scripts — do NOT invoke the underlying tools directly (the scripts set coverage paths, artifact dirs, and parallelism). `.bat` for Windows, `.sh` for Linux/macOS.
+
+| Task | Windows | Linux / macOS |
+|---|---|---|
+| JS unit tests | `scripts\javascript-tests.bat` | `bash scripts/javascript-tests.sh` |
+| Python unit tests | `scripts\python-tests.bat` | `bash scripts/python-tests.sh` |
+| Robot acceptance tests | `scripts\robot-tests.bat` | `bash scripts/robot-tests.sh` |
+| Generate dashboard for testing | `python -m robotframework_dashboard.main -n robot_dashboard -f tests` | same |
+| Docs build | `npm run docs:build` | `npm run docs:build` |
+| Docs dev server | `npm run docs:dev` | `npm run docs:dev` |
+
+**Generate dashboard for testing** runs the package directly (no install) against the `tests/` output.xml fixtures, producing `robot_dashboard.html`. Use this to validate any JS/CSS/template/Python pipeline change — open the HTML to confirm rendering, layout, and click handlers. A clean import/syntax check is not sufficient; bundled-output bugs only surface here.
+
+---
+
 ## Project Purpose
 
 `robotframework-dashboard` is a Python CLI tool that reads Robot Framework `output.xml` execution results, stores them in a SQLite database, and generates a fully self-contained HTML dashboard with interactive charts, tables, and filters. No web server is required to view the output — a single `.html` file contains all data, JS, and CSS.

From 2cee75cbbfb2d8007673f2501bd332719e629daf Mon Sep 17 00:00:00 2001
From: Tim de Groot <tim-degroot@live.nl>
Date: Thu, 25 Jun 2026 22:48:10 +0200
Subject: [PATCH 5/5] fix(stat-widgets): decouple toggle-all from child
 toggles, enlarge list, fix modal corners

- Multiple tab "Toggle all" now keeps its own state; manual child
toggles no longer feed back into it. Clicking forces all children
to the switch state. Removed sync_toggle_all_widgets_state and the
indeterminate handling.
- Stat list max-height 300px -> 60vh so long sections (Test/unified)
avoid a scrollbar on normal screens.
- Removed background from .modal-dialog (applied in both themes) that
bled square corners past the rounded .modal-content in light mode.
---
 robotframework_dashboard/css/components.css |  2 +-
 robotframework_dashboard/css/dark.css       |  1 -
 robotframework_dashboard/js/statwidgets.js  | 28 +++------------------
 3 files changed, 5 insertions(+), 26 deletions(-)

diff --git a/robotframework_dashboard/css/components.css b/robotframework_dashboard/css/components.css
index 64d7b3b8..dfda06ba 100644
--- a/robotframework_dashboard/css/components.css
+++ b/robotframework_dashboard/css/components.css
@@ -159,7 +159,7 @@
 
 /* "All" tab stat list inside the Add Stat Widget modal */
 .add-all-widgets-list {
-  max-height: 300px;
+  max-height: 60vh;
   overflow-y: auto;
 }
 
diff --git a/robotframework_dashboard/css/dark.css b/robotframework_dashboard/css/dark.css
index da7d8cc8..9e7064b6 100644
--- a/robotframework_dashboard/css/dark.css
+++ b/robotframework_dashboard/css/dark.css
@@ -1,5 +1,4 @@
 .modal-dialog {
-  background: var(--color-modal-bg);
   color: var(--color-text);
 }
 
diff --git a/robotframework_dashboard/js/statwidgets.js b/robotframework_dashboard/js/statwidgets.js
index 3f751797..619c5d88 100644
--- a/robotframework_dashboard/js/statwidgets.js
+++ b/robotframework_dashboard/js/statwidgets.js
@@ -229,21 +229,7 @@ function populate_all_widgets_list(sectionKey) {
     }
 
     const toggleAll = document.getElementById('addAllWidgetsToggleAll');
-    if (toggleAll) {
-        toggleAll.checked = true;
-        toggleAll.indeterminate = false;
-    }
-}
-
-// Updates the "Toggle all" switch to reflect the checked/unchecked/mixed state of the individual toggles
-function sync_toggle_all_widgets_state() {
-    const toggleAll = document.getElementById('addAllWidgetsToggleAll');
-    const container = document.getElementById('addAllWidgetsList');
-    if (!toggleAll || !container) return;
-    const toggles = [...container.querySelectorAll('.add-all-widgets-toggle')];
-    const checkedCount = toggles.filter(t => t.checked).length;
-    toggleAll.checked = checkedCount === toggles.length;
-    toggleAll.indeterminate = checkedCount > 0 && checkedCount < toggles.length;
+    if (toggleAll) toggleAll.checked = true;
 }
 
 // Adds a stat widget for every toggled-on row in the "All" tab list
@@ -305,22 +291,16 @@ function setup_add_stat_widget_modal() {
         if (group) group.hidden = e.target.checked;
     });
 
-    // "Toggle all" switch turns every stat toggle in the "All" tab on or off
+    // "Toggle all" switch forces every stat toggle in the "All" tab to its own
+    // state. Individual toggles never feed back into this switch — it just keeps
+    // whatever state it has until clicked again.
     document.getElementById('addAllWidgetsToggleAll')?.addEventListener('change', (e) => {
         const checked = e.target.checked;
-        e.target.indeterminate = false;
         document.querySelectorAll('#addAllWidgetsList .add-all-widgets-toggle').forEach(toggle => {
             toggle.checked = checked;
         });
     });
 
-    // Keep the "Toggle all" switch in sync when individual stat toggles change
-    document.getElementById('addAllWidgetsList')?.addEventListener('change', (e) => {
-        if (e.target.classList.contains('add-all-widgets-toggle')) {
-            sync_toggle_all_widgets_state();
-        }
-    });
-
     // Add All confirm button
     allConfirm?.addEventListener('click', () => {
         const modal      = document.getElementById('addStatWidgetModal');