Persistent sidebar, tariff display, and connection speed from FritzBox

Sidebar is now always visible with a collapse toggle instead of an
overlay. Gear icon removed from topbar. Dashboard shows ISP name and
max down/up speeds fetched from FritzBox netMoni API. Fixed ISP Other
field alignment in settings.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: itsDNNS

CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to this project will be documented in this file.
 
 Versioning: `YYYY-MM-DD.N` (date + sequential build number per day)
 
+## [2026-02-09.9]
+
+### Added
+- **Tariff display**: ISP name and max down/up speeds (from FritzBox) shown on dashboard
+- **Connection info API**: Fetches max downstream/upstream speeds from FritzBox `netMoni` page
+
+### Changed
+- **Sidebar always visible**: Persistent left panel with collapse toggle instead of overlay
+- **Gear icon removed**: Settings accessible via sidebar only
+
+### Fixed
+- **ISP "Other" field alignment**: Manual input field now properly aligned in grid layout
+
 ## [2026-02-09.8]
 
 ### Changed

app/fritzbox.py

@@ -90,3 +90,34 @@ def get_device_info(url: str, sid: str) -> dict:
         }
     except Exception:
         return {"model": "FRITZ!Box", "sw_version": ""}
+
+
+def get_connection_info(url: str, sid: str) -> dict:
+    """Get internet connection info (speeds, type) from netMoni page."""
+    try:
+        r = requests.post(
+            f"{url}/data.lua",
+            data={
+                "xhr": 1,
+                "sid": sid,
+                "lang": "de",
+                "page": "netMoni",
+                "xhrId": "all",
+                "no_sidrenew": "",
+            },
+            timeout=10,
+        )
+        r.raise_for_status()
+        data = r.json().get("data", {})
+        conns = data.get("connections", [])
+        if not conns:
+            return {}
+        conn = conns[0]
+        return {
+            "max_downstream_kbps": conn.get("downstream", 0),
+            "max_upstream_kbps": conn.get("upstream", 0),
+            "connection_type": conn.get("medium", ""),
+        }
+    except Exception as e:
+        log.warning("Failed to get connection info: %s", e)
+        return {}

app/i18n.py

@@ -119,13 +119,16 @@
     # Language
     "language": "Language",
 
-    # ISP
+    # ISP / Connection
     "isp_name": "Internet Provider",
     "isp_hint": "Shown in LLM export report",
     "isp_other": "Other",
     "isp_other_placeholder": "Enter provider name",
     "isp_select": "Select provider",
     "isp_options": ["Vodafone", "PYUR", "eazy", "O2", "1&1", "Telekom", "NetCologne", "M-net", "Wilhelm.tel"],
+    "tariff": "Tariff",
+    "max_downstream": "Max Downstream",
+    "max_upstream": "Max Upstream",
 
     # Export
     "export_llm": "Export for LLM",
@@ -248,6 +251,9 @@
     "isp_other_placeholder": "Anbietername eingeben",
     "isp_select": "Anbieter waehlen",
     "isp_options": ["Vodafone", "PYUR", "eazy", "O2", "1&1", "Telekom", "NetCologne", "M-net", "Wilhelm.tel"],
+    "tariff": "Tarif",
+    "max_downstream": "Max Downstream",
+    "max_upstream": "Max Upstream",
 
     "export_llm": "Export fuer LLM",
     "export_title": "LLM-Analyse Export",

app/main.py

@@ -54,6 +54,7 @@ def polling_loop(config_mgr, storage, stop_event):
 
     sid = None
     device_info = None
+    connection_info = None
     discovery_published = False
 
     while not stop_event.is_set():
@@ -66,6 +67,14 @@ def polling_loop(config_mgr, storage, stop_event):
                 device_info = fritzbox.get_device_info(config["fritz_url"], sid)
                 log.info("FritzBox model: %s (%s)", device_info["model"], device_info["sw_version"])
 
+            if connection_info is None:
+                connection_info = fritzbox.get_connection_info(config["fritz_url"], sid)
+                if connection_info:
+                    ds = connection_info.get("max_downstream_kbps", 0) // 1000
+                    us = connection_info.get("max_upstream_kbps", 0) // 1000
+                    log.info("Connection: %d/%d Mbit/s (%s)", ds, us, connection_info.get("connection_type", ""))
+                    web.update_state(connection_info=connection_info)
+
             data = fritzbox.get_docsis_data(config["fritz_url"], sid)
             analysis = analyzer.analyze(data)
 

app/templates/index.html

@@ -72,38 +72,32 @@
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
         }
         .topbar-meta { font-size: 0.8em; color: var(--muted); white-space: nowrap; }
-        .settings-link {
-            color: var(--muted); text-decoration: none;
-            font-size: 1.2em; padding: 4px; line-height: 1;
-        }
-        .settings-link:hover { color: var(--accent); }
-        .settings-link svg { width: 20px; height: 20px; vertical-align: middle; }
+
+        /* ── Layout ── */
+        .app-layout { display: flex; min-height: 100vh; }
 
         /* ── Sidebar ── */
-        .sidebar-overlay {
-            position: fixed; inset: 0; background: var(--overlay);
-            z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.25s;
-        }
-        .sidebar-overlay.open { opacity: 1; pointer-events: auto; }
         .sidebar {
-            position: fixed; top: 0; left: 0; bottom: 0; width: 260px;
-            background: var(--surface); z-index: 100;
-            transform: translateX(-100%); transition: transform 0.25s ease;
+            width: 240px; min-width: 240px;
+            background: var(--surface);
             display: flex; flex-direction: column;
             border-right: 1px solid var(--input-border);
+            transition: width 0.25s ease, min-width 0.25s ease;
+            overflow: hidden;
         }
-        .sidebar.open { transform: translateX(0); }
+        .sidebar.collapsed { width: 0; min-width: 0; }
         .sidebar-content { flex: 1; overflow-y: auto; }
         .sidebar-header {
             display: flex; justify-content: space-between; align-items: center;
-            padding: 16px 20px; border-bottom: 1px solid var(--input-border);
-            font-weight: bold; color: var(--accent);
+            padding: 14px 20px; border-bottom: 1px solid var(--input-border);
+            font-weight: bold; color: var(--accent); white-space: nowrap;
         }
-        .sidebar-close {
+        .sidebar-toggle {
             background: none; border: none; color: var(--muted);
-            font-size: 1.4em; cursor: pointer; line-height: 1;
+            font-size: 1.2em; cursor: pointer; line-height: 1; padding: 2px 4px;
         }
-        .sidebar-close:hover { color: var(--text); }
+        .sidebar-toggle:hover { color: var(--accent); }
+        .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
         .sidebar-link {
             display: flex; align-items: center; gap: 10px;
             padding: 12px 20px; color: var(--text); text-decoration: none;
@@ -309,7 +303,11 @@
         .btn-muted:hover { background: var(--accent); color: #000; }
 
         /* ── Responsive ── */
-        @media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }
+        @media (max-width: 900px) {
+            .charts-grid { grid-template-columns: 1fr; }
+            .sidebar { width: 0; min-width: 0; }
+            .sidebar.collapsed { width: 0; min-width: 0; }
+        }
         @media (max-width: 600px) {
             body { font-size: 14px; }
             .topbar { gap: 6px; padding: 8px 10px; }
@@ -322,15 +320,13 @@
     </style>
 </head>
 <body>
-
-<!-- Sidebar Overlay -->
-<div class="sidebar-overlay" id="sidebar-overlay"></div>
+<div class="app-layout">
 
 <!-- Sidebar -->
 <nav class="sidebar" id="sidebar">
     <div class="sidebar-header">
-        <span>{{ t.nav }}</span>
-        <button class="sidebar-close" id="sidebar-close">&times;</button>
+        <span>DOCSIS Monitor</span>
+        <button class="sidebar-toggle" id="sidebar-collapse" title="Collapse">&#10094;</button>
     </div>
     <div class="sidebar-content">
         <a class="sidebar-link active" data-view="live">
@@ -368,9 +364,12 @@
     </div>
 </nav>
 
+<!-- Main Area -->
+<div class="app-main">
+
 <!-- Topbar -->
 <div class="topbar">
-    <button class="hamburger-btn" id="hamburger">&#9776;</button>
+    <button class="hamburger-btn" id="hamburger" title="Menu">&#9776;</button>
     <div class="date-nav" id="date-nav">
         <button id="date-prev">&#8249;</button>
         <span class="date-label" id="date-label" title="{{ t.open_calendar }}">{{ t.live }}</span>
@@ -380,12 +379,6 @@
     <span class="topbar-meta" id="topbar-meta">
         {% if last_update %}{{ t.last_update }}: {{ last_update }} | {{ poll_interval }}s{% endif %}
     </span>
-    <a href="/settings" class="settings-link" title="{{ t.settings }}">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="3"></circle>
-            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-        </svg>
-    </a>
 </div>
 
 <!-- Calendar Popup -->
@@ -433,6 +426,12 @@
     {% endif %}
 
     <div class="summary-grid">
+        {% if isp_name or connection_info %}
+        <div class="summary-card">
+            <div class="label">{{ t.tariff }}</div>
+            <div class="value">{% if isp_name %}{{ isp_name }}{% endif %}{% if connection_info.max_downstream_kbps %} {{ connection_info.max_downstream_kbps // 1000 }}/{{ connection_info.max_upstream_kbps // 1000 }} Mbit/s{% endif %}</div>
+        </div>
+        {% endif %}
         <div class="summary-card">
             <div class="label">{{ t.ds_channels }}</div>
             <div class="value">{{ s.ds_total }}</div>
@@ -553,6 +552,8 @@ <h2 class="section-title">{{ t.upstream }} ({{ us|length }} {{ t.channels }})</h
     </div>
 </div>
 </div><!-- /main-content -->
+</div><!-- /app-main -->
+</div><!-- /app-layout -->
 
 <!-- Export Modal -->
 <div class="modal-overlay" id="export-modal">
@@ -641,21 +642,19 @@ <h2>{{ t.export_title }}</h2>
 
     /* ── Sidebar ── */
     var sidebar = document.getElementById('sidebar');
-    var overlay = document.getElementById('sidebar-overlay');
 
-    function toggleSidebar() {
-        sidebar.classList.toggle('open');
-        overlay.classList.toggle('open');
-    }
-    document.getElementById('hamburger').addEventListener('click', toggleSidebar);
-    document.getElementById('sidebar-close').addEventListener('click', toggleSidebar);
-    overlay.addEventListener('click', toggleSidebar);
+    function collapseSidebar() { sidebar.classList.add('collapsed'); }
+    function expandSidebar() { sidebar.classList.remove('collapsed'); }
+
+    document.getElementById('sidebar-collapse').addEventListener('click', collapseSidebar);
+    document.getElementById('hamburger').addEventListener('click', function() {
+        sidebar.classList.toggle('collapsed');
+    });
 
     var sidebarLinks = document.querySelectorAll('.sidebar-link[data-view]');
     sidebarLinks.forEach(function(link) {
         link.addEventListener('click', function() {
             switchView(this.getAttribute('data-view'));
-            toggleSidebar();
         });
     });
 
@@ -903,10 +902,6 @@ <h2>{{ t.export_title }}</h2>
     var T = {{ t|tojson }};
     var modal = document.getElementById('export-modal');
     var textarea = document.getElementById('export-text');
-    var sidebar = document.getElementById('sidebar');
-    var overlay = document.getElementById('sidebar-overlay');
-    sidebar.classList.remove('open');
-    overlay.classList.remove('open');
     textarea.value = T.export_no_data;
     modal.classList.add('open');
     fetch('/api/export')

app/templates/settings.html

@@ -220,7 +220,7 @@ <h2>{{ t.general }}</h2>
                 </select>
                 <span class="hint">{{ t.isp_hint }}</span>
             </div>
-            <div class="form-row" id="isp-other-row" style="display:{% if config.isp_name and config.isp_name not in t.isp_options %}block{% else %}none{% endif %}">
+            <div class="form-row" id="isp-other-row" style="display:{% if config.isp_name and config.isp_name not in t.isp_options %}flex{% else %}none{% endif %}">
                 <label for="isp_other_input">{{ t.isp_other }}</label>
                 <input type="text" id="isp_other_input" value="{% if config.isp_name and config.isp_name not in t.isp_options %}{{ config.isp_name }}{% endif %}" placeholder="{{ t.isp_other_placeholder }}">
             </div>
@@ -274,7 +274,7 @@ <h2>{{ t.general }}</h2>
 function onIspChange() {
     var sel = document.getElementById('isp_select');
     var row = document.getElementById('isp-other-row');
-    row.style.display = sel.value === '__other__' ? 'block' : 'none';
+    row.style.display = sel.value === '__other__' ? 'flex' : 'none';
 }
 
 function showToast(msg, ok) {

app/templates/setup.html

@@ -230,7 +230,7 @@ <h2><span class="step-num">2</span>{{ t.general }}</h2>
                 </select>
                 <span class="hint">{{ t.isp_hint }}</span>
             </div>
-            <div class="form-row" id="isp-other-row" style="display:{% if config.isp_name and config.isp_name not in t.isp_options %}block{% else %}none{% endif %}">
+            <div class="form-row" id="isp-other-row" style="display:{% if config.isp_name and config.isp_name not in t.isp_options %}flex{% else %}none{% endif %}">
                 <label for="isp_other_input">{{ t.isp_other }}</label>
                 <input type="text" id="isp_other_input" value="{% if config.isp_name and config.isp_name not in t.isp_options %}{{ config.isp_name }}{% endif %}" placeholder="{{ t.isp_other_placeholder }}">
             </div>
@@ -301,7 +301,7 @@ <h2>{{ t.mqtt_broker }}</h2>
 function onIspChange() {
     var sel = document.getElementById('isp_select');
     var row = document.getElementById('isp-other-row');
-    row.style.display = sel.value === '__other__' ? 'block' : 'none';
+    row.style.display = sel.value === '__other__' ? 'flex' : 'none';
 }
 
 function toggleAdvanced() {

app/web.py

@@ -46,6 +46,7 @@ def _get_lang():
     "last_update": None,
     "poll_interval": 300,
     "error": None,
+    "connection_info": None,
 }
 
 _storage = None
@@ -66,7 +67,7 @@ def init_config(config_manager, on_config_changed=None):
     _on_config_changed = on_config_changed
 
 
-def update_state(analysis=None, error=None, poll_interval=None):
+def update_state(analysis=None, error=None, poll_interval=None, connection_info=None):
     """Update the shared web state from the main loop."""
     if analysis is not None:
         _state["analysis"] = analysis
@@ -76,6 +77,8 @@ def update_state(analysis=None, error=None, poll_interval=None):
         _state["error"] = str(error)
     if poll_interval is not None:
         _state["poll_interval"] = poll_interval
+    if connection_info is not None:
+        _state["connection_info"] = connection_info
 
 
 @app.route("/")
@@ -87,6 +90,9 @@ def index():
     lang = _get_lang()
     t = get_translations(lang)
 
+    isp_name = _config_manager.get("isp_name", "") if _config_manager else ""
+    conn_info = _state.get("connection_info") or {}
+
     ts = request.args.get("t")
     if ts and _storage:
         snapshot = _storage.get_snapshot(ts)
@@ -100,6 +106,7 @@ def index():
                 historical=True,
                 snapshot_ts=ts,
                 theme=theme,
+                isp_name=isp_name, connection_info=conn_info,
                 t=t, lang=lang, languages=LANGUAGES,
             )
     return render_template(
@@ -111,6 +118,7 @@ def index():
         historical=False,
         snapshot_ts=None,
         theme=theme,
+        isp_name=isp_name, connection_info=conn_info,
         t=t, lang=lang, languages=LANGUAGES,
     )
 
@@ -267,6 +275,9 @@ def api_export():
     ts = _state.get("last_update", "unknown")
 
     isp = _config_manager.get("isp_name", "") if _config_manager else ""
+    conn = _state.get("connection_info") or {}
+    ds_mbps = conn.get("max_downstream_kbps", 0) // 1000 if conn else 0
+    us_mbps = conn.get("max_upstream_kbps", 0) // 1000 if conn else 0
 
     lines = [
         "# DOCSIS Cable Connection – Status Report",
@@ -278,6 +289,7 @@ def api_export():
         "",
         "## Overview",
         f"- **ISP**: {isp}" if isp else None,
+        f"- **Tariff**: {ds_mbps}/{us_mbps} Mbit/s (Down/Up)" if ds_mbps else None,
         f"- **Health**: {s.get('health', 'Unknown')}",
         f"- **Details**: {s.get('health_details', '')}",
         f"- **Timestamp**: {ts}",