Skip to content

feat(dashboard): add rules management panel#344

Open
evagundan wants to merge 1 commit into
XiaoMi:mainfrom
evagundan:feat/dashboard-rules-panel
Open

feat(dashboard): add rules management panel#344
evagundan wants to merge 1 commit into
XiaoMi:mainfrom
evagundan:feat/dashboard-rules-panel

Conversation

@evagundan

Copy link
Copy Markdown

Summary

Add a new "Rules" tab to the home dashboard sidebar, allowing users to view and manage their automation rules.

Motivation

Currently, rules can only be managed through the CLI (miloco-cli) or the Agent. Adding a visual rules panel to the dashboard gives users a quick overview of their configured rules and the ability to enable/disable them or trigger them manually — without needing to open a terminal.

Changes

New Files

  • web/src/components/RuleListPanel.tsx — Main component displaying rule cards
  • web/src/i18n/locales/zh/rules.json — Chinese translations
  • web/src/i18n/locales/en/rules.json — English translations

Modified Files

  • web/src/lib/types.ts — Add Rule, RuleMode, RuleLifecycle, RuleAction, RuleCondition type definitions
  • web/src/api/real.ts — Add realListRules, realToggleRule, realTriggerRule API functions
  • web/src/api/index.ts — Export listRules, toggleRule, triggerRule functions
  • web/src/components/Sidebar.tsx — Add "rules" tab to navigation, add IconRules SVG icon
  • web/src/App.tsx — Wire up rules data fetching and render RuleListPanel for the rules tab
  • web/src/i18n/locales/zh/nav.json — Add nav.rules / nav.rulesHint keys
  • web/src/i18n/locales/en/nav.json — Add nav.rules / nav.rulesHint keys

Features

The rules panel shows each configured rule as a card with:

  • Rule name with tag badge (e.g. [study_focus])
  • Mode badge: "事件" (Event) or "状态" (State)
  • Condition query text (truncated to 2 lines)
  • Duration/ratio info when configured (e.g. "180s / 60%")
  • Toggle switch to enable/disable the rule
  • Trigger button to manually fire the rule for testing

Loading skeleton and empty state are also handled.

Testing

  • Verified the panel renders correctly with the user's 3 existing study focus rules
  • Toggle and trigger buttons call the correct backend API endpoints
  • i18n translations work for both zh and en locales

Add a new Rules tab to the sidebar that displays configured automation
rules with enable/disable toggles and manual trigger buttons.

Changes:
- Add Rule type definitions to types.ts
- Add rule API functions (list, toggle, trigger) to real.ts and index.ts
- Create RuleListPanel component with rule cards showing:
  - Rule name with tag badge
  - Mode badge (event/state)
  - Condition query text
  - Duration/ratio info
  - Toggle switch and trigger button
- Add rules tab to Sidebar navigation
- Add i18n translations for zh and en
- Wire rules panel into App.tsx
@CLAassistant

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@github-actions

Copy link
Copy Markdown

👋 感谢提交 PR @evagundan!维护者会尽快 review。

提交前请确认:

  • CI 全绿(test / lint / build)
  • 改动聚焦单一主题,便于审阅
  • 若改动了依赖(lockfile / pyproject.toml / package.json),需维护者评论 /allow-dependencies-change <当前 head SHA> 放行(之后再 push 需重新放行)

@Zirconi Zirconi requested a review from idootop June 26, 2026 02:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants