105 lines
11 KiB
HTML
105 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<title>Claude Sync Monitor</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
|
|
:root{--bg:#0a0e1a;--sf:#111827;--sf2:#1a2234;--bd:rgba(255,255,255,0.06);--t1:#e2e8f0;--t2:#94a3b8;--t3:#64748b;--accent:#6d5acd;--green:#22c55e;--amber:#f59e0b;--red:#ef4444;--blue:#3b82f6;--cyan:#06b6d4;--opus1:#6d5acd;--opus2:#3b82f6;--opus3:#06b6d4}
|
|
*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--t1);font-family:'DM Sans',sans-serif;min-height:100vh}
|
|
.header{padding:20px 30px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
|
|
.header h1{font-size:1.3rem;font-weight:700;display:flex;align-items:center;gap:10px}.header h1 .logo{width:32px;height:32px;background:linear-gradient(135deg,var(--opus1),var(--opus2));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff}
|
|
.header .meta{font-size:.75rem;color:var(--t3);font-family:'JetBrains Mono',monospace}
|
|
.btn{padding:6px 14px;border-radius:6px;border:1px solid var(--bd);background:var(--sf);color:var(--t2);font-size:.75rem;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s}.btn:hover{background:var(--sf2);color:var(--t1)}.btn-accent{background:var(--accent);color:#fff;border-color:transparent}.btn-accent:hover{opacity:.85}
|
|
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 30px}@media(max-width:900px){.grid{grid-template-columns:1fr}}
|
|
.account-card{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:20px;position:relative;overflow:hidden}
|
|
.account-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
|
|
.account-card.opus-1::before{background:var(--opus1)}.account-card.opus-2::before{background:var(--opus2)}.account-card.opus-3::before{background:var(--opus3)}
|
|
.ac-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:14px}.ac-name{font-weight:700;font-size:1rem}
|
|
.ac-badge{padding:2px 8px;border-radius:10px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
|
|
.ac-badge.active{background:rgba(34,197,94,0.12);color:var(--green)}.ac-badge.idle{background:rgba(245,158,11,0.12);color:var(--amber)}.ac-badge.offline{background:rgba(239,68,68,0.12);color:var(--red)}
|
|
.ac-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.ac-stat{background:var(--bg);padding:10px;border-radius:8px}
|
|
.ac-stat-value{font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700}.ac-stat-label{font-size:.65rem;color:var(--t3);margin-top:2px;text-transform:uppercase;letter-spacing:.3px}
|
|
.ac-last-sync{font-size:.7rem;color:var(--t3);font-family:'JetBrains Mono',monospace;margin-top:8px;padding-top:10px;border-top:1px solid var(--bd)}
|
|
.ac-transcript{font-size:.7rem;color:var(--t2);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.section{padding:0 30px 20px}.section-title{font-size:.85rem;font-weight:700;color:var(--t2);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
|
|
.totals{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:0 30px 20px}@media(max-width:900px){.totals{grid-template-columns:repeat(2,1fr)}}
|
|
.total-card{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:16px;text-align:center}
|
|
.total-val{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:700}.total-label{font-size:.7rem;color:var(--t3);margin-top:4px}
|
|
.total-card.purple .total-val{color:var(--opus1)}.total-card.blue .total-val{color:var(--blue)}.total-card.green .total-val{color:var(--green)}.total-card.amber .total-val{color:var(--amber)}.total-card.cyan .total-val{color:var(--cyan)}
|
|
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 30px 20px}@media(max-width:900px){.two-col{grid-template-columns:1fr}}
|
|
.panel{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:16px}.panel h3{font-size:.85rem;font-weight:700;margin-bottom:10px;color:var(--t2)}
|
|
.type-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--bd);font-size:.78rem}.type-row:last-child{border:none}
|
|
.src-bar{height:6px;border-radius:3px;margin-top:6px;display:flex;overflow:hidden;gap:1px}.src-bar div{height:100%;border-radius:2px}
|
|
table{width:100%;border-collapse:collapse;font-size:.78rem}th{text-align:left;padding:8px 12px;color:var(--t3);font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--bd)}
|
|
td{padding:7px 12px;border-bottom:1px solid var(--bd);color:var(--t2)}tr:hover td{background:rgba(255,255,255,0.02)}
|
|
.tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:.6rem;font-weight:600}
|
|
.tag.opus-1{background:rgba(109,90,205,0.15);color:var(--opus1)}.tag.opus-2{background:rgba(59,130,246,0.15);color:var(--opus2)}.tag.opus-3{background:rgba(6,182,212,0.15);color:var(--opus3)}
|
|
.tag.transcript{background:rgba(34,197,94,0.12);color:var(--green)}.tag.output{background:rgba(245,158,11,0.12);color:var(--amber)}.tag.desktop{background:rgba(59,130,246,0.12);color:var(--blue)}
|
|
#loading{text-align:center;padding:60px;color:var(--t3)}.pulse{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1><div class="logo">C</div> Claude Sync Monitor</h1>
|
|
<div class="meta" id="last-update"></div>
|
|
<div><button class="btn btn-accent" onclick="loadData()">Rafraichir</button></div>
|
|
</div>
|
|
<div id="loading" class="pulse">Chargement...</div>
|
|
<div id="content" style="display:none">
|
|
<div class="totals" id="totals"></div>
|
|
<div class="grid" id="accounts"></div>
|
|
<div class="two-col">
|
|
<div class="panel"><h3>Sources de Documents</h3><div id="sources-panel"></div></div>
|
|
<div class="panel"><h3>Types de Fichiers</h3><div id="types-panel"></div></div>
|
|
</div>
|
|
<div class="section">
|
|
<div class="section-title">Derniers Documents Claude</div>
|
|
<table><thead><tr><th>Fichier</th><th>Type</th><th>Compte</th><th>Source</th><th>Taille</th><th>Synced</th></tr></thead><tbody id="recent-table"></tbody></table>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const API='/products/wevialife-api.php';
|
|
const TI={'txt':'📄','md':'📝','pdf':'📕','docx':'📘','xlsx':'📊','pptx':'📙','csv':'📋','json':'⚙️','log':'🗒️'};
|
|
const SC={'desktop_sync':'#3b82f6','claude_transcript':'#22c55e','claude_output':'#f59e0b','system':'#64748b','upload':'#06b6d4'};
|
|
const SL={'desktop_sync':'Razer Blade','claude_transcript':'Transcripts','claude_output':'Outputs Claude','system':'Systeme','upload':'Upload'};
|
|
function fmt(b){if(b>1048576)return(b/1048576).toFixed(1)+' MB';if(b>1024)return(b/1024).toFixed(0)+' KB';return b+' B'}
|
|
async function loadData(){
|
|
try{
|
|
const d=await fetch(API+'?action=claude_sync').then(r=>r.json());
|
|
document.getElementById('loading').style.display='none';
|
|
document.getElementById('content').style.display='block';
|
|
document.getElementById('last-update').textContent=new Date().toLocaleTimeString('fr-FR');
|
|
const accs=d.accounts||[],allSrc=d.all_sources||[],bySrc=d.by_source||[];
|
|
const tAll=allSrc.reduce((s,x)=>s+(+x.cnt),0),sAll=allSrc.reduce((s,x)=>s+(+x.sz),0);
|
|
document.getElementById('totals').innerHTML=`
|
|
<div class="total-card purple"><div class="total-val">${accs.length}</div><div class="total-label">Comptes Claude</div></div>
|
|
<div class="total-card green"><div class="total-val">${accs.filter(a=>a.last_sync).length}</div><div class="total-label">Actifs</div></div>
|
|
<div class="total-card blue"><div class="total-val">${d.total_docs||0}</div><div class="total-label">Claude Docs</div></div>
|
|
<div class="total-card cyan"><div class="total-val">${tAll}</div><div class="total-label">Total Tous Docs</div></div>
|
|
<div class="total-card amber"><div class="total-val">${fmt(sAll)}</div><div class="total-label">Volume Total</div></div>`;
|
|
document.getElementById('accounts').innerHTML=accs.map(a=>{
|
|
const bg=a.last_sync?'active':'offline';
|
|
return`<div class="account-card ${a.account_id}"><div class="ac-header"><div class="ac-name">${a.account_name||a.account_id}</div><div class="ac-badge ${bg}">${bg}</div></div>
|
|
<div class="ac-stats"><div class="ac-stat"><div class="ac-stat-value">${a.total_transcripts||0}</div><div class="ac-stat-label">Documents</div></div><div class="ac-stat"><div class="ac-stat-value">${fmt(a.total_size_bytes||0)}</div><div class="ac-stat-label">Volume</div></div></div>
|
|
<div class="ac-last-sync">Sync: ${a.last_sync?new Date(a.last_sync).toLocaleString('fr-FR'):'Jamais'}</div>
|
|
<div class="ac-transcript">${a.last_transcript||'—'}</div></div>`}).join('');
|
|
document.getElementById('sources-panel').innerHTML=allSrc.map(s=>`<div class="type-row"><span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${SC[s.source]||'#666'};margin-right:6px"></span>${SL[s.source]||s.source}</span><span style="font-family:'JetBrains Mono',monospace;font-size:.75rem">${s.cnt} · ${fmt(+s.sz)}</span></div>`).join('')+
|
|
`<div class="src-bar">${allSrc.map(s=>`<div style="width:${Math.max(2,(+s.cnt/tAll*100))}%;background:${SC[s.source]||'#666'}"></div>`).join('')}</div>`;
|
|
const tm={};bySrc.forEach(b=>{tm[b.filetype]=(tm[b.filetype]||0)+(+b.cnt)});
|
|
document.getElementById('types-panel').innerHTML=Object.entries(tm).sort((a,b)=>b[1]-a[1]).map(([t,c])=>`<div class="type-row"><span>${TI[t]||'📄'} .${t}</span><span style="font-family:'JetBrains Mono',monospace;font-size:.75rem">${c}</span></div>`).join('');
|
|
const stag=s=>s==='claude_output'?'output':s==='claude_transcript'?'transcript':'desktop';
|
|
document.getElementById('recent-table').innerHTML=(d.recent||[]).map(r=>`<tr>
|
|
<td style="font-family:'JetBrains Mono',monospace;font-size:.68rem;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${r.filename}">${r.filename}</td>
|
|
<td>${TI[r.filetype]||'📄'} .${r.filetype||'?'}</td>
|
|
<td><span class="tag ${r.claude_account||''}">${r.claude_account||'—'}</span></td>
|
|
<td><span class="tag ${stag(r.source)}">${SL[r.source]||r.source}</span></td>
|
|
<td style="font-family:'JetBrains Mono',monospace;font-size:.75rem">${fmt(r.filesize||0)}</td>
|
|
<td style="font-size:.7rem;color:var(--t3)">${r.indexed_at?new Date(r.indexed_at).toLocaleString('fr-FR'):'—'}</td></tr>`).join('');
|
|
}catch(e){document.getElementById('loading').innerHTML='Erreur: '+e.message}
|
|
}
|
|
loadData();setInterval(loadData,60000);
|
|
</script>
|
|
</body>
|
|
</html>
|