feat(webui): add dashboard stat details

fix(webui): bust stylesheet cache
fix(webui): prevent dashboard horizontal offset
2026-07-26 19:53:19 +02:00 · 2026-07-26 19:47:48 +02:00 · 2026-07-26 19:45:23 +02:00 · 2026-07-26 19:29:04 +02:00 · 2026-07-26 19:02:11 +02:00 · 2026-07-26 18:56:41 +02:00
10 changed files with 1061 additions and 49 deletions
@@ -124,7 +124,7 @@ jobs:

  publish:
    needs: [lint-prettier, lint-ruff, lint-yaml, lint-dockerfiles, validate]
-    if: github.event_name != 'pull_request'
+    if: github.event_name != 'pull_request' && (github.ref_name == 'main' || github.ref_name == 'dev')
    runs-on: [self-hosted, linux, arch, homelab]
    steps:
      - name: Checkout repository
@@ -124,7 +124,7 @@ jobs:

  publish:
    needs: [lint-prettier, lint-ruff, lint-yaml, lint-dockerfiles, validate]
-    if: github.event_name != 'pull_request'
+    if: github.event_name != 'pull_request' && (github.ref_name == 'main' || github.ref_name == 'dev')
    runs-on: [self-hosted, linux, arch, homelab]
    steps:
      - name: Checkout repository
@@ -20,3 +20,6 @@ dependencies = [
    "Telethon==1.40.0",
    "yarl==1.20.1",
 ]
+
+[tool.pytest.ini_options]
+pythonpath = ["."]
@@ -284,6 +284,34 @@ class TestAccountLifecycle:
        assert loaded["continuous_scraping"]["run_all_tracked"] is True


+class TestInputSafety:
+    """Small safety checks for values that flow into files or exports."""
+
+    def test_channel_id_rejects_path_characters(self):
+        import webui_server as ws_module
+
+        assert ws_module.normalize_channel_id("@valid_name") == "valid_name"
+        for bad in ("../escape", "nested/channel", r"nested\channel", ".", "..", ""):
+            try:
+                ws_module.normalize_channel_id(bad)
+            except ValueError:
+                continue
+            raise AssertionError(f"accepted unsafe channel_id: {bad!r}")
+
+    def test_export_account_state_redacts_api_hash_by_default(self):
+        import webui_server as ws_module
+
+        state = {"label": "Work", "api_id": 123, "api_hash": "secret", "channels": {}}
+        redacted = ws_module.export_account_state(state)
+        assert redacted["api_hash"] is None
+        assert redacted["api_hash_present"] is True
+        assert state["api_hash"] == "secret"
+
+        full = ws_module.export_account_state(state, include_secrets=True)
+        assert full["api_hash"] == "secret"
+        assert "api_hash_present" not in full
+
+
 class TestContinuousOrchestrator:
    """Continuous scraping manager safety using mocked webui_server."""

@@ -536,27 +564,33 @@ class TestJobDeduplicationSchema:
    def test_create_job_dedup_by_account(self):
        JobRunner = self._import_job_runner()
        runner = JobRunner()
+        runner.queue.put = lambda job: None
        j1 = runner.create_job("scrape_all", "First", {"account_id": "acc1"})
        j2 = runner.create_job("scrape_all", "Second", {"account_id": "acc1"})
        assert j1.job_id == j2.job_id, "duplicate job was created instead of being reused"
        assert "Reused existing active job" in j2.logs
+        runner.shutdown(timeout=0)

    def test_create_job_allows_different_accounts(self):
        JobRunner = self._import_job_runner()
        runner = JobRunner()
+        runner.queue.put = lambda job: None
        j1 = runner.create_job("scrape_all", "First", {"account_id": "acc1"})
        time.sleep(0.002)  # ensure different timestamp -> different job_id
        j2 = runner.create_job("scrape_all", "Second", {"account_id": "acc2"})
        assert j1.job_id != j2.job_id
+        runner.shutdown(timeout=0)

    def test_create_job_allows_after_previous_completes(self):
        JobRunner = self._import_job_runner()
        runner = JobRunner()
+        runner.queue.put = lambda job: None
        j1 = runner.create_job("scrape_all", "First", {"account_id": "acc1"})
-        j1.status = "completed"
+        j1.status = "done"
        time.sleep(0.002)  # ensure different timestamp -> different job_id
        j2 = runner.create_job("scrape_all", "Second", {"account_id": "acc1"})
        assert j1.job_id != j2.job_id
+        runner.shutdown(timeout=0)


 class TestAccountHealthSummary:
@@ -361,6 +361,8 @@ function renderChannels(accountId, channels) {

  // Update channel count stat
  panel.querySelector('.channel-count').textContent = String(channels.length);
+  panel.querySelector('.channel-active-count').textContent = String(channels.length);
+  panel.querySelector('.channel-inactive-count').textContent = '0';
 }

 function renderJobs(accountId, jobs) {
@@ -616,6 +618,7 @@ function renderSummary(accountId, data) {
  const d = data.dashboard || data.state || {};
  const health = data.health || {};
  panel.querySelector('.forwarding-count').textContent = String((d.forwarding_rules || []).length);
+  panel.querySelector('.forwarding-active-count').textContent = String((d.forwarding_rules || []).length);
  const toggle = panel.querySelector('.scrape-media-label');
  toggle.textContent = d.scrape_media ? 'ON' : 'OFF';
  const healthOk = health.api_credentials && health.session_ready && health.data_dir_exists;
@@ -626,6 +629,11 @@ function renderSummary(accountId, data) {
    `${health.media_count || 0} media`,
    health.active_job ? `active: ${health.active_job.status}` : 'idle',
  ].join(' | ');
+  const mediaCount = Number(health.media_count || 0);
+  panel.querySelector('.media-session-count').textContent = String(mediaCount);
+  panel.querySelector('.media-total-count').textContent = String(mediaCount);
+  panel.querySelector('.health-session-value').textContent = health.session_ready ? 'Valid' : 'Check';
+  panel.querySelector('.health-rate-value').textContent = health.active_job ? 'Busy' : 'OK';
 }

 /* ── Account data loading ───────────────────────────── */
@@ -4,23 +4,49 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Telegram Scraper Control Panel</title>
-    <link rel="stylesheet" href="/static/style.css?v=6" />
+    <link rel="stylesheet" href="/static/style.css?v=8" />
  </head>
  <body>
    <div class="app-shell">
      <aside class="sidebar">
        <div class="brand-block">
+          <svg class="brand-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="m21 3-7.6 18-3.8-7.6L2 9.6zM9.6 13.4 14 10" />
+          </svg>
          <div class="eyebrow">Telegram Scraper</div>
          <h1>Control</h1>
          <p class="muted">Local scraper console for channels, jobs, and continuous runs.</p>
        </div>

        <nav class="nav-links">
-          <a class="nav-link active" href="/">Dashboard</a>
-          <a class="nav-link" href="/settings">Settings</a>
-          <a class="nav-link" href="/viewer">Message Viewer</a>
-          <a class="nav-link" href="/swagger">API Docs</a>
-          <a class="nav-link" href="/health">Health</a>
+          <a class="nav-link active" href="/"
+            ><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <rect x="4" y="4" width="6" height="6" />
+              <rect x="14" y="4" width="6" height="6" />
+              <rect x="4" y="14" width="6" height="6" />
+              <rect x="14" y="14" width="6" height="6" /></svg
+            >Dashboard</a
+          >
+          <a class="nav-link" href="/settings"
+            ><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <circle cx="12" cy="12" r="3" />
+              <path
+                d="M12 2v3m0 14v3M2 12h3m14 0h3m-2.9-7.1-2.1 2.1M4.9 19.1 7 17m0-10-2.1-2.1m12.2 14.2-2.1-2.1" /></svg
+            >Settings</a
+          >
+          <a class="nav-link" href="/viewer"
+            ><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v12H8l-4 3z" /></svg>Message
+            Viewer</a
+          >
+          <a class="nav-link" href="/swagger"
+            ><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="m8 5-5 7 5 7m8-14 5 7-5 7M14 3l-4 18" /></svg
+            >API Docs</a
+          >
+          <a class="nav-link" href="/health"
+            ><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h4l2-6 4 12 2-6h6" /></svg
+            >Health</a
+          >
        </nav>

        <section class="status-card" id="active-account-card">
@@ -39,6 +65,13 @@
      </aside>

      <main class="content">
+        <header class="dashboard-topbar">
+          <div class="dashboard-title"><span class="menu-icon" aria-hidden="true">☰</span>Dashboard</div>
+          <div class="runtime-status">
+            <span class="runtime-dot"></span>Service: Running <i></i> Scraper: Idle <i></i
+            ><span class="runtime-clock"></span>
+          </div>
+        </header>
        <!-- Account Tabs -->
        <div id="account-tabs" class="account-tabs"></div>

@@ -163,18 +196,38 @@
            <div class="panel stat-panel">
              <div class="section-title">Channels</div>
              <div class="stat-value channel-count">0</div>
+              <div class="stat-caption">Tracked channels</div>
+              <div class="stat-meta">
+                <span><strong class="channel-active-count">0</strong> Active</span
+                ><span><strong class="channel-inactive-count">0</strong> Inactive</span>
+              </div>
            </div>
            <div class="panel stat-panel">
              <div class="section-title">Media scraping</div>
              <div class="stat-value stat-compact scrape-media-label">OFF</div>
+              <div class="stat-caption">Items downloaded</div>
+              <div class="stat-meta">
+                <span><strong class="media-session-count">0</strong> This session</span
+                ><span><strong class="media-total-count">0</strong> Total</span>
+              </div>
            </div>
            <div class="panel stat-panel">
              <div class="section-title">Forwarding rules</div>
              <div class="stat-value forwarding-count">0</div>
+              <div class="stat-caption">Active rules</div>
+              <div class="stat-meta">
+                <span><strong class="forwarding-active-count">0</strong> Active</span
+                ><span><strong>0</strong> Paused</span>
+              </div>
            </div>
            <div class="panel stat-panel">
              <div class="section-title">Account health</div>
              <div class="stat-value stat-compact account-health-label">-</div>
+              <div class="stat-caption">Session status</div>
+              <div class="stat-meta">
+                <span><strong class="health-session-value">-</strong> Session</span
+                ><span><strong class="health-rate-value">-</strong> Rate limit</span>
+              </div>
              <div class="muted small account-health-detail"></div>
            </div>
          </section>
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Telegram Scraper Settings</title>
-    <link rel="stylesheet" href="/static/style.css?v=6" />
+    <link rel="stylesheet" href="/static/style.css?v=8" />
  </head>
  <body>
    <div class="app-shell settings-page-shell">
@@ -1380,3 +1380,845 @@ tbody tr:hover {
    display: none;
  }
 }
+
+/* ── GPU Radar visual system ────────────────────────────
+   A restrained, data-first monochrome treatment inspired by gpu.chernuha.space. */
+:root {
+  --bg-color: #080808;
+  --panel: #101010;
+  --panel-solid: #151515;
+  --panel-alt: #0b0b0b;
+  --text-color: #f5f5f5;
+  --dim: #9a9a9a;
+  --line: #2b2b2b;
+  --accent: #f1f1f1;
+  --accent-hover: #ffffff;
+  --accent-soft: rgba(255, 255, 255, 0.08);
+  --accent-line: #3b3b3b;
+  --accent-2: #d8d8d8;
+  --bubble-own: #181818;
+  --bubble-other: #101010;
+  --danger: #d0d0d0;
+  --ok: #e0e0e0;
+  --warn: #b8b8b8;
+  --info: #d7d7d7;
+  --radius: 8px;
+  --shadow: none;
+  --font-ui: Inter, 'SF Pro Display', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+body {
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+a {
+  border-bottom: 0;
+}
+a:hover,
+button:hover {
+  border-color: var(--accent-line);
+  background: var(--accent-soft);
+}
+
+.app-shell {
+  grid-template-columns: 236px minmax(0, 1fr);
+  min-height: 100vh;
+}
+.sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  padding: 18px 12px;
+  background: var(--panel-alt);
+  border-right-color: var(--line);
+}
+.brand-block {
+  position: relative;
+  display: block;
+  min-height: 64px;
+  padding: 5px 9px 16px;
+}
+.brand-block::before {
+  content: '◈';
+  position: absolute;
+  top: 8px;
+  left: 9px;
+  color: var(--text-color);
+  font-size: 25px;
+  line-height: 1;
+}
+.brand-block h1,
+.dialog-header h2 {
+  color: var(--text-color);
+  font-size: 15px;
+  line-height: 1.12;
+  letter-spacing: -0.01em;
+}
+.brand-block h1 {
+  margin-left: 36px;
+}
+.brand-block .eyebrow {
+  margin: 0 0 3px 36px;
+  color: var(--muted, #747474);
+  font-size: 12px;
+  letter-spacing: 0;
+  text-transform: none;
+}
+.brand-block .muted {
+  display: none;
+}
+.eyebrow,
+.section-title {
+  color: #747474;
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+}
+.muted {
+  color: #9a9a9a;
+}
+
+.nav-links {
+  gap: 5px;
+  margin: 10px 0 24px;
+}
+.nav-link,
+.button,
+input,
+.content-tab,
+.viewer-channel-item,
+.account-tab {
+  border-color: transparent;
+  border-radius: 6px;
+  background: transparent;
+}
+.nav-link {
+  justify-content: flex-start;
+  min-height: 46px;
+  padding: 0 13px;
+  color: #979797;
+  font-size: 13px;
+  font-weight: 650;
+}
+.nav-link.active {
+  border-color: #3b3b3b;
+  color: var(--text-color);
+  background: var(--accent-soft);
+}
+.nav-link::before {
+  display: none;
+}
+.nav-icon {
+  display: inline-grid;
+  width: 18px;
+  place-items: center;
+  color: #c6c6c6;
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.status-card,
+.panel,
+.stat-panel,
+.job-card,
+.message-card,
+.settings-dialog {
+  border-color: var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  box-shadow: none;
+}
+.status-card {
+  padding: 14px 10px 4px;
+  background: transparent;
+  border: 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.09);
+}
+.status-card + .status-card {
+  margin-top: 12px;
+}
+.status-card .button {
+  width: auto;
+  justify-content: flex-start;
+  padding: 0 13px;
+}
+.status-badge {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  color: var(--text-color);
+  background: transparent;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.content {
+  max-width: none;
+  padding: 0 28px 40px;
+}
+.content::before {
+  display: none;
+}
+.dashboard-topbar {
+  display: flex;
+  min-height: 58px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin: 0 -28px 20px;
+  padding: 0 28px;
+  border-bottom: 1px solid var(--line);
+}
+.dashboard-title,
+.runtime-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: #efefef;
+  font-size: 13px;
+  font-weight: 650;
+}
+.menu-icon {
+  color: #dedede;
+  font-size: 20px;
+  font-weight: 400;
+}
+.runtime-status {
+  color: #b8b8b8;
+  font-size: 12px;
+  font-weight: 500;
+}
+.runtime-status i {
+  width: 1px;
+  height: 17px;
+  background: #363636;
+}
+.runtime-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #e2e2e2;
+}
+.runtime-clock::before {
+  content: '◷';
+  color: #e1e1e1;
+  font-size: 17px;
+}
+.content-tabs,
+.account-tabs {
+  gap: 0;
+  margin-bottom: 18px;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+.content-tab,
+.account-tab {
+  min-height: 38px;
+  padding: 8px 14px;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  color: #aaa;
+  font-size: 13px;
+}
+.content-tab:first-child,
+.account-tab:first-child {
+  border-radius: 6px 0 0 6px;
+}
+.content-tab + .content-tab,
+.account-tab + .account-tab {
+  margin-left: -1px;
+}
+.content-tab:last-child,
+.account-tab:last-child {
+  border-radius: 0 6px 6px 0;
+}
+.content-tab.active,
+.account-tab.active {
+  position: relative;
+  z-index: 1;
+  border-color: #535353;
+  color: var(--text-color);
+  background: var(--accent-soft);
+}
+
+.panel-grid {
+  gap: 14px;
+  margin-bottom: 14px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.settings-health-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.panel,
+.status-card,
+.job-card,
+.message-card {
+  padding: 18px;
+}
+.panel {
+  margin-bottom: 14px;
+}
+.stat-panel {
+  position: relative;
+  min-height: 187px;
+  padding: 18px;
+}
+.stat-panel::after {
+  content: '';
+  position: absolute;
+  right: 18px;
+  bottom: 65px;
+  left: 18px;
+  height: 1px;
+  background: #343434;
+}
+.stat-panel::before {
+  position: absolute;
+  top: 17px;
+  right: 18px;
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  border: 1px solid #9c9c9c;
+  border-radius: 50%;
+  color: #e4e4e4;
+  font-size: 15px;
+  font-weight: 400;
+}
+.stat-panel:nth-child(1)::before {
+  content: '⌘';
+}
+.stat-panel:nth-child(2)::before {
+  content: '⇩';
+}
+.stat-panel:nth-child(3)::before {
+  content: '⇄';
+}
+.stat-panel:nth-child(4)::before {
+  content: '◇';
+}
+.stat-value {
+  margin-top: 24px;
+  font-size: 28px;
+  font-weight: 650;
+  letter-spacing: -0.04em;
+}
+.stat-compact {
+  font-size: 19px;
+}
+.stat-panel .account-health-detail {
+  position: absolute;
+  right: 18px;
+  bottom: 17px;
+  left: 18px;
+}
+.stat-panel .section-title {
+  max-width: calc(100% - 34px);
+}
+.panel-header,
+.dialog-header,
+.job-head {
+  align-items: center;
+  gap: 16px;
+}
+.panel-header h2,
+.settings-hero h2 {
+  font-size: 16px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+.panel-header .muted {
+  margin-top: 4px;
+  font-size: 12px;
+}
+
+.button {
+  min-height: 36px;
+  padding: 7px 12px;
+  border: 1px solid var(--line);
+  color: #d4d4d4;
+  font-size: 12px;
+  font-weight: 650;
+}
+.button.primary {
+  border-color: #d9d9d9;
+  color: #111;
+  background: #f1f1f1;
+}
+.button.primary:hover {
+  border-color: #fff;
+  background: #fff;
+  color: #080808;
+}
+.button.danger {
+  color: #c5c5c5;
+}
+.button.button-small {
+  min-height: 32px;
+  padding: 5px 9px;
+}
+input {
+  min-height: 36px;
+  padding: 8px 11px;
+  border: 1px solid var(--line);
+  color: var(--text-color);
+  background: #0d0d0d;
+  font-size: 12px;
+}
+input:focus {
+  border-color: #777;
+}
+
+th,
+td {
+  padding: 12px 10px;
+  border-bottom-color: var(--line);
+  font-size: 12px;
+}
+th {
+  color: #888;
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+tbody tr:hover {
+  background: rgba(255, 255, 255, 0.035);
+}
+.job-card {
+  border-radius: 6px;
+}
+.job-status {
+  color: #aaa;
+  font-size: 10px;
+}
+.job-logs,
+.log-viewer {
+  border-color: var(--line);
+  border-radius: 6px;
+  background: #0b0b0b;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+.log-line {
+  border-bottom-color: #202020;
+}
+.log-line:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.switch {
+  width: 42px;
+  min-width: 42px;
+  height: 22px;
+}
+.switch-slider {
+  border-color: #3a3a3a;
+  background: #181818;
+}
+.switch-slider::before {
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  background: #8d8d8d;
+}
+.switch input:checked + .switch-slider {
+  border-color: #858585;
+  background: #f1f1f1;
+}
+.switch input:checked + .switch-slider::before {
+  transform: translateX(20px);
+  background: #111;
+}
+.checkbox-row,
+.settings-account-button,
+.account-list-item,
+.add-account-form,
+.import-account-row,
+.qr-wrap {
+  border-color: var(--line);
+  border-radius: 6px;
+  background: #111;
+}
+.settings-account-button.active {
+  border-color: #535353;
+  background: var(--accent-soft);
+}
+
+.settings-hero {
+  border-top: 0;
+}
+.settings-dialog {
+  border-color: #3b3b3b;
+}
+.dialog-shell {
+  padding: 20px;
+}
+.settings-section {
+  border-top-color: var(--line);
+}
+.toast {
+  border-color: #4a4a4a;
+  border-radius: 6px;
+  background: #151515;
+}
+
+@media (max-width: 900px) {
+  .panel-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 768px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+  .sidebar {
+    position: static;
+    height: auto;
+    padding: 12px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+  .brand-block {
+    min-height: 46px;
+    padding-bottom: 5px;
+  }
+  .nav-links {
+    display: flex;
+    overflow-x: auto;
+    margin: 8px 0 0;
+  }
+  .nav-link {
+    min-height: 34px;
+    white-space: nowrap;
+  }
+  .status-card {
+    display: none;
+  }
+  .content {
+    padding: 16px;
+  }
+  .content::before {
+    height: 0;
+    margin: -16px -16px 16px;
+  }
+}
+@media (max-width: 560px) {
+  .panel-grid,
+  .settings-health-grid {
+    grid-template-columns: 1fr;
+  }
+  .content-tabs,
+  .account-tabs {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+  }
+  .content-tab,
+  .account-tab {
+    white-space: nowrap;
+  }
+}
+
+/* Dashboard reference fidelity pass */
+:root {
+  --sidebar-width: 244px;
+}
+
+.app-shell {
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+  width: 100vw;
+  max-width: 100vw;
+  min-width: 0;
+}
+
+.sidebar {
+  width: var(--sidebar-width);
+  padding: 18px 12px;
+}
+
+.brand-block {
+  min-height: 62px;
+  padding: 5px 9px 14px;
+}
+
+.brand-block::before {
+  display: none;
+}
+
+.brand-icon {
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  width: 27px;
+  height: 27px;
+  fill: none;
+  stroke: #f1f1f1;
+  stroke-width: 1.65;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.brand-block h1 {
+  margin-left: 37px;
+  font-size: 15px;
+}
+
+.brand-block .eyebrow {
+  margin-left: 37px;
+  color: #f5f5f5;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.nav-links {
+  gap: 5px;
+  margin: 6px 0 0;
+}
+
+.nav-link {
+  min-height: 45px;
+  gap: 12px;
+  padding: 0 13px;
+  color: #a1a1a1;
+  font-size: 13px;
+}
+
+.nav-link.active {
+  border-color: transparent;
+  background: #202020;
+}
+
+a.nav-link {
+  border-bottom-color: transparent;
+}
+
+.nav-icon {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.status-card:first-of-type {
+  margin-top: auto;
+}
+
+.status-card {
+  padding: 15px 10px 5px;
+}
+
+.content {
+  min-width: 0;
+  padding: 0 20px 28px;
+}
+
+.dashboard-topbar {
+  min-height: 58px;
+  margin: 0 -20px 20px;
+  padding: 0 28px;
+}
+
+.dashboard-title {
+  gap: 22px;
+  font-size: 14px;
+}
+
+.menu-icon {
+  font-size: 21px;
+}
+
+.runtime-status {
+  gap: 13px;
+}
+
+.account-tabs {
+  margin-bottom: 18px;
+}
+
+.account-tab {
+  min-height: 36px;
+  padding: 7px 16px;
+}
+
+.content-tabs {
+  margin-bottom: 16px;
+}
+
+.content-tab {
+  min-height: 35px;
+  padding: 6px 13px;
+}
+
+.panel-grid {
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.panel,
+.stat-panel {
+  border-color: #303030;
+  border-radius: 7px;
+}
+
+.stat-panel {
+  min-height: 188px;
+  padding: 18px 18px 16px;
+}
+
+.stat-panel::after {
+  right: 16px;
+  bottom: 66px;
+  left: 16px;
+  background: #363636;
+}
+
+.stat-panel::before {
+  top: 16px;
+  right: 16px;
+  width: 25px;
+  height: 25px;
+}
+
+.section-title {
+  color: #ebebeb;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  text-transform: none;
+}
+
+.stat-value {
+  margin-top: 20px;
+  font-size: 27px;
+  font-weight: 500;
+}
+
+.stat-caption {
+  margin-top: 3px;
+  color: #bdbdbd;
+  font-size: 12px;
+}
+
+.stat-meta {
+  position: absolute;
+  right: 18px;
+  bottom: 15px;
+  left: 18px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  color: #bdbdbd;
+  font-size: 12px;
+}
+
+.stat-meta span + span {
+  padding-left: 12px;
+  border-left: 1px solid #363636;
+}
+
+.stat-meta strong {
+  display: block;
+  margin-bottom: 1px;
+  color: #ededed;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.stat-panel .account-health-detail {
+  display: none;
+}
+
+.panel {
+  padding: 0;
+  overflow: hidden;
+}
+
+.panel-header {
+  min-height: 52px;
+  padding: 0 18px;
+  border-bottom: 1px solid #343434;
+}
+
+.panel-header h2 {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.panel-header .muted {
+  display: none;
+}
+
+.inline-form {
+  gap: 8px;
+}
+
+.inline-form input {
+  width: 168px;
+}
+
+.table-wrap {
+  padding: 0 8px;
+}
+
+th,
+td {
+  height: 38px;
+  padding: 9px 10px;
+  border-bottom-color: #303030;
+}
+
+th {
+  color: #e6e6e6;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+td {
+  color: #d0d0d0;
+  font-size: 12px;
+}
+
+.action-row .button,
+td .button,
+.job-card .button {
+  min-height: 29px;
+  padding: 4px 9px;
+  border-radius: 5px;
+  font-size: 11px;
+}
+
+.jobs-list {
+  padding: 12px 16px 16px;
+}
+
+.job-card {
+  padding: 14px;
+}
+
+@media (max-width: 768px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    width: auto;
+  }
+
+  .content {
+    padding: 0 16px 20px;
+  }
+
+  .dashboard-topbar {
+    margin: 0 -16px 16px;
+    padding: 0 16px;
+  }
+}
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Telegram Scraper Viewer</title>
-    <link rel="stylesheet" href="/static/style.css?v=6" />
+    <link rel="stylesheet" href="/static/style.css?v=8" />
  </head>
  <body>
    <div class="viewer-shell">
@@ -99,6 +99,27 @@ def normalize_media_url(media_path: Optional[str]) -> Optional[str]:
    return "/media/" + urllib.parse.quote(str(relative).replace("\\", "/"))


+def normalize_channel_id(value: Any) -> str:
+    channel_id = str(value or "").strip().lstrip("@")
+    if (
+        not channel_id
+        or "/" in channel_id
+        or "\\" in channel_id
+        or channel_id in {".", ".."}
+        or any(ord(ch) < 32 for ch in channel_id)
+    ):
+        raise ValueError("channel_id contains unsupported path characters")
+    return channel_id
+
+
+def export_account_state(state: Dict[str, Any], include_secrets: bool = False) -> Dict[str, Any]:
+    exported = dict(state)
+    if not include_secrets and "api_hash" in exported:
+        exported["api_hash_present"] = bool(exported.get("api_hash"))
+        exported["api_hash"] = None
+    return exported
+
+
 def channel_db_path(account_id: Optional[str], channel_id: str) -> Path:
    if account_id:
        return account_data_dir(DATA_DIR, account_id) / channel_id / f"{channel_id}.db"
@@ -1832,7 +1853,10 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
            return self.send_json(list_channels_snapshot())
        if path.startswith("/api/channels/") and path.endswith("/messages"):
            parts = path.split("/")
-            channel_id = urllib.parse.unquote(parts[3]).lstrip("@")
+            try:
+                channel_id = normalize_channel_id(urllib.parse.unquote(parts[3]))
+            except ValueError as exc:
+                return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
            limit = max(1, min(int(query.get("limit", ["120"])[0]), 300))
            before = query.get("before")
            before_message_id = int(before[0]) if before else None
@@ -1912,16 +1936,20 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
        if sub == ["health"]:
            return self.send_json(account_health_summary(account_id, self.app.job_runner))
        if sub == ["export"]:
+            include_secrets = query.get("include_secrets", ["0"])[0].lower() in {"1", "true", "yes"}
            payload = {
                "version": 1,
                "account_id": account_id,
-                "state": load_account(DATA_DIR, account_id),
+                "state": export_account_state(load_account(DATA_DIR, account_id), include_secrets=include_secrets),
            }
            return self.send_json(payload)
        if sub == ["channels"]:
            return self._handle_get_account_channels(account_id)
        if len(sub) >= 3 and sub[0] == "channels" and sub[-1] == "messages":
-            channel_id = urllib.parse.unquote(sub[1]).lstrip("@")
+            try:
+                channel_id = normalize_channel_id(urllib.parse.unquote(sub[1]))
+            except ValueError as exc:
+                return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
            return self._handle_get_account_channel_messages(account_id, channel_id, query)
        if sub == ["continuous"]:
            return self.send_json(
@@ -2117,9 +2145,10 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
            return self.send_error_json(HTTPStatus.BAD_REQUEST, "Legacy auth is not available in multi-account mode. Use /api/accounts/{id}/auth/password instead.")

        if path == "/api/channels/add":
-            channel_id = str(body.get("channel_id", "")).strip()
-            if not channel_id:
-                return self.send_error_json(HTTPStatus.BAD_REQUEST, "channel_id is required")
+            try:
+                channel_id = normalize_channel_id(body.get("channel_id"))
+            except ValueError as exc:
+                return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
            if self.app.legacy_account_id:
                return self._handle_account_channel_add(self.app.legacy_account_id, channel_id, body.get("name"))
            state = load_state()
@@ -2131,7 +2160,10 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
            return self.send_json({"ok": True, "channel_id": channel_id})

        if path == "/api/channels/remove":
-            channel_id = str(body.get("channel_id", "")).strip()
+            try:
+                channel_id = normalize_channel_id(body.get("channel_id"))
+            except ValueError as exc:
+                return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
            if self.app.legacy_account_id:
                return self._handle_account_channel_remove(self.app.legacy_account_id, channel_id)
            state = load_state()
@@ -2147,10 +2179,13 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
            if account_id:
                payload["account_id"] = account_id
            if channel_id:
-                payload["channel_id"] = str(channel_id)
+                try:
+                    payload["channel_id"] = normalize_channel_id(channel_id)
+                except ValueError as exc:
+                    return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
                job = self.app.job_runner.create_job(
                    "scrape_channel",
-                    f"Scrape channel {channel_id}" + (f" [{account_id}]" if account_id else ""),
+                    f"Scrape channel {payload['channel_id']}" + (f" [{account_id}]" if account_id else ""),
                    payload,
                )
            else:
@@ -2173,9 +2208,10 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
            return self.send_json(job.to_dict(), status=HTTPStatus.ACCEPTED)

        if path == "/api/jobs/export-channel":
-            channel_id = str(body.get("channel_id", "")).strip()
-            if not channel_id:
-                return self.send_error_json(HTTPStatus.BAD_REQUEST, "channel_id is required")
+            try:
+                channel_id = normalize_channel_id(body.get("channel_id"))
+            except ValueError as exc:
+                return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
            payload = {"channel_id": channel_id}
            if self.app.legacy_account_id:
                payload["account_id"] = self.app.legacy_account_id
@@ -2187,9 +2223,10 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
            return self.send_json(job.to_dict(), status=HTTPStatus.ACCEPTED)

        if path == "/api/jobs/rescrape-media":
-            channel_id = str(body.get("channel_id", "")).strip()
-            if not channel_id:
-                return self.send_error_json(HTTPStatus.BAD_REQUEST, "channel_id is required")
+            try:
+                channel_id = normalize_channel_id(body.get("channel_id"))
+            except ValueError as exc:
+                return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
            payload = {"channel_id": channel_id}
            if self.app.legacy_account_id:
                payload["account_id"] = self.app.legacy_account_id
@@ -2201,9 +2238,10 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
            return self.send_json(job.to_dict(), status=HTTPStatus.ACCEPTED)

        if path == "/api/jobs/fix-media":
-            channel_id = str(body.get("channel_id", "")).strip()
-            if not channel_id:
-                return self.send_error_json(HTTPStatus.BAD_REQUEST, "channel_id is required")
+            try:
+                channel_id = normalize_channel_id(body.get("channel_id"))
+            except ValueError as exc:
+                return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
            payload = {"channel_id": channel_id}
            if self.app.legacy_account_id:
                payload["account_id"] = self.app.legacy_account_id
@@ -2293,8 +2331,8 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
            "label": str(body.get("label") or state.get("label") or account_id).strip(),
            "api_id": state.get("api_id"),
            "api_hash": state.get("api_hash"),
-            "channels": state.get("channels") if isinstance(state.get("channels"), dict) else {},
-            "channel_names": state.get("channel_names") if isinstance(state.get("channel_names"), dict) else {},
+            "channels": self._clean_imported_channels(state.get("channels")),
+            "channel_names": self._clean_imported_channel_names(state.get("channel_names")),
            "scrape_media": bool(state.get("scrape_media", True)),
            "forwarding_rules": state.get("forwarding_rules") if isinstance(state.get("forwarding_rules"), list) else [],
            "continuous_scraping": state.get("continuous_scraping") if isinstance(state.get("continuous_scraping"), dict) else {
@@ -2337,9 +2375,9 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
        if sub == ["auth", "password"]:
            return self._handle_post_account_auth_password(account_id, body)
        if sub == ["channels", "add"]:
-            return self._handle_account_channel_add(account_id, str(body.get("channel_id", "")).strip(), body.get("name"))
+            return self._handle_account_channel_add(account_id, body.get("channel_id"), body.get("name"))
        if sub == ["channels", "remove"]:
-            return self._handle_account_channel_remove(account_id, str(body.get("channel_id", "")).strip())
+            return self._handle_account_channel_remove(account_id, body.get("channel_id"))
        if sub == ["jobs", "scrape"]:
            return self._handle_account_job_scrape(account_id, body)
        if sub == ["jobs", "export"]:
@@ -2412,10 +2450,35 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
            return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
        return self.send_json(payload)

-    def _handle_account_channel_add(self, account_id: str, channel_id: str, name: Optional[str]) -> None:
-        channel_id = channel_id.lstrip("@")
-        if not channel_id:
-            return self.send_error_json(HTTPStatus.BAD_REQUEST, "channel_id is required")
+    def _clean_imported_channels(self, channels: Any) -> Dict[str, Any]:
+        if not isinstance(channels, dict):
+            return {}
+        cleaned: Dict[str, Any] = {}
+        for raw_channel_id, last_message_id in channels.items():
+            try:
+                channel_id = normalize_channel_id(raw_channel_id)
+            except ValueError:
+                continue
+            cleaned[channel_id] = last_message_id
+        return cleaned
+
+    def _clean_imported_channel_names(self, channel_names: Any) -> Dict[str, str]:
+        if not isinstance(channel_names, dict):
+            return {}
+        cleaned: Dict[str, str] = {}
+        for raw_channel_id, name in channel_names.items():
+            try:
+                channel_id = normalize_channel_id(raw_channel_id)
+            except ValueError:
+                continue
+            cleaned[channel_id] = str(name).strip()
+        return cleaned
+
+    def _handle_account_channel_add(self, account_id: str, channel_id: Any, name: Optional[str]) -> None:
+        try:
+            channel_id = normalize_channel_id(channel_id)
+        except ValueError as exc:
+            return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
        store = get_account_store(DATA_DIR, account_id)
        def mutate(state: Dict[str, Any]) -> None:
            if channel_id not in state.setdefault("channels", {}):
@@ -2426,9 +2489,11 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
        self.app.continuous_orchestrator.refresh_account(account_id)
        return self.send_json({"ok": True, "channel_id": channel_id})

-    def _handle_account_channel_remove(self, account_id: str, channel_id: str) -> None:
-        if not channel_id:
-            return self.send_error_json(HTTPStatus.BAD_REQUEST, "channel_id is required")
+    def _handle_account_channel_remove(self, account_id: str, channel_id: Any) -> None:
+        try:
+            channel_id = normalize_channel_id(channel_id)
+        except ValueError as exc:
+            return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
        store = get_account_store(DATA_DIR, account_id)
        existed = [False]
        def mutate(state: Dict[str, Any]) -> None:
@@ -2444,6 +2509,10 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
    def _handle_account_job_scrape(self, account_id: str, body: Dict[str, Any]) -> None:
        channel_id = body.get("channel_id")
        if channel_id:
+            try:
+                channel_id = normalize_channel_id(channel_id)
+            except ValueError as exc:
+                return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
            job = self.app.job_runner.create_job(
                "scrape_channel",
                f"Scrape channel {channel_id} [{account_id}]",
@@ -2466,9 +2535,10 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
        return self.send_json(job.to_dict(), status=HTTPStatus.ACCEPTED)

    def _handle_account_job_export_channel(self, account_id: str, body: Dict[str, Any]) -> None:
-        channel_id = str(body.get("channel_id", "")).strip()
-        if not channel_id:
-            return self.send_error_json(HTTPStatus.BAD_REQUEST, "channel_id is required")
+        try:
+            channel_id = normalize_channel_id(body.get("channel_id"))
+        except ValueError as exc:
+            return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
        job = self.app.job_runner.create_job(
            "export_channel",
            f"Export channel {channel_id} [{account_id}]",
@@ -2477,9 +2547,10 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
        return self.send_json(job.to_dict(), status=HTTPStatus.ACCEPTED)

    def _handle_account_job_rescrape_media(self, account_id: str, body: Dict[str, Any]) -> None:
-        channel_id = str(body.get("channel_id", "")).strip()
-        if not channel_id:
-            return self.send_error_json(HTTPStatus.BAD_REQUEST, "channel_id is required")
+        try:
+            channel_id = normalize_channel_id(body.get("channel_id"))
+        except ValueError as exc:
+            return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
        job = self.app.job_runner.create_job(
            "rescrape_media",
            f"Rescrape media for {channel_id} [{account_id}]",
@@ -2488,9 +2559,10 @@ class TelegramScraperRequestHandler(BaseHTTPRequestHandler):
        return self.send_json(job.to_dict(), status=HTTPStatus.ACCEPTED)

    def _handle_account_job_fix_media(self, account_id: str, body: Dict[str, Any]) -> None:
-        channel_id = str(body.get("channel_id", "")).strip()
-        if not channel_id:
-            return self.send_error_json(HTTPStatus.BAD_REQUEST, "channel_id is required")
+        try:
+            channel_id = normalize_channel_id(body.get("channel_id"))
+        except ValueError as exc:
+            return self.send_error_json(HTTPStatus.BAD_REQUEST, str(exc))
        job = self.app.job_runner.create_job(
            "fix_missing_media",
            f"Fix missing media for {channel_id} [{account_id}]",
Author	SHA1	Message	Date
forust	70ac1ce73e	feat(webui): add dashboard stat details ci / lint-prettier (push) Successful in 11s Details ci / lint-ruff (push) Successful in 5s Details ci / lint-yaml (push) Successful in 6s Details ci / lint-dockerfiles (push) Successful in 8s Details ci / validate (push) Successful in 7s Details ci / publish (push) Successful in 30s Details	2026-07-26 19:53:19 +02:00
forust	81e69865ce	fix(webui): bust stylesheet cache ci / lint-prettier (push) Successful in 26s Details ci / lint-ruff (push) Successful in 11s Details ci / lint-yaml (push) Successful in 18s Details ci / lint-dockerfiles (push) Successful in 11s Details ci / validate (push) Successful in 7s Details ci / publish (push) Successful in 19s Details	2026-07-26 19:47:48 +02:00
forust	418c4d6192	fix(webui): prevent dashboard horizontal offset ci / lint-prettier (push) Successful in 12s Details ci / lint-ruff (push) Successful in 5s Details ci / lint-yaml (push) Successful in 6s Details ci / lint-dockerfiles (push) Successful in 6s Details ci / validate (push) Successful in 11s Details ci / publish (push) Successful in 16s Details	2026-07-26 19:45:23 +02:00
forust	5956ea36a8	style(webui): match dashboard reference ci / lint-yaml (push) Successful in 6s Details ci / lint-prettier (push) Successful in 11s Details ci / lint-ruff (push) Successful in 5s Details ci / lint-dockerfiles (push) Successful in 5s Details ci / validate (push) Successful in 7s Details ci / publish (push) Successful in 19s Details	2026-07-26 19:29:04 +02:00
forust	93c8d00af6	style(webui): format stylesheet ci / lint-prettier (push) Successful in 11s Details ci / lint-ruff (push) Successful in 5s Details ci / lint-yaml (push) Successful in 9s Details ci / lint-dockerfiles (push) Successful in 6s Details ci / validate (push) Successful in 7s Details ci / publish (push) Successful in 2m3s Details	2026-07-26 19:02:11 +02:00
forust	08f8196bf9	style(webui): match GPU Radar visual system ci / lint-dockerfiles (push) Successful in 5s Details ci / validate (push) Successful in 4s Details ci / publish (push) Has been skipped Details ci / lint-prettier (push) Failing after 11s Details ci / lint-ruff (push) Successful in 4s Details ci / lint-yaml (push) Successful in 5s Details	2026-07-26 18:56:41 +02:00
forust	b963cf07df	ci: restore docker-based lint and validate jobs ci / lint-prettier (push) Successful in 6s Details ci / lint-ruff (push) Successful in 3s Details ci / lint-yaml (push) Successful in 3s Details ci / lint-dockerfiles (push) Successful in 6s Details ci / validate (push) Successful in 4s Details ci / publish (push) Successful in 5s Details	2026-06-30 01:12:51 +02:00
forust	849bf97c97	ci: run lint and validate tools locally ci / lint-dockerfiles (push) Failing after 1s Details ci / validate (push) Failing after 1s Details ci / publish (push) Has been skipped Details ci / lint-prettier (push) Failing after 3s Details ci / lint-ruff (push) Successful in 1s Details ci / lint-yaml (push) Successful in 1s Details	2026-06-30 00:15:02 +02:00
forust	145e7de7f4	Harden scraper inputs and exports ci / lint-prettier (push) Successful in 7s Details ci / lint-ruff (push) Successful in 5s Details ci / lint-yaml (push) Successful in 6s Details ci / lint-dockerfiles (push) Successful in 4s Details ci / validate (push) Successful in 4s Details ci / publish (push) Successful in 8s Details	2026-06-29 17:27:43 +02:00
forust	27296caf69	Merge branch 'dev' ci / lint-prettier (push) Successful in 7s Details ci / lint-ruff (push) Successful in 4s Details ci / lint-yaml (push) Successful in 5s Details ci / validate (push) Successful in 4s Details ci / lint-dockerfiles (push) Successful in 4s Details ci / publish (push) Successful in 8s Details	2026-06-28 01:04:17 +02:00
forust	9b72c3128e	Merge branch 'dev'	2026-06-27 16:30:36 +02:00
forust	f5ef74bda6	Merge dev into main: lint fixes and config updates	2026-06-19 11:52:34 +02:00