Component Showcase

An Attention OS for your browser.

Every user-facing surface of Tabatha - the browser extension, the desktop companion, and the mobile app - rendered from each product's own design system: the halved corner-radius scale, the Pop-Art dark palette, emoji-native iconography, and JetBrains Mono timers. Five of these double as the Chrome Web Store screenshots, captured at an exact 1280×800.

🧭Context Over Chaos every tab has a purpose
🚪Intentional Browsing good friction, on purpose
⏱️Universal Time tracking built into the browser
🤖Agent-Ready Data better work, with surgical accuracy
Family Surfaces Library Overlays Focus & Time Data Org & Team Settings Primitives Companion Mobile

The family

3 products · one day, counted once

Tabatha is three programs that share one clock. They exist separately because attention does not respect process boundaries but operating systems do: an extension can see your tabs and nothing else, a desktop app can see your windows but not what is inside a tab, and neither is in your pocket at 8am. Splitting them is not an architecture preference, it is the only way to see a whole day. Splitting them is also the hard part - so the rule underneath all three is that one shift exists at a time, wherever you started it, and each program yields to whichever of them can actually see what you are doing right now.

🧩
Browser Extension Shipped
The core product, and the only one that knows why you opened something. It gates new tabs, binds every tab to a Context, and runs the Focus Engine the other two report into.
Chrome MV3 · 8 surfaces · 90 components · self-updating channel
8 surfaces · 90 components →
🖥️
Desktop Companion Built · v0.2.0
A Windows tray app that watches the rest of the desktop, so the hours you spend outside the browser stop reading as idle. It is also how the extension distributes and updates itself.
Tray · Desk Panel · window monitor · categorizer · local SQLite · WebSocket bridge · opt-in capture · updater · autostart
15 surfaces & subsystems →
📱
Mobile App In development
Android. Tracks where phone time goes, carries the same shift out of the building, and syncs to your own desktop over your own network before it ever reaches for the cloud.
Dashboard · Settings · persistent notification · native usage monitor · categorizer · hybrid LAN-first sync · Focus Hub and timeline planned
15 screens & services · not yet installable →
No product matches that filter.
Get the Desktop Companion No download yet Built and running at v0.2.0 on Windows, but never packaged, signed or published. The panel lists exactly what is blocking a release, and takes a request.

Extension surfaces

8 full-page frames · exact 1280×800 · click any card to open full size

A surface is a whole place in Tabatha you can be: the gate that interrupts a new tab, the sidebar that replaces the browser's own tab strip, the dashboard that replaces the new-tab page. They exist because an attention tool cannot live in one panel - the moment you need to declare intent is not the moment you need to review your week, and neither belongs in a popup. Each frame below is the real UI at the size it actually ships, not a mockup of it.

01
The Gatekeeper Store shot
"Why are you here?" - good friction before every undirected new tab. Continue, Side Quest, Sugar Box, or Park.
02
Sidebar Store shot
Active focus, elapsed time, priority-coded tab list.
03
New Tab Dashboard Store shot
Quick Access, working state, Return to Flow.
04
Sync & Account Store shot
Cloud Sync health chip and org, metadata only.
05
Backdating Store shot
Credited minutes, overlaps kept, checkpoint timeline.
06
Quick Switch
The 400×500 toolbar popup: search every tab by its Context, not just its title.
07
Work Shifts · Analytics
Daily hours, peak productivity, break patterns, time per focus. Every chart is hand-rolled CSS.
08
Settings · All 22 Sections
The full nav, the Appearance section, and the live-preview column with all 12 themes.
No surface matches that filter.

Extension component library

6 category pages · 90 component cards · state variants throughout

The surfaces above are assembled from these ninety components, grouped by the job they do rather than by where they happen to render. Most are shown in several states, because the states are where the product's opinions live: a focus that has drifted, a stint left open by a machine that went to sleep, a queue with nothing in it. Each card names the file it comes from, so what you read here can be checked against the source.

🪟
Overlays & Content Scripts
Everything Tabatha injects into pages it does not own: the always-on status bar, the intent gate, the block wall.
InBar (active · paused · no-intent · agent · nub) · Sticky note · Edit dropdown · Backburner prompt · Checkpoint card · Notes panel · Gatekeeper (strict · relaxed · inherited · agent) · BlockGate · Welcome Back · What's New
16 cards →
🎯
Focus & Time
The Focus Engine and the clock: declaring intent, tracking it, and correcting it after the fact.
FocusBar (active · paused · drifted · over-time · edit · checkpoint) · FocusInput (empty · pending) · FocusQueue · BackburnerDock · FocusHistory · Now Bar · CheckpointTimeline · FlipClock · Shift Controls · StagePicker · Priority picker
15 cards →
📈
Data & Analytics
Every chart in the product, hand-rolled in CSS. The extension ships no charting library at all.
Stat cards · Top Focuses · Time by Category · Context Distribution · ActivityHeatmap (365 days) · Daily Hours · Peak Hours · Break Patterns · Weekly comparison · Time per Focus · LogsPanel (chips · table · empty) · Range selector
15 cards →
🏛️
Org & Team
Multi-install and multi-person surfaces: who is working, on what, and which shifts were left open.
TeamActivityPanel · StatusChip (9 states) · Invite tokens · Orgs & Teams · InitiativesPanel tree · ProjectsClientsPanel · Live Stints · AbandonedStintsModal · OtherProfilesStrip · CompanionStatus · Schedule (3 modes) · Shortfalls & Requests
14 cards →
⚙️
Settings
All 22 shipped sections, the fuzzy search, the theme system, and the Cortex observation panel.
Nav (all 22) · Sync chip (5 states) · SettingsSearch (idle · results · empty) · Themes (12) · Swatches · Field rows & toggles · Funnel stages · URL Rules (3 tabs) · Domain Groups · Intent Changes · Developer · Retention · Cortex · Webhooks · About
16 cards →
🧱
Primitives & Panels
The shared building blocks every surface is assembled from, plus the global overlays.
GlassCard · PopButton (3 sizes) · ComboInput · TagPicker · StagePicker · VoiceInput · Tooltip · CommandPalette · KeyboardShortcuts (14) · LinkMergeModal · TasksPanel · Tab-list rows · PriorityPill · ChangelogView · UnifiedTimeline
14 cards →
No category matches that filter.