Engineering
Why Your Time Tracker Should Show a Running Timer in the Browser Tab
A running timer in the browser tab sounds like a tiny UI flourish. It is not. For a freelancer who lives in twelve tabs, the tab title is the only surface that stays visible when the time tracker is not.
What we shipped on the web: when a timer is running, the document title shows the elapsed time and the task name. Hide the app, jump into a code review, come back twenty minutes later — the tab still tells you the clock is alive.
This is an engineering post about that choice: why we put billable state in document.title on an Ionic + Angular web app, how it stays honest with a single running timer, and why we did not treat the tab as a second timesheet.
The sidebar is honest. You still cover it up.
MinuteShark’s active timer sidebar already shows elapsed time, start time, and the task / project / client. That is the source of truth while you are looking at the app. Consultants are not looking at the app. They are in Figma, in a terminal, in a client doc, in a video call. The tracker becomes one favicon in a pile.
Employee-monitoring products solve “I can’t see the clock” by watching the screen. That is the opposite of what we build. We needed an ambient signal the user opted into — a clock they started on a task — that survives the moment the window is no longer in front.
On iOS, Live Activities can sit on the Lock Screen. On the web, the cheapest equivalent that does not require a permission prompt or a notification habit is the tab title. Browsers already paint it. Users already glance at it when they hunt for a tab.
What goes in the title (and what does not)
The document title on web can show running time plus the task name. That pairing is deliberate:
- Elapsed time answers “is this still going?” without opening the app.
- Task name answers “did I leave this on Homepage mockups or on Internal/admin?” — the mistake that ruins Friday.
We do not stuff the client, the project, the cost profile, and a motivational quote into the title. Tab chrome truncates. A title that tries to be a report becomes a blur. The sidebar still has the full stack. The tab has the interrupt: duration + leaf work.
The tab is not a second ledger. You cannot edit an entry from the title. You cannot start a second timer from it. You click back into the app, and if the start time is wrong you click the clock in the sidebar. Original duration stays on the entry. The title is a mirror, not a write path.
Why this is an Angular problem, not a CSS problem
MinuteShark’s web UI is Ionic + Angular. The same codebase is wrapped by Capacitor for iOS and Android. The tab title is a web-only ambient channel. Native surfaces already have other clocks: the in-app sidebar, local notifications, and on iOS, Live Activities. We did not try to fake a browser tab on a phone.
On web, the title has to update while a timer is running even if the user is not clicking around the dashboard. That means the running-timer state has to be a first-class piece of app state, not a leftover from whatever component happens to be on screen. If the title only updated when the sidebar component was mounted, minimizing the app into a background tab would freeze the numbers — which is the exact failure mode we were trying to prevent.
The other constraint is the one we refuse to weaken: one running timer. The title displays that timer. It does not invent a second one because you opened MinuteShark in two windows. Two titles that disagree would be worse than no title. Firebase Auth (Google, Apple, or email) plus the synced workspace keep the clock as one object. The tab is a projector for that object.
The update loop we actually wanted
Start a task from dashboard search, from a to-do widget, or from a project task list. The sidebar starts. The document title starts. Hide the tab. The seconds still advance. Stop the timer, or it is not running: the title returns to being a product name, not a ghost clock that looks live when it is not.
That last part matters as much as the first. A stale “12:04 Homepage mockups” after you already stopped is how people learn to ignore the tab. An ambient clock that lies once gets closed forever.
Forgotten time is still a chat problem, not a title problem
The tab helps the case where the timer is running and you got buried. It does not help the case where you never started it. That path is still History (manual entry) or MinuteShark AI: say “I forgot to log 30 minutes on yesterday’s standup task,” review the proposal card, confirm. Nothing is written until Confirm. The title does not silently create entries. We would rather you notice a live clock than discover a guessed one on an invoice.
If you want the confirmation story, it already has its own post. This one stays on the web chrome: the cheapest place to keep a consultant honest is the thing they already look at to find the app.
What we left out on purpose
We did not put billable-rounded time in the title. Rounding (off by default; rounds up; original duration stored) belongs on History, reports, and invoices, where you can see both numbers. A tab that shows 12 minutes when you worked 10 would feel like padding in the one place you cannot inspect the rule.
We did not flash the title to nag. Smart reminders already exist for average duration, time of day, or a regular interval. The tab is status, not a toast. Mixing those jobs is how you train people to mute everything.
And we did not try to make the title a project-management dashboard. If you need widgets — starred tasks, a private notes pane, a Pomodoro 25/5 that is a focus clock, not the billable clock — those live on the dashboard widgets surface. The tab has one job.
How to use it without turning it into a guilt meter
Glance when you context-switch. If the task name is wrong, stop and start the right leaf. If the start time is wrong, click the clock. If you meant to stop an hour ago, edit the entry in History — do not leave a four-hour phantom and “fix it in the invoice.” The title is there so the phantom is visible during the hour, not after.
If you are on a phone between sites, skip the tab entirely. Use the native app. Offline support is a mobile benefit; subscription changes stay on the web. Different surfaces, same workspace, still one timer.
The features list is the catalog. This post is the reason a line item you barely notice is there: consultants do not abandon time trackers because the reports are weak. They abandon them because the clock disappeared the moment real work started. The browser tab is how we keep the clock in the room without watching the room.