The professional-grade, strict productivity ecosystem built for relentless learners.

FlowTrack Pro is not just a timer; it is a full-scale study ecosystem. Built to solve the problems of digital distraction, it combines high-precision engineering with gamified psychology. It is designed for students, developers, and researchers who need a tool that is as serious about their time as they are.

FlowTrack and its "Pro" iterations are built on three core pillars of modern software design:

• Glassmorphism: Subtle translucency and blurred background elements create a sense of depth without distraction.
• Dynamic Theming: Six curated professional themes (Ocean, Forest, Sunset, Galaxy, Neon, Cyber) to match your mood and focus level.
• Framer Motion Integration: Every transition is mathematically smoothed to ensure the UI feels "alive" and premium.

Most trackers fail because they rely on simple browser timers. FlowTrack Pro uses a Delta-Sync Logic:

• It tracks the exact millisecond you started.
• It calculates elapsed time against the system hardware clock.
• It is resilient to browser crashes, tab sleeps, and OS-level battery saving.

In an era of data harvesting, FlowTrack Pro is a fortress.

• No Cloud Required: 100% of your data stays in your browser's IndexedDB.
• Zero Tracking: No telemetry, no ads, no external cookies.
• Local Ownership: You own your database. Export it, back it up, or clear it whenever you want.

The heart of the application.

• System-Level Accuracy: Derived from Date.now() timestamps, not JS intervals.
• Auto-Pause Awareness: Detects visibility changes and pauses instantly when the tab is hidden to prevent "cheating".
• Resilient Recovery: Automatically picks up exactly where it left off after a refresh or crash.

Study over any app.

• Always-on-Top: Using the Document PiP API, it floats above VS Code, PDF Readers, and YouTube.
• Mini-Controller: Control music, skip tracks, and monitor progress without leaving your study app.
• Real-Time Heartbeat: Keeps the browser process active even when minimized.
• Interaction passthrough: Mouse movements over the mini-timer reset the idle countdown.

Turning focus into progress.

• XP Calculation: Fixed rate of 1 XP/Minute, ensuring fair progress tracking.
• Leveling Curve: A custom logarithmic formula (Math.floor(Math.sqrt(totalXP / 10))) that makes early levels fast and late levels prestigious.
• The "Rank" System: Progress through titles:
  • 🌱 Novice Seeker (Level 1-5)
  • 📖 Focused Scholar (Level 6-15)
  • 🧠 Master Learner (Level 16-30)
  • 👑 Flow Sovereign (Level 31+)
• Streak Heatmap: A 90-day GitHub-style contribution map to visualize your consistency.

• Granular Filtering: Filter sessions by subject, completion status, or date ranges.
• Visual Trends: Multi-axis Recharts displaying Daily, Weekly, Monthly, and Yearly performance.
• Subject Mastery: Pie charts and bar graphs showing which subjects you are dominating.
• Planned vs. Performance: Automatic calculation of "Goal Attachment" (did you study as much as you planned?).

• Focus LO-FI: Built-in streaming focus music.
• Curated Environmental Audio:
  • 🌧️ Heavy Rain: For deep, isolated focus.
  • ☕ Paris Cafe: For background hum and creative work.
  • 🌲 Ancient Forest: For calm, anxiety-free study.
  • 💨 White Noise: For pure concentration.
• Layered Controls: Independent volume sliders for music and ambient sounds.

FlowTrack-Pro/
├── .gemini/                # Configuration for advanced AI assistance
├── public/                 # Static Assets
│   ├── manifest.json       # PWA transformation settings
│   ├── sw.js               # Service Worker core logic (Caching & Offline)
│   └── icons/              # Multi-resolution branding assets
├── src/                    # The Engine Room
│   ├── components/         # Modular UI Components
│   │   ├── charts/         # Analytics layer (Recharts implementation)
│   │   │   ├── ActivityHeatmap.tsx
│   │   │   └── SubjectChart.tsx
│   │   ├── common/         # Foundation components
│   │   │   ├── Button.tsx
│   │   │   ├── Panel.tsx   # The "Glass" container base
│   │   │   └── Modal.tsx
│   │   ├── layout/         # High-level architecture
│   │   │   ├── Navbar.tsx
│   │   │   └── TabNavigation.tsx
│   │   ├── session/        # Business logic for session management
│   │   │   └── SessionForm.tsx
│   │   └── timer/          # Core timer functionality
│   │       ├── FloatingTimer.tsx # PiP Implementation
│   │       ├── TimerDisplay.tsx
│   │       └── AmbiencePlayer.tsx
│   ├── hooks/              # Custom Logic Containers
│   │   └── useTimer.ts     # The "Brain" of the time tracking system
│   ├── lib/                # Third-party integrations
│   │   └── db.ts           # Dexie/IndexedDB configuration
│   ├── pages/              # View layer
│   │   ├── TimerPage.tsx
│   │   ├── AnalyticsPage.tsx
│   │   └── HistoryPage.tsx
│   ├── store/              # Global State Management
│   │   └── useAppStore.ts  # Master State (Zustand)
│   ├── types/              # TypeScript Contract layer
│   │   └── models.ts       # Global interfaces (StudySession, Subject, etc.)
│   └── utils/              # Pure utility functions
│       ├── time.ts         # Formatting & Math
│       └── xp.ts           # Leveling logic
├── artifacts/              # Development history & Roadmap
├── package.json            # Dependency manifest
├── vite.config.ts          # Build system configuration
└── README.md               # The Master Document

Instead of trusting setInterval (which is inconsistent in browsers), we use:

elapsed = isPaused ? savedElapsed : (Date.now() - startedAtMs)

This ensures that even if the browser stops the JS execution for 5 minutes to save battery, when it wakes up, the math remains 100% correct.

Using Dexie.js, we implement a "Transactional Sync":

• Every 1 second of active study, the activeSession is updated in the database.
• This creates a "Checkpointed Save" system.
• If the user's laptop dies, they only ever lose a maximum of 1 second of data.

• Service Worker: Cache-first strategy for static assets.
• Manifest: Allows the "Install App" button in Chrome/Edge, making it look and feel like a native Windows/Mac app.
• Offline Analytics: Since Recharts and calculation logic are local, graphs work perfectly even in airplane mode.

• Core: React 18
• Build System: Vite
• Type Safety: TypeScript 5+
• Database: IndexedDB via Dexie
• Styling: Tailwind CSS
• Motion: Framer Motion
• Date Math: date-fns
• Graphs: Recharts

If you want to run FlowTrack with local activity tracking (foreground window / tab usage tracking):

1. Simply double-click start_local.bat.
2. This batch script will automatically:
   • Verify Python is installed and create a .venv virtual environment if it doesn't exist.
   • Install required dependencies (pywin32, psutil).
   • Run the background activity tracker on http://localhost:5001.
   • Install Node package dependencies (npm install).
   • Start the Vite server and open FlowTrack in your browser.

1. Install Node.js dependencies:

   npm install

2. Start the Web app developer server:

   npm run dev

3. Start the Python activity tracker (optional):

   python activity_tracker.py

To use the AI Assistant fully offline and private with Ollama:

1. Install Ollama.
2. Configure CORS so the browser-based FlowTrack client is allowed to connect to Ollama:
   • Windows CMD:

     set OLLAMA_ORIGINS=*
     ollama serve

   • Windows PowerShell:

     $env:OLLAMA_ORIGINS="*"
     ollama serve

   • macOS/Linux:

     OLLAMA_ORIGINS="*" ollama serve

3. Open FlowTrack, navigate to AI Assistant > Settings (Gear Icon), select Ollama, click Auto-Detect Models, and save configuration.

• Backup Naming: Whenever you export your workspace data from the Settings page, FlowTrack generates the filename dynamically based on the current date, e.g., 15-06-2026.json.
• Cheat Prevention: Actual time for timed sessions is locked in the editor. Only manual session logs can have their studied time directly edited.
• Strict Inactivity auto-pause: If Strict Focus Mode is enabled and a session is running, the timer will automatically pause and trigger a system notification after 10 minutes of zero active mouse movement, touchpad interactions, keyboard inputs, or scroll/touch activity.
• Floating Timer: Click Open Floating Timer to launch a persistent window widget on top of all other windows (e.g. while studying offline PDFs or coding).

• FlowTrack Pro v2.2.0
• Engineered by Sudhir Singh for the Global Student Community.
• Privacy Policy: 100% Local. AI API keys are stored securely in your browser's IndexedDB and are never shared or uploaded.