src/ts/pages/timeline.ts · gabriel/musehub

<text transform="rotate(-90, 18, ${(COMMIT_LANE_Y0 + COMMIT_LANE_Y1) / 2})" x="18" y="${(COMMIT_LANE_Y0 + COMMIT_LANE_Y1) / 2 + 3}" ${lblStyle}>COMMITS</text>

249

<text transform="rotate(-90, 18, ${(SESSION_LINE_Y0 + SESSION_LINE_Y1) / 2})" x="18" y="${(SESSION_LINE_Y0 + SESSION_LINE_Y1) / 2 + 3}" ${lblStyle}>EVENTS</text>`;

250

251

// --- Date axis with gridlines ---

252

const labelCount = Math.min(8, vcs.length);

253

for (let i = 0; i < labelCount; i++) {

254

const idx = Math.round(i * (vcs.length - 1) / Math.max(1, labelCount - 1));

255

const c = vcs[idx];

256

const x = tsToX(new Date(c.timestamp).getTime(), tMin, tMax, svgW);

257

const lbl = fmtDate(c.timestamp);

258

axis += `

259

260

<text x="${x.toFixed(1)}" y="${SVG_H - 10}" text-anchor="middle" font-size="10" fill="#6e7681" font-family="system-ui,sans-serif">${escHtml(lbl)}</text>`;

261

}

262

263

// --- Gradient defs for emotion area fills ---

defs += `

</linearGradient>

</linearGradient>

</linearGradient>`;

// --- Emotion layer ---

279

if (layers.emotion && tlData.emotion) {

280

const visEmo = tlData.emotion.filter(e => visIds.has(e.commitId));

281

if (visEmo.length >= 2) {

282

const buildPts = (field: 'valence' | 'energy' | 'tension') =>

283

visEmo.map(e => ({

284

x: tsToX(new Date(e.timestamp).getTime(), tMin, tMax, svgW),

285

y: EMO_Y0 + EMO_YH * (1 - e[field]),

286

}));

287

288

// Horizontal gridlines at 25/50/75%

289

for (const pct of [0.25, 0.5, 0.75]) {

290

const gy = EMO_Y0 + EMO_YH * (1 - pct);

291

paths += `<line x1="${PAD_L}" y1="${gy.toFixed(1)}" x2="${(svgW - PAD_R).toFixed(1)}" y2="${gy.toFixed(1)}" stroke="#21262d" stroke-width="0.5" stroke-dasharray="2 4"/>`;

292

}

293

294

const layers3: Array<['valence' | 'energy' | 'tension', string, string]> = [

295

['valence', '#58a6ff', 'url(#tl-grad-val)'],

296

['energy', '#3fb950', 'url(#tl-grad-eng)'],

297

['tension', '#f78166', 'url(#tl-grad-ten)'],

298

];

299

for (const [field, stroke, fill] of layers3) {

300

const pts = buildPts(field);

301

const polyPts = pts.map(p => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');

302

paths += `<path d="${areaPath(pts, EMO_Y1)}" fill="${fill}"/>`;

303

paths += `<polyline points="${polyPts}" fill="none" stroke="${stroke}" stroke-width="1.5" stroke-linejoin="round" opacity="0.9"/>`;

}

}

}

// --- Commit rail + dots ---

309

if (layers.commits) {

310

// Timeline rail

311

if (vcs.length > 1) {

312

const x0 = tsToX(tMin, tMin, tMax, svgW);

313

const x1 = tsToX(tMax, tMin, tMax, svgW);

314

paths += `<line x1="${x0.toFixed(1)}" y1="${COMMIT_Y}" x2="${x1.toFixed(1)}" y2="${COMMIT_Y}" stroke="#30363d" stroke-width="2"/>`;

315

}

316

317

// Colour commits by emotion valence (blue→green gradient)

318

const emoByCommit = new Map<string, EmotionEvent>();

319

(tlData.emotion || []).forEach(e => emoByCommit.set(e.commitId, e));

320

321

vcs.forEach((c, i) => {

322

const x = tsToX(new Date(c.timestamp).getTime(), tMin, tMax, svgW);

323

const sha = c.commitId.substring(0, 8);

324

const msg = escHtml((c.message || '').substring(0, 60));

325

const emo = emoByCommit.get(c.commitId);

326

327

// Colour by valence: low=orange, mid=blue, high=green

328

let dotColour = '#58a6ff';

329

if (emo) {

330

const v = emo.valence;

331

if (v < 0.33) dotColour = '#f78166';

332

else if (v > 0.66) dotColour = '#3fb950';

333

else dotColour = '#58a6ff';

334

}

335

336

const tipHtml = `${sha} · ${escHtml(c.branch)}<br>${msg}<br>${escHtml(c.author)} · ${fmtDateTime(c.timestamp)}`;

337

const cid = c.commitId;

338

339

// Tick mark

340

paths += `<line x1="${x.toFixed(1)}" y1="${COMMIT_LANE_Y0}" x2="${x.toFixed(1)}" y2="${COMMIT_LANE_Y1}" stroke="#21262d" stroke-width="1"/>`;

341

342

events += `

343

<g class="tl-commit-dot" data-id="${cid}"

344

onclick="window.openAudioModal && window.openAudioModal('${cid}','${sha}')"

345

style="cursor:pointer"

346

onmouseenter="window.tlShowTip && window.tlShowTip(event,'${tipHtml.replace(/'/g, ''')}')"

347

onmouseleave="window.tlHideTip && window.tlHideTip()">

</g>`;

});

}

// --- Section markers ---

355

if (layers.sections && tlData.sections) {

356

const visSec = tlData.sections.filter(s => visIds.has(s.commitId));

357

visSec.forEach(s => {

358

const x = tsToX(new Date(s.timestamp).getTime(), tMin, tMax, svgW);

359

const lbl = escHtml(s.sectionName);

360

const clr = s.action === 'removed' ? '#f78166' : '#3fb950';

361

const sym = s.action === 'removed' ? '−' : '+';

362

events += `

363

<g onmouseenter="window.tlShowTip && window.tlShowTip(event,'${sym} ${lbl} section')"

364

onmouseleave="window.tlHideTip && window.tlHideTip()">

365

<rect x="${(x - 5).toFixed(1)}" y="${SECTION_Y - 10}" width="10" height="10"

366

fill="${clr}" rx="2" opacity="0.9"/>

367

<text x="${x.toFixed(1)}" y="${SECTION_Y + 14}" text-anchor="middle"

368

font-size="8" fill="${clr}" font-family="system-ui,sans-serif">${lbl}</text>

</g>`;

});

}

// --- Track markers ---

374

if (layers.tracks && tlData.tracks) {

375

const visTrk = tlData.tracks.filter(t => visIds.has(t.commitId));

376

visTrk.forEach((t, i) => {

377

const x = tsToX(new Date(t.timestamp).getTime(), tMin, tMax, svgW);

378

const lbl = escHtml(t.trackName);

379

const clr = t.action === 'removed' ? '#e3b341' : '#a371f7';

380

const sym = t.action === 'removed' ? '−' : '+';

381

const dy = (i % 2) * 14;

382

events += `

383

<g onmouseenter="window.tlShowTip && window.tlShowTip(event,'${sym} ${lbl} track')"

384

onmouseleave="window.tlHideTip && window.tlHideTip()">

</g>`;

});

}

// --- Session overlays ---

392

if (layers.sessions && sessions.length > 0) {

393

const visSess = filterByWindow(sessions, 'startedAt', tMin, tMax);

394

visSess.forEach(s => {

395

const x = tsToX(new Date(s.startedAt).getTime(), tMin, tMax, svgW);

396

const intent = escHtml((s.intent || 'session').substring(0, 50));

397

const pList = (s.participants || []).map(p => escHtml(p)).join(', ') || 'no participants';

398

const tipHtml = `Session: ${intent}<br>${pList}<br>${fmtDateTime(s.startedAt)}`;

399

events += `

400

<g onmouseenter="window.tlShowTip && window.tlShowTip(event,'${tipHtml.replace(/'/g, ''')}')"

401

onmouseleave="window.tlHideTip && window.tlHideTip()">

402

<line x1="${x.toFixed(1)}" y1="${SESSION_LINE_Y0}" x2="${x.toFixed(1)}" y2="${SESSION_LINE_Y1}"

403

stroke="#2dd4bf" stroke-width="1.5" stroke-dasharray="5 3" opacity="0.65"/>

</g>`;

});

}

// --- Proposal merge markers ---

410

if (layers.proposals && mergedProposals.length > 0) {

411

const visProposals = filterByWindow(mergedProposals, 'createdAt', tMin, tMax);

412

visProposals.forEach(proposal => {

413

const mergeTs = proposal.mergedAt

414

? new Date(proposal.mergedAt).getTime()

415

: new Date(proposal.createdAt).getTime();

416

const x = tsToX(mergeTs, tMin, tMax, svgW);

417

const title = escHtml((proposal.title || 'Proposal').substring(0, 50));

418

const ts = proposal.mergedAt ? proposal.mergedAt : proposal.createdAt;

419

const ty = PROPOSAL_Y;

420

events += `

421

<g onmouseenter="window.tlShowTip && window.tlShowTip(event,'Proposal merge: ${title}<br>${fmtDateTime(ts)}')"

422

onmouseleave="window.tlHideTip && window.tlHideTip()">

423

<line x1="${x.toFixed(1)}" y1="${SESSION_LINE_Y0 + 14}" x2="${x.toFixed(1)}" y2="${ty}"

424

stroke="#a371f7" stroke-width="1.5" opacity="0.6"/>

425

<polygon points="${x},${ty + 9} ${x - 6},${ty - 1} ${x + 6},${ty - 1}"

426

fill="#a371f7" opacity="0.92"/>

</g>`;

});

}

// --- Release markers ---

432

if (layers.releases && releases.length > 0) {

433

const visRel = filterByWindow(releases, 'createdAt', tMin, tMax);

434

visRel.forEach(rel => {

435

const x = tsToX(new Date(rel.createdAt).getTime(), tMin, tMax, svgW);

436

const tag = escHtml((rel.tag || '').substring(0, 16));

437

const ry = RELEASE_Y;

438

events += `

439

<g onmouseenter="window.tlShowTip && window.tlShowTip(event,'Release: ${tag}<br>${fmtDateTime(rel.createdAt)}')"

440

onmouseleave="window.tlHideTip && window.tlHideTip()">

441

<polygon points="${x},${ry - 8} ${x + 6},${ry} ${x},${ry + 8} ${x - 6},${ry}"

442

fill="#e3b341" stroke="#0d1117" stroke-width="1" opacity="0.95"/>

443

<text x="${x.toFixed(1)}" y="${ry + 20}" text-anchor="middle"

444

font-size="8" fill="#e3b341" font-family="system-ui,sans-serif">${tag}</text>

</g>`;

});

}

// --- Compose SVG ---

450

container.innerHTML = `

451

452

xmlns="http://www.w3.org/2000/svg"

453

style="display:block;background:#0d1117">

${lanes}

${axis}

${paths}

${events}

</svg>`;

// Sync scrubber thumb

462

const thumb = document.getElementById('scrubber-thumb');

463

if (thumb) (thumb as HTMLElement).style.left = (scrubPct * 100) + '%';

464

465

// Update stats

466

const countEl = document.getElementById('tl-visible-count');

467

if (countEl) countEl.textContent = `${vcs.length} commit${vcs.length !== 1 ? 's' : ''}`;

468

}

469

470

// ---------------------------------------------------------------------------

471

// Tooltip

472

// ---------------------------------------------------------------------------

473

function setupTooltip(): void {

474

let tip = document.getElementById('tl-tooltip');

475

if (!tip) {

476

tip = document.createElement('div');

477

tip.id = 'tl-tooltip';

478

tip.className = 'tl-tooltip';

479

document.body.appendChild(tip);

}

const el = tip;

window.tlShowTip = (evt: MouseEvent, html: string) => {

484

el.innerHTML = html;

485

el.style.display = 'block';

486

el.style.left = (evt.clientX + 14) + 'px';

487

el.style.top = (evt.clientY - 8) + 'px';

488

};

489

window.tlHideTip = () => { el.style.display = 'none'; };

490

}

491

492

// ---------------------------------------------------------------------------

493

// Audio modal helpers

494

// ---------------------------------------------------------------------------

495

496

/** Relative timestamp label (no DOM dependency). */

497

function relLabel(iso: string): string {

498

const s = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);

499

if (s < 60) return 'just now';

500

const m = Math.floor(s / 60);

501

if (m < 60) return `${m}m ago`;

502

const h = Math.floor(m / 60);

503

if (h < 24) return `${h}h ago`;

504

return `${Math.floor(h / 24)}d ago`;

505

}

506

507

/** Format seconds → "M:SS". */

508

function fmtTime(sec: number): string {

509

if (!isFinite(sec) || sec < 0) return '—';

510

const m = Math.floor(sec / 60);

511

const s = String(Math.floor(sec % 60)).padStart(2, '0');

return `${m}:${s}`;

}

interface MusicalBadge { cls: string; label: string; }

516

517

/** Extract musical badges from a commit message (mirrors server-side Python). */

518

function extractBadges(msg: string): MusicalBadge[] {

519

const badges: MusicalBadge[] = [];

520

const bpmM = /\b(\d{2,3})\s*(?:bpm|BPM)\b/.exec(msg);

521

if (bpmM) badges.push({ cls: 'am-bpm', label: `♩ ${bpmM[1]} BPM` });

522

const keyM = /\b([A-G][b#]?(?:m(?:aj(?:or)?)?|min(?:or)?|M)?)\b/.exec(msg);

523

if (keyM) badges.push({ cls: 'am-key', label: `🎵 ${keyM[1]}` });

524

const emoM = /emotion:([\w-]+)/i.exec(msg);

525

if (emoM) badges.push({ cls: '', label: `💜 ${emoM[1]}` });

526

527

const instrs = [...new Set([...msg.matchAll(instrRe)].map(m => m[1].toLowerCase()))].slice(0, 3);

528

if (instrs.length) badges.push({ cls: 'am-instr', label: instrs.join(' · ') });

return badges;

}

// ---------------------------------------------------------------------------

533

// Audio modal

534

// ---------------------------------------------------------------------------

535

function setupAudioModal(): void {

536

window.openAudioModal = (commitId: string, sha: string) => {

537

document.getElementById('audio-modal')?.remove();

538

539

// Look up commit metadata from already-fetched timeline data

540

const commit = tlData?.commits?.find(c => c.commitId === commitId);

541

const message = commit?.message ?? sha;

542

const author = commit?.author ?? '?';

543

const branch = commit?.branch ?? '';

544

const tsIso = commit?.timestamp ?? '';

545

const tsLabel = tsIso ? relLabel(tsIso) : '';

546

const initial = author[0]?.toUpperCase() ?? '?';

547

const badges = extractBadges(message);

548

const audioSrc = `/api/repos/${cfg.repoId}/commits/${commitId}/audio`;

549

const commitUrl = `${cfg.baseUrl}/commits/${commitId}`;

550

551

// Build badge HTML

552

const badgeHTML = badges.map(b =>

553

`<span class="am-badge ${escHtml(b.cls)}">${escHtml(b.label)}</span>`

554

).join('');

555

556

const modal = document.createElement('div');

557

modal.id = 'audio-modal';

558

modal.className = 'audio-modal';

559

modal.setAttribute('role', 'dialog');

560

modal.setAttribute('aria-modal', 'true');

561

modal.setAttribute('aria-label', `Audio preview — commit ${sha}`);

modal.innerHTML = `

<span class="am-header-title">Audio Preview</span>

569

<span class="am-sha">${escHtml(sha)}</span>

</div>

<div class="am-message">${escHtml(message)}</div>

575

576

577

<span class="am-avatar">${escHtml(initial)}</span>

578

<span class="am-author">${escHtml(author)}</span>

579

${branch ? `<span class="am-branch">⑂ ${escHtml(branch)}</span>` : ''}

580

${tsLabel ? `<span title="${escHtml(tsIso)}">${escHtml(tsLabel)}</span>` : ''}

581

</div>

582

583

${badgeHTML ? `<div class="am-badges">${badgeHTML}</div>` : ''}

</div>

<span class="am-time" id="am-time">Loading…</span>

</div>

</div>

</div>

<a href="${escHtml(commitUrl)}" class="btn btn-secondary btn-sm">View commit ↗</a>

598

<button class="btn btn-ghost btn-sm" id="am-close-btn-2">Close</button>

</div>

</div>

</audio>`;

// Wire close events

const close = () => modal.remove();

608

modal.addEventListener('click', e => { if (e.target === modal) close(); });

609

modal.querySelector('#am-close-btn')?.addEventListener('click', close);

610

modal.querySelector('#am-close-btn-2')?.addEventListener('click', close);

611

612

// ESC key

613

const onKey = (e: KeyboardEvent) => {

614

if (e.key === 'Escape') { close(); document.removeEventListener('keydown', onKey); }

615

};

616

document.addEventListener('keydown', onKey);

617

modal.addEventListener('remove', () => document.removeEventListener('keydown', onKey));

618

619

document.body.appendChild(modal);

620

621

// Wire custom audio player

622

const audio = modal.querySelector<HTMLAudioElement>('#am-audio')!;

623

const playBtn = modal.querySelector<HTMLButtonElement>('#am-play-btn')!;

624

const progWrap = modal.querySelector<HTMLElement>('#am-prog-wrap')!;

625

const progFill = modal.querySelector<HTMLElement>('#am-prog-fill')!;

626

const timeEl = modal.querySelector<HTMLElement>('#am-time')!;

627

628

audio.addEventListener('canplaythrough', () => {

629

playBtn.disabled = false;

630

timeEl.textContent = `0:00 / ${fmtTime(audio.duration)}`;

631

});

632

audio.addEventListener('error', () => {

633

playBtn.disabled = true;

634

timeEl.textContent = 'No audio';

635

modal.querySelector<HTMLElement>('#am-player')!.innerHTML =

636

`<div class="am-no-audio">🔇 No audio available for this commit.<br>

637

<a href="${escHtml(commitUrl)}" style="color:var(--color-accent)">View full commit →</a></div>`;

638

});

639

audio.addEventListener('timeupdate', () => {

640

const pct = audio.duration ? (audio.currentTime / audio.duration) * 100 : 0;

641

progFill.style.width = `${pct}%`;

642

timeEl.textContent = `${fmtTime(audio.currentTime)} / ${fmtTime(audio.duration)}`;

643

});

644

audio.addEventListener('ended', () => { playBtn.textContent = '▶'; });

645

646

playBtn.addEventListener('click', () => {

647

if (audio.paused) {

648

audio.play().catch(() => { timeEl.textContent = 'Playback error'; });

649

playBtn.textContent = '⏸';

650

} else {

651

audio.pause();

652

playBtn.textContent = '▶';

}

});

// Click progress bar to seek

657

progWrap.addEventListener('click', (e: MouseEvent) => {

658

if (!audio.duration) return;

659

const rect = progWrap.getBoundingClientRect();

660

audio.currentTime = ((e.clientX - rect.left) / rect.width) * audio.duration;

});

audio.load();

};

}

// ---------------------------------------------------------------------------

668

// Scrubber (functional — actually re-filters visible commits)

669

// ---------------------------------------------------------------------------

670

function setupScrubber(): void {

671

const bar = document.getElementById('scrubber-bar');

672

if (!bar) return;

673

let dragging = false;

674

675

function updateFromEvent(e: MouseEvent): void {

676

const rect = bar!.getBoundingClientRect();

677

const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));

678

scrubPct = pct;

679

const thumb = document.getElementById('scrubber-thumb');

680

if (thumb) (thumb as HTMLElement).style.left = (pct * 100) + '%';

681

// Snap zoom to reflect scrubber position (coarse time filter)

682

// pct=1 = now/newest, pct=0 = oldest

renderTimeline();

}

bar.addEventListener('mousedown', e => { dragging = true; updateFromEvent(e as MouseEvent); });

687

document.addEventListener('mousemove', e => { if (dragging) updateFromEvent(e as MouseEvent); });

688

document.addEventListener('mouseup', () => { dragging = false; });

689

}

690

691

// ---------------------------------------------------------------------------

692

// Layer + zoom controls — bound via addEventListener, no inline handlers

693

// ---------------------------------------------------------------------------

694

function setupLayerAndZoomControls(): void {

695

// Layer toggle checkboxes: <input data-layer="commits"> etc.

696

document.querySelectorAll<HTMLInputElement>('[data-layer]').forEach(cb => {

697

cb.addEventListener('change', () => {

698

(layers as Record<string, boolean>)[cb.dataset.layer!] = cb.checked;

renderTimeline();

});

});

// Zoom buttons: <button data-zoom="day"> etc.

704

document.querySelectorAll<HTMLElement>('[data-zoom]').forEach(btn => {

705

btn.addEventListener('click', () => {

706

const z = btn.dataset.zoom!;

707

zoom = z;

708

document.querySelectorAll<HTMLElement>('[data-zoom]').forEach(b => {

709

b.classList.toggle('active', b.dataset.zoom === z);

});

renderTimeline();

});

});

}

// Keep window globals as legacy shims so any cached HTML still works

717

window.toggleLayer = (name: string, checked: boolean): void => {

718

(layers as Record<string, boolean>)[name] = checked;

719

renderTimeline();

720

};

721

window.setZoom = (z: string): void => {

722

zoom = z;

723

document.querySelectorAll<HTMLElement>('[data-zoom]').forEach(b => {

724

b.classList.toggle('active', b.dataset.zoom === z);

});

renderTimeline();

};

// ---------------------------------------------------------------------------

730

// Data loading

731

// ---------------------------------------------------------------------------

732

async function loadOverlays(): Promise<void> {

733

const [sessData, prData, relData] = await Promise.allSettled([

734

apiFetch('/repos/' + cfg.repoId + '/sessions?limit=200'),

735

apiFetch('/repos/' + cfg.repoId + '/proposals?state=merged'),

736

apiFetch('/repos/' + cfg.repoId + '/releases'),

737

]);

738

739

if (sessData.status === 'fulfilled' && sessData.value) {

740

const v = sessData.value as { sessions?: SessionData[] };

741

sessions = v.sessions ?? [];

742

}

743

if (prData.status === 'fulfilled' && prData.value) {

744

const v = prData.value as { proposals?: ProposalData[] };

745

mergedProposals = v.proposals ?? [];

746

}

747

if (relData.status === 'fulfilled' && relData.value) {

748

const v = relData.value as { releases?: ReleaseData[] };

749

releases = v.releases ?? [];

}

}

// ---------------------------------------------------------------------------

754

// Entry point

755

// ---------------------------------------------------------------------------

756

export function initTimeline(data: Record<string, unknown> = {}): void {

757

cfg = {

758

repoId: String(data['repoId'] ?? ''),

759

baseUrl: String(data['baseUrl'] ?? ''),

760

totalCommits: Number(data['totalCommits'] ?? 0),

761

};

762

if (!cfg.repoId) return;

763

764

initRepoNav(cfg.repoId);

setupTooltip();

setupAudioModal();

setupScrubber();

setupLayerAndZoomControls();

(async () => {

try {

const [data] = await Promise.all([

773

apiFetch('/repos/' + cfg.repoId + '/timeline?limit=200') as Promise<TimelineData>,

loadOverlays(),

]);

tlData = data;

// Update total commit count if available

779

const totalEl = document.getElementById('tl-total-count');

780

if (totalEl && data.totalCommits) {

781

totalEl.textContent = String(data.totalCommits);

}

renderTimeline();

} catch (e) {

const err = e as Error;

787

if (err.message !== 'auth') {

788

const container = document.getElementById('timeline-svg-container');

789

if (container) {

790

container.innerHTML = `<div class="tl-loading"><div class="tl-loading-inner error">

791

✕ ${escHtml(err.message)}

</div></div>`;

}

}

}

})();

}

// Augment window type for onclick handlers and module communication

800

declare global {

801

interface Window {

802

tlShowTip: (evt: MouseEvent, html: string) => void;

803

tlHideTip: () => void;

804

openAudioModal: (commitId: string, sha: string) => void;

805

toggleLayer: (name: string, checked: boolean) => void;

806

setZoom: (z: string) => void;

807

}

808

}