Add Rulesets page with HTML structure and CSS styles

- Created a new HTML file for the Rulesets page, including a header, toolbar, rules grid, and rule detail popup. - Implemented JavaScript functionality for loading, filtering, sorting, and managing rules. - Added CSS styles for the layout, components, and responsive design of the Rulesets page.
2026-04-15 08:06:29 +02:00
parent c9402de2e4
commit 3094c06467
13 changed files with 2010 additions and 27 deletions
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -10,6 +10,7 @@
            "dependencies": {
                "@influxdata/influxdb-client": "^1.35.0",
                "@influxdata/influxdb-client-apis": "^1.35.0",
+                "@msgpack/msgpack": "^3.1.3",
                "cookie-parser": "^1.4.7",
                "dotenv": "^17.3.1",
                "express": "^5.2.1",
@@ -40,6 +41,15 @@
            "integrity": "sha512-JH8ZL/ywcJyR9MmJ5BNqZllXNZQqQbnVZOqpPQqE1vHiFgAw4NHbvE0FOduNU8IX9babitBT46571OnPTT0Zcw==",
            "license": "MIT"
        },
+        "node_modules/@msgpack/msgpack": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-3.1.3.tgz",
+            "integrity": "sha512-47XIizs9XZXvuJgoaJUIE2lFoID8ugvc0jzSHP+Ptfk8nTbnR8g788wv48N03Kx0UkAv559HWRQ3yzOgzlRNUA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">= 18"
+            }
+        },
        "node_modules/accepts": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
--- a/api/package.json
+++ b/api/package.json
@@ -11,6 +11,7 @@
    "dependencies": {
        "@influxdata/influxdb-client": "^1.35.0",
        "@influxdata/influxdb-client-apis": "^1.35.0",
+        "@msgpack/msgpack": "^3.1.3",
        "cookie-parser": "^1.4.7",
        "dotenv": "^17.3.1",
        "express": "^5.2.1",
@@ -19,4 +20,4 @@
        "minio": "^8.0.7",
        "pg": "^8.20.0"
    }
-}
+}
--- a/api/src/index.js
+++ b/api/src/index.js
@@ -81,7 +81,10 @@ app.use('/params', paramsRoutes)
 const settingsRoutes = require('./routes/settings')
 app.use('/settings', settingsRoutes)

-// Avvio del server
+const rulesRoutes = require('./routes/rules')
+app.use('/rules', rulesRoutes)
+
+
 app.listen(PORT, '0.0.0.0', () => {
    console.log(`Started on port ${PORT}`);
 });
--- a/api/src/routes/rules.js
+++ b/api/src/routes/rules.js
@@ -0,0 +1,497 @@
+const router = require('express').Router();
+const db = require('../storage/postgres');
+const { encode } = require('@msgpack/msgpack');
+
+// Mapping tipo → tabelle
+const TYPE_MAP = {
+    weather: { rules: 'weather', items: 'weatheritems' },
+    data:    { rules: 'dataread', items: 'datareaditems' },
+    logs:    { rules: 'logs', items: 'logitems' }
+};
+
+const VALID_TYPES = Object.keys(TYPE_MAP);
+
+/**
+ * GET /rules — Lista tutte le rules (id, version, active) per ogni tipo
+ */
+router.get('/', async (req, res) => {
+    try {
+        const result = {};
+        for (const [type, tables] of Object.entries(TYPE_MAP)) {
+            const { rows } = await db.query(
+                `SELECT * FROM ${tables.rules} ORDER BY created_at DESC`,
+                [], 'rules'
+            );
+            result[type] = rows;
+        }
+        res.json(result);
+    } catch (err) {
+        console.error('Error fetching rules', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * GET /rules/versions — Ritorna solo id+version delle 3 rules attive (check rapido)
+ */
+router.get('/versions', async (req, res) => {
+    try {
+        const versions = {};
+        for (const [type, tables] of Object.entries(TYPE_MAP)) {
+            const { rows } = await db.query(
+                `SELECT id, version FROM ${tables.rules} WHERE active = true AND archived = false LIMIT 1`,
+                [], 'rules'
+            );
+            versions[type] = rows[0] || null;
+        }
+        res.json(versions);
+    } catch (err) {
+        console.error('Error fetching versions', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * GET /rules/active?type=weather — Ritorna la rule attiva completa con items
+ * Supporta Accept: application/msgpack per formato compatto
+ */
+router.get('/active', async (req, res) => {
+    const { type } = req.query;
+    if (!type || !VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: `invalid type, must be one of: ${VALID_TYPES.join(', ')}` });
+    }
+
+    const tables = TYPE_MAP[type];
+
+    try {
+        const { rows: ruleRows } = await db.query(
+            `SELECT * FROM ${tables.rules} WHERE active = true AND archived = false LIMIT 1`,
+            [], 'rules'
+        );
+
+        if (ruleRows.length === 0) {
+            return res.status(404).json({ error: `no active ${type} rule found` });
+        }
+
+        const rule = ruleRows[0];
+
+        const { rows: items } = await db.query(
+            `SELECT * FROM ${tables.items} WHERE rule_id = $1 AND enabled = true`,
+            [rule.id], 'rules'
+        );
+
+        const payload = {
+            id: rule.id,
+            version: rule.version,
+            description: rule.description,
+            tags: rule.tags,
+            items
+        };
+
+        // Se il client accetta msgpack, rispondi in binario
+        if (req.accepts('application/msgpack')) {
+            res.set('Content-Type', 'application/msgpack');
+            return res.send(Buffer.from(encode(payload)));
+        }
+
+        res.json(payload);
+    } catch (err) {
+        console.error('Error fetching active rule', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * GET /rules/:type/:id — Dettaglio di una rule specifica con items
+ */
+router.get('/:type/:id', async (req, res) => {
+    const { type, id } = req.params;
+    if (!VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+
+    const tables = TYPE_MAP[type];
+
+    try {
+        const { rows: ruleRows } = await db.query(
+            `SELECT * FROM ${tables.rules} WHERE id = $1`,
+            [id], 'rules'
+        );
+
+        if (ruleRows.length === 0) {
+            return res.status(404).json({ error: 'rule not found' });
+        }
+
+        const rule = ruleRows[0];
+        const { rows: items } = await db.query(
+            `SELECT * FROM ${tables.items} WHERE rule_id = $1`,
+            [rule.id], 'rules'
+        );
+
+        res.json({ ...rule, items });
+    } catch (err) {
+        console.error('Error fetching rule', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * PATCH /rules/update?type=weather&from=1.0.0
+ * Ritorna le rules con versione > from (per aggiornamenti incrementali)
+ */
+router.patch('/update', async (req, res) => {
+    const { type, from } = req.query;
+
+    if (!type || !VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+    if (!from) {
+        return res.status(400).json({ error: 'missing from parameter' });
+    }
+
+    const tables = TYPE_MAP[type];
+
+    try {
+        const { rows } = await db.query(
+            `SELECT * FROM ${tables.rules} WHERE version > $1 AND archived = false ORDER BY version ASC`,
+            [from], 'rules'
+        );
+
+        if (rows.length === 0) {
+            return res.status(404).json({ error: 'no rules found with version greater than specified' });
+        }
+
+        // Per ogni rule, allegare gli items
+        const results = [];
+        for (const rule of rows) {
+            const { rows: items } = await db.query(
+                `SELECT * FROM ${tables.items} WHERE rule_id = $1`,
+                [rule.id], 'rules'
+            );
+            results.push({ ...rule, items });
+        }
+
+        if (req.accepts('application/msgpack')) {
+            res.set('Content-Type', 'application/msgpack');
+            return res.send(Buffer.from(encode(results)));
+        }
+
+        res.json(results);
+    } catch (err) {
+        console.error('Error fetching rules update', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+// --- ID Generation ---
+const TYPE_PREFIX = { weather: 'w', data: 'd', logs: 'l' };
+
+function generateId(type) {
+    const prefix = TYPE_PREFIX[type] || 'x';
+    const num = Math.floor(1000 + Math.random() * 9000);
+    // Pad to 8 chars with trailing zeros
+    return (prefix + num).padEnd(8, '0');
+}
+
+// --- ITEM FIELD DEFINITIONS per tipo ---
+const ITEM_FIELDS = {
+    weather: ['group_name', 'ref', 'name', 'unit', 'enabled'],
+    data: ['category', 'path', 'unit', 'enabled'],
+    logs: ['path', 'ref', 'unit', 'measurement', 'enabled']
+};
+
+// Campi rule aggiornabili
+const RULE_UPDATE_FIELDS = {
+    weather: ['version', 'tags', 'description'],
+    data: ['version', 'tags'],
+    logs: ['version', 'tags', 'description', 'browser_rule_id']
+};
+
+/**
+ * POST /rules/:type — Crea una nuova rule
+ */
+router.post('/:type', async (req, res) => {
+    const { type } = req.params;
+    if (!VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+
+    const tables = TYPE_MAP[type];
+    const id = generateId(type);
+    const { version, tags, description, browser_rule_id } = req.body;
+
+    if (!version) {
+        return res.status(400).json({ error: 'version is required' });
+    }
+
+    try {
+        let sql, params;
+        if (type === 'weather') {
+            sql = `INSERT INTO ${tables.rules} (id, version, tags, description) VALUES ($1, $2, $3, $4) RETURNING *`;
+            params = [id, version, tags || [], description || null];
+        } else if (type === 'logs') {
+            sql = `INSERT INTO ${tables.rules} (id, version, tags, description, browser_rule_id) VALUES ($1, $2, $3, $4, $5) RETURNING *`;
+            params = [id, version, tags || [], description || null, browser_rule_id || null];
+        } else {
+            sql = `INSERT INTO ${tables.rules} (id, version, tags) VALUES ($1, $2, $3) RETURNING *`;
+            params = [id, version, tags || []];
+        }
+
+        const { rows } = await db.query(sql, params, 'rules');
+        res.status(201).json(rows[0]);
+    } catch (err) {
+        console.error('Error creating rule', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * PUT /rules/:type/:id — Aggiorna una rule
+ */
+router.put('/:type/:id', async (req, res) => {
+    const { type, id } = req.params;
+    if (!VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+
+    const tables = TYPE_MAP[type];
+    const allowed = RULE_UPDATE_FIELDS[type];
+    const sets = [];
+    const params = [];
+    let idx = 1;
+
+    for (const field of allowed) {
+        if (req.body[field] !== undefined) {
+            sets.push(`${field} = $${idx}`);
+            params.push(req.body[field]);
+            idx++;
+        }
+    }
+
+    if (sets.length === 0) {
+        return res.status(400).json({ error: 'no valid fields to update' });
+    }
+
+    sets.push(`updated_at = NOW()`);
+    params.push(id);
+
+    try {
+        const sql = `UPDATE ${tables.rules} SET ${sets.join(', ')} WHERE id = $${idx} RETURNING *`;
+        const { rows } = await db.query(sql, params, 'rules');
+        if (rows.length === 0) return res.status(404).json({ error: 'rule not found' });
+        res.json(rows[0]);
+    } catch (err) {
+        console.error('Error updating rule', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * DELETE /rules/:type/:id — Elimina una rule (cascade items)
+ */
+router.delete('/:type/:id', async (req, res) => {
+    const { type, id } = req.params;
+    if (!VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+
+    const tables = TYPE_MAP[type];
+
+    try {
+        const { rowCount } = await db.query(
+            `DELETE FROM ${tables.rules} WHERE id = $1`, [id], 'rules'
+        );
+        if (rowCount === 0) return res.status(404).json({ error: 'rule not found' });
+        res.json({ status: 'ok' });
+    } catch (err) {
+        console.error('Error deleting rule', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * PATCH /rules/:type/:id/active — Toggle active
+ * Disattiva tutte le altre, poi attiva questa (o disattiva se già attiva)
+ */
+router.patch('/:type/:id/active', async (req, res) => {
+    const { type, id } = req.params;
+    if (!VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+
+    const tables = TYPE_MAP[type];
+
+    try {
+        // Check current state
+        const { rows: current } = await db.query(
+            `SELECT active FROM ${tables.rules} WHERE id = $1`, [id], 'rules'
+        );
+        if (current.length === 0) return res.status(404).json({ error: 'rule not found' });
+
+        const isActive = current[0].active;
+
+        if (isActive) {
+            // Disattiva
+            await db.query(`UPDATE ${tables.rules} SET active = false, updated_at = NOW() WHERE id = $1`, [id], 'rules');
+        } else {
+            // Disattiva tutte, poi attiva questa
+            await db.query(`UPDATE ${tables.rules} SET active = false, updated_at = NOW() WHERE active = true`, [], 'rules');
+            await db.query(`UPDATE ${tables.rules} SET active = true, updated_at = NOW() WHERE id = $1`, [id], 'rules');
+        }
+
+        res.json({ status: 'ok', active: !isActive });
+    } catch (err) {
+        console.error('Error toggling active', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * PATCH /rules/:type/:id/archive — Toggle archived
+ */
+router.patch('/:type/:id/archive', async (req, res) => {
+    const { type, id } = req.params;
+    if (!VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+
+    const tables = TYPE_MAP[type];
+
+    try {
+        const { rows } = await db.query(
+            `UPDATE ${tables.rules} SET archived = NOT archived, updated_at = NOW() WHERE id = $1 RETURNING archived`,
+            [id], 'rules'
+        );
+        if (rows.length === 0) return res.status(404).json({ error: 'rule not found' });
+        res.json({ status: 'ok', archived: rows[0].archived });
+    } catch (err) {
+        console.error('Error toggling archive', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * POST /rules/:type/:id/items — Aggiungi item
+ */
+router.post('/:type/:id/items', async (req, res) => {
+    const { type, id } = req.params;
+    if (!VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+
+    const tables = TYPE_MAP[type];
+    const fields = ITEM_FIELDS[type].filter(f => f !== 'enabled');
+    const values = fields.map(f => req.body[f]);
+
+    // Validate required fields present
+    for (let i = 0; i < fields.length; i++) {
+        if (values[i] === undefined || values[i] === null || values[i] === '') {
+            return res.status(400).json({ error: `${fields[i]} is required` });
+        }
+    }
+
+    const allFields = ['rule_id', ...fields];
+    const allValues = [id, ...values];
+    const placeholders = allValues.map((_, i) => `$${i + 1}`).join(', ');
+
+    try {
+        const sql = `INSERT INTO ${tables.items} (${allFields.join(', ')}) VALUES (${placeholders}) RETURNING *`;
+        const { rows } = await db.query(sql, allValues, 'rules');
+        res.status(201).json(rows[0]);
+    } catch (err) {
+        console.error('Error creating item', err);
+        if (err.code === '23505') {
+            return res.status(409).json({ error: 'duplicate item (unique constraint)' });
+        }
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * PUT /rules/:type/:id/items/:itemId — Aggiorna item
+ */
+router.put('/:type/:id/items/:itemId', async (req, res) => {
+    const { type, id, itemId } = req.params;
+    if (!VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+
+    const tables = TYPE_MAP[type];
+    const allowed = ITEM_FIELDS[type];
+    const sets = [];
+    const params = [];
+    let idx = 1;
+
+    for (const field of allowed) {
+        if (req.body[field] !== undefined) {
+            sets.push(`${field} = $${idx}`);
+            params.push(req.body[field]);
+            idx++;
+        }
+    }
+
+    if (sets.length === 0) {
+        return res.status(400).json({ error: 'no valid fields to update' });
+    }
+
+    params.push(itemId, id);
+
+    try {
+        const sql = `UPDATE ${tables.items} SET ${sets.join(', ')} WHERE id = $${idx} AND rule_id = $${idx + 1} RETURNING *`;
+        const { rows } = await db.query(sql, params, 'rules');
+        if (rows.length === 0) return res.status(404).json({ error: 'item not found' });
+        res.json(rows[0]);
+    } catch (err) {
+        console.error('Error updating item', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * DELETE /rules/:type/:id/items/:itemId — Elimina item
+ */
+router.delete('/:type/:id/items/:itemId', async (req, res) => {
+    const { type, id, itemId } = req.params;
+    if (!VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+
+    const tables = TYPE_MAP[type];
+
+    try {
+        const { rowCount } = await db.query(
+            `DELETE FROM ${tables.items} WHERE id = $1 AND rule_id = $2`, [itemId, id], 'rules'
+        );
+        if (rowCount === 0) return res.status(404).json({ error: 'item not found' });
+        res.json({ status: 'ok' });
+    } catch (err) {
+        console.error('Error deleting item', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+/**
+ * PATCH /rules/:type/:id/items/:itemId/toggle — Toggle enabled
+ */
+router.patch('/:type/:id/items/:itemId/toggle', async (req, res) => {
+    const { type, id, itemId } = req.params;
+    if (!VALID_TYPES.includes(type)) {
+        return res.status(400).json({ error: 'invalid rule type' });
+    }
+
+    const tables = TYPE_MAP[type];
+
+    try {
+        const { rows } = await db.query(
+            `UPDATE ${tables.items} SET enabled = NOT enabled WHERE id = $1 AND rule_id = $2 RETURNING enabled`,
+            [itemId, id], 'rules'
+        );
+        if (rows.length === 0) return res.status(404).json({ error: 'item not found' });
+        res.json({ status: 'ok', enabled: rows[0].enabled });
+    } catch (err) {
+        console.error('Error toggling item', err);
+        res.status(500).json({ error: 'internal server error' });
+    }
+});
+
+module.exports = router;
--- a/api/src/storage/postgres.js
+++ b/api/src/storage/postgres.js
@@ -13,7 +13,8 @@ const config = {
 const pools = {
    data: new Pool({ ...config, database: process.env.DATA_DB }),
    users: new Pool({ ...config, database: process.env.USERS_DB }),
-    sensors: new Pool({ ...config, database: process.env.SENSOR_DB || 'users' })
+    sensors: new Pool({ ...config, database: process.env.SENSOR_DB || 'users' }),
+    rules: new Pool({ ...config, database: process.env.RULES_DB || 'rules' }),
 }

 Object.entries(pools).forEach(([name, pool]) => {
--- a/console/src/index.js
+++ b/console/src/index.js
@@ -87,6 +87,10 @@ app.get('/live', renderPage('live', {
    realtimeWsUrl: process.env.REALTIME_WS_URL || 'ws://localhost:3002'
 }));

+app.get('/rulesets', renderPage('rulesets', {
+    apiUrl: process.env.API_URL || 'http://localhost:3003'
+}));
+
 app.listen(PORT, '0.0.0.0', () => {
    console.log(`Started on port ${PORT}`);
 });
--- a/console/src/pages/dashboard.html
+++ b/console/src/pages/dashboard.html
@@ -31,10 +31,10 @@
            </div>
        </a>

-        <a class="card" href="/forecasts" title="Previsioni">
+        <a class="card" href="/rulesets" title="Rulesets">
            <div>
-                <h3>Previsioni</h3>
-                <p>Visualizza le condizioni meteo attuali e le previsioni future.</p>
+                <h3>Rulesets</h3>
+                <p>Gestisci i template di configurazione per weather, data e logs.</p>
            </div>
        </a>

--- a/console/src/pages/live.html
+++ b/console/src/pages/live.html
@@ -28,6 +28,20 @@
            </div>
        </div>

+        <!-- Session Label Popup -->
+        <div class="session-label-overlay" id="sessionLabelOverlay" style="display:none">
+            <div class="session-popup">
+                <h2>Nome Sessione</h2>
+                <p class="popup-subtitle">I nuovi dati verranno taggati con questo nome</p>
+                <input type="text" id="sessionLabelInput" placeholder="es. Traversata Sardegna" />
+                <p style="font-size:0.8rem;color:#94a3b8;margin:8px 0;">Attuale: <span id="currentSessionLabel">—</span></p>
+                <div style="display:flex;gap:8px;">
+                    <button id="saveSessionLabelBtn">Salva</button>
+                    <button id="cancelSessionLabelBtn" style="background:#334155;">Annulla</button>
+                </div>
+            </div>
+        </div>
+
        <!-- Main Content -->
        <div class="content" id="mainContent" style="display: none;">
            <div class="header">
@@ -154,6 +168,10 @@

            <div class="bar-sep"></div>

+            <button id="sessionLabelBtn" title="Sessione di registrazione">Sessione</button>
+
+            <div class="bar-sep"></div>
+
            <button id="downloadBtn" title="Scarica CSV">Scarica</button>
        </div>

@@ -299,6 +317,7 @@ function selectSession(sId, meta) {
    document.getElementById('bottomBar').style.display = '';
    document.getElementById('sensorName').textContent = meta.name || sId;
    document.getElementById('sessionInfoTitle').textContent = `Sensore: ${meta.name || sId}`;
+    document.getElementById('currentSessionLabel').textContent = meta.sessionLabel || meta.session || sId;
    liveData = {};
    Object.values(miniCharts).forEach(c => c.destroy());
    miniCharts = {};
@@ -704,4 +723,33 @@ function showToast(msg) {
    }, 4500);
 }

+// --- Session Label Popup ---
+document.getElementById('sessionLabelBtn').onclick = () => {
+    document.getElementById('sessionLabelInput').value = '';
+    document.getElementById('sessionLabelOverlay').style.display = 'flex';
+};
+document.getElementById('cancelSessionLabelBtn').onclick = () => {
+    document.getElementById('sessionLabelOverlay').style.display = 'none';
+};
+document.getElementById('saveSessionLabelBtn').onclick = async () => {
+    const label = document.getElementById('sessionLabelInput').value.trim();
+    if (!label || !currentSensorId) return;
+    try {
+        const res = await fetch(`${REALTIME_URL}/sessions/${currentSensorId}/label`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ label })
+        });
+        if (res.ok) {
+            document.getElementById('currentSessionLabel').textContent = label;
+            showToast(`Sessione rinominata: ${label}`);
+        } else {
+            showToast('Errore nel salvataggio');
+        }
+    } catch (err) {
+        showToast('Errore di connessione');
+    }
+    document.getElementById('sessionLabelOverlay').style.display = 'none';
+};
+
 </script>
--- a/console/src/pages/rulesets.html
+++ b/console/src/pages/rulesets.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+
+<head>
+    <link rel="stylesheet" href="/static/styles/style.css">
+    <link rel="stylesheet" href="/static/styles/rulesets.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+    <div class="rs-page">
+
+        <!-- Header -->
+        <div class="rs-header">
+            <div class="rs-header-left">
+                <a href="/dashboard" class="rs-back">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </a>
+                <h1>Rulesets</h1>
+                <div class="rs-type-picker" id="typePicker">
+                    <button class="active" data-type="weather">Weather</button>
+                    <button data-type="data">Data</button>
+                    <button data-type="logs">Logs</button>
+                </div>
+            </div>
+            <div class="rs-header-right">
+                <span class="rs-saving" id="savingIndicator">Salvato</span>
+            </div>
+        </div>
+
+        <!-- Toolbar -->
+        <div class="rs-toolbar">
+            <div class="rs-toolbar-left">
+                <button class="rs-filter-btn active" data-filter="all">Tutte</button>
+                <button class="rs-filter-btn" data-filter="active">Attive</button>
+                <button class="rs-filter-btn" data-filter="archived">Archiviate</button>
+                <select class="rs-sort-select" id="sortSelect">
+                    <option value="created_at">Data creazione</option>
+                    <option value="version">Versione</option>
+                </select>
+            </div>
+            <div class="rs-toolbar-right">
+                <button class="rs-new-btn" id="newRuleBtn">+ Nuova Rule</button>
+            </div>
+        </div>
+
+        <!-- Rules Grid -->
+        <div class="rs-grid" id="rulesGrid">
+            <div class="rs-empty">Caricamento...</div>
+        </div>
+
+    </div>
+
+    <!-- Rule Detail Popup -->
+    <div class="rs-overlay" id="ruleOverlay" style="display:none">
+        <div class="rs-popup">
+            <div class="rs-popup-header">
+                <div class="rs-popup-header-left">
+                    <span class="rs-card-id" id="popupId"></span>
+                    <span class="rs-saving" id="popupSaving">Salvato</span>
+                </div>
+                <button class="rs-popup-close" id="popupClose">&times;</button>
+            </div>
+            <div class="rs-popup-body">
+
+                <!-- Version + Description -->
+                <div class="rs-section">
+                    <div class="rs-field-row">
+                        <span class="rs-field-label">Versione</span>
+                        <input class="rs-field-input" id="popupVersion" placeholder="1.0.0" />
+                    </div>
+                    <div class="rs-field-row" id="popupDescRow" style="display:none">
+                        <span class="rs-field-label">Descrizione</span>
+                        <textarea class="rs-field-textarea" id="popupDesc" placeholder="Descrizione opzionale..."></textarea>
+                    </div>
+                </div>
+
+                <!-- Tags -->
+                <div class="rs-section">
+                    <div class="rs-section-title">Tags</div>
+                    <div class="rs-tags-wrap" id="popupTags">
+                        <input class="rs-tag-input" id="tagInput" placeholder="Aggiungi tag..." />
+                    </div>
+                </div>
+
+                <!-- Actions -->
+                <div class="rs-section">
+                    <div class="rs-section-title">Azioni</div>
+                    <div class="rs-actions">
+                        <button class="rs-action-btn active-toggle" id="toggleActiveBtn">Attiva</button>
+                        <button class="rs-action-btn archive-toggle" id="toggleArchiveBtn">Archivia</button>
+                        <button class="rs-action-btn danger" id="deleteRuleBtn">Elimina</button>
+                    </div>
+                </div>
+
+                <!-- Items -->
+                <div class="rs-section">
+                    <div class="rs-items-header">
+                        <div class="rs-section-title">Items</div>
+                        <button class="rs-add-item-btn" id="addItemBtn">+ Aggiungi</button>
+                    </div>
+                    <div class="rs-item-labels" id="itemLabelsRow"></div>
+                    <div id="itemsList"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Confirm Dialog -->
+    <div class="rs-confirm-overlay" id="confirmOverlay" style="display:none">
+        <div class="rs-confirm-box">
+            <h3 id="confirmTitle">Conferma</h3>
+            <p id="confirmText">Sei sicuro?</p>
+            <div class="rs-confirm-actions">
+                <button id="confirmCancel">Annulla</button>
+                <button class="confirm-danger" id="confirmOk">Conferma</button>
+            </div>
+        </div>
+    </div>
+
+<script>
+const API_URL = '{{ apiUrl }}';
+
+// --- State ---
+let currentType = 'weather';
+let currentFilter = 'all';
+let currentSort = 'created_at';
+let allRules = [];
+let openRule = null; // rule attualmente aperta nel popup
+let saveTimers = {};
+
+// --- Item field definitions per tipo ---
+const ITEM_SCHEMA = {
+    weather: [
+        { key: 'group_name', label: 'Gruppo', cls: 'medium' },
+        { key: 'ref', label: 'Ref', cls: 'medium' },
+        { key: 'name', label: 'Nome', cls: 'wide' },
+        { key: 'unit', label: 'Unita', cls: 'narrow' },
+    ],
+    data: [
+        { key: 'category', label: 'Categoria', cls: 'medium' },
+        { key: 'path', label: 'Path', cls: 'wide' },
+        { key: 'unit', label: 'Unita', cls: 'narrow' },
+    ],
+    logs: [
+        { key: 'path', label: 'Path', cls: 'wide' },
+        { key: 'ref', label: 'Ref', cls: 'narrow' },
+        { key: 'unit', label: 'Unita', cls: 'narrow' },
+        { key: 'measurement', label: 'Measurement', cls: 'medium' },
+    ],
+};
+
+const HAS_DESC = { weather: true, data: false, logs: true };
+
+// ========== API helpers ==========
+
+async function api(method, path, body) {
+    const opts = { method, headers: {} };
+    if (body) {
+        opts.headers['Content-Type'] = 'application/json';
+        opts.body = JSON.stringify(body);
+    }
+    const res = await fetch(`${API_URL}${path}`, opts);
+    if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || `HTTP ${res.status}`);
+    }
+    return res.json();
+}
+
+// ========== Load & Render Rules ==========
+
+async function loadRules() {
+    try {
+        const data = await api('GET', '/rules');
+        allRules = data[currentType] || [];
+        renderGrid();
+    } catch (err) {
+        console.error('Error loading rules:', err);
+        document.getElementById('rulesGrid').innerHTML = '<div class="rs-empty">Errore nel caricamento</div>';
+    }
+}
+
+function filterAndSort(rules) {
+    let filtered = rules;
+    if (currentFilter === 'active') filtered = rules.filter(r => r.active && !r.archived);
+    else if (currentFilter === 'archived') filtered = rules.filter(r => r.archived);
+
+    filtered.sort((a, b) => {
+        if (currentSort === 'version') return (b.version || '').localeCompare(a.version || '', undefined, { numeric: true });
+        return new Date(b.created_at) - new Date(a.created_at);
+    });
+    return filtered;
+}
+
+function renderGrid() {
+    const grid = document.getElementById('rulesGrid');
+    const rules = filterAndSort(allRules);
+
+    if (rules.length === 0) {
+        grid.innerHTML = '<div class="rs-empty">Nessuna rule trovata</div>';
+        return;
+    }
+
+    grid.innerHTML = rules.map(r => {
+        const badges = [];
+        if (r.active) badges.push('<span class="rs-badge active">Attiva</span>');
+        else badges.push('<span class="rs-badge inactive">Inattiva</span>');
+        if (r.archived) badges.push('<span class="rs-badge archived">Archiviata</span>');
+
+        const tags = (r.tags || []).map(t => `<span class="rs-tag">${esc(t)}</span>`).join('');
+        const desc = r.description ? `<div class="rs-card-desc">${esc(r.description)}</div>` : '';
+        const date = r.created_at ? new Date(r.created_at).toLocaleDateString('it-IT', { day: '2-digit', month: 'short', year: 'numeric' }) : '';
+
+        return `
+        <div class="rs-card" data-id="${r.id}" onclick="openRuleDetail('${r.id}')">
+            <div class="rs-card-header">
+                <div>
+                    <div class="rs-card-version">v${esc(r.version)}</div>
+                    <span class="rs-card-id">${esc(r.id)}</span>
+                </div>
+                <div class="rs-card-badges">${badges.join('')}</div>
+            </div>
+            ${desc}
+            ${tags ? `<div class="rs-card-tags">${tags}</div>` : ''}
+            <div class="rs-card-footer">
+                <span class="rs-card-date">${date}</span>
+            </div>
+        </div>`;
+    }).join('');
+}
+
+function esc(str) {
+    if (!str) return '';
+    const d = document.createElement('div');
+    d.textContent = str;
+    return d.innerHTML;
+}
+
+// ========== Type Picker ==========
+
+document.querySelectorAll('#typePicker button').forEach(btn => {
+    btn.onclick = () => {
+        document.querySelectorAll('#typePicker button').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentType = btn.dataset.type;
+        loadRules();
+    };
+});
+
+// ========== Filters ==========
+
+document.querySelectorAll('.rs-filter-btn').forEach(btn => {
+    btn.onclick = () => {
+        document.querySelectorAll('.rs-filter-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentFilter = btn.dataset.filter;
+        renderGrid();
+    };
+});
+
+document.getElementById('sortSelect').onchange = (e) => {
+    currentSort = e.target.value;
+    renderGrid();
+};
+
+// ========== New Rule ==========
+
+document.getElementById('newRuleBtn').onclick = async () => {
+    try {
+        const rule = await api('POST', `/rules/${currentType}`, {
+            version: '1.0.0',
+            tags: [],
+            description: HAS_DESC[currentType] ? '' : undefined
+        });
+        allRules.unshift(rule);
+        renderGrid();
+        openRuleDetail(rule.id);
+        flash('Salvato');
+    } catch (err) {
+        console.error('Error creating rule:', err);
+    }
+};
+
+// ========== Rule Detail Popup ==========
+
+async function openRuleDetail(ruleId) {
+    try {
+        const data = await api('GET', `/rules/${currentType}/${ruleId}`);
+        openRule = data;
+        renderPopup();
+        document.getElementById('ruleOverlay').style.display = 'flex';
+    } catch (err) {
+        console.error('Error loading rule detail:', err);
+    }
+}
+
+function closePopup() {
+    document.getElementById('ruleOverlay').style.display = 'none';
+    openRule = null;
+    loadRules(); // refresh grid
+}
+
+document.getElementById('popupClose').onclick = closePopup;
+document.getElementById('ruleOverlay').onclick = (e) => {
+    if (e.target === document.getElementById('ruleOverlay')) closePopup();
+};
+
+function renderPopup() {
+    const r = openRule;
+    document.getElementById('popupId').textContent = r.id;
+    document.getElementById('popupVersion').value = r.version || '';
+
+    // Description
+    const descRow = document.getElementById('popupDescRow');
+    if (HAS_DESC[currentType]) {
+        descRow.style.display = 'flex';
+        document.getElementById('popupDesc').value = r.description || '';
+    } else {
+        descRow.style.display = 'none';
+    }
+
+    // Tags
+    renderTags();
+
+    // Action buttons state
+    updateActionButtons();
+
+    // Items
+    renderItems();
+}
+
+// --- Auto-save fields ---
+
+document.getElementById('popupVersion').oninput = () => debounceFieldSave('version');
+document.getElementById('popupDesc').oninput = () => debounceFieldSave('description');
+
+function debounceFieldSave(field) {
+    clearTimeout(saveTimers[field]);
+    saveTimers[field] = setTimeout(() => saveRuleField(field), 500);
+}
+
+async function saveRuleField(field) {
+    if (!openRule) return;
+    const body = {};
+    if (field === 'version') body.version = document.getElementById('popupVersion').value.trim();
+    if (field === 'description') body.description = document.getElementById('popupDesc').value.trim();
+
+    try {
+        const updated = await api('PUT', `/rules/${currentType}/${openRule.id}`, body);
+        Object.assign(openRule, updated);
+        // Update in allRules too
+        const idx = allRules.findIndex(r => r.id === openRule.id);
+        if (idx >= 0) Object.assign(allRules[idx], updated);
+        flash('Salvato', 'popupSaving');
+    } catch (err) {
+        console.error('Error saving field:', err);
+    }
+}
+
+// --- Tags ---
+
+function renderTags() {
+    const wrap = document.getElementById('popupTags');
+    const input = document.getElementById('tagInput');
+    // Remove old chips
+    wrap.querySelectorAll('.rs-tag-chip').forEach(c => c.remove());
+    // Re-add chips before input
+    (openRule.tags || []).forEach((tag, i) => {
+        const chip = document.createElement('span');
+        chip.className = 'rs-tag-chip';
+        chip.innerHTML = `${esc(tag)}<button data-idx="${i}">&times;</button>`;
+        chip.querySelector('button').onclick = () => removeTag(i);
+        wrap.insertBefore(chip, input);
+    });
+}
+
+document.getElementById('tagInput').onkeydown = async (e) => {
+    if (e.key === 'Enter' || e.key === ',') {
+        e.preventDefault();
+        const val = e.target.value.trim().replace(/,$/, '');
+        if (!val || !openRule) return;
+        const tags = [...(openRule.tags || []), val];
+        e.target.value = '';
+        try {
+            const updated = await api('PUT', `/rules/${currentType}/${openRule.id}`, { tags });
+            openRule.tags = updated.tags;
+            renderTags();
+            flash('Salvato', 'popupSaving');
+        } catch (err) {
+            console.error('Error adding tag:', err);
+        }
+    }
+};
+
+async function removeTag(idx) {
+    if (!openRule) return;
+    const tags = [...(openRule.tags || [])];
+    tags.splice(idx, 1);
+    try {
+        const updated = await api('PUT', `/rules/${currentType}/${openRule.id}`, { tags });
+        openRule.tags = updated.tags;
+        renderTags();
+        flash('Salvato', 'popupSaving');
+    } catch (err) {
+        console.error('Error removing tag:', err);
+    }
+}
+
+// --- Action Buttons ---
+
+function updateActionButtons() {
+    const r = openRule;
+    const activeBtn = document.getElementById('toggleActiveBtn');
+    const archiveBtn = document.getElementById('toggleArchiveBtn');
+
+    activeBtn.textContent = r.active ? 'Disattiva' : 'Attiva';
+    activeBtn.className = `rs-action-btn active-toggle${r.active ? '' : ' off'}`;
+
+    archiveBtn.textContent = r.archived ? 'Dearchivia' : 'Archivia';
+    archiveBtn.className = `rs-action-btn archive-toggle${r.archived ? ' on' : ''}`;
+}
+
+document.getElementById('toggleActiveBtn').onclick = async () => {
+    if (!openRule) return;
+    try {
+        const res = await api('PATCH', `/rules/${currentType}/${openRule.id}/active`);
+        openRule.active = res.active;
+        updateActionButtons();
+        flash('Salvato', 'popupSaving');
+    } catch (err) {
+        console.error('Error toggling active:', err);
+    }
+};
+
+document.getElementById('toggleArchiveBtn').onclick = async () => {
+    if (!openRule) return;
+    try {
+        const res = await api('PATCH', `/rules/${currentType}/${openRule.id}/archive`);
+        openRule.archived = res.archived;
+        updateActionButtons();
+        flash('Salvato', 'popupSaving');
+    } catch (err) {
+        console.error('Error toggling archive:', err);
+    }
+};
+
+document.getElementById('deleteRuleBtn').onclick = () => {
+    if (!openRule) return;
+    showConfirm('Elimina Rule', `Vuoi eliminare la rule ${openRule.id}? Questa azione e irreversibile.`, async () => {
+        try {
+            await api('DELETE', `/rules/${currentType}/${openRule.id}`);
+            allRules = allRules.filter(r => r.id !== openRule.id);
+            closePopup();
+        } catch (err) {
+            console.error('Error deleting rule:', err);
+        }
+    });
+};
+
+// --- Items ---
+
+function renderItems() {
+    const schema = ITEM_SCHEMA[currentType];
+    const items = openRule.items || [];
+
+    // Labels row
+    const labelsRow = document.getElementById('itemLabelsRow');
+    labelsRow.innerHTML = schema.map(f => `<span class="${f.cls}">${f.label}</span>`).join('') +
+        '<span class="toggle-space">On</span><span class="delete-space"></span>';
+
+    // Items list
+    const list = document.getElementById('itemsList');
+    if (items.length === 0) {
+        list.innerHTML = '<div style="padding:12px;font-size:0.8rem;color:var(--text-tertiary);">Nessun item. Clicca "+ Aggiungi" per crearne uno.</div>';
+        return;
+    }
+
+    list.innerHTML = items.map(item => {
+        const fields = schema.map(f =>
+            `<input class="rs-item-field ${f.cls}" value="${esc(String(item[f.key] || ''))}" data-field="${f.key}" data-item-id="${item.id}" onchange="saveItemField(this)" />`
+        ).join('');
+
+        const toggleCls = item.enabled ? 'on' : '';
+        return `<div class="rs-item" data-item-id="${item.id}">
+            ${fields}
+            <div class="rs-toggle ${toggleCls}" onclick="toggleItem(${item.id})"></div>
+            <button class="rs-item-delete" onclick="deleteItem(${item.id})">&times;</button>
+        </div>`;
+    }).join('');
+}
+
+document.getElementById('addItemBtn').onclick = async () => {
+    if (!openRule) return;
+    const schema = ITEM_SCHEMA[currentType];
+    const body = {};
+    // Fill with empty/default values
+    schema.forEach(f => { body[f.key] = ''; });
+
+    // Need at least non-empty values — open with placeholders
+    // For now, create with placeholder values
+    schema.forEach(f => { body[f.key] = f.key === 'enabled' ? true : '-'; });
+
+    try {
+        const item = await api('POST', `/rules/${currentType}/${openRule.id}/items`, body);
+        if (!openRule.items) openRule.items = [];
+        openRule.items.push(item);
+        renderItems();
+        flash('Salvato', 'popupSaving');
+    } catch (err) {
+        console.error('Error adding item:', err);
+    }
+};
+
+async function saveItemField(input) {
+    if (!openRule) return;
+    const itemId = input.dataset.itemId;
+    const field = input.dataset.field;
+    const value = input.value.trim();
+    try {
+        await api('PUT', `/rules/${currentType}/${openRule.id}/items/${itemId}`, { [field]: value });
+        // Update local
+        const item = openRule.items.find(i => String(i.id) === String(itemId));
+        if (item) item[field] = value;
+        flash('Salvato', 'popupSaving');
+    } catch (err) {
+        console.error('Error saving item field:', err);
+    }
+}
+
+async function toggleItem(itemId) {
+    if (!openRule) return;
+    try {
+        const res = await api('PATCH', `/rules/${currentType}/${openRule.id}/items/${itemId}/toggle`);
+        const item = openRule.items.find(i => i.id === itemId);
+        if (item) item.enabled = res.enabled;
+        renderItems();
+        flash('Salvato', 'popupSaving');
+    } catch (err) {
+        console.error('Error toggling item:', err);
+    }
+}
+
+async function deleteItem(itemId) {
+    if (!openRule) return;
+    try {
+        await api('DELETE', `/rules/${currentType}/${openRule.id}/items/${itemId}`);
+        openRule.items = openRule.items.filter(i => i.id !== itemId);
+        renderItems();
+        flash('Salvato', 'popupSaving');
+    } catch (err) {
+        console.error('Error deleting item:', err);
+    }
+}
+
+// ========== Confirm Dialog ==========
+
+let confirmCallback = null;
+
+function showConfirm(title, text, onConfirm) {
+    document.getElementById('confirmTitle').textContent = title;
+    document.getElementById('confirmText').textContent = text;
+    confirmCallback = onConfirm;
+    document.getElementById('confirmOverlay').style.display = 'flex';
+}
+
+document.getElementById('confirmCancel').onclick = () => {
+    document.getElementById('confirmOverlay').style.display = 'none';
+    confirmCallback = null;
+};
+
+document.getElementById('confirmOk').onclick = async () => {
+    document.getElementById('confirmOverlay').style.display = 'none';
+    if (confirmCallback) await confirmCallback();
+    confirmCallback = null;
+};
+
+// ========== Flash "Salvato" indicator ==========
+
+function flash(text, elId = 'savingIndicator') {
+    const el = document.getElementById(elId);
+    el.textContent = text;
+    el.classList.add('visible');
+    setTimeout(() => el.classList.remove('visible'), 1500);
+}
+
+// ========== Init ==========
+
+document.addEventListener('DOMContentLoaded', () => loadRules());
+
+</script>
+</body>
--- a/console/src/static/styles/rulesets.css
+++ b/console/src/static/styles/rulesets.css
@@ -0,0 +1,771 @@
+/* --- Rulesets Page --- */
+
+.rs-page {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 24px 120px;
+}
+
+/* Header */
+.rs-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px 0 16px;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: var(--header-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--header-border);
+    margin-bottom: 20px;
+}
+
+.rs-header h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.rs-header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.rs-header-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* Type Picker */
+.rs-type-picker {
+    display: flex;
+    gap: 4px;
+    background: rgba(241, 245, 249, 0.8);
+    border-radius: 12px;
+    padding: 4px;
+}
+
+.rs-type-picker button {
+    padding: 6px 16px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+.rs-type-picker button.active {
+    background: white;
+    color: var(--accent-color);
+    box-shadow: var(--shadow-sm);
+}
+
+.rs-type-picker button:hover:not(.active) {
+    color: var(--text-primary);
+}
+
+/* Toolbar */
+.rs-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.rs-toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.rs-toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.rs-filter-btn {
+    padding: 6px 14px;
+    border: 1px solid var(--header-border);
+    border-radius: 8px;
+    background: white;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+.rs-filter-btn.active {
+    background: var(--accent-light);
+    color: var(--accent-color);
+    border-color: var(--accent-border);
+}
+
+.rs-filter-btn:hover:not(.active) {
+    border-color: var(--accent-border);
+    color: var(--text-primary);
+}
+
+.rs-sort-select {
+    padding: 6px 12px;
+    border: 1px solid var(--header-border);
+    border-radius: 8px;
+    background: white;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    font-family: inherit;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    padding-right: 28px;
+    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+}
+
+.rs-new-btn {
+    padding: 8px 20px;
+    border: none;
+    border-radius: 10px;
+    background: var(--accent-color);
+    color: white;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
+}
+
+.rs-new-btn:hover {
+    background: var(--accent-hover);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
+}
+
+/* Rules Grid */
+.rs-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 16px;
+}
+
+.rs-empty {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 60px 20px;
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+}
+
+/* Rule Card */
+.rs-card {
+    background: white;
+    border: 1px solid rgba(226, 232, 240, 0.6);
+    border-radius: 20px;
+    padding: 20px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+}
+
+.rs-card:hover {
+    border-color: var(--accent-border);
+    box-shadow: 0 8px 30px rgba(191, 219, 254, 0.3);
+    transform: translateY(-2px);
+}
+
+.rs-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.rs-card-id {
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 0.8rem;
+    color: var(--text-tertiary);
+    background: var(--surface);
+    padding: 2px 8px;
+    border-radius: 6px;
+}
+
+.rs-card-version {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.rs-card-desc {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin-bottom: 12px;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.rs-card-badges {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.rs-badge {
+    padding: 3px 10px;
+    border-radius: 20px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.rs-badge.active {
+    background: #dcfce7;
+    color: #16a34a;
+}
+
+.rs-badge.archived {
+    background: #fef3c7;
+    color: #d97706;
+}
+
+.rs-badge.inactive {
+    background: var(--surface);
+    color: var(--text-tertiary);
+}
+
+.rs-card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid rgba(226, 232, 240, 0.4);
+}
+
+.rs-card-items-count {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+}
+
+.rs-card-date {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+}
+
+.rs-card-tags {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+}
+
+.rs-tag {
+    padding: 2px 8px;
+    border-radius: 6px;
+    font-size: 0.7rem;
+    background: rgba(241, 245, 249, 0.8);
+    color: var(--text-secondary);
+}
+
+/* ===== POPUP OVERLAY ===== */
+.rs-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.4);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+}
+
+.rs-popup {
+    background: white;
+    border-radius: 24px;
+    width: 700px;
+    max-width: 95vw;
+    max-height: 85vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    border: 1px solid var(--header-border);
+}
+
+.rs-popup-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px 28px 16px;
+    border-bottom: 1px solid var(--header-border);
+    position: sticky;
+    top: 0;
+    background: white;
+    border-radius: 24px 24px 0 0;
+    z-index: 1;
+}
+
+.rs-popup-header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.rs-popup-close {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: var(--surface);
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    font-size: 1.2rem;
+    transition: all 0.2s ease;
+}
+
+.rs-popup-close:hover {
+    background: #fee2e2;
+    color: #ef4444;
+}
+
+.rs-popup-body {
+    padding: 20px 28px 28px;
+}
+
+/* Popup sections */
+.rs-section {
+    margin-bottom: 20px;
+}
+
+.rs-section-title {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-tertiary);
+    margin-bottom: 8px;
+}
+
+/* Inline editable fields */
+.rs-field-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+}
+
+.rs-field-label {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    min-width: 80px;
+    font-weight: 500;
+}
+
+.rs-field-input {
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid var(--header-border);
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-family: inherit;
+    color: var(--text-primary);
+    transition: border-color 0.2s ease;
+    background: white;
+}
+
+.rs-field-input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.rs-field-textarea {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid var(--header-border);
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-family: inherit;
+    color: var(--text-primary);
+    resize: vertical;
+    min-height: 60px;
+    transition: border-color 0.2s ease;
+}
+
+.rs-field-textarea:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+/* Action buttons row */
+.rs-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.rs-action-btn {
+    padding: 6px 14px;
+    border: 1px solid var(--header-border);
+    border-radius: 8px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+    background: white;
+    color: var(--text-secondary);
+}
+
+.rs-action-btn:hover {
+    border-color: var(--accent-border);
+    color: var(--text-primary);
+}
+
+.rs-action-btn.active-toggle {
+    background: #dcfce7;
+    color: #16a34a;
+    border-color: #bbf7d0;
+}
+
+.rs-action-btn.active-toggle.off {
+    background: white;
+    color: var(--text-secondary);
+    border-color: var(--header-border);
+}
+
+.rs-action-btn.archive-toggle.on {
+    background: #fef3c7;
+    color: #d97706;
+    border-color: #fde68a;
+}
+
+.rs-action-btn.danger {
+    color: #ef4444;
+    border-color: #fecaca;
+}
+
+.rs-action-btn.danger:hover {
+    background: #fef2f2;
+    border-color: #fca5a5;
+}
+
+/* Items section */
+.rs-items-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+.rs-add-item-btn {
+    padding: 4px 12px;
+    border: 1px dashed var(--accent-border);
+    border-radius: 8px;
+    background: var(--accent-light);
+    color: var(--accent-color);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+.rs-add-item-btn:hover {
+    background: var(--accent-color);
+    color: white;
+    border-style: solid;
+}
+
+/* Item row */
+.rs-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    background: var(--surface);
+    border-radius: 10px;
+    margin-bottom: 6px;
+    transition: all 0.2s ease;
+}
+
+.rs-item:hover {
+    background: rgba(241, 245, 249, 1);
+}
+
+.rs-item-field {
+    padding: 5px 8px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-family: inherit;
+    color: var(--text-primary);
+    background: transparent;
+    transition: all 0.2s ease;
+    min-width: 0;
+}
+
+.rs-item-field:focus {
+    border-color: var(--accent-color);
+    background: white;
+    outline: none;
+}
+
+.rs-item-field.narrow {
+    width: 60px;
+    flex-shrink: 0;
+}
+
+.rs-item-field.medium {
+    width: 100px;
+    flex-shrink: 0;
+}
+
+.rs-item-field.wide {
+    flex: 1;
+    min-width: 80px;
+}
+
+/* Toggle switch for item enabled */
+.rs-toggle {
+    width: 36px;
+    height: 20px;
+    background: #cbd5e1;
+    border-radius: 10px;
+    position: relative;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    flex-shrink: 0;
+}
+
+.rs-toggle.on {
+    background: #22c55e;
+}
+
+.rs-toggle::after {
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: white;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.rs-toggle.on::after {
+    transform: translateX(16px);
+}
+
+.rs-item-delete {
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: transparent;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+}
+
+.rs-item-delete:hover {
+    background: #fef2f2;
+    color: #ef4444;
+}
+
+/* Tags input */
+.rs-tags-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    padding: 6px;
+    border: 1px solid var(--header-border);
+    border-radius: 8px;
+    min-height: 38px;
+    background: white;
+}
+
+.rs-tags-wrap:focus-within {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.rs-tag-chip {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    background: var(--accent-light);
+    color: var(--accent-color);
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.rs-tag-chip button {
+    border: none;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    font-size: 0.85rem;
+    opacity: 0.6;
+    line-height: 1;
+}
+
+.rs-tag-chip button:hover {
+    opacity: 1;
+}
+
+.rs-tag-input {
+    border: none;
+    outline: none;
+    font-size: 0.8rem;
+    font-family: inherit;
+    flex: 1;
+    min-width: 80px;
+    padding: 2px 4px;
+    background: transparent;
+    color: var(--text-primary);
+}
+
+/* Saving indicator */
+.rs-saving {
+    font-size: 0.75rem;
+    color: var(--accent-color);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.rs-saving.visible {
+    opacity: 1;
+}
+
+/* Item field labels header */
+.rs-item-labels {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px 4px;
+    font-size: 0.7rem;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+}
+
+.rs-item-labels span.narrow { width: 60px; flex-shrink: 0; }
+.rs-item-labels span.medium { width: 100px; flex-shrink: 0; }
+.rs-item-labels span.wide { flex: 1; min-width: 80px; }
+.rs-item-labels span.toggle-space { width: 36px; flex-shrink: 0; }
+.rs-item-labels span.delete-space { width: 24px; flex-shrink: 0; }
+
+/* Confirm dialog */
+.rs-confirm-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.5);
+    backdrop-filter: blur(4px);
+    z-index: 3000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.rs-confirm-box {
+    background: white;
+    border-radius: 16px;
+    padding: 24px;
+    width: 360px;
+    max-width: 90vw;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+    text-align: center;
+}
+
+.rs-confirm-box h3 {
+    margin-bottom: 8px;
+    font-size: 1rem;
+    color: var(--text-primary);
+}
+
+.rs-confirm-box p {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    margin-bottom: 20px;
+}
+
+.rs-confirm-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+}
+
+.rs-confirm-actions button {
+    padding: 8px 20px;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: inherit;
+    border: 1px solid var(--header-border);
+    background: white;
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
+}
+
+.rs-confirm-actions button.confirm-danger {
+    background: #ef4444;
+    color: white;
+    border-color: #ef4444;
+}
+
+.rs-confirm-actions button.confirm-danger:hover {
+    background: #dc2626;
+}
+
+/* Back link */
+.rs-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 0.85rem;
+    font-weight: 500;
+    transition: color 0.2s ease;
+}
+
+.rs-back:hover {
+    color: var(--accent-color);
+}
--- a/realtime/.env.example
+++ b/realtime/.env.example
@@ -5,3 +5,4 @@ VERSION_STATE=beta
 INFLX_URL=
 INFLX_TOKEN=
 INFLX_ORG=
+INFLX_BUCKET=
--- a/realtime/src/routes/sessions.js
+++ b/realtime/src/routes/sessions.js
@@ -1,9 +1,9 @@
 const router = require('express').Router();
-const { queryAll, query } = require('../store/redis');
+const { queryAll, query, hset } = require('../store/redis');
+const { connectedSensors } = require('../ws/handler');

 /**
- * GET /sessions — Lista tutte le sessioni attive dei sensori.
- * Legge da Redis le chiavi sensors:* (scritte da handler.js alla connessione)
+ * GET /sessions — Lista tutte le sessioni dei sensori con metadata e rules versions
 */
 router.get('/', async (req, res) => {
    try {
@@ -16,7 +16,13 @@ router.get('/', async (req, res) => {
                name,
                connectedAt: info.timestamp || null,
                session: info.session || null,
+                sessionLabel: info.sessionLabel || info.session || null,
                status: info.status || 'unknown',
+                rules: {
+                    weather: info.rules_weather || null,
+                    data: info.rules_data || null,
+                    logs: info.rules_logs || null,
+                }
            };
        }
        res.json(sessions);
@@ -27,8 +33,7 @@ router.get('/', async (req, res) => {
 });

 /**
- * GET /sessions/pending — Lista token di connessione pendenti.
- * Legge da Redis le chiavi sensors_pending:* (create da createConnectionToken)
+ * GET /sessions/pending — Lista token di connessione pendenti
 */
 router.get('/pending', async (req, res) => {
    try {
@@ -41,8 +46,7 @@ router.get('/pending', async (req, res) => {
 });

 /**
- * GET /sessions/connected — Lista sensori attualmente connessi.
- * Legge da Redis le chiavi sensor:* (scritte da appendAsConnection in handler.js)
+ * GET /sessions/connected — Lista sensori attualmente connessi
 */
 router.get('/connected', async (req, res) => {
    try {
@@ -63,7 +67,7 @@ router.get('/connected', async (req, res) => {
 });

 /**
- * GET /sessions/connected/:id — Verifica se un sensore specifico è connesso.
+ * GET /sessions/connected/:id — Verifica se un sensore specifico è connesso
 */
 router.get('/connected/:id', async (req, res) => {
    const { id } = req.params;
@@ -79,4 +83,38 @@ router.get('/connected/:id', async (req, res) => {
    }
 });

+/**
+ * POST /sessions/:id/label — Cambia il label della sessione per un sensore connesso.
+ * Non interrompe il flusso dati. I nuovi punti InfluxDB avranno il nuovo tag.
+ */
+router.post('/:id/label', async (req, res) => {
+    const { id } = req.params;
+    const { label } = req.body;
+
+    if (!label || typeof label !== 'string' || label.trim().length === 0) {
+        return res.status(400).json({ error: 'label is required' });
+    }
+
+    const trimmedLabel = label.trim();
+
+    // Trova il WS client connesso
+    const ws = connectedSensors.get(id);
+    if (!ws) {
+        return res.status(404).json({ error: 'sensor not connected' });
+    }
+
+    // Aggiorna in memoria (effetto immediato sui prossimi punti InfluxDB)
+    ws.sessionLabel = trimmedLabel;
+
+    // Aggiorna in Redis per persistenza
+    try {
+        await hset(`sensors:${id}`, 'sessionLabel', trimmedLabel);
+    } catch (err) {
+        console.error('Error updating session label in Redis', err);
+    }
+
+    console.log(`[${id}] Session label changed to: ${trimmedLabel}`);
+    res.json({ status: 'ok', label: trimmedLabel });
+});
+
 module.exports = router;
--- a/realtime/src/ws/handler.js
+++ b/realtime/src/ws/handler.js
@@ -3,8 +3,9 @@ const { decode } = require('@msgpack/msgpack');
 const { consumeConnectionToken, appendAsConnection, query, hset, del } = require('../store/redis');
 const { writeSensorData, queryHistory } = require('../store/influx');

-// In-memory map: sensorName → Set<WebSocket>
-const sensorWatchers = new Map();
+// In-memory registries
+const sensorWatchers = new Map();   // sensorName → Set<WebSocket> (watchers)
+const connectedSensors = new Map(); // sensorName → WebSocket (sensor clients)

 function generateSessionId() {
    const num = Math.floor(1000 + Math.random() * 9000);
@@ -71,13 +72,13 @@ function setup(server) {
            wss.handleUpgrade(req, socket, head, (ws) => {
                ws.sensorName = sensor;
                ws.sessionId = generateSessionId();
+                ws.sessionLabel = ws.sessionId; // default label = sessionId
                ws.connectedAt = new Date().toISOString();
+                ws.rulesVersions = null; // populated by _t:init message
                handleSensorConnection(ws);
            });

        } else if (path === '/live') {
-            // Accept upgrade without requiring query params.
-            // The console sends { action: 'watch', sensorId } after connecting.
            wss.handleUpgrade(req, socket, head, (ws) => {
                handleWatcherConnection(ws);
            });
@@ -90,11 +91,14 @@ function setup(server) {
 }

 function handleSensorConnection(ws) {
-    const { sensorName, sessionId, connectedAt } = ws;
+    const { sensorName, sessionId, sessionLabel, connectedAt } = ws;
    console.log(`Sensor connected: ${sensorName} (session: ${sessionId})`);

+    // Register in global registry
+    connectedSensors.set(sensorName, ws);
+
    appendAsConnection(sensorName, 'connected', connectedAt);
-    hset(`sensors:${sensorName}`, 'session', sessionId);
+    hset(`sensors:${sensorName}`, 'session', sessionId, 'sessionLabel', sessionLabel);

    const pingInterval = setInterval(() => {
        if (ws.readyState === ws.OPEN) ws.ping();
@@ -103,11 +107,28 @@ function handleSensorConnection(ws) {
    ws.on('message', (data) => {
        try {
            const packet = decode(data);
+
+            // Messaggio di inizializzazione con versioni rulesets
+            if (packet._t === 'init') {
+                ws.rulesVersions = packet.rules || {};
+                console.log(`[${sensorName}] Rules versions:`, ws.rulesVersions);
+                // Salva in Redis
+                const rulesFields = [];
+                for (const [type, ver] of Object.entries(ws.rulesVersions)) {
+                    rulesFields.push(`rules_${type}`, ver);
+                }
+                if (rulesFields.length > 0) {
+                    hset(`sensors:${sensorName}`, ...rulesFields);
+                }
+                return; // non scrivere su InfluxDB
+            }
+
            const { ts, _m, ...fields } = packet;

-            writeSensorData(fields, sensorName, sessionId, ts);
+            // Usa sessionLabel (puo' cambiare a runtime dalla console)
+            writeSensorData(fields, sensorName, ws.sessionLabel, ts);

-            // Broadcast to watchers as JSON messages grouped by measurement
+            // Broadcast to watchers
            const watchers = sensorWatchers.get(sensorName);
            if (watchers && watchers.size > 0) {
                const messages = transformPacket(packet);
@@ -128,6 +149,7 @@ function handleSensorConnection(ws) {
    ws.on('close', () => {
        console.log(`Sensor disconnected: ${sensorName}`);
        clearInterval(pingInterval);
+        connectedSensors.delete(sensorName);
        appendAsConnection(sensorName, 'disconnected', new Date().toISOString());
        del(`sensors:${sensorName}`);
    });
@@ -145,7 +167,6 @@ function handleWatcherConnection(ws) {
            const msg = JSON.parse(data.toString());

            if (msg.action === 'watch' && msg.sensorId) {
-                // Unwatch previous sensor if any
                if (ws.sensorName) {
                    sensorWatchers.get(ws.sensorName)?.delete(ws);
                    if (sensorWatchers.get(ws.sensorName)?.size === 0) {
@@ -155,7 +176,6 @@ function handleWatcherConnection(ws) {

                ws.sensorName = msg.sensorId;

-                // Register as watcher
                if (!sensorWatchers.has(msg.sensorId)) {
                    sensorWatchers.set(msg.sensorId, new Set());
                }
@@ -163,14 +183,12 @@ function handleWatcherConnection(ws) {

                console.log(`Watcher now watching sensor: ${msg.sensorId}`);

-                // Send history since sensor connected
                try {
                    const sensorInfo = await query(msg.sensorId, 'sensors');
                    if (sensorInfo && sensorInfo.timestamp && sensorInfo.session) {
                        const history = await queryHistory(msg.sensorId, sensorInfo.session, sensorInfo.timestamp);
                        for (const row of history) {
                            const ts = new Date(row._time).getTime();
-                            // Send each historical row as individual messages grouped by measurement
                            const rebuilt = { ts };
                            for (const [short, { key }] of Object.entries(fieldMapping)) {
                                const influxField = { t: 'temperature', h: 'humidity', spd: 'speed', cog: 'cog', sog: 'sog', hdg: 'headingTrue', lat: 'latitude', lon: 'longitude' }[short];
@@ -217,4 +235,4 @@ function handleWatcherConnection(ws) {
    });
 }

-module.exports = { setup };
+module.exports = { setup, connectedSensors };