Focus Alarm: Adding a Draggable Pomodoro Timer to DeepSeek Harness Web

Introduction

When developing the Web UI for DeepSeek Harness (DSH), a common problem is that the workspace lacks a convenient utility. Items like Pomodoro timers, end-of-day countdowns, and focus statistics are things you need to check constantly. You either switch to another app or have to write a floating overlay yourself. focus-alarm is a community plugin in this direction that combines several functions into a single card. Below is an introduction to its positioning, features, and installation method.

Overview

renbooc/focus-alarm (package name @local/offwork-countdown) is a floating card plugin for the DeepSeek Harness Web UI, maintained by renbooc. The card combines a Pomodoro timer, end-of-day countdown, and focus statistics into one place; it is draggable and collapsible. It is a client-side plugin. The interface and timing logic run on the browser side, while the Host side of index.js is a stub implementation.

It solves the problem of not needing to leave the workspace to see information like the Pomodoro duration, how long until the end of the day, and how many Pomodoros have been completed during long work sessions in Harness.

Core Features

Divided into three groups based on the capabilities listed in the README.

For the Pomodoro section, there is a cycle of Focus / Short Break / Long Break. Rounds are configurable; the default is one long break every 4 rounds. It supports Start, Pause, Skip, Reset, and +5 minutes. Starting it returns to a full-length focus period; running timers not yet at the end continue from the timestamp. When a phase ends naturally, there is an alert sound, card shake, colored particles, and a text bubble, while respecting the system “Reduce motion” setting.

For the Stats and Countdown section, it shows today’s completed Pomodoros, total focus minutes, interruptions, consecutive days, and a bar chart for the last 7 days. It automatically resets across days but retains history. The end-of-day countdown shows time until the end of work / until the start of work / overtime duration, a progress bar for today’s work, and a weekend reminder.

For the Reminders and Sync section, it reminds you to wrap up 30 minutes before the end of work, reminds at the exact end time, reminds to rest your eyes when focus ends, and reminds to finish up during overtime. It only reminds once per day. Optionally, it can push system notifications via the Notification API, silently degrading if permissions are not granted. When running, the remaining time is written to the browser tab title; it restores the original title when paused or unloaded. The interface language (English/Chinese) follows the Harness language setting. All colors use theme tokens and adapt to Light/Dark mode. There are 7 preference switches that take effect immediately.

Installation and Activation

There are two installation methods given in the README. In Harness Web, open Settings → Plugins → Plugin Plaza, search for “Focus Alarm” and install with one click; or via command line:

dsh plugin --profile web add github:<owner>/focus-alarm#<commit-sha>

Note that <owner> and <commit-sha> in the command need to be replaced with actual values; the README does not provide syntax for anything other than these fixed placeholders. After installation, just refresh the page; no restart is needed. Client-side plugins are loaded via HMR.

For local development, install using a local path:

dsh plugin --profile web add /absolute/path/to/focus-alarm

The plugin directory follows the Cordis bundle conventions: package.json declares dsh.bundle.patch and dsh.client, cordis.patch.yml inserts a line for plugin registration, index.js is the Host side, client.js is the browser side (React components, styles, state, timing logic), locale/*.json contains English and Chinese text, and icon.svg is the icon. Data is saved in the browser’s localStorage with the key prefix dsh.offwork-countdown.*. Old prefixes are retained for compatibility with existing installations.

Typical Usage

After installation and page refresh, the card is loaded via the client plugin. You can drag its position or collapse it to leave just an entry point. The README describes several reproducible behaviors: if “Auto-start next phase” is enabled, the next phase starts automatically when the current one ends naturally; a long break starts after four Pomodoros. If “Title Sync” is enabled, the browser tab title shows the remaining time while the timer is running, and precisely restores the original title when paused or the plugin is unloaded. After enabling “System Notifications” and granting permission, you can receive system notifications when a phase ends; otherwise, it won’t disturb you. Before the end of the day, check the end-of-day countdown and today’s work progress bar on the card.

Use Cases and Notes

Suitable for developers who do long-term development in Harness Web and want Pomodoro and end-of-day countdowns visible nearby. Also suitable for others looking to reference this implementation pattern (“Floating Card + Timer + Local Stats”) for their own client plugins.

There are a few points to note. The plugin is compatible with DeepSeek Harness Web. The README states it has been verified on 0.2.1-rc.5, and package.json has engines.dsh set to >=0.2.1-rc.5. Client modules are registered via window.__ModuleLoader__, injected into the shell.overlay slot, and React is provided by the browser module table; the plugin does not install dependencies itself. The plugin runs with the permissions of the current Harness process. Before installing, check the source code and license (marked as MIT in the README). Timing and statistics data are written to the browser localStorage; be careful when clearing browser data.

Conclusion

The card consolidates these three types of work duration management capabilities (Pomodoro, end-of-day countdown, focus statistics) into one place. The configuration options are sufficient, and the implementation path is clear. The directory page is at https://www.skillhub.cn/plugins/renbooc/focus-alarm, and the source code is at https://github.com/renbooc/focus-alarm.

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye