SIDEQUEST

An agent-native productivity system that keeps you focused, parks distractions, and helps you finish what matters.

Comment

Inspiration

Modern work is rarely just one clean task.

You start fixing one bug, notice another issue, remember something else you need to do, open another tab, switch projects, and eventually forget what you were originally trying to finish.

The problem is not always knowing what to do. The harder problem is protecting attention, recovering context after interruptions, and turning a large goal into something small enough to start.

That inspired us to build SIDEQUEST — an agent-native productivity workspace designed for distraction-prone and nonlinear work styles.

Instead of asking users to manage an endless task list, SIDEQUEST is built around one simple idea:

Stay on the main quest.

Everything else can be broken down, parked for later, recovered after an interruption, or turned into a structured challenge.

We also wanted to explore what productivity software could look like when an AI agent does not need to guess which buttons to click. With WebMCP, SIDEQUEST exposes meaningful application actions directly to compatible agents while keeping the human in control.

What it does

SIDEQUEST combines productivity tools with lightweight game mechanics to make progress easier to understand and more satisfying to continue.

Main Quest

Users select one important task as their Main Quest.

SIDEQUEST then keeps the current goal, progress, blocker, and Next Action visible so the user always knows what to do next.

Large tasks can be broken into smaller Quest Steps, including tiny actions that can be completed quickly.

If the user gets stuck, Unstuck Mode can help them:

  • make the next action smaller,
  • add a tiny step,
  • record a blocker,
  • or temporarily skip a step without abandoning the Quest.

Side Quest Parking Lot

Distractions do not have to become immediate task switches.

If another idea appears while working, users can quickly park it as a Side Quest and continue their Main Quest.

Side Quests can later be dismissed or promoted into full project Quests.

Focus Sessions

SIDEQUEST includes timestamp-based Focus Sessions with:

  • configurable duration,
  • pause and resume,
  • overtime,
  • current Next Action,
  • Quest progress,
  • and session summaries.

Focus Sessions connect directly to the user's real Quest rather than being a separate timer.

Context Keeper and Resume Me

One of the biggest problems with interrupted work is remembering where you stopped.

SIDEQUEST can save a lightweight work snapshot containing:

  • current Quest,
  • current Step,
  • progress,
  • blocker,
  • Next Action,
  • and an optional note to your future self.

When the user returns, Resume Me restores their orientation without rolling back newer work.

Recovery Quests

SIDEQUEST also includes optional non-medical Recovery Quests for:

  • water,
  • movement,
  • stretching,
  • eye breaks,
  • bio breaks,
  • and general breaks.

Recovery is treated as part of sustainable work rather than something that breaks a productivity streak.

Gamification

Real progress powers the game layer.

Users can earn:

  • XP,
  • Levels,
  • Achievements,
  • Focus Combos,
  • Skill Tree progress,
  • Challenge rewards,
  • Daily Mission rewards,
  • and Boss Battle progress.

The system includes anti-farming protection so repeatedly reopening and completing the same Step does not generate unlimited XP.

Today's Loadout

Users can build a small daily plan with:

  • 1 Main Mission
  • up to 2 Side Missions
  • optional Recovery goals

This prevents the daily plan from becoming another overwhelming task list.

Boss Battles

Large Projects can optionally become Boss Battles.

The Boss HP is derived from real Project progress — not an artificial game score.

As real Quests are completed, Boss HP decreases until the Project reaches 100%.

Challenge Mode

Users can create short voluntary challenges such as:

  • 10 Minute Attack
  • Triple Tap
  • Stay On Target
  • Push the Boss

Challenges reward completing actual work objectives rather than simply keeping a timer running.

Skill Tree

SIDEQUEST includes four progression branches:

  • Focus
  • Finishing
  • Resilience
  • Recovery

Skill nodes unlock from real usage patterns such as completing Focus Sessions, finishing Quests, returning after interruptions, and completing Recovery Quests.

WebMCP

SIDEQUEST exposes structured tools through:

document.modelContext

A WebMCP-compatible agent can work with the application using actions such as:

  • get_current_work_state
  • set_main_quest
  • make_next_action_smaller
  • park_side_quest
  • save_work_context
  • resume_work_context
  • start_focus_session
  • suggest_recovery
  • get_player_state

These tools operate on the same state and business logic as the human-facing UI.

When an agent changes something, the user sees the actual application update immediately.

SIDEQUEST currently exposes 28 WebMCP tools with structured schemas, read-only hints where appropriate, validation, execution timing, and visible Agent Activity tracking.

How we built it

SIDEQUEST is a frontend-first, local-first web application.

Technology stack

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • shadcn/ui
  • Framer Motion
  • React Router
  • Lucide React
  • WebMCP
  • localStorage
  • Netlify

We intentionally kept the hackathon version backend-free.

There is:

  • no custom AI model,
  • no OpenAI API key,
  • no authentication server,
  • no traditional MCP server,
  • and no cloud database required for the core experience.

Application state is organized into reusable domain stores and actions for areas such as Quests, Focus Sessions, Recovery, Context, Gamification, Challenges, and Daily Missions.

The UI and WebMCP tools both call those same domain actions.

The architecture keeps both human and agent interactions connected to the same source of truth: users interact through the React UI, while WebMCP-compatible agents interact through structured WebMCP tools, and both call the same shared domain actions. These actions update the central application state, which immediately refreshes the React interface and is persisted locally using localStorage.

Built With

  • accessibility
  • agent-native
  • context-recovery
  • document.modelcontext
  • framer-motion
  • gamification
  • json-schema
  • local-first
  • localstorage
  • lucide-react
  • netlify
  • productivity
  • pwa
  • react
  • react-router
  • responsive-design
  • service-worker
  • shadcn/ui
  • spa
  • tailwind-css
  • typescript
  • vite
  • web-audio-api
  • webmcp
  • webrtc
Share this project:

Updates

Submission history