Minimalist Pomodoro + Time Tracker - With Report Generation

[ricolandia]

A monochromatic Pomodoro timer widget with per-note time tracking and report generation. All in ~130 lines, with zero external dependencies.

Features

• Pomodoro timer — 25min focus / 5min break
• Button in the left bar — discreet icon in the left bar that expands the control panel when clicked
• Per-note tracking — automatically logs how much time you spend on each note while the timer is running
• Report — generates a formatted note with links to each visited note and the time spent on each
  (The report is automatically saved to today's daily journal.)
• Monochromatic — uses the active theme's CSS variables, no custom colors, distraction-free
• Persistence — timer state persists across reloads
• Lightweight — a single 1s setInterval, negligible RAM usage

New features and updates in the comments !

Installation

1. Create a JS Frontend note in TriliumNext
2. Paste the code (link below)
3. Add the attribute (label): #widget
4. Reload (Ctrl+R)

Code

Details

/**
 * Pomodoro Timer + Time Tracker for TriliumNext
 * Minimalist, monochrome, floating button in left pane.
 *
 * How to use:
 * 1. Create a "JS Frontend" code note in Trilium
 * 2. Paste this entire file content into that note
 * 3. Add label: #widget
 * 4. Reload Trilium (Ctrl+R)
 *
 * A tiny timer icon will appear at the bottom-left of the note tree.
 * Click it to reveal the timer panel.
 */

const WORK_SECS = 25 * 60;
const BREAK_SECS = 5 * 60;

let timerInterval = null;
let running = false;
let seconds = WORK_SECS;
let isWorkSession = true;

const noteTimes = new Map();
let lastNoteId = null;
let lastNoteTitle = '';
let lastTick = 0;

function formatTime(s) {
    const m = Math.floor(s / 60);
    const sec = s % 60;
    return m + ':' + (sec < 10 ? '0' : '') + sec;
}

const CSS = `
#pomo-float {
    position: absolute;
    z-index: 10;
}
#pomo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0px solid var(--main-border-color);
    border-radius: 6px;
    background: var(--launcher-pane-background-color);
    color: var(--main-text-color);
    cursor: pointer;
    font-size: 25px;
    line-height: 1;
}
#pomo-btn:hover {
    background: var(--button-hover-background-color);
}
#pomo-panel {
    display: none;
    border: 1px solid var(--main-border-color);
    border-radius: 6px;
    background: var(--launcher-pane-background-color);
    padding: 10px;
    min-width: 110px;
}
#pomo-timer {
    font-size: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
    color: var(--main-text-color);
    font-weight: 600;
}
#pomo-status {
    text-align: center;
    font-size: 11px;
    margin-bottom: 6px;
    color: var(--muted-text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pomo-row {
    display: flex;
    gap: 4px;
    justify-content: center;
}
.pomo-row button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--main-border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--main-text-color);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.pomo-row button:hover {
    background: var(--button-hover-background-color);
}
#pomo-report {
    width: auto;
    padding: 0 10px;
    font-size: 11px;
}
`;

const TPL = `
<div id="pomo-float">
    <button id="pomo-btn" class="bx bx-timer" title="Pomodoro"></button>
    <div id="pomo-panel">
        <div id="pomo-status"></div>
        <div id="pomo-timer">${formatTime(WORK_SECS)}</div>
        <div class="pomo-row">
            <button id="pomo-toggle" class="bx bx-play" title="Iniciar"></button>
            <button id="pomo-stop"  class="bx bx-stop" title="Parar"></button>
            <button id="pomo-report" class="bx bx-file" title="Salvar relatório"></button>
        </div>
    </div>
</div>
`;

class PomodoroWidget extends api.NoteContextAwareWidget {

    get position() { return 1; }
    get parentWidget() { return 'left-pane'; }

    isEnabled() {
        return true;
    }

    doRender() {
        this.$widget = $(TPL);
        this.cssBlock(CSS);

        this.$btn     = this.$widget.find('#pomo-btn');
        this.$panel   = this.$widget.find('#pomo-panel');
        this.$timer   = this.$widget.find('#pomo-timer');
        this.$status  = this.$widget.find('#pomo-status');
        this.$toggle  = this.$widget.find('#pomo-toggle');
        this.$stop    = this.$widget.find('#pomo-stop');
        this.$report  = this.$widget.find('#pomo-report');

        this.$btn.on('click', () => {
            this.$panel.toggle();
        });

        this.$toggle.on('click', () => {
            if (!running) {
                this._start();
            } else {
                this._pause();
            }
        });

        this.$stop.on('click', () => {
            this._stop();
        });

        this.$report.on('click', () => {
            this._saveReport();
        });

        this._loadState();
        this._updateUI();

        this._autoposition();

        return this.$widget;
    }

    async refreshWithNote(note) {
        if (!running || !note) return;
        const now = Date.now();
        if (lastNoteId && lastNoteId !== note.noteId && lastTick > 0) {
            const elapsed = Math.round((now - lastTick) / 1000);
            const prev = noteTimes.get(lastNoteId) || { title: lastNoteTitle, secs: 0 };
            prev.secs += elapsed;
            noteTimes.set(lastNoteId, prev);
        }
        lastNoteId   = note.noteId;
        lastNoteTitle = note.title;
        lastTick     = now;
    }

    _start() {
        if (running) return;
        running = true;
        timerInterval = setInterval(() => this._tick(), 1000);

        if (this.note) {
            lastNoteId   = this.note.noteId;
            lastNoteTitle = this.note.title;
        }
        lastTick = Date.now();

        this._persist();
        this._updateUI();
    }

    _pause() {
        if (!running) return;
        running = false;
        clearInterval(timerInterval);
        timerInterval = null;

        this._flushNoteTime();

        this._persist();
        this._updateUI();
    }

    _stop() {
        if (timerInterval) {
            clearInterval(timerInterval);
            timerInterval = null;
        }
        running = false;

        this._flushNoteTime();

        seconds = isWorkSession ? WORK_SECS : BREAK_SECS;
        this._persist();
        this._updateUI();
    }

    _tick() {
        if (seconds <= 0) {
            this._finishSession();
            return;
        }
        seconds--;
        this.$timer.text(formatTime(seconds));
        localStorage.setItem('pomo-ticks', seconds.toString());
    }

    _finishSession() {
        clearInterval(timerInterval);
        timerInterval = null;
        running = false;

        this._flushNoteTime();

        if (isWorkSession) {
            isWorkSession = false;
            seconds = BREAK_SECS;
            this.$status.text('Pausa');
        } else {
            isWorkSession = true;
            seconds = WORK_SECS;
            this.$status.text('Foco');
        }

        this.$timer.text(formatTime(seconds));
        this._persist();
        this._updateUI();
    }

    _flushNoteTime() {
        if (!lastNoteId || lastTick === 0) return;
        const now = Date.now();
        const elapsed = Math.round((now - lastTick) / 1000);
        if (elapsed > 0) {
            const prev = noteTimes.get(lastNoteId) || { title: lastNoteTitle, secs: 0 };
            prev.secs += elapsed;
            noteTimes.set(lastNoteId, prev);
        }
        lastTick = 0;
    }

    _updateUI() {
        this.$timer.text(formatTime(seconds));

        if (running) {
            this.$toggle.removeClass('bx-play bx-right-arrow-alt').addClass('bx-pause');
            this.$toggle.attr('title', 'Pausar');
        } else {
            this.$toggle.removeClass('bx-pause').addClass('bx-play');
            this.$toggle.attr('title', 'Iniciar / Retomar');
        }

        if (!isWorkSession && !running && seconds === BREAK_SECS) {
            this.$status.text('...');
        } else if (isWorkSession) {
            this.$status.text('Foco');
        } else {
            this.$status.text('Pausa');
        }

        const hasData = noteTimes.size > 0 || (lastNoteId && lastTick > 0);
        this.$report.toggle(hasData);
    }

    _persist() {
        localStorage.setItem('pomo-seconds', seconds.toString());
        localStorage.setItem('pomo-isWork', isWorkSession ? '1' : '0');
    }

    _loadState() {
        const savedSecs = localStorage.getItem('pomo-seconds');
        if (savedSecs !== null) {
            seconds = parseInt(savedSecs, 10) || WORK_SECS;
        }
        const savedWork = localStorage.getItem('pomo-isWork');
        if (savedWork !== null) {
            isWorkSession = savedWork === '1';
        }
    }

    _autoposition() {
        const el = this.$widget[0];
        const pane = el.closest('#left-pane');
        if (!pane) {
            this.$widget.css({ bottom: '360px', left: '15px' });
            return;
        }

        const buttons = Array.from(pane.querySelectorAll('.tree-floating-button'));
        if (buttons.length === 0) {
            this.$widget.css({ bottom: '36px', left: '15px' });
            return;
        }

        const pr = pane.getBoundingClientRect();
        let topmost = buttons[0];
        let topmostY = topmost.getBoundingClientRect().top;
        for (const btn of buttons) {
            const r = btn.getBoundingClientRect();
            if (r.top < topmostY && r.bottom <= pr.bottom) {
                topmostY = r.top;
                topmost = btn;
            }
        }

        const gap = topmost.offsetHeight + 8;
        this.$widget.css({
            bottom: (pr.bottom - topmost.getBoundingClientRect().top + gap) + 'px',
            left:   (topmost.getBoundingClientRect().left - pr.left) + 'px'
        });
    }

    async _saveReport() {
        this._flushNoteTime();

        if (noteTimes.size === 0) return;

        const totalSecs = [...noteTimes.values()].reduce((s, v) => s + v.secs, 0);
        const now = new Date();
        const ts = now.toLocaleString('pt-BR');
        const dateStr = api.dayjs().format('YYYY-MM-DD');

        let rows = '';
        for (const [id, { title, secs }] of noteTimes) {
            rows += `| <a class="reference-link" href="#root/${id}">${title}</a> | ${formatTime(secs)} |\n`;
        }

        const html = `<h1>Relatório Pomodoro — ${ts}</h1>
<p><strong>Tempo total:</strong> ${formatTime(totalSecs)}</p>
<table>
<thead><tr><th>Nota</th><th>Tempo</th></tr></thead>
<tbody>
${rows}
<tr><td><strong>Total</strong></td><td><strong>${formatTime(totalSecs)}</strong></td></tr>
</tbody>
</table>`;

        const ctxNoteId = this.note ? this.note.noteId : 'root';

        try {
            await api.runOnBackend(function (content, title, date, ctxId) {
                const dayNote = api.getDayNote(date);
                const parentId = dayNote ? dayNote.noteId : ctxId;
                const ret = api.createTextNote(parentId, title, content);
                return ret.note.noteId;
            }, [html, `Pomodoro ${ts}`, dateStr, ctxNoteId]);

            api.showMessage('Relatório salvo.');
            noteTimes.clear();
            lastNoteId = null;
            lastNoteTitle = '';
            lastTick = 0;
            this._updateUI();
        } catch (e) {
            api.showError('Erro ao salvar relatório: ' + e.message);
        }
    }
}

module.exports = new PomodoroWidget();

Zip(Plugin)

Pomodoro mini.zip

Screenshots

[ricolandia]

🚀 Update: Seamless Workflow, Data Persistence, and New Reports in the Pomodoro Widget!

Hi everyone!

We’ve just released a major update for our Pomodoro widget. The main goal was to make the workflow more natural, prevent any data loss, and enrich the generated metrics.

Here is what changed in the new version:

• 🔄 Seamless Transitions: Previously, the timer stopped at the end of each session. Now, it automatically chains sessions (Focus → Break → Focus → Break) without stopping. You no longer need to break your concentration to start the next stage.
• 💾 Safe Persistence (No more lost data): Forgot to save and closed the app? No problem! The widget now saves your progress to localStorage whenever you pause, switch sessions, or close the application.
• ♻️ Smart Restoration: The timer no longer resets to zero when you reopen it if you have unsaved data. It automatically restores your pending data and displays a ringed button with a "Pending report" warning so you can pick up right where you left off.
• 📊 Auto-Reports on Stop: Clicking the "Stop" button now automatically triggers the report generation (the manual save button is still there if you prefer).
• ⏱️ Cycle Context in Reports: The report has been improved and now shows not just the total time spent, but also the cycle context: how many complete cycles were done and if they were chained in sequence.

📝 New Report Format Example

When you finish your sessions, the generated report will look something like this:

Pomodoro Report — 05/12/2026 14:30
Completed cycles: 3 (chained in sequence) — 25min focus + 5min break each
Total time: 1h 12min

Note	Time
Chapter 2 — Review	42m 15s
Project X — Notes	18m 30s
Reading — Article Y	11m 15s
Total	1h 12m 00s

• Zip( plugin):
  Pomodoro mini_v2.zip

[ricolandia]

Fixed two real bugs in the timer: time lost when minimizing and invalid lastTick reset

Hey everyone! I just pushed an update to the timer code that fixes two subtle but significant bugs. Here’s the diagnosis and what changed – feedback or review is welcome.

---

Bug 1 – Timer stops counting when the window is minimized

In Electron (and browser) apps, setInterval gets throttled or even completely suspended when the window loses focus or is minimized. The old code did seconds-- on every tick, so each missed tick meant 1 second lost from the session.
The standard fix is to stop relying on interval cadence and use wall-clock time instead: we save the target end time (Date.now() + seconds * 1000) and, on each tick, recalculate the remaining time based on the real Date.now(). That way, even if the window is in the background for 5 minutes, when it comes back the displayed time is correct and the session accumulates exactly the time that passed.

Bug 2 – Time not accounted for in the session after a pause

In _finishSession(), the code called _flushNoteTime(), which sets lastTick = 0. However, the running flag was still true, so the next cycle never calls _start() again – the if (!running) guard blocks it. The result: lastTick stayed zero and the following session (pause or next focus period) would accumulate no time at all, because the difference Date.now() - lastTick was huge and the logic discarded it.
The fix is simple: right after flushing and zeroing lastTick, if we’re still running, we reset lastTick = Date.now(). That way the next period starts accumulating from the correct moment.

---

What changed in the code (summary)

• Internal timer: now stores endTime = Date.now() + (seconds * 1000). The tick function calculates remaining = Math.max(0, Math.ceil((endTime - Date.now()) / 1000)) and updates the UI with that value. When it hits zero, it fires session end using the real Date.now() for elapsed time.
• _flushNoteTime(): after resetting lastTick = 0, added:

  if (this.running) {
      this.lastTick = Date.now();
  }

• Tweaked other methods that relied on direct seconds counting to use the endTime approach.

Both bugs were silent but affected any longer session or focus switch. With these fixes, the timer is now robust against setInterval suspension and keeps accurate accumulated time across pauses.

---

Zip( plugin):
Pomodoro mini_v3.zip