feat: add timeline view and quality voting system

Timeline: GET /api/memories/timeline groups memories by day with
optional type/tags filters. Frontend page with vertical chronological
axis. Quality: POST /api/memories/:hash/rate for thumbs up/down
voting (+/-0.1 quality_score, clamped 0-1). QualityVoter component
integrated in MemoryDetail and MemoryList.
171 tests (111 server + 60 client), all 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 6 : Timeline et score de qualite
+
+### Sprint 6.1 - Vue timeline
+- **Backend** : `GET /api/memories/timeline` - groupement par jour via `substr(created_at_iso, 0, 10)`, filtres type/tags optionnels
+- **Frontend** : Page `/timeline` avec axe chronologique vertical, groupes par date, badges type, TagBadge, liens vers detail
+- **Hook** : useTimeline() avec React Query
+- **Navigation** : lien "Timeline" entre Dashboard et Memoires
+
+### Sprint 6.2 - Score de qualite
+- **Backend** : `POST /api/memories/:hash/rate` - rating +1/-1, modifie quality_score dans metadata JSON (+/-0.1, clamp 0-1, arrondi 10 decimales)
+- **Frontend** : QualityVoter (thumbs up/down, affichage score, animation flash couleur, mode compact)
+- **Integration** : remplace QualityIndicator dans MemoryDetail, nouvelle colonne qualite dans MemoryList
+- **Hook** : useRateMemory dans useMutations.ts
+
+### Resultats
+- 15 nouveaux tests backend (8 timeline + 9 rate, certains couvrent les 2) = 111 serveur
+- 13 nouveaux tests frontend (8 timeline + 5 quality voter) = 60 client
+- **171 tests total**, tous verts, lint propre
+- Equipe 2 agents paralleles (backend-dev + frontend-dev)
+
+---
+
 ## 2026-02-14 - Sprint 5.3 : Detection de doublons
 
 ### Backend

PLAN.md

@@ -36,12 +36,21 @@ avec une interface web moderne et une API backend. Interfacable avec Claude.
 - Backend : GET /api/memories/duplicates?threshold=0.85, Union-Find clustering, KNN vec0
 - Frontend : Page /duplicates, slider seuil (0.7-1.0), groupes avec apercu, actions Garder/Ignorer
 
+## Sprint 6 - Timeline et qualite
+
+### 6.1 Vue timeline - COMPLETE
+- Backend : GET /api/memories/timeline (groupement par jour, filtres type/tags)
+- Frontend : Page /timeline avec axe chronologique vertical, groupes par date, badges et liens
+
+### 6.2 Score de qualite - COMPLETE
+- Backend : POST /api/memories/:hash/rate (rating +1/-1, quality_score +/-0.1, clamp 0-1)
+- Frontend : QualityVoter (thumbs up/down, animation flash, mode compact), integre dans MemoryDetail et MemoryList
+
 ## Backlog - Fonctionnalites futures
 
 ### Exploration et comprehension
 - [ ] Projection 2D des embeddings (t-SNE/UMAP) - vue espace vectoriel complet
 - [ ] Clustering automatique - grouper par proximite semantique
-- [ ] Vue timeline - chronologie visuelle des memoires
 
 ### Navigation et UX
 - [ ] Raccourcis clavier (j/k navigation, / recherche, e editer)
@@ -51,7 +60,6 @@ avec une interface web moderne et une API backend. Interfacable avec Claude.
 ### Gestion et maintenance
 - [ ] Gestion globale des tags - renommer, fusionner, supprimer un tag partout
 - [ ] Memoires obsoletes - identifier et suggerer nettoyage (jamais accedees, anciennes)
-- [ ] Score de qualite - interface vote thumbs up/down, tri par qualite
 
 ### Synchronisation et integration
 - [ ] Live reload - surveiller la DB SQLite, mise a jour temps reel
@@ -71,7 +79,7 @@ avec une interface web moderne et une API backend. Interfacable avec Claude.
 - Embedding : all-MiniLM-L6-v2 (384 dims, cosine distance)
 - Injection de dependance : `createMemoriesRouter(db)` pour faciliter les tests
 - Frontend : React Query + React Router, hooks custom, theme sombre via CSS custom properties
-- Navigation : / (Dashboard), /memories (MemoryList), /memories/:hash (MemoryDetail), /duplicates (Duplicates), /graph (GraphView)
+- Navigation : / (Dashboard), /timeline (Timeline), /memories (MemoryList), /memories/:hash (MemoryDetail), /duplicates (Duplicates), /graph (GraphView)
 - Embedder : @huggingface/transformers (all-MiniLM-L6-v2), injection de dependance pour tests
 - Graphe : react-force-graph-2d pour la visualisation force-directed
 - Mode read/write : configurable via MEMORY_DB_READONLY env var
@@ -88,3 +96,4 @@ avec une interface web moderne et une API backend. Interfacable avec Claude.
 | 2026-02-14 | Sprint 5.1 filtres avances | FilterPanel, query params backend, persistence URL, 100 tests verts |
 | 2026-02-14 | Sprint 5.2 operations en masse | Bulk delete/tag/type, BulkActionBar, Dashboard homepage, 126 tests verts |
 | 2026-02-14 | Sprint 5.3 detection doublons | Endpoint Union-Find, page /duplicates, slider seuil, 140 tests verts |
+| 2026-02-14 | Sprint 6 timeline + qualite | Timeline chronologique, QualityVoter thumbs up/down, 171 tests verts |

client/src/App.tsx

@@ -5,6 +5,7 @@ import { MemoryDetail } from './pages/MemoryDetail';
 import { Dashboard } from './pages/Dashboard';
 import { GraphView } from './pages/GraphView';
 import { Duplicates } from './pages/Duplicates';
+import { Timeline } from './pages/Timeline';
 import { Logo } from './components/Logo';
 
 const queryClient = new QueryClient({
@@ -65,6 +66,9 @@ function App() {
               <NavLink to="/" end style={({ isActive }) => isActive ? activeStyle : navStyle}>
                 Dashboard
               </NavLink>
+              <NavLink to="/timeline" style={({ isActive }) => isActive ? activeStyle : navStyle}>
+                Timeline
+              </NavLink>
               <NavLink to="/memories" style={({ isActive }) => isActive ? activeStyle : navStyle}>
                 Memoires
               </NavLink>
@@ -84,6 +88,7 @@ function App() {
           <main>
             <Routes>
               <Route path="/" element={<Dashboard />} />
+              <Route path="/timeline" element={<Timeline />} />
               <Route path="/memories" element={<MemoryList />} />
               <Route path="/memories/:hash" element={<MemoryDetail />} />
               <Route path="/duplicates" element={<Duplicates />} />

client/src/components/QualityVoter.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { QualityIndicator } from './QualityIndicator';
+import { useRateMemory } from '../hooks/useMutations';
+
+interface QualityVoterProps {
+  hash: string;
+  score?: number | null;
+  compact?: boolean;
+}
+
+export function QualityVoter({ hash, score, compact = false }: QualityVoterProps) {
+  const rateMutation = useRateMemory(hash);
+  const [flashColor, setFlashColor] = useState<string | null>(null);
+
+  function handleVote(vote: 'up' | 'down') {
+    const color = vote === 'up' ? 'var(--success)' : 'var(--error)';
+    setFlashColor(color);
+    setTimeout(() => setFlashColor(null), 400);
+    rateMutation.mutate(vote);
+  }
+
+  const btnStyle: React.CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: compact ? '24px' : '28px',
+    height: compact ? '24px' : '28px',
+    fontSize: compact ? '12px' : '14px',
+    border: '1px solid var(--border-default)',
+    borderRadius: 'var(--radius-sm)',
+    backgroundColor: 'var(--bg-elevated)',
+    color: 'var(--text-secondary)',
+    cursor: 'pointer',
+    transition: 'all var(--transition-fast)',
+    padding: 0,
+  };
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: compact ? '4px' : '6px',
+        transition: 'background-color 0.3s ease',
+        backgroundColor: flashColor ?? 'transparent',
+        borderRadius: 'var(--radius-sm)',
+        padding: '2px 4px',
+      }}
+    >
+      <button
+        onClick={(e) => { e.preventDefault(); handleVote('up'); }}
+        disabled={rateMutation.isPending}
+        aria-label="Vote up"
+        style={btnStyle}
+      >
+        &#9650;
+      </button>
+      <QualityIndicator score={score} />
+      <button
+        onClick={(e) => { e.preventDefault(); handleVote('down'); }}
+        disabled={rateMutation.isPending}
+        aria-label="Vote down"
+        style={btnStyle}
+      >
+        &#9660;
+      </button>
+    </span>
+  );
+}

client/src/hooks/useMutations.ts

@@ -47,3 +47,25 @@ export function useDeleteMemory() {
     },
   });
 }
+
+async function rateMemory(hash: string, vote: 'up' | 'down'): Promise<{ quality_score: number }> {
+  const res = await fetch(`/api/memories/${hash}/rate`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ vote }),
+  });
+  if (!res.ok) throw new Error('Erreur lors du vote');
+  return res.json();
+}
+
+export function useRateMemory(hash: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (vote: 'up' | 'down') => rateMemory(hash, vote),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['memory', hash] });
+      queryClient.invalidateQueries({ queryKey: ['memories'] });
+      queryClient.invalidateQueries({ queryKey: ['timeline'] });
+    },
+  });
+}

client/src/hooks/useTimeline.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import type { TimelineResponse } from '../types';
+
+async function fetchTimeline(): Promise<TimelineResponse> {
+  const res = await fetch('/api/memories/timeline');
+  if (!res.ok) throw new Error('Erreur lors du chargement de la timeline');
+  return res.json();
+}
+
+export function useTimeline() {
+  return useQuery({
+    queryKey: ['timeline'],
+    queryFn: fetchTimeline,
+  });
+}

client/src/pages/MemoryDetail.tsx

@@ -3,7 +3,7 @@ import { useParams, Link, useNavigate } from 'react-router-dom';
 import { useMemory, useMemoryGraph } from '../hooks/useMemory';
 import { useUpdateMemory, useDeleteMemory } from '../hooks/useMutations';
 import { TagBadge } from '../components/TagBadge';
-import { QualityIndicator } from '../components/QualityIndicator';
+import { QualityVoter } from '../components/QualityVoter';
 
 const btnBase: React.CSSProperties = {
   padding: '6px 14px',
@@ -126,7 +126,7 @@ export function MemoryDetail() {
               </span>
             )
           )}
-          <QualityIndicator score={qualityScore} />
+          <QualityVoter hash={hash!} score={qualityScore} />
 
           <div style={{ marginLeft: 'auto', display: 'flex', gap: '8px' }}>
             {editing ? (

client/src/pages/MemoryList.tsx

@@ -9,6 +9,7 @@ import { FilterPanel } from '../components/FilterPanel';
 import { TagBadge } from '../components/TagBadge';
 import { Pagination } from '../components/Pagination';
 import { BulkActionBar } from '../components/BulkActionBar';
+import { QualityVoter } from '../components/QualityVoter';
 import type { Memory, MemoryFilters } from '../types';
 
 const PAGE_SIZE = 20;
@@ -228,6 +229,7 @@ export function MemoryList() {
                 <th style={{ padding: '12px 16px', textAlign: 'left', fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Contenu</th>
                 <th style={{ padding: '12px 16px', width: '90px', textAlign: 'left', fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Type</th>
                 <th style={{ padding: '12px 16px', textAlign: 'left', fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Tags</th>
+                <th style={{ padding: '12px 16px', width: '110px', textAlign: 'left', fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Qualite</th>
                 {showSimilarity && <th style={{ padding: '12px 16px', width: '80px', textAlign: 'left', fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Score</th>}
                 <th style={{ padding: '12px 16px', width: '140px', textAlign: 'left', fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Date</th>
               </tr>
@@ -281,6 +283,13 @@ export function MemoryList() {
                       ))}
                     </div>
                   </td>
+                  <td style={{ padding: '12px 16px' }}>
+                    <QualityVoter
+                      hash={m.content_hash}
+                      score={(m.metadata as Record<string, unknown> | null)?.quality_score as number | undefined}
+                      compact
+                    />
+                  </td>
                   {showSimilarity && (
                     <td style={{ padding: '12px 16px', fontSize: '13px', fontWeight: 600, color: 'var(--success)' }}>
                       {m.similarity != null ? `${(m.similarity * 100).toFixed(0)}%` : '--'}

client/src/pages/Timeline.tsx

@@ -0,0 +1,134 @@
+import { Link } from 'react-router-dom';
+import { useTimeline } from '../hooks/useTimeline';
+import { TagBadge } from '../components/TagBadge';
+
+export function Timeline() {
+  const { data, isLoading, isError } = useTimeline();
+
+  if (isLoading) {
+    return <p style={{ color: 'var(--text-muted)' }}>Chargement...</p>;
+  }
+
+  if (isError) {
+    return <p style={{ color: 'var(--error)' }}>Erreur lors du chargement de la timeline.</p>;
+  }
+
+  if (!data || data.groups.length === 0) {
+    return (
+      <div style={{ textAlign: 'center', padding: '40px 0', color: 'var(--text-muted)' }}>
+        <p>Aucune memoire dans la timeline.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '24px' }}>
+        <h2 style={{ fontSize: '18px', fontWeight: 700, margin: 0, color: 'var(--text-primary)' }}>
+          Timeline
+        </h2>
+        <span style={{ fontSize: '13px', color: 'var(--text-muted)' }}>
+          {data.total} memoire{data.total > 1 ? 's' : ''}
+        </span>
+      </div>
+
+      <div style={{ position: 'relative', paddingLeft: '24px' }}>
+        {/* Ligne verticale continue */}
+        <div style={{
+          position: 'absolute',
+          left: '7px',
+          top: '0',
+          bottom: '0',
+          width: '2px',
+          backgroundColor: 'var(--border-default)',
+        }} />
+
+        {data.groups.map((group) => (
+          <div key={group.date} style={{ marginBottom: '32px', position: 'relative' }}>
+            {/* Point sur la ligne */}
+            <div style={{
+              position: 'absolute',
+              left: '-21px',
+              top: '4px',
+              width: '12px',
+              height: '12px',
+              borderRadius: '50%',
+              backgroundColor: 'var(--accent-primary)',
+              border: '2px solid var(--bg-base)',
+            }} />
+
+            {/* Header date */}
+            <div style={{
+              fontSize: '14px',
+              fontWeight: 600,
+              color: 'var(--text-primary)',
+              marginBottom: '12px',
+            }}>
+              {group.date}
+              <span style={{
+                marginLeft: '8px',
+                fontSize: '12px',
+                fontWeight: 400,
+                color: 'var(--text-muted)',
+              }}>
+                ({group.count})
+              </span>
+            </div>
+
+            {/* Memoires du groupe */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              {group.memories.map((m) => (
+                <Link
+                  key={m.content_hash}
+                  to={`/memories/${m.content_hash}`}
+                  style={{
+                    display: 'block',
+                    textDecoration: 'none',
+                    padding: '12px 16px',
+                    backgroundColor: 'var(--bg-surface)',
+                    borderRadius: 'var(--radius-md)',
+                    border: '1px solid var(--border-subtle)',
+                    transition: 'all var(--transition-fast)',
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
+                    {m.memory_type && (
+                      <span style={{
+                        padding: '2px 8px',
+                        fontSize: '11px',
+                        fontWeight: 500,
+                        backgroundColor: 'var(--info-dim)',
+                        color: 'var(--info)',
+                        borderRadius: 'var(--radius-sm)',
+                      }}>
+                        {m.memory_type}
+                      </span>
+                    )}
+                    <span style={{ fontSize: '11px', color: 'var(--text-muted)', marginLeft: 'auto' }}>
+                      {new Date(m.created_at_iso).toLocaleTimeString('fr-CA', { hour: '2-digit', minute: '2-digit' })}
+                    </span>
+                  </div>
+                  <div style={{
+                    fontSize: '13px',
+                    color: 'var(--text-primary)',
+                    lineHeight: 1.5,
+                    marginBottom: m.tags.length > 0 ? '8px' : '0',
+                  }}>
+                    {m.content.length > 150 ? m.content.substring(0, 150) + '...' : m.content}
+                  </div>
+                  {m.tags.length > 0 && (
+                    <div>
+                      {m.tags.map((tag) => (
+                        <TagBadge key={tag} tag={tag} />
+                      ))}
+                    </div>
+                  )}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}