Component Showcase

Primitives & Panels

The building blocks under every Tabatha surface: buttons and glass cards, the autocomplete and tagging inputs that bind a focus to its hierarchy, and the full-panel overlays for commands, shortcuts, tasks, and timelines. Every string, colour, and radius here is lifted from the shipping source, including the places where the product hardcodes a value off the scale.

Component library

14 primitives and panels ยท rendered from live app tokens

The shared vocabulary. Every surface in Tabatha is assembled from these, which is why the product feels consistent without a component framework doing the enforcing - there is no design-system dependency here, just a small set of pieces used everywhere. GlassCard, PopButton and the pickers carry the Pop-Art palette and the halved 2/4/8 radius scale. The global overlays are also here: the command palette, the fourteen keyboard shortcuts, and the link/merge modal that resolves the duplicate contexts you inevitably create.

GlassCard
๐ŸŽฏ Q1 Report
Blurred translucent surface, used for every floating panel on the dashboard.
sm
md
lg
๐Ÿงฑ
GlassCard + PopButton
The two base primitives. GlassCard is a translucent blurred panel; PopButton is the Pop-Art call to action with a hard black border and an offset magenta drop shadow, in three sizes.
src/components/ui/GlassCard.jsx ยท src/components/ui/PopButton.jsx
closed
๐Ÿ‘ค
open with suggestions
๐Ÿ‘ค
Northwind
Northwind Retail
Nordic Labs
๏ผ‹ Create "Northwind"
create-only
๐Ÿ‘ค
๏ผ‹ Create "Northwind"
โŒจ๏ธ
ComboInput
A free-text field with an inline suggestion list: type to filter existing entities, arrow to highlight, or fall through to the italic create row when nothing matches. It is the input behind every Client, Project, and Task field.
src/components/ui/ComboInput.jsx
collapsed / empty
๐Ÿท Add tags
collapsed / populated
๐Ÿ’ผ โ€บ Northwind โ€บ Finance โ€บ Q1 charts
collapsed / personal
๐Ÿ  โ€บ Self โ€บ Vacation planning
expanded / business selected
๐Ÿท Tags & Associations
๐Ÿ‘ค Northwind
๐Ÿ“ Finance
โœ๏ธ Q1 charts
๐Ÿ’ก Selecting a task or project auto-fills related fields
expanded / personal selected
๐Ÿท Tags & Associations
๐Ÿ‘ค Self
โœ๏ธ Vacation planning
๐Ÿ  Personal work is attributed to Self. Project is a business-only field, so it is not rendered here.
๐Ÿท
TagPicker
Binds a focus to Realm โ€บ Client โ€บ Project โ€บ Task. Collapsed it is a dashed affordance that becomes a breadcrumb once filled; expanded it exposes the realm toggle and the ComboInputs, with autofill up the hierarchy. Switching to Personal auto-fills the client as Self (always offered as an option, whatever your client list holds) and drops Client and Project from the form unless they already carry a value. Task stays available in both realms.
src/components/ui/TagPicker.jsx
default
compact
๐ŸŽฏ
StagePicker
The FUNNEL_STAGES row on a focus. The active chip tints to its own stage colour at 20% alpha; the rest stay transparent and muted. A compact variant drops the labels for tight rows.
src/components/ui/StagePicker.jsx
idle sm / md
listening
transcript
finish the Q1 revenue model before lunch
error
Microphone access denied
disabled
๐ŸŽ™
VoiceInput
A round mic toggle that dictates into any field. Listening turns the button red and pulses a ring, streaming an interim transcript beside it; permission failures surface inline rather than as a modal.
src/components/ui/VoiceInput.jsx
top
Time spent in this context today
bottom
Park this tab and revisit it later
๐Ÿ’ฌ
Tooltip
A flat dark label placed above or below its trigger, capped at 280px so long hints wrap instead of stretching the row. No caret, no arrow, just offset and shadow.
src/components/ui/Tooltip.jsx
default
๐Ÿ” ESC
Actions
๐ŸŽฏ Set new focus
โ˜• Take a break
โฑ Clock in/out
๐Ÿ“‹ Create new task
๐Ÿข View projects
๐Ÿ›๏ธ View org hierarchy
โš™๏ธ Open settings
๐Ÿ–ฅ๏ธ Open activity editor
๐ŸŽจ Switch theme
Results
๐Ÿ”ต Q1 Reportfocus ยท active
โœ๏ธ Q1 chartstask
๐Ÿ“‘ Q1 Revenue Model - Sheetstab
โ†‘โ†“ NavigateโŽ SelectESC Close
empty
๐Ÿ”ESC
No results for "zzz"
โ†‘โ†“ NavigateโŽ SelectESC Close
โšก
CommandPalette
Ctrl+K opens one search field over nine fixed actions plus live focus, task, and tab results. The selected row is marked by an accent left rule and a faint accent wash, so the keyboard cursor stays readable at a glance.
src/components/ui/CommandPalette.jsx

โŒจ๏ธ Keyboard Shortcuts

Open Command PaletteCtrl+K
Show Keyboard ShortcutsCtrl+/
Set New FocusCtrl+Shift+F
Toggle BreakCtrl+Shift+B
Switch ThemeCtrl+Shift+T
Go to Intents tabCtrl+1
Go to Tasks tabCtrl+2
Go to Projects tabCtrl+3
Go to Org tabCtrl+4
Go to Logs tabCtrl+5
Go to Tabs tabCtrl+6
Go to Sessions tabCtrl+7
Go to Stashed tabCtrl+8
Close open modals/overlaysEscape
Press Ctrl+/ to toggle this overlay
โŒจ๏ธ
KeyboardShortcuts (ShortcutsHelp)
The full binding map, reachable from anywhere with Ctrl+/. Fourteen rows cover the palette, focus and break control, theme, all eight dashboard tabs, and Escape as the universal dismiss.
src/components/ui/KeyboardShortcuts.jsx
list
Q1 charts๐Ÿ”— 2๐ŸŽฏ โœ๏ธ ๐Ÿ”— ๐Ÿ—‘
Rewrite the revenue narrative๐ŸŽฏ โœ๏ธ ๐Ÿ”— ๐Ÿ—‘
Email triage๐ŸŽฏ โœ๏ธ ๐Ÿ”— ๐Ÿ—‘
Book vacation flights๐ŸŽฏ โœ๏ธ ๐Ÿ”— ๐Ÿ—‘
create form
๐Ÿ“
๐Ÿ‘ค
empty
๐Ÿ“‹No tasks yet. Create one to organize your intents.
๐Ÿ“‹
TasksPanel
Task CRUD with its own TASK_STAGES funnel, distinct from the focus funnel. Each row can start an intent, be edited inline, be linked to focuses (the count shows as a badge), or be deleted; completed rows dim and strike through.
src/home/TasksPanel.jsx
๐Ÿ’ผ
Q1 Revenue Model - Sheets
Q1 Report ยท 22m
22m
๐Ÿ’ฌ
#finance-team - Slack
Q1 Report ยท 6m
6m
๐ŸŽ“
useEffect cleanup - React docs
Learning React ยท paused
4m
๐Ÿ“ง
Inbox (3) - Gmail
Email triage ยท 2m
2m
๐Ÿ“š
๐Ÿ”’ Northwind brand guidelines - Docs
Q1 Report ยท locked to context
9m
๐ŸŽต
Deep focus mix - YouTube
Vacation Planning ยท paused
1m
๐Ÿ“‘
Tab-list rows
Each tracked tab: category glyph from CATEGORY_ICONS, title, its Context, and time-in-context. The left rule colors by priority; a ๐Ÿ”’ marks a tab locked to its context, and paused tabs mute their timer.
src/home/TabsPanel.jsx
P1
P1
P3
P3
P5
P5
P8
P8
unknown
Pโ€”
๐Ÿ”บ
PriorityPill
A 1-to-10 priority read as three bands: red for the top three, amber through six, green below. An unsynced item shows a muted Pโ€” rather than guessing a rank.
src/components/ui/PriorityPill.jsx
entry
v6.7.182026-07-16
Primitives & panels showcase
โœจ Added
  • Component showcase pages for every primitive and panel surface.
  • Compact variant on StagePicker for tight rows.
๐Ÿ”ง Changed
  • Tooltip max width capped at 280px so long hints wrap.
๐Ÿ› Fixed
  • ComboInput create row no longer hides behind the suggestion list.
empty
No changelog entries available.
section icons
โœจ Added
๐Ÿ”ง Changed
๐Ÿ› Fixed
๐Ÿ—‘๏ธ Removed
โš ๏ธ Deprecated
๐Ÿ”’ Security
๐Ÿงฌ Migration
๐Ÿ“œ
ChangelogView
Renders the shipped changelog in-product. Section icons are matched by a substring of the section label, so an entry only needs plain headings; inline code spans pick up JetBrains Mono on a surface chip.
src/components/ui/ChangelogView.jsx
๐Ÿ–ฅ๏ธ Context Activity โ€” Today 9:02 AM โ†’ 5:47 PM 47 switches
development communication design productivity email media entertainment browser system break unknown
๐Ÿ–ฅ๏ธ Desktop companion connected โ€” waiting for activity...
๐Ÿ–ฅ๏ธ
UnifiedTimeline
The desktop companion's OS-level activity for the day, laid out as one proportional bar. Categories carry fixed colors, breaks get a diagonal hatch, and green and red rules mark clock-in and clock-out.
src/home/UnifiedTimeline.jsx