FlowSense Devlog(The first and the last one before the ship, R.I.P to my 7 hrs(context at the end))

A week ago this project was just a random idea in my notes.

Now it’s a desktop app that quietly watches how I work, finds repetitive workflows, and helps me stop doing the same thing over and over again.

I built FlowSense because I realized I spent half my day opening the same apps in the same order.

Chrome
   ↓
VS Code
   ↓
Terminal
   ↓
Chrome

Every.

Single.

Day.

Instead of creating automations manually, I wanted something that simply noticed those patterns for me, as our workflows also vary overtime.

---

The stack

• Electron + React + TypeScript
• Tailwind CSS + shadcn/ui
• FastAPI
• SQLite
• Framer Motion
• Recharts
• Chrome Extension

Simple enough….cut to a quick realisation it wasn’t, also yeah I didn’t do it completely by myself it took some help from ai models to cope up with this much but most of it was done by me, again R.I.P to my school exam prep too.

---

What it does now

• Tracks desktop activity locally
• Detects repeated workflows
• Suggests workflow names using AI (optional)
• Supports Gemini
• Guides you through workflows with Flow Mode
• Tracks browser URLs and terminal sessions what apps you are using etc.
• Shows real productivity analytics

---

My favourite feature

Flow Mode.

Start a workflow and a small floating overlay follows you across every application.

Switch to the next app.

Step complete.

Move on.

It’s such a tiny feature, but somehow it makes repetitive work feel… satisfying.

---

There’s still plenty left to build.
Weekly reports
Conversation mode
A lot of polish

But for the first time, it actually feels like a product instead of a collection of experiments, that’s ready to ship.

A quick side note it was bad on my part that I thought I would upload a single devlog and then ship, I am lowkey very lazy about devlogs idk why, this was until I saw my whole hackatime time wasnt being logged in on further talking to @Carlson I got to know extra hours over a certain limit aren’t counted or partially counted to prevent any kind of cheating and to promote people giving more frequent devlogs so R.I.P to my extra 7 hours p.s voters pls give me more stars to compensate for those hourss plsssss. Also I will be shipping the project next, hope yall excited just as me, waiting to see all of yours reactions.

Devlog 3 — “ver 7”

Devlog 1 drew the canvas. Devlog 2 built the OS. This one was about cutting features, fixing bugs, and shipping something I’m proud to show.

What’s in ver 7

ÆTHER OS ver 7 is a cosmic WebOS built with HTML, CSS, and JavaScript. No framework, no build step, no runtime dependencies—just one HTML file, one CSS file, four JS files, and ~5,500 lines of code.

The apps

Ships with 9 built-in apps:

• Void Navigator — file explorer with folders, breadcrumbs, drag-and-drop, and wallpaper controls.
• Stellar Terminal — 18 commands including ls, cd, mkdir, mv, rm, neofetch, warp, and js.
• Prism Editor — line numbers, minimap, find/replace, themes, tabs, and Ctrl+S saving.
• Starlog — Markdown notes with search, live preview, and auto-save.
• Nebula Calc — scientific mode, DEG/RAD toggle, history, and expression rewriting.
• Pulse Monitor — live CPU, Memory, Network, Disk, and GPU charts with a process list.
• System Core — wallpapers, uploads, accent colors, dock settings, sounds, and reset.
• Cosmos Info — animated system specs and uptime.
• Shortcuts — keyboard shortcut reference.

Window system

Supports draggable titlebars, eight resize handles, edge and corner snapping, double-click maximize, triple-click zoom, minimize-to-dock animations, z-order updates, Alt+Tab switching, and a shared drag state that eliminates listener leaks.

Virtual filesystem

Everything is backed by one JSON tree stored in localStorage (aether:fs).

The Terminal, desktop, File Explorer, and editor all use the same data. Move or delete a file anywhere and every app immediately reflects the change.

Polish

Added custom scrollbars, purple text selection, Google Fonts with preconnect, focused window glow, boot typing effects, dock magnification, spring animations, notification toasts, and six synthesized Web Audio sounds.

What I cut

Earlier builds contained more apps. I removed everything that wasn’t solid enough to ship. Nine polished apps are better than shipping unfinished features.

Bugs fixed

Twelve major release blockers, including:

• Window manager listener leaks
• Frozen menu bar clock
• Broken triple-click zoom
• Volume slider not affecting sound
• Pulse Monitor interval leak
• Missing desktop.js
• Music player syntax error
• Maximized windows behind the menu bar
• Ctrl+W closing the browser
• Scientific calculator layout
• Calculator expression parsing
• Starlog auto-save race condition

The biggest fix was replacing per-window event listeners with one shared drag system, eliminating multiple unrelated bugs at once.

What I learned

1. Cutting is a feature. Shipping fewer polished apps beats shipping more unfinished ones.
2. One source of truth. The virtual filesystem is a single JSON tree shared by every app.
3. Event listeners accumulate. Install shared listeners once instead of per object.
4. Fix root causes. One fix in shared code is better than many patches.
5. Cleanup matters. Every timer or interval created must be cleaned up when a window closes.
6. UI should never lie. If a control exists, it should actually control something.

✦ breathe the void

---

P.S. Devlog was delayed. I forgot to post devlog 2 and just kept building, so Hackatime only shows 16 minutes on this one. The code didn’t write itself—I simply forgot to log the voyage. ;)

Devlog 2 — “Building the Void”

Devlog 1 laid the foundation. This week was about turning ÆTHER OS into something that actually feels like an operating system: a real window manager, virtual filesystem, built-in apps, polish, shipping, and a bug-fixing marathon.

What I built

1. Window manager

The window manager now supports draggable titlebars, eight resize handles, edge and corner snapping, double-click maximize, triple-click zoom, minimize animations to the dock, close animations, and automatic z-order updates.

One of the biggest bugs came from installing a new mousemove listener every drag. After enough windows were opened and closed, stale listeners accumulated, dragging became unreliable, and buttons stopped responding. The fix was a single shared drag state with listeners installed once.

2. Virtual filesystem + desktop

The filesystem is stored as a JSON tree in localStorage (aether:fs).

The Terminal supports ls, cd, cat, mkdir, touch, mv, cp, rm, rename, and more.

The desktop renders /home/explorer as an icon grid with drag-and-drop, context menus, and File Explorer integration with folders, breadcrumbs, and direct file editing.

3. Apps

Built eight core apps:

• Stellar Terminal — history, tab completion, neofetch, cowsay, warp, js, and more.
• Prism Editor — minimap, tabs, find/replace, themes, and Ctrl+S filesystem saving.
• Nebula Calc — scientific mode, DEG/RAD toggle, history, and expression rewriting.
• Starlog — Markdown notes with live preview and auto-save.
• Pulse Monitor — live CPU, Memory, Network, Disk, and GPU graphs.
• System Core — wallpapers, accent colors, dock settings, sounds, and reset.
• Cosmos Info — animated specs, uptime, and a hidden matrix-rain easter egg.
• Shortcuts — keyboard shortcut reference.

4. Polish

Added custom scrollbars, purple selection, Inter + JetBrains Mono fonts, focused window glow, randomized boot typing, dock magnification, spring animations, notification toasts, and six synthesized Web Audio UI sounds.

5. First shipping attempt

After deploying to Vercel, I spent thirty minutes using the OS like a real user and found another wave of bugs.

The clock froze after unlock, the volume slider wasn’t wired, Ctrl+W closed the browser, the GPU chart was missing, the scientific calculator layout broke, maximized windows hid behind the menu bar, file opening crashed because of a template literal typo, and the window manager listener leak caused multiple unrelated issues.

The biggest lesson: fix the root cause, not every symptom.

6. Analytics

Integrated @vercel/analytics and @vercel/speed-insights to monitor production traffic and performance.

Bugs fixed

Thirty-five bugs spotted, including window snapping, Alt+Tab, filesystem edge cases, calculator fixes, audio leaks, notification cleanup, dock magnification, font loading, window manager listener leaks, frozen clock, GPU monitoring, wallpaper caching, Finder title sync, maximized window layout, and

The biggest fix was removing duplicated event listeners from the window manager, solving several seemingly unrelated bugs at once.

✦ breathe the void

Devlog 1 — “Boot”

Day 1 of Hack Club Stardance. The cosmic medium takes its first breath.

I’ve been sketching this idea for weeks: a full-fledged WebOS that feels like diving into deep space. Today I finally wrote the first line of code.

The commit log will be my captain’s log. Stardance only ships if you document the voyage, so here goes.

What even is ÆTHER OS?

ÆTHER (pronounced “ay-ther”) is the Greek personification of the upper sky—the pure, glowing air above the mortal atmosphere. Later, physics borrowed the name for the theoretical medium that fills space and carries light.

ÆTHER OS is a desktop environment running entirely in a browser tab: a window manager, menu bar, dock, virtual filesystem, and 12 built-in apps. No backend, no framework, no build step—just HTML, CSS, and JavaScript.

Its design blends glassmorphism with cosmic depth: frosted panels over a parallax starfield with slowly morphing nebulae, using Void Black, Nebula Purple, and Cosmic Cyan.

What I built today

1. The stellar scaffold

The project consists of one index.html, one styles.css, and four JavaScript modules:

• core.js — boot, lock screen, menu bar, dock, notifications, sounds, shortcuts
• wm.js — window manager
• fs.js — virtual filesystem and desktop
• apps.js — all 12 apps

No npm, bundler, or framework. Just globals and the DOM.

2. The cosmic background

The desktop uses two animated layers: a <canvas> starfield rendered with requestAnimationFrame and a morphing nebula made from blurred radial gradients.

Stars belong to near and far layers (parallax factors 18 and 6). Mouse movement is smoothed with:

tmx += (mx - tmx) * 0.06;

Near stars receive a cyan halo and subtle twinkle, while the nebula morphs over ~24-second cycles using filter: blur(80px).

3. Boot sequence

The boot log is typed line-by-line using await sleep(...), alongside a progress bar and ASCII logo.

The system announces NEBULA KERNEL v1.0.0 before printing fake kernel logs like:

• Spawning process init (PID 1)
• Calibrating cosmic background radiation… 2.725 K.

4. Lock screen

A live clock, date, user avatar, decorative password field (any password works), and click-anywhere-to-unlock.

5. Menu bar

A macOS-style menu bar with the ÆTHER menu, active app name, Wi-Fi, battery, notifications, volume, and live clock. Context menus include working actions like New Window (Ctrl+N), Close (Ctrl+W), and Fullscreen (F11).

6. Sound engine

All UI sounds are synthesized with the Web Audio API through a single helper:

beep(freq, duration, type, vol, slide)

Current sounds include boot, open, close, click, notification, and error.

Bugs fixed

# Problem Fix 1 Boot text blurred because it lived inside the nebula with filter: blur(80px). Moved the boot overlay above the nebula layer using z-index. 2 Window z-order never updated. el.style.zIndex = ++zTop on focus. 3 Starfield broke after resize. Added a resize listener that updates and reseeds the canvas.

Up next

Next comes the window manager: dragging, resizing, minimizing, maximizing, snapping, z-order, spring animations, double-click maximize, triple-click zoom, and finally the dock with magnification.

That’s when ÆTHER starts feeling like an operating system instead of a website.

✦ breathe the void