npm - coderadar - Versions diffs - 0.1.0 - Mend

coderadar 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/bin/coderadar.js +2 -0
package/dist/collector.d.ts +12 -0
package/dist/collector.d.ts.map +1 -0
package/dist/collector.js +253 -0
package/dist/collector.js.map +1 -0
package/dist/commands/config.d.ts +4 -0
package/dist/commands/config.d.ts.map +1 -0
package/dist/commands/config.js +64 -0
package/dist/commands/config.js.map +1 -0
package/dist/commands/generate.d.ts +8 -0
package/dist/commands/generate.d.ts.map +1 -0
package/dist/commands/generate.js +44 -0
package/dist/commands/generate.js.map +1 -0
package/dist/commands/init.d.ts +2 -0
package/dist/commands/init.d.ts.map +1 -0
package/dist/commands/init.js +57 -0
package/dist/commands/init.js.map +1 -0
package/dist/commands/sync.d.ts +8 -0
package/dist/commands/sync.d.ts.map +1 -0
package/dist/commands/sync.js +90 -0
package/dist/commands/sync.js.map +1 -0
package/dist/index.d.ts +2 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +67 -0
package/dist/index.js.map +1 -0
package/dist/output/html-generator.d.ts +11 -0
package/dist/output/html-generator.d.ts.map +1 -0
package/dist/output/html-generator.js +106 -0
package/dist/output/html-generator.js.map +1 -0
package/package.json +61 -0
package/templates/app.js +1294 -0
package/templates/styles.css +489 -0
package/templates/template.html +325 -0

package/templates/template.html ADDED Viewed

@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="theme-color" content="#8b5cf6" id="theme-color-meta">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="CodeRadar">
+<script>if(location.protocol!=='file:'){var l=document.createElement('link');l.rel='manifest';l.href='manifest.json';document.head.appendChild(l)}</script>
+<link rel="apple-touch-icon" href="icons/icon-192.png">
+<title>CodeRadar</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.min.js"></script>
+<style>
+%%STYLES%%
+</style>
+</head>
+<body>
+<div class="app">
+<header>
+  <div class="brand"><div class="brand-icon">G</div><h1>CodeRadar<span id="pc-name"></span></h1></div>
+  <div class="header-actions">
+    <button class="icon-btn" id="btn-tts" title="Ecouter le resume du jour (V)"><svg id="tts-icon-play" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg><svg id="tts-icon-pause" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg></button>
+    <button class="icon-btn" id="btn-theme" title="Theme (T)"><svg id="theme-icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg><svg id="theme-icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></button>
+    <button class="icon-btn" id="btn-report" title="Rapport Hebdo (W)">W</button>
+    <button class="icon-btn" id="btn-obsidian" title="Export Obsidian (O)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></button>
+    <button class="icon-btn" id="btn-export" title="Export JSON">E</button>
+    <button class="icon-btn" id="btn-import" title="Import">I</button>
+    <button class="icon-btn" id="btn-sync-mem" title="Synchroniser les resumes de sessions avec claude-mem (M)" style="width:auto;padding:0 .5rem;gap:.3rem"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.22-8.56"/><polyline points="21 3 21 9 15 9"/></svg><span style="font-size:.65rem" id="sync-label">Sync</span><span class="sync-badge" id="sync-badge" style="display:none">0</span></button>
+    <span class="sync-indicator" id="sync-time" title=""></span>
+    <button class="filter-btn" id="btn-regen" title="Regenerer le dashboard (execute generate.ps1)" style="font-size:.65rem;padding:.2rem .5rem">Regenerer</button>
+    <button class="icon-btn" id="btn-help" title="Aide (?)">?</button>
+  </div>
+</header>
+<div class="stats-bar" id="stats-bar">
+  <div class="stat"><span class="stat-val" id="stat-total">0</span><span class="stat-label">Projets</span></div>
+  <div class="stat-divider"></div>
+  <div class="stat"><span class="stat-val ok" id="stat-active">0</span><span class="stat-label">Actifs</span></div>
+  <div class="stat-divider"></div>
+  <div class="stat"><span class="stat-val warn" id="stat-undoc">0</span><span class="stat-label">Sans doc</span></div>
+  <div class="stat-divider"></div>
+  <div class="stat"><span class="stat-val err" id="stat-dirty">0</span><span class="stat-label">Uncommit</span></div>
+  <div class="stat-divider"></div>
+  <div class="stat"><span class="stat-val" id="stat-commits">0</span><span class="stat-label">Commits 7j</span></div>
+  <div class="stat-divider"></div>
+  <div class="stat"><span class="stat-val" id="stat-health">0</span><span class="stat-label">Sante</span></div>
+  <div class="stat-divider"></div>
+  <div class="stat"><span class="stat-val" id="stat-plugins">0</span><span class="stat-label">Plugins</span></div>
+  <div class="stat-divider"></div>
+  <div class="stat"><span class="stat-val" id="stat-cost">-</span><span class="stat-label">ROI</span></div>
+  <div class="stat-divider"></div>
+  <div class="stat"><span class="stat-val" id="stat-disk">-</span><span class="stat-label">Disque</span></div>
+  <div class="stat-divider"></div>
+  <div class="stat" style="align-items:flex-start"><span class="stat-label">Stacks</span><div class="stat-stacks" id="stat-stacks"></div></div>
+</div>
+<div class="persistent-bar">
+  <div class="search-box"><input type="search" id="search" placeholder="Rechercher dans les sessions (/)" autocomplete="off"><div class="search-results" id="search-results"></div></div>
+  <nav class="tab-bar" id="tab-bar">
+    <button class="tab-nav active" data-tab="dashboard" title="Alt+1">Dashboard</button>
+    <button class="tab-nav" data-tab="projets" title="Alt+2">Projets</button>
+    <button class="tab-nav" data-tab="couts" title="Alt+3">Couts</button>
+    <button class="tab-nav" data-tab="plugins" title="Alt+4">Plugins</button>
+    <button class="tab-nav" data-tab="outils" title="Alt+5">Outils</button>
+  </nav>
+  <button class="stats-toggle" id="stats-toggle" title="Afficher/masquer les stats">&#9660;</button>
+</div>
+<!-- Tab: Dashboard -->
+<div class="tab-panel active" id="panel-dashboard">
+<div id="last-session-card" class="last-session-card" style="display:none"><span class="ls-icon">R</span><span class="ls-text"><strong id="ls-name"></strong> <span id="ls-title"></span></span><span class="ls-date" id="ls-date"></span></div>
+<div class="insights-panel" id="insights-panel" style="display:none">
+  <div class="insight-card coach"><h4>Coach IA</h4><div id="coach-list"></div></div>
+  <div class="insight-card wip"><h4>A reprendre</h4><div id="wip-list"></div></div>
+  <div class="insight-card keypoints"><h4>Points cles recents</h4><div id="keypoints-list"></div></div>
+  <div class="insight-card tags"><h4>Tags frequents</h4><div class="tag-cloud" id="tag-cloud"></div></div>
+  <div class="insight-card patterns"><h4>Patterns</h4><div id="patterns-list"></div></div>
+  <div class="insight-card capture"><h4>Capture rapide</h4><div class="quick-capture"><input type="text" id="quick-input" placeholder="Noter une idee, un insight..."><button id="quick-save">Sauver</button></div><div id="quick-notes" style="margin-top:.5rem;font-size:.65rem;color:var(--dim)"></div></div>
+</div>
+<div class="timeline-section section collapsible" id="timeline-section" style="display:none">
+  <div class="section-head collapsible-head"><h2>Timeline (60 jours)</h2></div>
+  <div class="collapsible-body">
+    <div class="timeline-container">
+      <div class="timeline-header">
+        <div class="timeline-filters" id="timeline-filters"></div>
+        <div class="timeline-view-toggle">
+          <button class="timeline-view-btn" data-view="heatmap" title="Vue GitHub">&#9638;</button>
+          <button class="timeline-view-btn active" data-view="list" title="Vue liste">&#9776;</button>
+          <button class="timeline-view-btn" data-view="dots" title="Vue compacte">&#9679;</button>
+        </div>
+      </div>
+      <div class="timeline-heatmap-view" id="timeline-heatmap-view"></div>
+      <div class="timeline-list-view" id="timeline-list-view">
+        <div class="timeline-list" id="timeline-list"></div>
+      </div>
+      <div class="timeline-dots-view" id="timeline-dots-view">
+        <div class="timeline-scroll" id="timeline-scroll"></div>
+      </div>
+      <div class="timeline-legend" id="timeline-legend"></div>
+    </div>
+    <div class="timeline-mini-tip" id="timeline-mini-tip"></div>
+  </div>
+</div>
+<div class="charts-section section collapsible" id="charts-section" style="display:none">
+  <div class="section-head collapsible-head"><h2>Statistiques</h2></div>
+  <div class="collapsible-body">
+    <div class="charts-grid">
+      <div class="chart-card"><h4>Temps par projet <span style="font-size:.6rem;color:#888;font-weight:normal">(estime*)</span></h4><div class="chart-wrapper"><canvas id="chart-time"></canvas></div></div>
+      <div class="chart-card"><h4>Heures par semaine <span style="font-size:.6rem;color:#888;font-weight:normal">(estime*)</span></h4><div class="chart-wrapper"><canvas id="chart-hours"></canvas></div></div>
+      <div class="chart-card"><h4>Sessions par projet</h4><div class="chart-wrapper"><canvas id="chart-projects"></canvas></div></div>
+      <div class="chart-card"><h4>Repartition des tags</h4><div class="chart-wrapper"><canvas id="chart-tags"></canvas></div></div>
+    </div>
+    <p style="font-size:.6rem;color:#666;margin:.5rem 0 0;font-style:italic">* Estimation basee sur la duree entre creation et derniere activite de chaque session. Sessions &lt;8h : duree reelle. Sessions &gt;8h : 8h de travail actif par tranche de 24h (deduit sommeil/pauses).</p>
+  </div>
+</div>
+</div>
+<!-- Tab: Projets -->
+<div class="tab-panel" id="panel-projets">
+<div class="toolbar">
+  <div class="filter-group" id="filter-status">
+    <button class="filter-btn active" data-filter="all">Tous</button>
+    <button class="filter-btn" data-filter="active">Actifs</button>
+    <button class="filter-btn" data-filter="fav">Favoris</button>
+    <button class="filter-btn" data-filter="undoc">Sans doc</button>
+    <button class="filter-btn" data-filter="dirty">Uncommit</button>
+  </div>
+  <div class="filter-group" id="filter-claude">
+    <button class="filter-btn" data-claude="30">30j</button>
+    <button class="filter-btn" data-claude="365">1an</button>
+    <button class="filter-btn active" data-claude="all">Tous</button>
+  </div>
+  <div class="filter-group" id="filter-stack"></div>
+  <button class="btn-csv" id="btn-csv-projects" title="Exporter CSV">CSV</button>
+</div>
+<div class="section"><div class="section-head"><h2>Projets (1-9 copie)</h2></div><div class="projects" id="projects"></div></div>
+<div class="section collapsible" id="recent-sessions-section" style="display:none"><div class="section-head collapsible-head"><h2>Sessions recentes</h2><span class="session-count" id="session-count"></span></div><div class="collapsible-body"><div class="recent-sessions" id="recent-sessions"></div></div></div>
+</div>
+<!-- Tab: Couts -->
+<div class="tab-panel" id="panel-couts">
+<div class="section collapsible" id="cost-section" style="display:none">
+  <div class="section-head collapsible-head"><h2>Consommation API <span style="font-size:.65rem;color:var(--dim);font-weight:400">Forfait Max x20 : $200/mois</span></h2><select class="cost-currency-toggle" id="cost-currency-btn"><option value="USD">$ USD</option><option value="EUR">&#8364; EUR</option><option value="GBP">&#163; GBP</option><option value="CHF">Fr CHF</option><option value="JPY">&#165; JPY</option><option value="CAD">C$ CAD</option><option value="AUD">A$ AUD</option><option value="CNY">&#165; CNY</option><option value="INR">&#8377; INR</option><option value="BRL">R$ BRL</option><option value="MXN">Mx$ MXN</option><option value="PLN">z&#322; PLN</option><option value="SEK">kr SEK</option><option value="NOK">kr NOK</option><option value="DKK">kr DKK</option><option value="KRW">&#8361; KRW</option></select><button class="btn-csv" id="btn-csv-costs" title="Exporter CSV">CSV</button></div>
+  <div class="collapsible-body">
+    <div style="text-align:center;font-size:.75rem;color:var(--mut);margin-bottom:.75rem;padding:.5rem;background:var(--s1);border-radius:8px;border:1px solid var(--bd)" id="cost-roi-text"></div>
+    <div class="cost-period-bar" id="cost-period-bar"><button class="filter-btn" data-period="7">7j</button><button class="filter-btn active" data-period="30">30j</button><button class="filter-btn" data-period="90">90j</button><button class="filter-btn" data-period="0">Tout</button></div>
+    <div class="cost-stats">
+      <div class="cost-stat-card"><div class="cost-val ok" id="cost-plan">$200</div><div class="cost-label">Forfait/mois</div></div>
+      <div class="cost-stat-card"><div class="cost-val" id="cost-total">-</div><div class="cost-label">Valeur API (30j)</div></div>
+      <div class="cost-stat-card"><div class="cost-val" id="cost-roi">-</div><div class="cost-label">ROI (valeur/forfait)</div></div>
+      <div class="cost-stat-card"><div class="cost-val" id="cost-top-model">-</div><div class="cost-label">Modele Principal</div><div style="font-size:.75rem;color:var(--dim);margin-top:.3rem" id="cost-last-model"></div></div>
+    </div>
+    <div class="cost-stats" style="margin-top:0">
+      <div class="cost-stat-card"><div class="cost-val" id="cost-avg">-</div><div class="cost-label">Valeur API/Jour</div></div>
+      <div class="cost-stat-card"><div class="cost-val" id="cost-tokens">-</div><div class="cost-label">Tokens Total</div></div>
+      <div class="cost-stat-card"><div class="cost-val" id="cost-real-daily">-</div><div class="cost-label">Cout reel/Jour</div></div>
+      <div class="cost-stat-card"><div class="cost-val" id="cost-savings">-</div><div class="cost-label">Economie vs API</div></div>
+    </div>
+    <div class="cost-charts-grid">
+      <div class="cost-chart-card"><h4>Valeur API journaliere</h4><div class="cost-chart-wrapper"><canvas id="chart-cost-daily"></canvas></div></div>
+      <div class="cost-chart-card"><h4>Tokens par jour</h4><div class="cost-chart-wrapper"><canvas id="chart-cost-tokens"></canvas></div></div>
+      <div class="cost-chart-card"><h4>Valeur par modele</h4><div class="cost-chart-wrapper"><canvas id="chart-cost-models"></canvas></div></div>
+      <div class="cost-chart-card"><h4>Forfait vs Valeur API</h4><div class="cost-chart-wrapper"><canvas id="chart-cost-plan"></canvas></div></div>
+    </div>
+    <div class="cost-charts-grid">
+      <div class="cost-chart-card" style="grid-column:span 2"><h4>Consommation par heure (7 derniers jours)</h4><div class="cost-chart-wrapper" style="height:280px"><canvas id="chart-cost-hourly"></canvas></div></div>
+    </div>
+    <table class="cost-table"><thead><tr><th>Date</th><th>Valeur API</th><th>Tokens</th><th>Input</th><th>Output</th><th>Cache</th></tr></thead><tbody id="cost-table-body"></tbody></table>
+  </div>
+</div>
+<div class="section collapsible" id="disk-section" style="display:none">
+  <div class="section-head collapsible-head"><h2>Utilisation Disque</h2></div>
+  <div class="collapsible-body">
+    <div class="disk-gauge" id="disk-gauge"><div class="disk-gauge-fill" id="disk-gauge-fill"></div><div class="disk-gauge-text" id="disk-gauge-text"></div></div>
+    <div class="disk-stats">
+      <div class="disk-stat-card"><div class="disk-val" id="disk-free">-</div><div class="disk-label">Disque Libre</div></div>
+      <div class="disk-stat-card"><div class="disk-val" id="disk-claude-total">-</div><div class="disk-label">Claude Code Total</div></div>
+      <div class="disk-stat-card"><div class="disk-val" id="disk-plugins">-</div><div class="disk-label">Plugins MCP</div></div>
+      <div class="disk-stat-card"><div class="disk-val" id="disk-sessions">-</div><div class="disk-label">Sessions Projets</div></div>
+    </div>
+    <div class="disk-charts-grid">
+      <div class="disk-chart-card"><h4>Repartition Claude Code</h4><div class="disk-chart-wrapper"><canvas id="chart-disk-breakdown"></canvas></div></div>
+      <div class="disk-chart-card"><h4>Top 10 Sessions Claude</h4><div class="disk-chart-wrapper"><canvas id="chart-disk-sessions"></canvas></div></div>
+      <div class="disk-chart-card"><h4>Top 10 Projets Dev</h4><div class="disk-chart-wrapper"><canvas id="chart-disk-devprojects"></canvas></div></div>
+      <div class="disk-chart-card"><h4>Espace Disque C:</h4><div class="disk-chart-wrapper"><canvas id="chart-disk-gauge"></canvas></div></div>
+    </div>
+    <table class="disk-table"><thead><tr><th>Dossier</th><th>Taille</th><th>Fichiers</th><th>% Total</th><th>Chemin</th></tr></thead><tbody id="disk-table-body"></tbody></table>
+  </div>
+</div>
+</div>
+<!-- Tab: Plugins -->
+<div class="tab-panel" id="panel-plugins">
+<div class="section" id="plugins-section"><div class="section-head"><h2>Plugins <span style="font-size:.7rem;color:var(--dim);font-weight:400" id="plugins-header-count"></span></h2></div>
+<div class="plugin-toolbar"><input type="search" id="plugin-search" placeholder="Rechercher un plugin..." autocomplete="off"><div class="plugin-filter-group" id="plugin-type-filters"><button class="plugin-filter-btn active" data-pf="all">Tous</button><button class="plugin-filter-btn" data-pf="active">Actifs</button><button class="plugin-filter-btn" data-pf="mcp">MCP</button><button class="plugin-filter-btn" data-pf="workflow">Workflow</button><button class="plugin-filter-btn" data-pf="skill">Skill</button><button class="plugin-filter-btn" data-pf="command">Command</button><button class="plugin-filter-btn" data-pf="agent">Agent</button></div><div class="plugin-filter-group" id="plugin-marketplace-filters"></div></div>
+<div class="plugins-grid" id="plugins-grid"></div>
+</div>
+</div>
+<!-- Tab: Outils -->
+<div class="tab-panel" id="panel-outils">
+<div class="section collapsible"><div class="section-head collapsible-head"><h2>Reference</h2><div class="tabs" id="ref-tabs"><button class="tab active" data-tab="flags">Flags</button><button class="tab" data-tab="skills">Skills</button><button class="tab" data-tab="workflow">Workflow</button></div></div><div class="collapsible-body">
+<div id="ref-flags" class="ref-content active"><h3>Flags</h3><table><tr><td>--dangerously-skip-permissions</td><td>Mode autonome (toujours)</td></tr><tr><td>--resume</td><td>Reprendre session</td></tr><tr><td>-p "prompt"</td><td>Non-interactif</td></tr></table></div>
+<div id="ref-skills" class="ref-content"><h3>Skills</h3><table><tr><td>/commit</td><td>Commit intelligent</td></tr><tr><td>continue</td><td>Prochaine tache</td></tr><tr><td>/go [x]</td><td>Commande universelle</td></tr></table></div>
+<div id="ref-workflow" class="ref-content"><h3>Workflow</h3><table><tr><td>CLAUDE.md</td><td>Identite projet (obligatoire)</td></tr><tr><td>PROGRESS.md</td><td>Taches a faire</td></tr></table></div>
+</div></div>
+<div class="section collapsible"><div class="section-head collapsible-head"><h2>Prompts</h2><button class="add-btn" id="btn-add-prompt">+</button></div><div class="collapsible-body"><div class="prompts" id="prompts"></div></div></div>
+<div class="section collapsible"><div class="section-head collapsible-head"><h2>Liens</h2><button class="add-btn" id="btn-add-link">+</button></div><div class="collapsible-body"><div class="links" id="links"></div></div></div>
+<div class="section"><div class="section-head"><h2>Notes</h2></div><textarea id="notes" placeholder="Notes..."></textarea></div>
+</div>
+</div>
+<div class="toast-box" id="toasts"></div>
+<div class="modal-bg" id="modal-bg"><div class="modal" id="modal"></div></div>
+<button class="compare-fab" id="compare-fab" style="display:none">Comparer (<span id="compare-count">0</span>)</button>
+<input type="file" id="import-file" accept=".json" style="display:none">
+<input type="file" id="replay-file" accept=".jsonl" style="display:none">
+<!-- TTS Player Modal - Advanced -->
+<div class="tts-modal-bg" id="tts-modal-bg">
+  <div class="tts-modal tts-modal-advanced">
+    <div class="tts-header">
+      <div class="tts-title">
+        <svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
+        Podcast Dev
+      </div>
+      <button class="tts-close" id="tts-close">X</button>
+    </div>
+    <div class="tts-config">
+      <div class="tts-config-row">
+        <div class="tts-config-item">
+          <label>Periode</label>
+          <select id="tts-scope">
+            <option value="today">Aujourd'hui</option>
+            <option value="week">Cette semaine</option>
+            <option value="month">Ce mois</option>
+            <option value="all">Tout</option>
+          </select>
+        </div>
+        <div class="tts-config-item">
+          <label>Projet</label>
+          <select id="tts-project">
+            <option value="all">Tous les projets</option>
+          </select>
+        </div>
+      </div>
+      <div class="tts-detail-section">
+        <label>Niveau de detail</label>
+        <div class="tts-detail-slider-wrap">
+          <input type="range" id="tts-detail" min="1" max="5" value="3" class="tts-detail-slider">
+          <div class="tts-detail-labels">
+            <span data-level="1">Flash</span>
+            <span data-level="2">Rapide</span>
+            <span data-level="3">Standard</span>
+            <span data-level="4">Detaille</span>
+            <span data-level="5">Complet</span>
+          </div>
+        </div>
+        <div class="tts-detail-desc" id="tts-detail-desc">Resume equilibre avec stats et projets</div>
+      </div>
+      <button class="tts-generate-btn" id="tts-generate">Generer le podcast</button>
+    </div>
+    <div class="tts-body" id="tts-body-content" style="display:none">
+      <div class="tts-current" id="tts-current">Pret a lire...</div>
+      <div class="tts-progress-bar"><div class="tts-progress-fill" id="tts-progress" style="width:0"></div></div>
+      <div class="tts-controls">
+        <button class="tts-btn" id="tts-prev" title="Phrase precedente">&#171;</button>
+        <button class="tts-btn" id="tts-stop" title="Stop">&#9632;</button>
+        <button class="tts-btn play" id="tts-play" title="Lecture">&#9654;</button>
+        <button class="tts-btn" id="tts-next" title="Phrase suivante">&#187;</button>
+      </div>
+      <input type="range" class="tts-slider" id="tts-slider" min="0" max="100" value="0" title="Navigation">
+      <div class="tts-footer">
+        <div class="tts-counter" id="tts-counter">0 / 0</div>
+        <div class="tts-rate-control">
+          <label>Vitesse:</label>
+          <select class="tts-rate-select" id="tts-rate">
+            <option value="0.5">0.5x</option>
+            <option value="0.75">0.75x</option>
+            <option value="1" selected>1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <span class="tts-rate-display" id="tts-rate-display">1x</span>
+        </div>
+      </div>
+      <details class="tts-full-text">
+        <summary>Texte complet</summary>
+        <div id="tts-full-text"></div>
+      </details>
+    </div>
+  </div>
+</div>
+<div class="replay-modal-bg" id="replay-modal-bg">
+  <div class="replay-header">
+    <div class="replay-title" id="replay-title">Session Replay</div>
+    <div class="replay-meta" id="replay-meta"></div>
+    <button class="replay-close" id="replay-close">X</button>
+  </div>
+  <div class="replay-body" id="replay-body">
+    <div class="replay-empty">
+      <div class="replay-empty-icon">P</div>
+      <div class="replay-empty-text">Chargez un fichier .jsonl pour visualiser la session</div>
+      <button class="replay-load-btn" id="replay-load-btn">Charger fichier .jsonl</button>
+      <div class="replay-folder-info">
+        <span>Dossier:</span>
+        <code id="replay-folder-path">~/.claude/projects/[projet]/[sessionId].jsonl</code>
+      </div>
+    </div>
+  </div>
+  <div class="replay-controls" id="replay-controls" style="display:none">
+    <button class="replay-btn" id="replay-prev" title="Message precedent">&#171;</button>
+    <button class="replay-btn" id="replay-play" title="Lecture automatique">&#9654;</button>
+    <button class="replay-btn" id="replay-next" title="Message suivant">&#187;</button>
+    <input type="range" class="replay-slider" id="replay-slider" min="0" max="100" value="0">
+    <div class="replay-progress" id="replay-progress">0 / 0</div>
+    <select class="replay-speed" id="replay-speed">
+      <option value="2000">0.5x</option>
+      <option value="1000" selected>1x</option>
+      <option value="500">2x</option>
+      <option value="250">4x</option>
+    </select>
+  </div>
+</div>
+<script>
+%%SCRIPT%%
+</script>
+</body>
+</html>