Component Showcase

Tabby Sidecar Shipped · Web · v0.7.2

Your attention does not stop at the laptop lid. Tabby Sidecar is the queue and the clock in your pocket, live today at every phone browser: sign in with your Tabatha account, see the same queue and active focus the extension sees, start an intent by typing or by voice, and get a Chaperone nudge if you wander off mid-focus. It reads and writes the same account data as the extension and the desktop companion through Cloud Sync, so a checkpoint logged on the phone shows up everywhere within a second. Nothing here is a native app yet - it is a React Native Web app, installable to your home screen as a PWA - but it is not a mockup either. Every card below is the real, shipped UI.

Open Tabby Sidecar

Nothing to install
Any phone browser Version 0.7.2 Expo · React Native Web Installable PWA

Open tabatha.pondocean.co/sidecar, sign in with Google or a magic link, and the same account the extension knows about is already there - queue, active focus, backburner, tasks. Add it to your home screen for the app feel: it installs as a PWA with its own icon and no browser chrome, updates itself in the background when a new version ships, and lands on a recovery screen instead of a blank one if it ever crashes.

📱 Open Tabby Sidecar tabatha.pondocean.co/sidecar · sign in with your Tabatha account.
Sign-inGoogle · Magic link
DataSame Cloud Sync account as the extension & companion

Component library

12 surfaces · rendered from the real shipped tokens

The phone inverts the extension's problem. In the browser, Tabatha has to ask what you are doing because a tab cannot tell it; on a phone, the thing that is missing is not information but presence - the app has to be there the moment you go quiet, and gone the moment you do not need it. So the built half leans on voice and proactive nudges rather than dashboards. The stages here render Sidecar's own tokens (accent #00E0D6) and its 6/10/16/999 radius scale - a different app from the extension and the desktop companion, and it does not pretend otherwise.

9:41▮▮▮ 82%
🎯
Sign in to Tabatha
🔐
Sign-in Live
Two paths in, both password-free: Google OAuth or a magic link emailed to the same address the extension knows. Either lands you in the same account - there is no separate Sidecar identity to create or lose.
sidecar/src/screens/LoginScreen.tsx
active
13:22▮▮▮ 61%
Now
Q1 Report
18:42
Backburner
2 parked · tap to resume
🎯Focus
📋Tasks
⚙️Settings
queue
13:25▮▮▮ 60%
Queue
📋 Learning React
⚡ Email triage
📥 Vacation planning
🎯Focus
📋Tasks
⚙️Settings
🎯
Active focus & Queue Live
The screen that makes this Tabatha and not a to-do list: the current focus with its live timer, checkpoint quick-add, and a Backburner - park what you are blocked on honestly instead of quietly dropping it, and get reminded to come back. The queue below it carries the same funnel stages the extension and the desktop share.
sidecar/src/screens/FocusScreen.tsx
🎙 Proactive check-in
"You've gone quiet on Q1 Report - how's it going?"
You: "extend it ten minutes" → applied
✓ Extended +10m ↺ Undo
🎙
Voice capture & proactive check-ins Live
Speak an intent instead of typing it - the phone keyboard is the friction that stops most logging from happening at all. Go quiet on an active focus and the Chaperone asks how it is going out loud; answer back and it applies what you said itself - extend, pause, done, or just a progress note - always with a visible confirmation and Undo. Opt-in, and it respects quiet hours.
sidecar/src/lib/chaperone.ts · voiceCheckin.ts · speech.ts · src/components/VoiceCheckIn.tsx
18:09▮▮▮ 43%
TasksAsana ✓
✏️ Q1 charts P1
🚧 blocked · Vendor sign-off 1h 20m
✅ Ship updater fix 44m
subtasks → sub-intents · tap to start
🎯Focus
📋Tasks
⚙️Settings
Settings · Asana
Paste your Asana personal access token
••••••••••••••••
📋
Tasks & Asana sync Live
A personal access token in Settings pulls your Asana tasks straight into the queue: subtasks, a blocked badge, and tracked time computed from the same checkpoint events the focus timer writes. Starting a task turns it into a focus, and its subtasks become sub-intents, with one tap.
sidecar/src/screens/TasksScreen.tsx · src/data/events.ts
focused
UP NEXT · Email triage
7h 12m left today
Q1 Report
18:42
Tabatha
13:22
phone-away accountability
UP NEXT · Email triage
7h 12m left today
Q1 Report
18:55
Tabatha
13:35
📺
Context View Live
Rotate the phone into landscape on a large screen (a TV, a monitor, a third display) and Sidecar switches to a view-only big-screen mode: brand bottom-left, a 1440-based day countdown top-right tied to the extension's day-reset-hour setting, the current focus and timer centered, and an up-next preview. Walk away from the phone mid-focus and the whole view fades red - a deliberate, silent accountability nudge with a bottom timeline of checkpoints, focus starts, and timer extensions.
sidecar/src/screens/ContextView.tsx · src/components/FocusTimeline.tsx
📵 Phone Focus Mode
18:42
paused - app backgrounded
📵
Phone Focus Mode Live
Background the app mid-focus and the timer pauses itself, using the browser's own Page Visibility signal rather than a permission the OS has to grant. Come back and it is exactly where you left it - the timer continues instead of restarting, matching the extension and the desktop companion's pause semantics.
sidecar/src/components/PhoneFocusMode.tsx
📲 Add to Home Screen
1Open in Safari / Chrome
2Share → Add to Home Screen
3Launches full-screen, own icon
auto-updates crash → recovery screen
📲
PWA install & self-healing Live
A real manifest, icons and Apple meta tags, so "Add to Home Screen" gives Sidecar its own launch icon and no browser chrome - no App Store review in the loop. Installed, it updates itself in the background when a new version ships, and a crash lands on an explicit recovery screen instead of a blank white one.
sidecar/src/app/+html.tsx · public/manifest.webmanifest · src/lib/install.ts · src/components/CrashGuard.tsx
Tabathanow
Timer drift · Q1 Report is 6m over
Tap to extend, pause, or mark done
🔔
Web Push Live
Real push notifications from a web app, no store required: timer drift, a checkpoint gone stale, and the timer states the desktop and extension already surface, delivered even when Sidecar is not open.
sidecar/src/lib/push.ts · src/lib/pushConfig.ts
💬 Send feedback
Screenshot attached automatically
💬
In-app feedback Live
A bug or an idea, filed from wherever you noticed it, without leaving the app or finding a separate form. The same recovery guard that catches a crash can route straight into this.
sidecar/src/lib/feedback.ts · src/components/CrashGuard.tsx
21:04▮▮▮ 38%
Type or tap the mic…
📝Notes
🎯Full view
📝
Notes · Simple capture Live
A minimal mode built for the moment a full Focus screen is too much friction: it reads as a notes app, but every line typed or spoken still lands as a checkpoint against your day. A "Full view" toggle steps back up to the regular Focus screen without losing anything typed here.
sidecar/src/screens/SimpleScreen.tsx
Watch pairing Live
Settings → "Pair a watch" mints a 6-digit, single-use code, valid five minutes - entered once on Tabby Watch to link it to your account. No password ever reaches the wrist; the watch exchanges the code for its own session token through a dedicated pairing function.
sidecar/src/components/PairWatchCard.tsx
☁️ Cloud Sync
Realtime · same account as the extension, the desktop companion, and Tabby Watch
● connected
☁️
Cloud Sync Live
Focus items and profile status stream over realtime channels, so a checkpoint logged on the phone, an intent started on the watch, or a pause hit in the browser shows up on every other surface within a second - one account, one day, counted once, regardless of which screen you are holding.
sidecar/src/lib/supabase.ts · migration 033 (realtime)