feat: add light/dark theme toggle and stale memories detection

Sprint 9: theme toggle with CSS custom properties and localStorage
persistence, plus stale memories page with age/quality filters and
bulk delete. 248 tests passing.

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

Author: pfillion42

DEVLOG.md

@@ -1,5 +1,27 @@
 # Journal de Developpement
 
+## 2026-02-14 - Sprint 9 : Theme clair et memoires obsoletes
+
+### Sprint 9.1 - Toggle theme clair/sombre
+- **CSS** : bloc `[data-theme="light"]` dans theme.css, toutes les variables redefinies (backgrounds blancs, textes sombres, borders gris, shadows subtils)
+- **Hook** : `useTheme()` - localStorage (cle `memviz-theme`), support `prefers-color-scheme`, applique `data-theme` sur `documentElement`
+- **UI** : bouton soleil/lune dans le header App.tsx, toggle au clic
+- 9 tests ThemeToggle (localStorage, toggle, persistence, defaut dark, preference systeme)
+
+### Sprint 9.2 - Detection memoires obsoletes
+- **Backend** : `GET /api/memories/stale` - filtre OR (anciennes created_at < now-days*86400, basse qualite <= quality_max), COALESCE pour metadata null, tri ASC, limit max 200
+- **Frontend** : Page `/stale` avec sliders (age 30-365j, qualite 0-50%), liste avec liens, badges type/tags, score qualite, boutons Supprimer/Tout supprimer (avec confirm)
+- **Hook** : `useStaleMemories(days, qualityMax)` via React Query
+- **Navigation** : lien "Obsoletes" entre Tags et Graphe
+- 11 nouveaux tests backend + 7 tests frontend
+
+### Resultats
+- 150 tests serveur + 98 tests client = **248 tests total**, tous verts
+- TypeScript compile sans erreur, lint propre
+- Equipe 2 agents paralleles (theme-dev + stale-dev)
+
+---
+
 ## 2026-02-14 - Sprint 8.1 : Correctifs de securite
 
 ### Contexte

PLAN.md

@@ -72,19 +72,34 @@ avec une interface web moderne et une API backend. Interfacable avec Claude.
 - [ ] Validation d'entrees avec `zod` (schemas stricts)
 - [ ] Token API optionnel (authentification legere)
 
+## Sprint 9 - Theme clair et memoires obsoletes
+
+### 9.1 Toggle theme clair/sombre - COMPLETE
+- CSS : bloc `[data-theme="light"]` dans theme.css avec toutes les variables redefinies
+- Hook : `useTheme()` avec localStorage + prefers-color-scheme
+- UI : bouton soleil/lune dans le header App.tsx
+- 9 tests ThemeToggle
+
+### 9.2 Detection memoires obsoletes - COMPLETE
+- Backend : GET /api/memories/stale (filtres days, quality_max, limit, tri ASC)
+- Frontend : Page /stale avec sliders age/qualite, liste, boutons Supprimer/Tout supprimer
+- Hook : useStaleMemories(days, qualityMax)
+- Navigation : lien "Obsoletes" entre Tags et Graphe
+- 11 tests backend + 7 tests frontend
+
 ## Backlog - Fonctionnalites futures
 
 ### Exploration et comprehension
 - [ ] Projection 2D des embeddings (t-SNE/UMAP) - vue espace vectoriel complet
 - [ ] Clustering automatique - grouper par proximite semantique
 
 ### Navigation et UX
-- [ ] Mode clair / toggle theme
+- [x] Mode clair / toggle theme (Sprint 9)
 - [ ] Pagination recherche vectorielle
 
 ### Gestion et maintenance
-- [ ] Gestion globale des tags - renommer, fusionner, supprimer un tag partout
-- [ ] Memoires obsoletes - identifier et suggerer nettoyage (jamais accedees, anciennes)
+- [x] Gestion globale des tags - renommer, fusionner, supprimer un tag partout (Sprint 7)
+- [x] Memoires obsoletes - identifier et suggerer nettoyage (Sprint 9)
 
 ### Synchronisation et integration
 - [ ] Live reload - surveiller la DB SQLite, mise a jour temps reel
@@ -124,3 +139,4 @@ avec une interface web moderne et une API backend. Interfacable avec Claude.
 | 2026-02-14 | Sprint 6 timeline + qualite | Timeline chronologique, QualityVoter etoiles 1-5, 175 tests verts |
 | 2026-02-14 | Sprint 7 tags + raccourcis | Gestion tags (rename/delete/merge), raccourcis clavier, 215 tests verts |
 | 2026-02-14 | Sprint 8.1 securite | 6 correctifs : bind localhost, CORS, body limit, env DB, FTS5 sanitize, LIKE escape, 221 tests verts |
+| 2026-02-14 | Sprint 9 theme + obsoletes | Toggle dark/light, page memoires obsoletes, 248 tests verts |

client/src/App.tsx

@@ -8,9 +8,11 @@ import { GraphView } from './pages/GraphView';
 import { Duplicates } from './pages/Duplicates';
 import { Timeline } from './pages/Timeline';
 import { Tags } from './pages/Tags';
+import { Stale } from './pages/Stale';
 import { Logo } from './components/Logo';
 import { KeyboardHelp } from './components/KeyboardHelp';
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts';
+import { useTheme } from './hooks/useTheme';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -40,6 +42,7 @@ const activeStyle: React.CSSProperties = {
 
 function AppContent() {
   const [showHelp, setShowHelp] = useState(false);
+  const { theme, toggleTheme } = useTheme();
   useKeyboardShortcuts({ onToggleHelp: () => setShowHelp(v => !v) });
 
   return (
@@ -83,12 +86,44 @@ function AppContent() {
           <NavLink to="/tags" style={({ isActive }) => isActive ? activeStyle : navStyle}>
             Tags
           </NavLink>
+          <NavLink to="/stale" style={({ isActive }) => isActive ? activeStyle : navStyle}>
+            Obsoletes
+          </NavLink>
           <NavLink to="/graph" style={({ isActive }) => isActive ? activeStyle : navStyle}>
             Graphe
           </NavLink>
         </nav>
 
-        <div style={{ marginLeft: 'auto', fontSize: '12px', color: 'var(--text-muted)' }}>
+        <button
+          onClick={toggleTheme}
+          aria-label="Toggle theme"
+          style={{
+            marginLeft: 'auto',
+            background: 'transparent',
+            border: '1px solid var(--border-default)',
+            borderRadius: 'var(--radius-sm)',
+            color: 'var(--text-secondary)',
+            cursor: 'pointer',
+            fontSize: '18px',
+            padding: '6px 10px',
+            transition: 'all var(--transition-fast)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+            e.currentTarget.style.borderColor = 'var(--border-accent)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = 'transparent';
+            e.currentTarget.style.borderColor = 'var(--border-default)';
+          }}
+        >
+          {theme === 'dark' ? '☀' : '☾'}
+        </button>
+
+        <div style={{ fontSize: '12px', color: 'var(--text-muted)' }}>
           Memory Explorer
         </div>
       </header>
@@ -101,6 +136,7 @@ function AppContent() {
           <Route path="/memories/:hash" element={<MemoryDetail />} />
           <Route path="/duplicates" element={<Duplicates />} />
           <Route path="/tags" element={<Tags />} />
+          <Route path="/stale" element={<Stale />} />
           <Route path="/graph" element={<GraphView />} />
         </Routes>
       </main>

client/src/hooks/useStaleMemories.ts

@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query';
+import type { Memory } from '../types';
+
+export interface StaleResponse {
+  data: Memory[];
+  total: number;
+  criteria: {
+    days: number;
+    quality_max: number;
+  };
+}
+
+async function fetchStaleMemories(days: number, qualityMax: number): Promise<StaleResponse> {
+  const params = new URLSearchParams({
+    days: days.toString(),
+    quality_max: qualityMax.toString(),
+  });
+
+  const res = await fetch(`/api/memories/stale?${params}`);
+  if (!res.ok) throw new Error('Erreur lors du chargement des memoires obsoletes');
+  return res.json();
+}
+
+export function useStaleMemories(days: number, qualityMax: number) {
+  return useQuery({
+    queryKey: ['stale-memories', days, qualityMax],
+    queryFn: () => fetchStaleMemories(days, qualityMax),
+  });
+}

client/src/hooks/useTheme.ts

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'dark' | 'light';
+
+interface UseThemeReturn {
+  theme: Theme;
+  toggleTheme: () => void;
+  setTheme: (theme: Theme) => void;
+}
+
+const STORAGE_KEY = 'memviz-theme';
+
+function getSystemPreference(): Theme {
+  if (typeof window === 'undefined') return 'dark';
+  return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+}
+
+function getInitialTheme(): Theme {
+  if (typeof window === 'undefined') return 'dark';
+
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === 'dark' || stored === 'light') {
+    return stored;
+  }
+
+  return getSystemPreference();
+}
+
+function applyTheme(theme: Theme): void {
+  document.documentElement.dataset.theme = theme;
+}
+
+export function useTheme(): UseThemeReturn {
+  const [theme, setThemeState] = useState<Theme>(getInitialTheme);
+
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    localStorage.setItem(STORAGE_KEY, newTheme);
+  };
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+  };
+
+  return {
+    theme,
+    toggleTheme,
+    setTheme,
+  };
+}