feat: add debug page with tables and logs viewer (Step 1)

Backend:
- Add /debug/tables endpoint to dump SQLite tables
- Add /debug/logs endpoint to read scrap.log

Frontend:
- Add react-router-dom for navigation
- Create HomePage and DebugPage components
- Add navigation bar with Debug link
- Style debug page with Gruvbox theme
- Fix package.json dependencies versions

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

frontend/src/App.jsx

@@ -1,21 +1,39 @@
 import React from "react";
+import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import DebugPage from "./pages/DebugPage";
 
 const App = () => (
-  <div className="app-shell">
-    <header className="app-header">
-      <div className="brand">suivi_produits</div>
-      <div className="actions">
-        <button className="btn">Add Product</button>
-        <button className="btn">Refresh</button>
-      </div>
-    </header>
-    <main className="app-grid">
-      {/* état vide avant ajout de produit */}
-      <section className="empty-state">
-        <p>Aucun produit pour l'instant, ajoutez un lien Amazon.fr !</p>
-      </section>
-    </main>
-  </div>
+  <BrowserRouter>
+    <div className="app-shell">
+      <header className="app-header">
+        <div className="brand">
+          <NavLink to="/">suivi_produits</NavLink>
+        </div>
+        <nav className="nav-links">
+          <NavLink to="/" className={({ isActive }) => isActive ? "active" : ""}>
+            <i className="fa-solid fa-home"></i> Accueil
+          </NavLink>
+          <NavLink to="/debug" className={({ isActive }) => isActive ? "active" : ""}>
+            <i className="fa-solid fa-bug"></i> Debug
+          </NavLink>
+        </nav>
+        <div className="actions">
+          <button className="btn btn-primary">
+            <i className="fa-solid fa-plus"></i> Add Product
+          </button>
+          <button className="btn">
+            <i className="fa-solid fa-refresh"></i> Refresh
+          </button>
+        </div>
+      </header>
+
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/debug" element={<DebugPage />} />
+      </Routes>
+    </div>
+  </BrowserRouter>
 );
 
 export default App;

frontend/src/main.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import "@fortawesome/fontawesome-free/css/all.min.css";
 import "./styles/global.scss";
 
 ReactDOM.createRoot(document.getElementById("root")).render(

frontend/src/pages/DebugPage.jsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from "react";
+
+const BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:8008";
+
+const DbTable = ({ title, data, columns }) => {
+  if (!data || data.length === 0) {
+    return (
+      <section className="debug-table">
+        <h3>{title}</h3>
+        <p className="empty">Aucune donnée</p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="debug-table">
+      <h3>{title} ({data.length})</h3>
+      <div className="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              {columns.map((col) => (
+                <th key={col}>{col}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row, idx) => (
+              <tr key={row.id || idx}>
+                {columns.map((col) => (
+                  <td key={col} title={String(row[col] ?? "")}>
+                    {formatCell(row[col])}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+};
+
+const formatCell = (value) => {
+  if (value === null || value === undefined) return "-";
+  if (typeof value === "boolean") return value ? "Oui" : "Non";
+  if (typeof value === "string" && value.length > 50) {
+    return value.substring(0, 50) + "...";
+  }
+  return String(value);
+};
+
+const LogViewer = ({ logs }) => {
+  if (!logs || logs.length === 0) {
+    return (
+      <section className="debug-logs">
+        <h3>Logs Scraping</h3>
+        <p className="empty">Aucun log disponible</p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="debug-logs">
+      <h3>Logs Scraping ({logs.length} lignes)</h3>
+      <div className="logs-wrapper">
+        {logs.map((log, idx) => (
+          <pre key={idx} className={`log-entry ${log.level || "info"}`}>
+            {JSON.stringify(log, null, 2)}
+          </pre>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+const DebugPage = () => {
+  const [tables, setTables] = useState({ products: [], snapshots: [], scrape_runs: [] });
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchDebugData = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [tablesRes, logsRes] = await Promise.all([
+        fetch(`${BASE_URL}/debug/tables`),
+        fetch(`${BASE_URL}/debug/logs`),
+      ]);
+
+      if (!tablesRes.ok || !logsRes.ok) {
+        throw new Error("Erreur lors du chargement des données debug");
+      }
+
+      const tablesData = await tablesRes.json();
+      const logsData = await logsRes.json();
+
+      setTables(tablesData);
+      setLogs(logsData.logs || []);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchDebugData();
+  }, []);
+
+  if (loading) {
+    return (
+      <main className="debug-page">
+        <h2>Debug</h2>
+        <p>Chargement...</p>
+      </main>
+    );
+  }
+
+  if (error) {
+    return (
+      <main className="debug-page">
+        <h2>Debug</h2>
+        <p className="error">{error}</p>
+        <button onClick={fetchDebugData} className="btn">Réessayer</button>
+      </main>
+    );
+  }
+
+  return (
+    <main className="debug-page">
+      <div className="debug-header">
+        <h2>Debug</h2>
+        <button onClick={fetchDebugData} className="btn">
+          <i className="fa-solid fa-refresh"></i> Rafraîchir
+        </button>
+      </div>
+
+      <DbTable
+        title="Products"
+        data={tables.products}
+        columns={["id", "boutique", "asin", "titre", "categorie", "actif", "cree_le"]}
+      />
+
+      <DbTable
+        title="Snapshots"
+        data={tables.snapshots}
+        columns={["id", "produit_id", "scrape_le", "prix_actuel", "en_stock", "note", "statut_scrap"]}
+      />
+
+      <DbTable
+        title="Scrape Runs"
+        data={tables.scrape_runs}
+        columns={["id", "demarre_le", "termine_le", "statut", "nb_total", "nb_ok", "nb_echec"]}
+      />
+
+      <LogViewer logs={logs} />
+    </main>
+  );
+};
+
+export default DebugPage;

frontend/src/pages/HomePage.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const HomePage = () => (
+  <main className="app-grid">
+    <section className="empty-state">
+      <p>Aucun produit pour l'instant, ajoutez un lien Amazon.fr !</p>
+    </section>
+  </main>
+);
+
+export default HomePage;

frontend/src/styles/global.scss

@@ -1,7 +1,15 @@
+// Gruvbox Dark Theme
 $bg: #282828;
+$bg-soft: #32302f;
 $text: #ebdbb2;
+$text-muted: #928374;
 $card: #3c3836;
+$card-hover: #504945;
 $accent: #fe8019;
+$accent-yellow: #fabd2f;
+$accent-green: #b8bb26;
+$accent-red: #fb4934;
+$accent-aqua: #8ec07c;
 
 * {
   box-sizing: border-box;
@@ -14,43 +22,276 @@ body {
   color: $text;
 }
 
+a {
+  color: $accent;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// App Shell
 .app-shell {
   min-height: 100vh;
   background: $bg;
-  padding: 16px;
 }
 
+// Header
 .app-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: 16px;
+  padding: 16px 24px;
+  background: $bg-soft;
+  border-bottom: 1px solid $card;
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
 .brand {
   font-size: 1.5rem;
   font-weight: 600;
+  a {
+    color: $text;
+    &:hover {
+      color: $accent;
+      text-decoration: none;
+    }
+  }
 }
 
-.actions .btn {
+.nav-links {
+  display: flex;
+  gap: 8px;
+
+  a {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: $text-muted;
+    transition: all 0.2s;
+
+    &:hover {
+      background: $card;
+      color: $text;
+      text-decoration: none;
+    }
+
+    &.active {
+      background: $card;
+      color: $accent;
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   background: $card;
   border: none;
   color: $text;
   padding: 8px 16px;
-  margin-left: 8px;
-  border-radius: 999px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.9rem;
+
+  &:hover {
+    background: $card-hover;
+  }
+
+  &.btn-primary {
+    background: $accent;
+    color: $bg;
+    font-weight: 500;
+
+    &:hover {
+      filter: brightness(1.1);
+    }
+  }
 }
 
+// Home Page
 .app-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 20px;
+  padding: 24px;
 }
 
 .empty-state {
+  grid-column: 1 / -1;
   background: $card;
-  border-radius: 16px;
-  padding: 32px;
+  border-radius: 12px;
+  padding: 48px 32px;
   text-align: center;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+
+  p {
+    color: $text-muted;
+    font-size: 1.1rem;
+  }
+}
+
+// Debug Page
+.debug-page {
+  padding: 24px;
+  max-width: 1600px;
+  margin: 0 auto;
+
+  h2 {
+    margin: 0 0 24px 0;
+    color: $text;
+  }
+
+  .error {
+    color: $accent-red;
+    background: rgba($accent-red, 0.1);
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+  }
+}
+
+.debug-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+
+  h2 {
+    margin: 0;
+  }
+}
+
+.debug-table {
+  background: $card;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 24px;
+
+  h3 {
+    margin: 0 0 16px 0;
+    color: $accent;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .empty {
+    color: $text-muted;
+    font-style: italic;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.85rem;
+
+    th, td {
+      padding: 10px 12px;
+      text-align: left;
+      border-bottom: 1px solid $bg;
+    }
+
+    th {
+      background: $bg-soft;
+      color: $text-muted;
+      font-weight: 500;
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      letter-spacing: 0.5px;
+    }
+
+    tr:hover td {
+      background: $card-hover;
+    }
+
+    td {
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.debug-logs {
+  background: $card;
+  border-radius: 12px;
+  padding: 20px;
+
+  h3 {
+    margin: 0 0 16px 0;
+    color: $accent;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .empty {
+    color: $text-muted;
+    font-style: italic;
+  }
+
+  .logs-wrapper {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+
+  .log-entry {
+    background: $bg;
+    padding: 12px;
+    margin-bottom: 8px;
+    border-radius: 6px;
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+    font-size: 0.8rem;
+    overflow-x: auto;
+    border-left: 3px solid $text-muted;
+
+    &.error, &.ERROR {
+      border-left-color: $accent-red;
+    }
+
+    &.warning, &.WARNING {
+      border-left-color: $accent-yellow;
+    }
+
+    &.info, &.INFO {
+      border-left-color: $accent-aqua;
+    }
+
+    &.success, &.SUCCESS {
+      border-left-color: $accent-green;
+    }
+  }
+}
+
+// Scrollbar styling
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: $bg;
+}
+
+::-webkit-scrollbar-thumb {
+  background: $card-hover;
+  border-radius: 4px;
+
+  &:hover {
+    background: $text-muted;
+  }
 }