Monk of the Terminal- Chrome Extension
Monk of the Terminal is a cyberpunk-inspired Pomodoro browser extension designed to cultivate deep focus and disciplined work habits.
Tech Stack:
Chrome Extension (Manifest V3)
JavaScript ES Modules
Service Worker background timer
chrome.alarms, chrome.notifications, chrome.storage
Local storage for user history
(Work in Progress) Node/Express proxy for AI calls
Problem + Context
Earlier this year I created a web application called Winter Arc where users could choose their cyberpunk persona, complete daily quests, and unlock their potential with AI-powered insights and future predictions. But I wanted to explore what it meant for the user to be more immersed in this cyberpunk landscape without having to manually log data into the platform.
Below are pain points and user needs that I identified to drive the product requirements
Pain Points
❌ Habit tracking tools are stuck on mobile or web apps- user has to log into the platform which is separate from where they do the habit their tracking = context switching to log their habit activity
😑 Aesthetic effects on user productivity is neutral at best- users need their productivity tools to pair with other concepts that motivate them such as cyberpunk which has a theme of using technology towards a productive end for the user
🤷 No real insights on how close the user is to achieving their next level- habit trackers and productivity tools only reflect on the past, they don’t try to predict the future with the user data they gathered. The user wants to see where they could be in x amount of days if they kept up the habit
User Needs
💻 Seamless integration into the user's everyday digital environment: the browser- there’s no need for the user to log into a web app to manually check in. With the browser extension format, it automatically logs the user actions
⚡ Electrifying and futuristic aesthetics!- cyberpunk is a theme everyone is familiar with, primarily developers and anyone working in tech! (Hence the name “..of the Terminal”)
🔮 Goal achievement predictions via Future Twin insights- By providing AI-generated predictions of the user’s past actions it determines a behavioral pattern so the user can mirror their current actions with who they want to be as a persona in Winter Arc
💫 My North Star:
How can I expand my cyberpunk productivity solution into the user's everyday life, so that they spend more time executing their goals and less time manually tracking progress?
Format Decision: the Browser Extension- the browser is the most common interface where people conduct most of their productivity related efforts. Also the most low barrier to entry vs smart watches, mobile applications, desktop applications, etc. = perfect for experimenting :)
—> All ideation was centered around how to track meaningful productivity via the browser <—
Idea #1: Tracking Productivity via Tab Groups
Tab groups based on personas- user selects their persona, user opens a new window that had tab groups according to their selected persona
Each persona gets:
Primary Tab Groups (most common behaviors)
Secondary Tab Groups (occasional but meaningful)
Shadow Tab Groups (bad habits / danger zones)
How it works:
The extension would interpret a user’s browsing patterns then assign temporary persona weights. This would inform the Future Twin’s “arc” by generating cyberpunk-style feedback like: “Your browsing mirrors the Neon Samurai today—discipline arc rising.” This makes the extension feel intelligent, personalized, and storytelling-driven.
There’s a timer for each tab that’s tracked daily. This determines the user’s productivity level to accomplish their goals.
Primary Tab Group- gain 50 xp
Secondary Tab Group- gain 10 xp
Shadow Tab Group- deplete xp by 10 xp for every 10 min
❌ NOT RIGHT FIT: For the xp to mean anything it would have to be directly related to a goal. I feel like the arcs are over-arching or are more general stories that the user can align with, but then within that I feel like there should be a more specific goal that can be tracked precisely over x amount of days.
Overall it seems meaningless, so why would the user engage with this? What’s the point of staying in a tab to earn XP? XP for what?
There's not much function or purpose to this idea with the tab groups alone
🌟 NEW My North Star:
How can I expand my cyberpunk productivity solution into the user's everyday life that is meaningful to the user, so that they spend more time executing their goals and less time manually tracking progress?
This made me think about how to make the user feel more immersed with the cyberpunk arcs. I asked ChatGPT to take my 6 Winter Arc persona arc descriptions and create a list of list of sub-goals to select once they select a persona. Below details those 6 personas (Winter Arc screenshot) and right after are the 2 AI-generated results that I thought were the most relevant to my use case.
Idea #2: Persona-specific goals to motivate users via story-driven narratives
❄️ Monk of the Frozen Terminal — “Discipline Through Stillness”
ARC: Purity of Focus
Goal: Strengthen Deep Work
Sub-goals:
Reduce digital noise
Maintain 45–90 min focus blocks
Close non-essential tabs
Work in minimal environments
🗡️ Neon Samurai of Self-Improvement — “Honor the Path of Growth”
ARC: Discipline & Structure
Goal: Master Your Schedule
Sub-goals:
Build time-blocking habits
Daily habit check-ins
Weekly reviews
Track goals consistently
Goal: Create Routine Stability
Sub-goals:
Establish morning ritual
Build nighttime wind-down
Plan weekly workouts
When discerning which route to take I thought about how it would track user behavior.
There’s 2 ways I can track user behavior:
System monitoring
Manual user logging
✅ YES- Strengthen Deep Work
Why: System monitoring makes it more impactful because it’s running in the background as the user is working, whereas manual user logging is more like a checklist in the browser. I thought of the ‘Monk of the Frozen Terminal’ idea as something that could be found in system monitoring, so as the user is working the extension collects data via the browser about the user’s activity and turns it into meaningful insights.
❌ NO- Master Schedule or Routine Stability
Why: Whereas with the ‘Neon Samurai of Self-Improvement’ it requires more manual user feedback with daily habit check-ins because the user has to check what digital or non-digital based habits they completed:
Complete their morning / nighttime routine → The user’s routine may not consist of any digital aspects so they’re more likely to not use the extension unless is naturally apart of their routine
Plan weekly workouts → This would be more natural on a mobile application or even a fitness watch application, not a browser extension
🎯 CHOSEN PATH: ‘Monk of The Terminal’ persona arc goals —> it's centered around the user’s digital environment, the browser for habit tracking and a pomodoro timer for productivity
This led me to think about specifically what actions could the user be doing that they would want to curve and can naturally be fed into a browser extension for automatic insights on the user’s progress towards their goal? It's also important for the actions to be goal agnostic, so this solution could be used by anyone whose looking for deep work in their digital environment.
I started with a couple of stats to track, as this is an MVP and I wanted to have a solid foundation with how everything worked. The actions seemed to be centered around time and counting, so it made me think about pomodoro sessions as a main feature of the extension. To make it so that users could strive towards something I thought of character development and reward system risks if the user is not consistent with their habits/behaviors.
As for goal achievement predictions, AI could slip easily into this slot, as it offers dynamic insights and feedback on user's fluid behavioral patterns. Whereas hard coding individual use cases to respond to the user's changing actions (both positive and negative) would be difficult to manage.
A pomodoro timer is timed for a set amount of minutes to work then a short break for optimal productivity! Ex: 25 min of work, 5 min of rest
✨ FINALIZED SOLUTION: 'Monk of the Terminal' Pomodoro Chrome Extension
How it works:
Each habit tracked affects specific character traits
Rewards and penalties are quantified
Future Twin projections adapt dynamically
And everything connects seamlessly with the Pomodoro + tab tracking system
Goal: Strengthen Deep Work 💪🏽
Reduce tab switching frequency- Track # of switches per session
Keep total tab count low- Avg active tabs per day
Even work-break cadence- Breaks every X minutes, detected by inactivity / site shifts
I was happy with the solution, but was still left confused with how the user would interact with the interface, so this is where I switched to the design portion.
Initial Designs
NOTE: I typically start out with low-fi’s for my designs, but since this was a pomodoro timer browser extension the user flow and therefore interface was more straightforward with 2 user interactions within a single pop-up. Therefore I was able to freely explore several hi-fi designs without friction.
User Interaction:
Select play- play current session type (work or break)
Select skip- skip current session type (work or break)
After each completed session type the user will gain or lose points in stillness, precision, or order, which are all automatically tracked in the background as the user is working in their browser.
The design goal now is to iterate and define the user interface which will display the skill stats, the pomodoro timer, and user stats that affected their skill stats.
The constraint here is that the extension is a small window therefore I have to make sure what's there is absolutely required for the user to be engaged to use the extension.
I laid out an initial structure for the user stats and pomodoro timer, while also trying to highlight the persona. This background image that covers the entire extension UI was to immerse the user's data fully into the arc and therefore have a stronger tie to action completion.
This supports the need that users need to feel immersed in what they're experiencing within their arc.
Since the main feature here is the pomodoro timer I made it prominent in the visual hierarchy, with supporting stats related to the timer right above.
Switched the X/100 format to a progress bar as it might be difficult to the user to quickly understand their score in relation to where they need to be..
I also stylized the title of the extension for a more cohesive cyberpunk theme
Competitive Audit —> Design Updates
I created my initial high-fidelity UI although I wanted to understand more about how to onboard the user and how the screens should look. It would help getting a sense of what other browser extensions do. So I did a competitive audit of other pomodoro browser extensions to understand the onboarding process as well as how to show the timer in a collapsed state so the user can focus on their work without a large timer window.
After finishing the competitive audit I consolidated my insights into the following:
Research insights:
UI: Make it simple, items shouldn’t be hard to find. Prompt the user to pin the browser extension to their bar. Experiment with adding a short session count. Creating a task could be a future scope item.
Onboarding: Since this is a browser extension that’s more story/character development drive (not a typical pomodoro timer), it would make sense to have a clear onboarding process. Make it succinct
Default state: Clear timer that can be started and stopped. Experiment with an audio sound for the start button action.
Timer is set: Experiment with showing a visual for time passing. Time is shown in the extension icon space in the extension bar. When time is up show a notification in the middle of the screen asking the user if they want to take a break or keep going
Then I translated the research insights into a design checklist to add more to my hi-fi designs of the browser extension. I took the time to apply those design checklist items so I had a complete image of how my browser extension will work, what screens to have where, and why in the user journey.
Design Checklist:
[X] UI should be simple and the user should understand what's going on at a glance
[X] Prompt the user to add the extension to the toolbar
[X] Add short session count (include work and breaks)
[X] Ensure clear and succinct onboarding process- the user should understand:
The persona (1/6)
The persona arc
What is pomodoro
How the pomodoro affects the skill stats
Other stats tracked
How other stats affect skill stats
[X] Determine extension icon (2 states: default/timer not on, timer on)
[X] Design 2 notifications: session time is finished and break time is finished
[X] (Optional) Find start and end time audios (2) for the timer- Update: Modified to just 1, it’s simplicity aligns with the persona
[X] (Optional) Show a visual for time passing; linked to the short session count
Below is the implementation of the design checklist in the form of a final hi-fi and end-to-end mid-fi user flows.
I refined the skill stats UI as the progress bar from before took up too much space to where the metrics were over top of the persona. I wanted a cleaner interface, with nothing unnecessarily overlapping.
Moreover, I implemented 'Add short session count (include work and breaks)' right below the timer, which fills up as the user completes their focus sessions and breaks.
Removed the progress bar as it made the UI clunky, aligning with 'UI should be simple'. Although the user doesn't have a visual cue on recent changes I made a note of this for the next design.
A constraint here is how to display visual cues for stats within a small window without overwhelming the user or decrease UI understanding.
I added a short onboarding screen to briefly describe what the extension is with a button 'Proceed' to move to the UI above and start using the extension.
I also decided to add the 'Winter Arc' title here as I see it as the main hub of the cyberpunk personas I'm exploring via habit tracking/productivity solutions. For example there could be a 'Cyber Phoenix Rising' extension that could also be under the 'Winter Arc' hub.
But I ended up moving the onboarding from the extension window to a tab (an idea I got from the Otto competitor), because the extension would be too small window for users to effectively understand the purpose and what to do.
I also added a level and level name to build structured goals for the user to achieve. Other forms of rewards will be explored in future scopes. Added the green and red change indicators to show the user the last change for that stat. This offers a clean way to indicate change.
There will be an info icon (that is not currently shown) next to the current level, so when the user hovers over the current level it will briefly show how many skill points is required until the next level is unlocked
The user rewards after each level completion for now are:
Up-leveling in skills
Level name change
Future Twin AI-generated response
Future rewards for level completion:
Background image change
Visual animation/effects
Persona-based timer audio options (Ex: Monk persona: gong —> light bell —> flute)
Implementing the functionality
Now that I have everything that I need the next step is implementing the browser extension. I didn't start at implementing the hi-fi design itself because I wanted to get the baseline functionality done first. This is my approach to personal projects, creating the hi-fi design but not implementing it until the baseline functionality is complete. This is because I want to avoid what I think is the superficial way of building which is implementing the design and thinking you completed most of the project. It gives an illusion, especially in owning a project, that the project is done because it looks done when it's actually not.
I created the following development steps. The extension setup is the foundation for the rest of the development phase. The pomodoro timer is the main feature, so ensuring that's implemented correctly. Then adding the motivational part of the extension, the skill logic, by taking the pomodoro timer actions and increase or decrease user stats and therefore levels. Next is adding the AI Future Twin because it's an extended functionality of the app that adds a unique predictive aspect of the user's persona development. Finally after the baseline extension is completed adding the onboarding flow and the progress indicators come next, as these are parts of the experience that supports the user experience, but if they weren't present it wouldn't hinder the user's goal which is to use the pomodoro timer as a motivator for productivity.
Therefore I started to implement the designs though these development steps:
[X] Extension setup
[X] Pomodoro timer (focus session and break paired with play and skip functionalities, notifications, audio indicator, and timer preview)
▢ Skill logic
▢ AI Future Twin
▢ Onboarding flow
▢ Progress indicators
The extension setup was straightforward, came across some errors, but got through them. I added mock data until I could figure out the backend logic. For the pomodoro timer I used chrome.alarms which is a natural timer available within Chrome. Here I got the audio notification and timer preview implemented as well.
Skill Logic
The skill logic was next and came with some layers of understanding. I started to do a bulleted list, but a table was more appropriate for identifying where rewards, skills, changes could be taking place. I used AI to help with brainstorming skill changes, but ultimately started to mix and match those skills into what I thought made sense for the extension. I also added in action groups to have a better understanding of what am I tracking for each skill stat.
Since this was an MVP I wanted to have 1 gain and 1 loss change per skill (Stillness, Discipline, and Order), so that meant keeping track of 6 skill changes for the backend logic, which I thought was a good start for an MVP. I could add more skill stat changes in future iterations. The 6 skill changes I went with are highlighted below.
Translating Skill Logic to Backend Logic
I tested the timer with the skill logic and it worked! Now onto the Future Twin…
[X] Extension setup
[X] Pomodoro timer (focus session and break paired with play and skip functionalities, notifications, audio indicator, and timer preview)
[X] Skill logic
▢ AI Future Twin
▢ Onboarding flow
▢ Progress indicators
AI Security Research + System Design Iterations
Now going to do some research!
RESEARCH GOAL: Find a secure way to implement the AI feature
Through light research I found that a proxy server might be the best way, so I added that as a point to dive deeper into.
My overall research was based in proxy server and API (security) research to see what I should focus on now, things to think about. I think I’ll have more questions as I go, but these are good foundational questions. This is the order in which I researched them:
At what point would the inferencing happen in the user experience? How would it be triggered? What data is being fed to the AI, what does storage look like for responses?
Will I be making a API? What’s the difference between an API and a proxy server?
Is it free? How can I add AI API rate limiting for users? Would it cost me/ how much would it cost me if users were inferencing the model? How to make a proxy server?
How can I make sure my proxy server and the AI model are secure and protects the user data?
What user data would the proxy server collect? What user data would the AI model collect via the API?
Fun Fact 😂: At this point on I actually started to use the pomodoro timer to help me stay productive throughout this project!
#1: At what point would the inferencing happen in the user experience? How would it be triggered? What data is being fed to the AI, what does storage look like for responses?
When inference would happen:
In relation to the reward system, the Future Twin is like a reward, like an oracle of the future self, helping to demystify how well the user is doing. So I think it can be a rare reward item, thinking about 1 oracle every 1-2 days. The pomodoro sessions are 25 min, so if the user’s average deep work when using the pomodoro timer is 4 hours, it could be 8 focus sessions. So I think after about 8-16 focus sessions the oracle could be generated based on the user skill stats.
I was thinking for testing it could be every session just to show the AI feature and how it works.
Trigger: Specifically it’ll be generated automatically if the threshold is reached, AI response is stored in the user's local storage, and is ready to be displayed, just to account for possible latency with the AI streaming.
Data being fed into AI:
Also, the model would just be given the user skill stats, but it would need context of what the oracle should be and also how to make it unique to where the user is at. This affects how many tokens are being used to generate the AI response. It would be better to have a fine-tuned model to avoid high token usage, but I think just to get the project working I'll use a base model with a standard prompt to test the connection. Then I can modify the quality of the model as the next version of the AI portion.
Storage: User's local storage via chrome.storage.local, which is sandboxed to the extension, private to the device
#2: Will I be making a API? What’s the difference between an API and a proxy server?
No, I'll be making a proxy server. APIs determine how applications interact with each other, a proxy server acts as an intermediary computer for security reasons.
Cons of proxy servers: Basic proxies don't encrypt traffic, exposing data on public or untrusted networks.
For the proxy server I need to think about:
Type: forwarding proxy
Traffic encryption through HHTPS
What user data is being shared with the proxy server
#3: Is it free? How can I add AI API rate limiting for users? Would it cost me/ how much would it cost me if users were inferencing the model? How to make a proxy server?
I can use Squid for free, but seems like creating the proxy might take a bit of understanding. There are different ways of creating proxy servers. For rate limiting I could use express-rate-limit which is a security feature to control the number of requests a application takes from the client.
Spent some time trying to understand how to make the proxy server through watching videos and creating a system design.
Started thinking about the AI model fine-tuning or possible base inferencing. For the fine-tuning plan I'll need to create a product AI plan of how will the AI adapt to the user’s skill level? How will it create responses based on previous AI responses? Will I just have to do base inferencing for the MVP, but do fine-tuning for future building? What will the storage schema look like?
For the cost since I would be using HuggingFace Inference it would be free!
#4: How can I ensure my proxy server and the AI model are secure and protects the user data?
Encrypt All Traffic to avoid Man-in-the Middle-Attacks: Use HTTPS or SSL proxy protocols to prevent interception.
Segment Proxy Infrastructure: Limit access to proxy servers to only authorized users and systems.
Implement Access Controls: Use Role-Based Access Control (RBAC) to restrict who can modify proxy settings or access logs.
Set Retention Policies: Define how long logs are kept and who can access them. If those logs are not encrypted, secured, and access-controlled, they can leak sensitive information, such as authentication tokens, URLs containing query parameters, internal browsing activity and internal data
Enable Anomaly Detection: Monitor for abnormal usage patterns or unexpected destinations.
#5: What user data would the proxy server collect? What user data would the AI model collect via the API?
The user data the proxy will collect is:
From 7 days ago: stillness stat, discipline stat, order stat, tab switch count, tab count, noise category
Stats for today: stillness stat, discipline stat, order stat, tab switch count, tab count, noise category
This is the same data the AI model will collect via the API along with an LLM Prompt for AI context..
System Design Iteration #1
This design consisted of my general understanding of how the backend components interacted with each other.
The client would send the stat data and the LLM Prompt (for AI context) to the proxy server which holds the API key and will feed the request to the AI model. The AI model will return the request to the proxy server, which returns it to the client side to be stored into the database, then displayed to the user.
This diagram did not involve security just yet, because I needed to understand the components and how they interacted first to see the data flow and know what I'm protecting.
System Design Iteration #2
Below is the product of the self-hosted research I conducted to see how everything connects end-to-end for the AI backend. I switched from an AI API to a self-hosted system because I wanted to avoid costs by setting everything up on my mini PC. I also wanted to included a quantized model I could fine-tune, so I didn't have to continuously send the LLM prompt. Although I dug deeper into research and was more confident in my understanding I realized there was still a gap of IT security knowledge and experience that wouldn't make sense to try to hurry up and fill for the MVP. I wanted to take my time to thoroughly understand the interconnecting parts, but also be able to push a functioning AI-supported MVP. So with the risk of security, setting up my own proxy server and being new to IT, I wanted to engage in a cloud backend, for the MVP, then as the product grows and I have more solid understanding of self-hosted IT security I'll switch to the the mini PC setup below.
NOTE: A more detailed explanation of system design #2 is coming soon~! ❤️ 🛠️
ME: Currently researching AI Security by investigating S-SDLC and Cloudflare worker security measures.
Since this project is a work-in-progress I will go back and shorten this case study at a later date.
I will work on implementing the onboarding flow and progress indicators to prep publishing this browser extension. It will be published with the basic pomodoro functionality as-is and I will add on the AI component later once I finalize and feel confident to securely implement the AI Security plan.
More insights to come! ❤️ 🛠️
Last updated: 11/30/25
Check back in later: December 2025