Mentalist OS

To finish off on an interesting note, I focused on easter eggs, adding more details to the story and fixing the user interface problems. I made the main database bigger to include over 80 characters from all the seasons of The Mentalist. I also improved the Evidence Pinboard to show eight suspects, including the list of people who could be Red John. The technical problem I had during this time was getting the HTML5 Canvas layers to work right for the red strings. At first the canvas was getting in the way. People could not click on the red pins underneath it. To fix this I had to set up the z-index stacking right and use a special code on the canvas layer to ignore the mouse clicks while also making sure the pins themselves would work with mouse clicks. I also fixed the problem of pictures being cut off on the roster by using some properties in the CSS code. To finish everything up I added a drive, for the Blake Association that people can access from the Terminal and I made the digital FBI Badge generator work perfectly so it can make real pictures.

Guys, hope you go through the video walkthrough. The audio player now has four tracks (Choices: Sacramento Rain, Late Night Office Hum, Lo-Fi Vinyl Crackle, and Teletype).I also updated the FBI/CBI Badge Creator, it uses HTML5 Canvas. People can type in their name and field of work, then they can get a special consultant badge. The old Evidence Pinboard was not very exciting. Now, the user can drag strings between the red pins on the suspect cards. This makes it look like the suspects are all connected and people can see how they are related to each other. The CBI ID credential and the Evidence Pinboard are great tools that make the experience feel more real.

The search bar on website is really good now. It can find over 80 people like characters, suspects and agents from The Mentalist. You can use it like you use the search on your computer. If you want to find someone like Virgil Minelli or Lorelei Martins you can just type their name. It will show you what they are doing and what group they are part of, with clearance level. I also made the Devlog tool better. Now you can write a lot of information about what you’re working on. You can use the editor to write many paragraphs about your investigation or what you are developing.

The core was rewritten to support window management. This means users can now manage their windows in a way. I added a taskbar at the bottom of the screen. This taskbar is like a dock where users can minimize their windows into icons that glow. When they want to use the window they can restore it and it will go back to how it was before.

I also made a system that lets users change the size of their windows. They can do this by dragging the edges of the window. There are handles on the right, bottom and bottom right of the window that they can grab onto to make the window bigger or smaller. If they drag a window to the right side of the screen it will automatically move to fill half of the screen. This makes it easy for users to have two windows at the same time one on each side of the screen, with each window taking up exactly half of the space. The core and the window management system are designed to work seamlessly with the core supporting the professional window management features.

The final phase was dedicated to deep show immersion, worldbuilding, and UI polish. I integrated a search bar into the top system bar that lets users look up characters, suspects, and team members from The Mentalist. I also built a CBI Consultant ID Generator that uses HTML5 Canvas to let users create and download their own custom digital badge. To ensure the UI looked polished, I tuned the CSS framing to prevent head cropping on character photos. Finally, to wrap it up, I hid a subtle Red John smiley face on the desktop—clicking it triggers eerie synthesized horror audio, falling blood animations, and flips the entire OS into a high-contrast dark mystery mode. With all submission requirements checked, Mentalist OS 1 is officially complete and ready for testing!

With the basic window manager up and running, Phase 2 was all about bringing functional detective utilities to the desktop. I created Patrick’s Tea Lounge, a built-in focus timer widget with steep presets (Earl Grey, Green Tea, Chamomile) and Web Audio API chimes to fulfill the unlisted extra feature requirement. Next, I designed the Evidence Pinboard app using corkboard textures, polaroid cards, and status tags. To make the system feel truly functional, I built the Encrypted Field Notes application. I wired it directly up to local storage so draft notes automatically save and persist even if you refresh the browser, and added a timestamped archive system so notes can be saved and reloaded later.

Devlog 1: Laying the Foundation & The Manila VisionWhen I started working on Web OS 1 for the Stardance project, I knew right away that I didn’t want to build just another generic dark-mode desktop. I’m a huge fan of The Mentalist, so I decided to base the entire aesthetic on a warm, tactile CBI detective station. For the first phase, my main focus was setting up the baseline window architecture. I built a custom drag-and-drop window engine from scratch using vanilla JavaScript mouse events (mousedown, mousemove, and mouseup). The trickiest part was getting the dynamic $z$-index focal stacking to work smoothly so that whichever window you click automatically pops to the front. Once the core mechanics were solid, I applied the Manila folder styling, tab stamps, clean window bars, and basic close controls.