SLOPSHOPPER

lemo-watch

定时提醒:N 秒后代你给 Claude 发消息,请它汇报进度 · 点了才开始 / Reminder: sends Claude a message for you after N seconds, asking for a progress update · starts only when you press it

newpanetimer
★ 14v0.2.0MITupdated 2026-10-04lemomo-ai/lemo-mod/plugins/lemo-watch
A shopper browsing a rack in a slop shop
README

lemo-mod

English · 简体中文

Re-skin Claude Code in one click, with a full set of features you turn on when you need them.<br> 21 styles for the terminal and the desktop app.<br> 一键为 Claude Code 换上新风格,并提供一整套按需开启的功能。<br> 21 套风格,终端和桌面 App 都能用。

<img src="assets/readme/cover.png" width="100%" alt="21 styles for Claude Code · lemo-mod 的 21 套风格">

▶ See every style · 看全部风格

What is lemo-mod · lemo-mod 是什么

lemo-mod is a set of style mods built on Claude Code's official mod interface. Once installed, Claude Code in the terminal and in the desktop app's Code tab can switch styles in one click. Colors, pixel mascot, spinner words, sounds and names all change together.

Beyond looks, lemo-mod provides a full set of features, including a four-page panel, a usage band, a status line, message numbers and reply tags, sounds, speech, brief mode, reminders, a focus timer, notes, session recaps, per-turn stats, a time limit, a log, auto tags, a lot-drawing tool and a read-only assistant. Your settings are only read, never changed, and every feature beyond looks is yours to turn on.

[!NOTE] 中文读者请看这里。 lemo-mod 是一组基于 Claude Code 官方 mod 接口的风格化 mod。装上之后,终端里的 Claude Code 和桌面 App 的 Code 标签都能一键换风格,配色、像素小画、加载词、音效和名字一起换。

除了外观,lemo-mod 还提供一整套功能,包括四页面板、用量横条、状态栏、消息编号和回复标签、音效、朗读、简短模式、定时提醒、番茄钟、笔记、会话小结、每轮统计、限时、日志、自动分类、抽签工具和一个只读助手。你的设置只读不改,外观以外的功能都由你自己开启。

→ 阅读中文版 README

What you get

Looks are on from the start. Your messages get numbers like T01 and T02, and each of Claude's replies shows which one it answers. Tool rows, turn lines and spinner words take on the style. A band above the prompt shows context, the 5-hour quota, cost and git branch, with a status line below it. Claude's question dialog gets a header. Type /lemo-mod to open the panel, with four pages: Main, Behavior, Background and Safety.

The first time you open it, the panel starts on the Safety page. Read what each feature does, turn on the ones you want, and press I have read this. You can switch any feature on or off on the Safety page at any time. Turn all off stops everything but looks in one press. The numbering note and the lot tool are fully gone from the next session.

<table> <tr> <td><b>Sounds</b><br>Style sounds on tool calls and turn ends<br><sub>switch · sound</sub></td> <td><b>Speech</b><br>Reads out the message number and time when a long task ends<br><sub>switch · speech</sub></td> <td><b>Brief mode</b><br>Answers in three sentences or fewer<br><sub>switch · adds to prompt</sub></td> <td><b>Notebook voice</b><br>Opens with what it looked at and ends with a conclusion<br><sub>switch · adds to prompt</sub></td> </tr> <tr> <td><b>Time limit</b><br>Stops a turn that runs over time<br><sub>switch · acts for you</sub></td> <td><b>Log</b><br>One line per turn in <code>~/.claude/lemo-mod/journal.md</code><br><sub>switch · writes a file</sub></td> <td><b>Auto tags</b><br>Tags each message as question, code, debug or chat<br><sub>switch · extra usage · message start goes to a small model</sub></td> <td><b>Auto summary after compaction</b><br>Saves a one-line note after each compaction<br><sub>switch · extra usage · summary goes to a small model</sub></td> </tr> <tr> <td><b>Lot tool</b><br>Say "draw a lot" and Claude draws one<br><sub>switch · adds a tool</sub></td> <td><b>Numbering note</b><br>Tells Claude what <code>T03</code> refers to<br><sub>switch · adds to prompt</sub></td> <td><b>Claude can send the assistant</b><br>Lets Claude send the read-only assistant<br><sub>switch · extra usage · report joins the chat</sub></td> <td><b>Session recap</b><br>Sums up this session in three lines<br><sub>on demand · main model reads the chat</sub></td> </tr> <tr> <td><b>Reminder</b><br>Asks Claude for a progress update after N seconds<br><sub>on demand</sub></td> <td><b>Focus timer</b><br>A countdown on the band and a reminder when time is up<br><sub>on demand</sub></td> <td><b>Write a report</b><br>The read-only assistant writes a three-line report<br><sub>on demand · report joins the chat</sub></td> <td><b>Check for updates</b><br>The only one that visits an outside website<br><sub>on demand</sub></td> </tr> </table>

<sub><b>switch</b> Off at install. Turn it on or off on the Safety page at any time. <b>on demand</b> Runs only when you press its button or type its command.</sub>

Safety

A mod runs with your permissions, so it matters whose mods you install. lemo-mod follows these rules. See SAFETY.md for details.

  1. No permission decisions for you. No mod allows or blocks a tool call. Your own settings and permission mode decide.
  2. Your settings are read, never changed. Only the few that overlap with the mods are read, on your machine. They are not stored and not sent to Claude.
  3. Only looks are on at install. Everything else starts off.
  4. Every automatic feature has a switch on the Safety page. On-demand features run only when you press a button or type a command. Type /lemo-mod safety to open the page.
  5. Where your setup overlaps, yours wins. If you set your own status line or spinner words, yours stay, and the Safety page says why.

To check before you install, clone this repo and run claude plugin validate plugins/<mod>. The hooks: and calls: lines in its output list the events each mod handles and what it asks Claude Code to do.

Install

You need Claude Code v2.1.287 or later. Check with claude --version. In your terminal, run:

claude plugin marketplace add lemomo-ai/lemo-mod
claude plugin install lemo-mod@lemo-mod

Then restart Claude Code, in the terminal or in the desktop app's Code tab. The panel starts on the Safety page. Preview the sounds and the voice if you like, turn on what you want, and press I have read this. In a terminal narrower than 144 columns, type /lemo-mod safety to open it. After that, each new session lists what is on in the band, so nothing runs quietly.

lemo-mod installs all 16 mods, and each one is its own plugin. To drop one look or feature, turn it off on the Safety page. To turn a whole mod off, first turn off the lemo-mod bundle, then the mod. The bundle is only a list, so turning it off leaves every mod on. Do this in /plugin in that order, or run:

claude plugin disable lemo-mod@lemo-mod
claude plugin disable lemo-spinner@lemo-mod

Turning the bundle back on turns all 16 mods on again.

For the best look, match Claude Code's theme to your terminal's light or dark background, for example a dark theme on a dark terminal. Set the theme with /theme. In the desktop app, light mode looks best.

Use

TypeDoes
/lemo-modOpen the panel
/lemo-mod safetyOpen the Safety page, and the same for main, behavior and background
/lemo-mod style <name>Switch style, or list all styles with no name
/lemo-mod name <name>Name the current style, or restore its name with no name
/lemo-mod mute or soundTurn sound off or on
/lemo-mod speakHear a speech preview
/lemo-mod briefTurn brief mode on or off
/lemo-mod focus 25Start a 25-minute focus timer
/lemo-mod remind 30Ask Claude for a progress update in 30 seconds
/lemo-mod recapGet a three-line session recap

In the terminal, press ctrl+x Tab to move into the panel, a to d to switch pages, number keys to press the buttons on the cards, and Esc to go back to the prompt. The interface follows the language of your latest message, Chinese or English.

Styles

There are 21 styles. 20 themed styles each have their own colors, pixel mascot, spinner words, sounds and names. Plain has no mascot and uses the default sounds.

Lemo Lab · Lucky Koi · Cassie · Peeky · Sprouty · Chubby Bun · Choo-Choo · Masky · Pixel Pal · Zoomy · Campfire · Mango Pop · Postie · Magic Gourd · Clacky · Waddles · Bubbles · Lanny · Blinky · Tri-Tri · Plain

See each style in the terminal and the desktop app, light and dark

Where it works

WhereWhat you see
claude in a terminalEverything
Desktop app, Code tabEverything the app can draw, the rest is hidden
VS Code chat panel and claude -pNo interface

Features you turn on still work in VS Code and claude -p, just without the interface.

In the desktop app's auto mode, the panel's Write a report button is stopped by the auto mode check, which cannot see that you pressed it. Turn on Claude can send the assistant (on the Safety page or the assistant card), then ask Claude to send the assistant to write a three-line report; or switch to another permission mode and press it again.

Your style, switches and safety confirmation are saved once for all projects and sessions, and shared by the terminal and the desktop app. If you add the marketplace from a local folder or load the plugins with --plugin-dir, the desktop app keeps its own copy, so you confirm once on each side.

Update

Updating the lemo-mod bundle does not update the mods inside it, so update each one. Then restart Claude Code or type /reload-plugins in an open session.

claude plugin marketplace update lemo-mod
for m in lemo-mod lemo-core lemo-skin lemo-spinner lemo-ask lemo-meter lemo-guard lemo-sound lemo-voice lemo-tone lemo-pomodoro lemo-watch lemo-recap lemo-todo lemo-journal lemo-lot lemo-assistant; do
  claude plugin update "$m@lemo-mod"
done

Uninstall

claude plugin uninstall lemo-mod@lemo-mod
claude plugin prune
claude plugin marketplace remove lemo-mod

Your switches and notes are saved in ~/.claude/plugins/store/lemo-*. If you turned on the log, it is in ~/.claude/lemo-mod/. Delete them too to remove everything.

The mods

ModWhat it does
lemo-coreStyles, language, message numbers, the /lemo-mod panel and its Safety page
lemo-skinMessage numbers, reply tags, and tool rows and turn lines in the style
lemo-spinnerSpinner words from the style, with the message number
lemo-askMessage number and question count above the question dialog
lemo-meterThe usage band, the status line, git branch and update check
lemo-soundSounds on tool calls, turn ends and time-limit stops
lemo-voiceReads out the message number and time when a long task ends
lemo-toneBrief mode and notebook voice
lemo-guardTime limit that stops a turn running over time
lemo-pomodoroFocus timer
lemo-watchReminder that asks Claude for a progress update after N seconds
lemo-recapThree-line session recap
lemo-todoNotes in the panel, with an auto summary after compaction
lemo-journalPer-turn stats, log and auto tags
lemo-lotA lot-drawing tool for Claude and fortune cards
lemo-assistantA read-only assistant that writes a three-line report

Coming next

Coming next are combined features, games in the panel and more styles. Ideas for styles or mods are welcome in Issues.

About

Made by lemomo of Lemo Lab, together with Claude. MIT License.

Source 4 files
hooks/register.tsx 262 lines
1// lemo-watch:定时提醒。N 秒后以插件的名义发一条消息,叫 Claude 汇报进度($.prompt.submit,asUser)。
2// - 计时时横条和状态栏上有一颗「提醒」胶囊($.lemo.badge,带结束时间,倒计时由画横条的 mod 画),到点或取消时去掉
3// - 到点:横条提示、「完成」音效,再发消息。消息开头是 REMIND_MARK(⏰)加空格,
4//   lemo-core 恢复旧会话重新编号时靠它跳过(对话记录里分不出消息是谁发的,只能看文字)
5// - 统一面板「常用」页一张卡片:30 秒后提醒 / 取消,计时时说明显示剩余时间
6// - /lemo-mod 提醒 [秒] / remind [sec]:最少 5 秒,默认 30
7// 到点会替用户给 Claude 发消息(kind 'act'),但只在用户点了按钮、输入了命令以后才计时,
8// 所以在「安全」页列为「手动触发」(manual),没有开关。装上时什么都不做
9
10import { atom, read, update } from 'claude-code'
11import type { EngineInterface, Register, Timer } from 'claude-code'
12
13import type { LemoWatchRemind } from '../types'
14import { CAP_STR, STR } from './i18n'
15import type { WatchStrings } from './i18n'
16import { HUB, REMIND_MARK, cmdWord, fill, hubWrap, mmss, sec, steady, word } from './shared/lemo'
17import type { Look } from './shared/lemo'
18
19// ---- lemo-shared BEGIN: 由 scripts/sync-shared.mjs 从 shared/lemo-block.tsx 复制,不要在这里改 ----
20// 下面这几个函数要用 $,所以不能放进 shared/lemo.tsx(校验规定 $ 只能传给同一个文件里定义的函数),
21// 由 scripts/sync-shared.mjs 原样插进每个 mod 的 hooks/register.tsx。只在 shared/lemo-block.tsx 里改。
22// 导入都起了 Lemo 开头的别名,免得和 mod 自己的导入重名。
23import type { EngineInterface as LemoEngine } from 'claude-code'
24import { visibleTabs as lemoVisibleTabs } from './shared/lemo'
25import type { Look as LemoLook, Tab as LemoTabId } from './shared/lemo'
26
27// lemo-core 的状态(校验规定:状态的引用要写在用它的文件里)。读它们会订阅,lemo-core 一改,读过的地方自动重画
28const LemoStyleRef = { plugin: 'lemo-core', key: 'style' } as const
29const LemoLangRef = { plugin: 'lemo-core', key: 'lang' } as const
30const LemoThemeRef = { plugin: 'lemo-core', key: 'theme' } as const
31const LemoDeskRef = { plugin: 'lemo-core', key: 'desk' } as const
32const LemoTabRef = { plugin: 'lemo-core', key: 'tab' } as const
33const LemoModsRef = { plugin: 'lemo-core', key: 'mods' } as const
34const LemoSeqRef = { plugin: 'lemo-core', key: 'seq' } as const
35const LemoTurnNoRef = { plugin: 'lemo-core', key: 'turnNo' } as const
36
37/**
38 * 画东西时要的风格和语言。读 lemo-core 的状态会订阅,lemo-core 一改自动重画;还没写过时用 $.lemo 兜底。
39 * 面板(Pane)的 hook 要把 e.props 传进来:面板停在哪(placement)决定正文用什么颜色(见 shared/lemo.tsx 的 inkOf),
40 * 面板宽度(bodyColumns)决定卡片说明在哪断行(见 shared/lemo.tsx 的 card)
41 */
42async function look($: LemoEngine, pane?: { placement: 'dock' | 'inline'; bodyColumns?: number }): Promise<LemoLook> {
43  const st = (await $.state.get(LemoStyleRef)).value ?? (await $.lemo.style({}))
44  const lang = (await $.state.get(LemoLangRef)).value ?? (await $.lemo.lang({}))
45  const theme = (await $.state.get(LemoThemeRef)).value ?? null
46  const desk = (await $.state.get(LemoDeskRef)).value ?? null
47  return { st, c: st.colors, lang, theme, desk, inline: pane?.placement === 'inline', ...(pane?.bodyColumns === undefined ? {} : { bodyColumns: pane.bodyColumns }) }
48}
49
50/** 用户本人发了几条消息(T01、T02…) */
51async function seqOf($: LemoEngine): Promise<number> {
52  return (await $.state.get(LemoSeqRef)).value ?? 0
53}
54
55/** 这一轮回的是第几条消息:提醒、助手交回、斜杠命令开头的一轮是 0(不写号)。lemo-core 还没写过时当作 seq */
56async function turnNoOf($: LemoEngine): Promise<number> {
57  return (await $.state.get(LemoTurnNoRef)).value ?? (await seqOf($))
58}
59
60/** 统一面板现在显示哪一页:存的那页在这个界面上没有,就显示第一页 */
61async function hubTab($: LemoEngine, surface: string): Promise<LemoTabId> {
62  const stored = (await $.state.get(LemoTabRef)).value ?? 'main'
63  const mods = (await $.state.get(LemoModsRef)).value
64  // 还没有报到表(lemo-core 还没写过,或者测试里用的是假核心):照存的那页
65  if (mods === undefined) return stored
66  const shown = lemoVisibleTabs(mods, surface)
67  return shown.includes(stored) ? stored : shown[0] ?? 'behave'
68}
69// ---- lemo-shared END ----
70
71const DEFAULT_SEC = 30
72const MIN_SEC = 5
73// 封顶一天:再长没有意义,而且计时器最多只能等 24.8 天(2^31 毫秒),超了会立刻触发
74const MAX_SEC = 24 * 3600
75// 胶囊的 id(lemo-core 按它替换、去掉)
76const BADGE = 'watch'
77// 过点多久以内还照常发提醒。mod 重新加载、关掉又打开、电脑睡醒时才会过点;
78// 超过这么久就作废,横条上说一句「已过期」,免得突然冒出一条很久以前的提醒(和 lemo-pomodoro 一样)
79const LATE_MS = 10 * 60_000
80
81// 在等的提醒。放在会话状态里:热重载后还在,面板卡片读它会订阅,一改自动重画
82const remind = atom({ plugin: 'lemo-watch', key: 'remind' } as const, null as LemoWatchRemind | null)
83// lemo-core 每秒加一的计数。只在计时时读:读了卡片就每秒重画一次(倒计时走字),不计时不重画(桌面上少重画)
84const FRAME = { plugin: 'lemo-core', key: 'frame' } as const
85
86// 在等的计时器。热重载时模块变量清零,引擎也会取消旧的计时器,所以 session.start 里按会话状态重新挂上
87let timer: Timer | null = null
88// 取消一次(按「取消」、「全部关闭」)加一。到点那一下先把提醒清掉、再等几步才发:
89// 这中间取消的话状态里已经看不到它了,发之前比一下到点时记下的数,变了就不发
90let gen = 0
91
92// 能力清单的一行(类型从 lemo-core 的合约里取)
93type Cap = Awaited<ReturnType<EngineInterface['lemo']['caps']>>[number]
94
95// 安全页上的一行:「手动触发」,没有开关(on 总是 false)。不带风格味道(安全页要一眼看懂)
96function watchCaps(): Cap[] {
97  return [
98    {
99      mod: 'lemo-watch',
100      id: 'remind',
101      kind: 'act',
102      manual: true,
103      on: false,
104      title: { zh: CAP_STR.zh.title, en: CAP_STR.en.title },
105      desc: { zh: fill(CAP_STR.zh.desc, { n: DEFAULT_SEC }), en: fill(CAP_STR.en.desc, { n: DEFAULT_SEC }) },
106    },
107  ]
108}
109
110/** 一条文字:风格包里有「lemo-watch.键」就用风格的,没有用自己的默认文字 */
111function txt(lk: Pick<Look, 'st' | 'lang'>, key: keyof WatchStrings): string {
112  return word(lk, `lemo-watch.${key}`, STR[lk.lang][key])
113}
114
115/**
116 * 挂计时器:每秒拿实际时间和到点时间 at 比一次,到了就发。
117 * 不用一次性的 after(ms):电脑睡眠时那种计时器停走,醒来胶囊已经是 00:00,提醒却还要再等(番茄钟也是每秒比)
118 */
119function arm($: EngineInterface, at: number) {
120  timer?.cancel()
121  timer = $.clock.every(1000, () => {
122    void checkReminder($, at)
123  })
124}
125
126async function checkReminder($: EngineInterface, at: number) {
127  const now = await $.clock.now()
128  if (now < at) return
129  timer?.cancel()
130  timer = null
131  await fireReminder($, at, now - at > LATE_MS)
132}
133
134/** 定一个 secs 秒后的提醒;已经有一个在等就换掉 */
135async function setReminder($: EngineInterface, secs: number, lk: Look) {
136  const at = (await $.clock.now()) + secs * 1000
137  await update($, remind, () => ({ at, sec: secs }))
138  arm($, at)
139  // 胶囊中英各给一份,lemo-meter 按当前语言画(计时中途换语言也跟着变)
140  await $.lemo.badge({ id: BADGE, text: { zh: txt({ st: lk.st, lang: 'zh' }, 'badge'), en: txt({ st: lk.st, lang: 'en' }, 'badge') }, tone: 'accent', endsAt: at })
141}
142
143async function cancelReminder($: EngineInterface) {
144  gen += 1
145  timer?.cancel()
146  timer = null
147  await update($, remind, () => null)
148  await $.lemo.badge({ id: BADGE, text: null, tone: 'accent' })
149}
150
151/** 到点:发提醒。late 为真(过点超过 10 分钟)时不发,只在横条上说一句已过期 */
152async function fireReminder($: EngineInterface, at: number, late: boolean) {
153  const g = gen
154  // 对一下再清,在同一次写里完成:中途取消了、或者刚换了一个新的提醒,这个就作废,不能把新的也清掉
155  let mine: LemoWatchRemind | null = null
156  await update($, remind, (cur): LemoWatchRemind | null => {
157    if (cur === null || cur.at !== at) return cur
158    mine = cur
159    return null
160  })
161  const fired = mine as LemoWatchRemind | null
162  if (fired === null) return
163  await $.lemo.badge({ id: BADGE, text: null, tone: 'accent' })
164  const lk = await look($)
165  if (late) {
166    await $.lemo.notice({ text: txt(lk, 'expired'), tone: 'grey', ms: 10_000 })
167    return
168  }
169  // asUser:去掉「The lemo-watch plugin sent a message」英文外框,来源仍然记作这个插件(lemo-core 不给它编号)。
170  // 插件发的消息要等 Claude 空下来才进对话,一轮干活中间到点也不会打断。
171  // 先发再提示:被别的 hook 拦下(drop)或发送出错时,不说「已发出」。
172  // 到点以后、发之前取消了(「全部关闭」):不发
173  if (g !== gen) return
174  const sent = await $.prompt
175    .submit({ text: `${REMIND_MARK} ${fill(txt(lk, 'prompt'), { n: fired.sec })}`, asUser: true })
176    .catch(() => null)
177  if (sent === null || sent.drop !== undefined) return
178  await $.lemo.notice({ text: txt(lk, 'sent'), tone: 'accent' })
179  await $.lemo.play({ sound: 'done' })
180}
181
182// 热重载取消了旧的计时器,但提醒还在会话状态里:按到点时间重新挂上。
183// 已经过了点的(mod 关了一阵又打开),下一秒按过点多久处理:10 分钟以内照常发,再久就作废、说一句已过期
184async function resumeReminder($: EngineInterface) {
185  const cur = await read($, remind)
186  if (cur !== null) arm($, cur.at)
187}
188
189export const register: Register = on => {
190  on('session.start', async ($, e, next) => {
191    await $.lemo.join({
192      mod: 'lemo-watch',
193      // 会放音效:没装 lemo-sound 时,lemo-core 在「行为」页给出开关
194      uses: ['sound'],
195      title: { zh: STR.zh.title, en: STR.en.title },
196      tabs: ['main'],
197      commands: { zh: [STR.zh.command], en: [STR.en.command] },
198    })
199    await resumeReminder($)
200    return next(e)
201  })
202
203  // ---------- 安全页:能力清单。只有「手动触发」的一行,没有开关 ----------
204  on('lemo.caps', async ($, e, next) => {
205    const r = await next(e)
206    return { value: [...(r.value ?? []), ...watchCaps()] }
207  })
208
209  on('lemo.toggle', async ($, e, next) => (e.mod === 'lemo-watch' ? { value: false } : next(e)))
210
211  // 「全部关闭」:没有开关要关,但正在等的提醒一起取消,按了以后不会再替你发消息。
212  // 取消出错也往下传:别的 mod 照样关
213  on('lemo.off', async ($, e, next) => {
214    // 不管状态里还有没有:到点正在发的那一下也作废
215    gen += 1
216    try {
217      if ((await read($, remind)) !== null) await cancelReminder($)
218    } catch {
219      // 照样往下传
220    }
221    return next(e)
222  })
223
224  // /lemo-mod 提醒 [秒] / remind [sec]。不认的词交给里层(别的 mod,最后是 lemo-core)
225  on('lemo.command', async ($, e, next) => {
226    const { word: w, num } = cmdWord(e.args)
227    if (w !== '提醒' && w !== 'remind') return next(e)
228    // 命令里的词不换界面语言:回复用当前语言
229    const lk = await look($)
230    const secs = Math.min(MAX_SEC, Math.max(MIN_SEC, Math.round(num > 0 ? num : DEFAULT_SEC)))
231    await setReminder($, secs, lk)
232    return { value: { text: fill(txt(lk, 'set'), { n: secs }) } }
233  })
234
235  // 统一面板「常用」页:定时提醒卡片
236  on('ui.render', { component: 'Pane', requestId: HUB }, async ($, e, next) => {
237    // 面板按钮用 steady:桌面上面板拿到焦点会再画一次,按钮还是同一个,第一下点击不丢(见 shared/lemo.tsx)。
238    // 每次画都先调它,这次不画按钮也调:下一次画才知道哪些按钮上一次画过
239    const Button = steady($.ui.resolve(e).Button, e.surface)
240    const inner = await next(e)
241    if ((await hubTab($, e.surface)) !== 'main') return inner
242    const lk = await look($, e.props)
243    const cur = await read($, remind)
244    if (cur !== null) await $.state.get(FRAME)
245    const now = await $.clock.now()
246    const el = $.ui.resolve(e)
247    return hubWrap(el, lk, e.surface, inner, [
248      {
249        id: 'watch-remind',
250        title: txt(lk, 'title'),
251        desc: cur === null ? fill(txt(lk, 'desc'), { n: DEFAULT_SEC }) : fill(txt(lk, 'left'), { t: mmss(cur.at - now) }),
252        buttons:
253          cur === null ? (
254            <Button key="watch-set" label={fill(txt(lk, 'btn'), { n: DEFAULT_SEC })} {...sec(e.surface)} onPress={() => setReminder($, DEFAULT_SEC, lk)} />
255          ) : (
256            <Button key="watch-cancel" label={txt(lk, 'cancel')} {...sec(e.surface)} onPress={() => cancelReminder($)} />
257          ),
258      },
259    ])
260  })
261}
262
hooks/i18n.ts 60 lines
1// lemo-watch 自己的文字(中性的默认文字;带风格味道的放在 lemo-core 的风格包 words/lemo-watch.ts,按同样的键覆盖)。
2// {n} 是秒数,{t} 是剩余时间(mm:ss)
3
4import type { Lang } from './shared/lemo'
5
6const zh = {
7  title: '定时提醒',
8  /** 卡片说明:没在计时 */
9  desc: '{n} 秒后请 Claude 汇报进度',
10  /** 卡片说明:计时中 */
11  left: '剩余 {t}',
12  btn: '{n} 秒后提醒',
13  cancel: '取消提醒',
14  /** 横条、状态栏上的胶囊 */
15  badge: '提醒',
16  /** 到点时横条上的提示 */
17  sent: '已发送提醒,Claude 开始汇报',
18  /** mod 重新加载、关掉又打开、电脑睡醒时,已经过点 10 分钟以上:不发了,横条上说一句 */
19  expired: '提醒已超时 10 分钟以上,本次不发送',
20  /** 到点发给 Claude 的消息(前面会加上 ⏰ 和空格) */
21  prompt: '提醒:{n} 秒到了。请用一两句话告诉用户现在进展到哪了、下一步做什么。',
22  /** /lemo-mod 提醒 的回复 */
23  set: '已设置:{n} 秒后请 Claude 汇报进度。',
24  /** 报到时拼进命令提示的词 */
25  command: '提醒 30',
26}
27
28export type WatchStrings = typeof zh
29
30const en: WatchStrings = {
31  title: 'Reminder',
32  desc: 'Asks Claude for a progress update in {n} seconds',
33  left: '{t} left',
34  btn: 'Remind in {n} s',
35  cancel: 'Cancel reminder',
36  badge: 'Reminder',
37  sent: 'Reminder sent, Claude is reporting',
38  expired: 'Reminder is over 10 minutes late · not sent this time',
39  prompt: 'Reminder: {n} seconds are up. In one or two sentences, tell the user where things stand and what comes next.',
40  set: 'Set: Claude will be asked for a progress update in {n} seconds.',
41  command: 'remind 30',
42}
43
44export const STR: Record<Lang, WatchStrings> = { zh, en }
45
46/**
47 * 安全页上的一行(lemo.caps,「手动触发」)。不带风格味道:安全页要一眼看懂,所以不走风格包,
48 * 也不放进上面那组(那组的每个键风格包都能覆盖)。{n} 是默认秒数
49 */
50export const CAP_STR: Record<Lang, { title: string; desc: string }> = {
51  zh: {
52    title: '定时提醒',
53    desc: '{n} 秒后代你给 Claude 发消息,请它汇报进度',
54  },
55  en: {
56    title: 'Reminder',
57    desc: 'Sends Claude a message for you in {n} seconds, asking for a progress update',
58  },
59}
60
hooks/shared/lemo.tsx 597 lines
1// 所有 lemo mod 共用的代码。只在仓库的 shared/ 里改,然后跑 node scripts/sync-shared.mjs,
2// 它会复制到每个 mod 的 hooks/shared/lemo.tsx(插件只能读自己文件夹里的文件,所以每个 mod 带一份副本)。
3//
4// 这里只放三类东西:lemo-core 状态的引用、文字小工具、统一面板 /lemo-mod 里的卡片怎么画。
5// 风格相关的值(颜色、带风格味道的文字)一律从 lemo-core 的 style 读,不写死。
6//
7// 注意:这个文件里的函数一律不收 $。校验规定 $ 只能传给同一个文件里定义的函数,
8// 所以要用 $ 的几个公共函数(look、seqOf、hubTab)放在 shared/lemo-block.tsx,
9// 由同步脚本原样插进每个 mod 的 hooks/register.tsx(两行标记之间)。
10
11import type { BoxProps, ButtonProps, ElementConstructor, PluginState, RenderChildren, RenderElement, RenderNode, TextProps } from 'claude-code'
12
13// ---------- lemo-core 的类型(从合约里取,lemo-core 自己和依赖它的 mod 都能用) ----------
14
15export type Core = PluginState['lemo-core']
16export type Style = Core['style']
17export type Lang = Core['lang']
18export type Tab = Core['tab']
19export type Theme = Core['theme']
20export type ModInfo = Core['mods'][number]
21export type Colors = Style['colors']
22
23// ---------- 统一面板的 id ----------
24
25export const HUB = 'lemo-mod'
26
27/**
28 * 画东西时要的风格和语言。theme 是 Claude Code 的主题(终端用);desk 是桌面 App 自己的明暗
29 * (lemo-core 读 App 记在本机的设置,读不到是 null,当亮色画)。
30 * inline:终端里面板内嵌在输入框上方(Pane 的 placement 是 inline,窄窗口或不是全屏布局时)。
31 * 这时面板没有主题画的底,字直接落在终端自己的底色上;停靠在对话旁边(dock)时底色才是主题画的。
32 * 只有面板的 hook 会是 true(look($, e.props)),别处都是 false
33 */
34/** bodyColumns:面板里画的时候是面板正文的宽度(卡片说明按它先断好行),别处没有 */
35export type Look = { st: Style; c: Colors; lang: Lang; theme: Theme; desk: Theme; inline: boolean; bodyColumns?: number }
36
37// ---------- 文字 ----------
38
39/** 风格里的文字:先找风格的「mod.键」,找不到用 mod 自己的默认文字 */
40export function word(lk: Pick<Look, 'st' | 'lang'>, key: string, fallback: string): string {
41  const v = lk.st.words[key]?.[lk.lang]
42  if (typeof v === 'string') return v
43  return fallback
44}
45
46/** 风格里的一组文字(加载词、签文),找不到用默认 */
47export function words(lk: Pick<Look, 'st' | 'lang'>, key: string, fallback: readonly string[]): readonly string[] {
48  const v = lk.st.words[key]?.[lk.lang]
49  if (Array.isArray(v) && v.length > 0) return v as readonly string[]
50  return fallback
51}
52
53/** 把 {n}、{name} 这类占位符换成值 */
54export function fill(text: string, vars: Readonly<Record<string, string | number>>): string {
55  return text.replace(/\{(\w+)\}/g, (all, k: string) => (vars[k] === undefined ? all : String(vars[k])))
56}
57
58export const pad2 = (n: number) => String(n).padStart(2, '0')
59/** 消息编号:T01、T02… */
60export const exp = (n: number) => `T${pad2(n)}`
61export const pct = (v: number | null) => (v === null ? '—' : `${Math.round(v)}%`)
62
63export function fmtDur(ms: number): string {
64  const s = Math.round(ms / 1000)
65  const m = Math.floor(s / 60)
66  return m > 0 ? `${m}:${pad2(s % 60)}` : `${s}s`
67}
68
69export function hhmm(ms: number): string {
70  const d = new Date(ms)
71  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`
72}
73
74export function mdhm(ms: number): string {
75  const d = new Date(ms)
76  return `${pad2(d.getMonth() + 1)}-${pad2(d.getDate())} ${hhmm(ms)}`
77}
78
79export function mmss(ms: number): string {
80  const s = Math.max(0, Math.ceil(ms / 1000))
81  return `${pad2(Math.floor(s / 60))}:${pad2(s % 60)}`
82}
83
84/** 终端里的显示宽度:中日韩字符占两格 */
85export function width(text: string): number {
86  let n = 0
87  for (const ch of text) {
88    const c = ch.codePointAt(0) ?? 0
89    const wide =
90      (c >= 0x1100 && c <= 0x115f) || (c >= 0x2e80 && c <= 0x303e) || (c >= 0x3041 && c <= 0xa4cf) ||
91      (c >= 0xac00 && c <= 0xd7a3) || (c >= 0xf900 && c <= 0xfaff) || (c >= 0xfe30 && c <= 0xfe4f) ||
92      (c >= 0xff00 && c <= 0xff60) || (c >= 0xffe0 && c <= 0xffe6)
93    n += wide ? 2 : 1
94  }
95  return n
96}
97
98/** 压成一行,超过 max 格就截断加省略号 */
99export function clip(text: string, max: number): string {
100  const one = text.replace(/\s+/g, ' ').trim()
101  let out = ''
102  for (const ch of one) {
103    if (width(out + ch) > max - 1) return out + '…'
104    out += ch
105  }
106  return out
107}
108
109/**
110 * 终端里中文夹着数字、英文时,挨着中文的空格换成不断行的空格。
111 * 终端换行优先在空格处断,「一轮超过 30 秒,……」会断成「一轮超过 30」和「秒,……」;
112 * 换掉以后整句按字断。英文句子里的空格不动
113 */
114export function cjkKeep(text: string): string {
115  return text.replace(/(?<=[\u2e80-\u9fff\uff00-\uffef]) | (?=[\u2e80-\u9fff\uff00-\uffef])/g, '\u00a0')
116}
117
118// 行首不能出现的标点(句号、逗号、右括号……),行尾不能出现的(左括号、左引号)
119const NO_START = new Set([...'。,、;:!?)」』】》〉…—·%,.;:!?)]}%'])
120const NO_END = new Set([...'(「『【《〈([{'])
121// 不拆开的一段:英文词、数字、路径(~/.claude/x.md)、标识符(draw_lot、.git/HEAD)
122const LATIN = /[A-Za-z0-9_~./@#+=*&'"$<>|^`-]/
123
124/**
125 * 终端里按显示宽度把一段中文(夹着英文)断成几行:英文词、数字、路径不拆开,
126 * 句号、逗号这类标点不放到行首,左括号、左引号不留在行尾。
127 * Ink 只在空格处断行,cjkKeep 换成不断行空格后又只能硬断(「Hai / ku」「Cla / ude」、句号落到行首),
128 * 所以知道宽度的地方(面板的 bodyColumns)先自己断好,每行单独画
129 */
130export function wrapCjk(text: string, cols: number): string[] {
131  const max = Math.max(4, Math.floor(cols))
132  // 切成不能再拆的小段:一个汉字或标点、一串英文数字、一个空格
133  const parts: string[] = []
134  for (const ch of text) {
135    const last = parts.length - 1
136    if (LATIN.test(ch) && last >= 0 && LATIN.test(parts[last]?.slice(-1) ?? '')) parts[last] += ch
137    else parts.push(ch)
138  }
139  const lines: string[][] = []
140  let cur: string[] = []
141  let w = 0
142  const flush = () => {
143    while (cur.length > 0 && cur[cur.length - 1] === ' ') cur.pop()
144    lines.push(cur)
145    cur = []
146    w = 0
147  }
148  for (const p of parts) {
149    if (p === ' ' && cur.length === 0) continue
150    const pw = width(p)
151    if (w + pw <= max) {
152      cur.push(p)
153      w += pw
154      continue
155    }
156    // 放不下。标点不放行首:连着的几个标点(「」,」)和它们前面那个字一起带到下一行
157    const carry: string[] = []
158    if (NO_START.has(p)) {
159      while (cur.length > 1 && NO_START.has(cur[cur.length - 1] ?? '')) carry.unshift(cur.pop() ?? '')
160      if (cur.length > 1 && cur[cur.length - 1] !== ' ') carry.unshift(cur.pop() ?? '')
161    }
162    // 左括号、左引号不留在行尾
163    while (cur.length > 1 && NO_END.has(cur[cur.length - 1] ?? '')) carry.unshift(cur.pop() ?? '')
164    flush()
165    for (const c of carry) {
166      cur.push(c)
167      w += width(c)
168    }
169    if (p === ' ') continue
170    // 一段英文比整行还长:只能硬断
171    let rest = p
172    while (w + width(rest) > max && cur.length === 0) {
173      let cut = ''
174      for (const ch of rest) {
175        if (width(cut + ch) > max) break
176        cut += ch
177      }
178      lines.push([cut])
179      rest = rest.slice(cut.length)
180    }
181    cur.push(rest)
182    w += width(rest)
183  }
184  if (cur.length > 0) flush()
185  return lines.map(l => l.join('')).filter((l, i, all) => l !== '' || all.length === 1)
186}
187
188/** 两种 #RRGGBB 颜色按 t 混合(t=0 是 a,t=1 是 b),调浅、调深风格色用 */
189export function mix(a: string, b: string, t: number): string {
190  const p = (h: string) => [1, 3, 5].map(i => Number.parseInt(h.slice(i, i + 2), 16))
191  const x = p(a)
192  const y = p(b)
193  if (a.length !== 7 || b.length !== 7 || [...x, ...y].some(Number.isNaN)) return a
194  return `#${x.map((v, i) => Math.round(v + ((y[i] ?? v) - v) * t).toString(16).padStart(2, '0')).join('')}`
195}
196
197/** 只留最近的若干条,免得会话状态越积越大 */
198export const recent = <T,>(map: Readonly<Record<string, T>>, keep = 300): Record<string, T> => Object.fromEntries(Object.entries(map).slice(-keep))
199
200// ---------- 消息来源 ----------
201
202/**
203 * 不是用户本人发的消息:后台任务通知、别的会话或 agent、插件发来的。
204 * 桌面发来的消息 origin 不是 composer,所以用排除法
205 */
206export const NOT_PERSON: ReadonlySet<string> = new Set([
207  'task-notification', 'peer', 'peer-send-message', 'coordinator', 'scheduled-trigger', 'plugin',
208  'observer', 'observer-activity', 'auto-continuation', 'channel', 'projects-relay', 'slack-ping',
209])
210
211/**
212 * Claude 回复的对号键:lemo-core 记回复编号、lemo-skin 画回复抬头都按它对。
213 * 按开头的文字对,因为界面上的文字和对话记录里的可能差一点尾巴
214 */
215export const replyKey = (text: string) => text.trim().slice(0, 60)
216
217/** lemo-watch 叫醒会话时发的消息以它开头;恢复旧会话重新编号时跳过 */
218export const REMIND_MARK = '⏰'
219
220// ---------- 命令:/lemo-mod 后面的词 ----------
221
222/**
223 * 把 /lemo-mod 的参数拆成第一个词(小写)、紧跟的数字和剩下的文字。
224 * 词和数字之间可以不空格:「提醒30」「focus25」也认(词本身不含数字;整个是数字时就当词)
225 */
226export function cmdWord(args: string): { word: string; num: number; rest: string } {
227  const a = args.trim()
228  const m = /^([^\s\d]+|\S+)\s*([\d.]*)\s*([\s\S]*)$/.exec(a)
229  return { word: (m?.[1] ?? '').toLowerCase(), num: Number.parseFloat(m?.[2] ?? ''), rest: (m?.[3] ?? '').trim() }
230}
231
232// ---------- 统一面板 /lemo-mod ----------
233// lemo-core 打开面板(id 是 HUB),画头部和分页。每个 mod 用
234//   on('ui.render', { component: 'Pane', requestId: HUB }, async ($, e, next) => { ... })
235// 拿到同一个面板:先 const inner = await next(e),再用 hubWrap 把自己的卡片接在后面。
236// 当前分页不是自己的就原样 return inner。
237
238// 分页从左到右:常用在最前,安全在最后。终端的 a、b、c… 换页键照这个顺序给
239const TAB_ORDER: readonly Tab[] = ['main', 'behave', 'bg', 'game', 'safe']
240
241/** 这个界面上有哪些分页:有 mod 在这一页、这个界面上有卡片才显示;「安全」「行为」两页 lemo-core 自己画,总是显示 */
242export function visibleTabs(mods: readonly ModInfo[], surface: string): Tab[] {
243  const used = new Set<Tab>(['safe', 'behave'])
244  for (const m of mods) {
245    if (m.surfaces !== undefined && !m.surfaces.includes(surface)) continue
246    for (const t of m.tabs) used.add(t)
247  }
248  return TAB_ORDER.filter(t => used.has(t))
249}
250
251/** 一张卡片:标题、一句说明、标题行右边的按钮、下面的其他内容 */
252export type CardSpec = {
253  id: string
254  /** 在这一页里的位置,小的在上;不写就查下面的 CARD_ORDER,再没有就排在最后 */
255  order?: number
256  title: string
257  desc?: string
258  buttons?: RenderChildren
259  extra?: RenderChildren
260  /** 终端里说明文字能占几列:给了就用 wrapCjk 先断好行(面板的 bodyColumns 减去卡片的缩进,见 cardCols) */
261  cols?: number
262}
263
264/**
265 * 终端面板里一张卡片正文能占几列:面板正文宽减去左右各 2 列留白、竖条和它后面的空格,再留 1 列余量。
266 * 不设比实际宽的下限:断出来的行比面板宽,每行末尾会被截掉(wrapCjk 自己最少按 4 列断)
267 */
268export function cardCols(bodyColumns: number): number {
269  return Math.max(4, bodyColumns - 7)
270}
271
272/** 终端里先断好行的一段灰字(wrapCjk),每行单独画、不再让 Ink 断 */
273export function para(el: Els, text: string, cols: number, key?: string) {
274  const { Box, Text } = el
275  return (
276    <Box key={key} flexDirection="column">
277      {wrapCjk(text, cols).map((l, i) => (
278        <Text key={`l${i}`} dimColor wrap="truncate">{l}</Text>
279      ))}
280    </Box>
281  )
282}
283
284type Els = { Box: ElementConstructor<BoxProps>; Text: ElementConstructor<TextProps> }
285
286/**
287 * 模型写的一段字(小结、助手的报告)画成纯文字:去掉控制字符,一行一个 Text,换行照留。
288 * 不按 Markdown 画:内容不可信(可能夹着读到的文件里的话),里面的链接不能点。
289 * 字色同面板正文(inkOf):终端停靠时用主题的正文色,配得上主题画的面板底;内嵌时用终端自己的字色;桌面用卡片的深色字。
290 * Markdown 不设字色,深色终端配浅色主题时停靠面板上的字和底一样浅,看不见
291 */
292export function plainLines(el: Els, lk: Look, surface: string, text: string, key: string) {
293  const { Box, Text } = el
294  const lines = text.replace(/\r\n?/g, '\n').replace(/[\u0000-\u0008\u000b-\u001f\u007f]/g, '').split('\n')
295  return (
296    <Box key={key} flexDirection="column">
297      {lines.map((l, i) => (
298        <Text key={`${key}-${i}`} {...inkOf(lk, surface)}>{l === '' ? ' ' : l}</Text>
299      ))}
300    </Box>
301  )
302}
303
304/** 桌面 App 是暗色(lemo-core 读 App 自己记的明暗)。读不到时是 null,当亮色 */
305export function deskDark(lk: Pick<Look, 'desk'>): boolean {
306  return lk.desk === 'dark'
307}
308
309/**
310 * 桌面卡片上的深色字:亮色 App 用风格的深色,暗色 App 卡片换成深色底,字用风格的浅色卡片底那个颜色。
311 * 暗色下原生按钮和 dimColor 的字是浅的,卡片底跟着变深才看得清
312 */
313export function deskInk(lk: Pick<Look, 'c' | 'desk'>): string {
314  return deskDark(lk) ? lk.c.cardFillLight : lk.c.inkDark
315}
316
317/** 桌面卡片:亮色是浅色小卡片(样子冻结,不改);暗色 App 用风格的深色卡片底 */
318export function cardBox(lk: Look): BoxProps {
319  if (deskDark(lk)) return { backgroundColor: lk.c.cardFillDark, borderStyle: 'round', borderColor: mix(lk.c.cardFillDark, lk.c.cardFillLight, 0.16), paddingX: 2, paddingY: 1 }
320  return { backgroundColor: lk.c.deskCardFill, borderStyle: 'round', borderColor: lk.c.deskCardBorder, paddingX: 2, paddingY: 1 }
321}
322
323/**
324 * 终端里竖条的颜色(柠檬书脊):强调色;深色主题用暗一点的那个,免得太刺眼。
325 * 用在面板卡片左边(卡片不要框、不要底色,左边一道竖条,卡片之间空一行)
326 * 和对话里你发的消息左边
327 */
328export function spineColor(lk: Look): string {
329  return lk.theme === 'dark' ? lk.c.bubbleAccent : lk.c.accent
330}
331
332/** 卡片标题:加粗,颜色和面板正文一样(见 inkOf) */
333export function cardTitle(el: Els, lk: Look, surface: string, title: string) {
334  const { Text } = el
335  return <Text bold {...inkOf(lk, surface)}>{title}</Text>
336}
337
338/**
339 * 画一张卡片。终端:左边一列带底色的空 Box 当竖条(高度跟着卡片拉满),右边是卡片内容;
340 * 按钮放在标题那一行右边,说明占满整行(中文说明和按钮挤一行会断得很怪)
341 */
342export function card(el: Els, lk: Look, surface: string, spec: CardSpec) {
343  const { Box, Text } = el
344  const isTerm = surface === 'terminal'
345  const head = cardTitle(el, lk, surface, spec.title)
346  // 说明按面板宽度先断好行(标点不落到行首):卡片自己给了 cols 就用它,没给就按面板宽度算
347  const cols = spec.cols ?? (lk.bodyColumns === undefined ? undefined : cardCols(lk.bodyColumns))
348  if (isTerm) {
349    return (
350      <Box key={spec.id} flexDirection="row" gap={1}>
351        <Box width={1} flexShrink={0} backgroundColor={spineColor(lk)} />
352        <Box flexDirection="column" flexGrow={1} flexShrink={1}>
353          <Box flexDirection="row" justifyContent="space-between" alignItems="center" gap={2}>
354            <Box flexShrink={1}>{head}</Box>
355            {spec.buttons === undefined ? null : <Box flexDirection="row" gap={1} flexShrink={0}>{spec.buttons}</Box>}
356          </Box>
357          {spec.desc === undefined ? null : cols === undefined ? <Text dimColor>{cjkKeep(spec.desc)}</Text> : para(el, spec.desc, cols)}
358          {spec.extra === undefined || spec.extra === null ? null : <Box marginTop={1} flexDirection="column">{spec.extra}</Box>}
359        </Box>
360      </Box>
361    )
362  }
363  return (
364    <Box key={spec.id} flexDirection="column" gap={1} {...cardBox(lk)}>
365      <Box flexDirection="row" justifyContent="space-between" alignItems="center" gap={2}>
366        <Box flexDirection="column" flexShrink={1}>
367          {head}
368          {spec.desc === undefined ? null : <Text dimColor>{spec.desc}</Text>}
369        </Box>
370        {spec.buttons === undefined ? null : <Box flexDirection="row" gap={1} flexShrink={0}>{spec.buttons}</Box>}
371      </Box>
372      {spec.extra === undefined ? null : spec.extra}
373    </Box>
374  )
375}
376
377/**
378 * 每页卡片的顺序,按卡片 id。同一层的插件谁在外层不一定,卡片不能按挂 hook 的顺序排,
379 * 所以在这里统一定。新卡片加在这里;没列的排在最后
380 */
381export const CARD_ORDER: Readonly<Record<string, number>> = {
382  // 常用
383  'recap-card': 10, 'sound-main': 20, 'voice-main': 25, 'tone-brief-card': 30, 'watch-remind': 40, 'pomo-main': 50, 'todo-notes': 60, 'meter-usage': 90,
384  // 行为
385  'core-style': 5, 'core-name': 6, 'core-sound': 8, 'tone-voice-card': 10, 'skin-unfold-card': 30, 'journal-stats': 40, 'guard-timeout': 50, 'core-mods': 90,
386  // 后台
387  'journal-log': 10, 'meter-branch': 20, 'meter-version': 30, 'journal-classify': 40, 'assistant-main': 50,
388  // 安全(lemo-core 按能力清单画,分类的顺序见 lemo-core 的 KIND_ORDER)
389  'safe-head': 1,
390}
391
392// 面板里那一列的 key,和每张卡片外层的 key(带着顺序号,外层的 mod 靠它重新排)
393const HUB_KEY = 'lemo-hub'
394const CARD_PREFIX = 'lemo-card:'
395
396/** 终端面板里卡片的数字热键最多到 9;分页按钮用 a–e(lemo-core 给),不在卡片里,不受影响 */
397const MAX_KEYS = 9
398// 按钮前面那个号码外层 Box 的 key:重新编号时靠它认出来、去掉
399const KEY_MARK = 'lemo-hotkey'
400
401const isEl = (x: unknown): x is RenderElement => typeof x === 'object' && x !== null && !Array.isArray(x) && 'type' in x
402
403/** 去掉里层编过的号:按钮上的数字热键、按钮前面画的号码。字母热键是 mod 自己定的,不动 */
404function unnumber(node: RenderNode): RenderNode {
405  if (!isEl(node)) return node
406  if (node.type === 'Button') {
407    const { hotkey, ...rest } = node.props
408    return hotkey !== undefined && /^\d$/.test(hotkey) ? { ...node, props: rest } : node
409  }
410  if ((node.type !== 'Box' && node.type !== 'Text') || node.children === undefined) return node
411  const kids = node.children.filter(k => !(isEl(k) && k.type === 'Box' && String(k.props?.key ?? '').startsWith(KEY_MARK)))
412  return { ...node, children: kids.map(unnumber) }
413}
414
415/** 在一行里找第一个按钮,给它热键 n,前面放上号码 mark。找不到返回 null */
416function numberRow(node: RenderNode, n: number, mark: RenderElement): RenderNode | null {
417  if (!isEl(node) || node.type !== 'Box' || node.children === undefined) return null
418  const kids = node.children
419  const i = kids.findIndex(k => isEl(k) && k.type === 'Button')
420  const btn = kids[i]
421  if (isEl(btn) && btn.type === 'Button') {
422    const numbered: RenderNode = { ...btn, props: { ...btn.props, hotkey: String(n) } }
423    return { ...node, children: [...kids.slice(0, i), mark, numbered, ...kids.slice(i + 1)] }
424  }
425  for (let j = 0; j < kids.length; j++) {
426    const r = numberRow(kids[j] as RenderNode, n, mark)
427    if (r !== null) return { ...node, children: [...kids.slice(0, j), r, ...kids.slice(j + 1)] }
428  }
429  return null
430}
431
432/**
433 * 给一张卡片编号 n:标题行右边的第一个按钮按 n 就能按,按钮前面画一个暗色的 n。
434 * 卡片外层是 hubWrap 包的 Box,里面是 card() 画的卡片:终端卡片是「竖条、内容」两个孩子,内容的第一个孩子是标题行。
435 * 标题行没有按钮返回 null(不占号)。
436 * 按钮的处理函数记在元素的 press 里,跟着元素走,所以外层改了 props,按下去还是原来那个 mod 处理
437 */
438function numberCard(wrapper: RenderNode, n: number, mark: RenderElement): RenderNode | null {
439  if (!isEl(wrapper) || wrapper.type !== 'Box') return null
440  const box = wrapper.children?.[0]
441  if (!isEl(box) || box.type !== 'Box') return null
442  const kids = box.children ?? []
443  const body = kids[kids.length - 1]
444  if (!isEl(body) || body.type !== 'Box') return null
445  const row = body.children?.[0]
446  const r = row === undefined ? null : numberRow(row, n, mark)
447  if (r === null) return null
448  const newBody = { ...body, children: [r, ...(body.children ?? []).slice(1)] }
449  return { ...wrapper, children: [{ ...box, children: [...kids.slice(0, -1), newBody] }, ...(wrapper.children ?? []).slice(1)] }
450}
451
452function orderOf(node: RenderNode): number | null {
453  if (typeof node !== 'object' || node === null) return null
454  const key = (node as { props?: { key?: unknown } }).props?.key
455  if (typeof key !== 'string' || !key.startsWith(CARD_PREFIX)) return null
456  return Number(key.slice(CARD_PREFIX.length, CARD_PREFIX.length + 4))
457}
458
459/**
460 * 把自己的卡片加进面板,和里层已有的卡片一起按顺序排(见 CARD_ORDER)。
461 * 里层是 lemo-core 的头部,或者别的 mod 已经排好的一列(key 是 lemo-hub):拆开,头部留在最上面,卡片重排。
462 * head 是要放在最上面的东西(桌面上 lemo-meter 的数据卡)。
463 * 终端里卡片之间空一行,左右各留 2 格和 lemo-core 的头部对齐,最下面空一行;桌面卡片之间空一点
464 */
465export function hubWrap(el: Els, lk: Look, surface: string, inner: RenderElement, specs: readonly CardSpec[], head?: RenderElement): RenderElement {
466  const { Box, Text } = el
467  const isTerm = surface === 'terminal'
468  if (specs.length === 0 && head === undefined) return inner
469  const isHub = inner.type === 'Box' && (inner as { props?: { key?: unknown } }).props?.key === HUB_KEY
470  const base: RenderNode[] = isHub ? [...((inner as { children?: RenderNode[] }).children ?? [])] : [inner]
471  const fresh = specs.map(s => {
472    const n = Math.max(0, Math.min(9999, Math.round(s.order ?? CARD_ORDER[s.id] ?? 9999)))
473    const key = `${CARD_PREFIX}${String(n).padStart(4, '0')}:${s.id}`
474    return isTerm ? (
475      <Box key={key} flexDirection="column" paddingX={2}>{card(el, lk, surface, s)}</Box>
476    ) : (
477      <Box key={key} flexDirection="column">{card(el, lk, surface, s)}</Box>
478    )
479  })
480  const all = [...base, ...fresh]
481  const tops = all.filter(x => orderOf(x) === null)
482  // sort 是稳定的:顺序号相同的照加进来的先后
483  const sorted = all.filter(x => orderOf(x) !== null).sort((a, b) => (orderOf(a) ?? 0) - (orderOf(b) ?? 0))
484  // 终端里按卡片顺序给卡片编数字热键 1–9(标题行右边的第一个按钮),按钮前面画出号码。
485  // 每一层都先去掉里层编的号再重编,最外层那次就是全部卡片排好后的结果。桌面上直接点,不编
486  let n = 0
487  const cards = !isTerm
488    ? sorted
489    : sorted.map(x => {
490        const clean = unnumber(x)
491        if (n >= MAX_KEYS) return clean
492        const mark = (
493          <Box key={`${KEY_MARK}-${n + 1}`} flexShrink={0}>
494            <Text dimColor>{String(n + 1)}</Text>
495          </Box>
496        )
497        const r = numberCard(clean, n + 1, mark)
498        if (r === null) return clean
499        n += 1
500        return r
501      })
502  return (
503    <Box key={HUB_KEY} flexDirection="column" gap={isTerm ? 1 : 2} {...(isTerm ? { paddingBottom: 1 } : {})}>
504      {head === undefined ? null : head}
505      {tops}
506      {cards}
507    </Box>
508  )
509}
510
511// ---------- 面板里的按钮:重画时还是同一个按钮(桌面 App 第一下点击不丢) ----------
512
513type Kept = { look: string; el: RenderElement; run: { fn: ButtonProps['onPress'] } }
514/** 每个界面上一次画出来的按钮(按 key)。只复用上一次画里有的,见 steady */
515const LAST = new Map<string, Map<string, Kept>>()
516
517/**
518 * 面板(Pane)里画按钮用这个,代替 $.ui.resolve(e) 给的 Button,写法不变:
519 *   const Button = steady($.ui.resolve(e).Button, e.surface)
520 *   <Button key="x" label="…" onPress={…} />
521 * 每次画都要先调一次 steady(放在面板 hook 的开头、提前 return 之前),它把这一次记成「上一次画」;
522 * 这次没画按钮也要调,不然下一次画会以为按钮一直在。
523 *
524 * 为什么:桌面 App 里光标在输入框时点面板按钮,按下鼠标那一刻按钮拿到焦点,
525 * App 把面板的 isFocused 改成 true,马上再要一次画。引擎每画一次,给新建的每个 Button 一个新 handle,
526 * 新画面里没有的旧 handle 就放掉。App 按住鼠标期间不换按钮,松开时发出去的还是按下前那个旧 handle,
527 * 引擎已经不认(日志里是「no Button … is held under handle」或「no handler is held under handle」),第一下就丢了;
528 * 第二下面板已经有焦点、不再重画,所以能按。
529 *
530 * 引擎的约定是 handle 跟着画面活(the host holds the handle for the lifetime of the drawing):
531 * 新画面里还是同一个按钮元素,handle 就还在。所以这里把上一次画的按钮记住:同一个界面、同一个 key、
532 * 样子(label、variant、hotkey、dimColor……)都没变,就交回那个元素;按下去跑最近一次画时给的 onPress,
533 * 不会拿旧状态做事。样子变了就新建一个。
534 *
535 * 只复用上一次画里有的:切页、按钮消失过一次再出现时,引擎已经放掉了它的 handle,这时新建一个,
536 * 不去碰引擎正在放掉的 handle(放掉和重新登记的先后说不准)。
537 * 这几种不记,照常新建:没写 key(引擎拿 label 当地址,两个同字的按钮分不清)、label 写成了子节点、
538 * 同一次画里这个 key 已经用过(不会把同一个元素放进树里两次)。
539 * Input、Select 不用:引擎按它们的 key 也找得到。
540 * 终端照原样返回 Button:终端的点击和重画在同一个进程里,画面和 handle 一起换,没有这个问题;
541 * 终端的重画还可能被中途取消,那时复用的 handle 可能被引擎一起清掉,所以不在终端上记。
542 */
543export function steady(Button: ElementConstructor<ButtonProps>, surface: string): ElementConstructor<ButtonProps> {
544  if (surface === 'terminal') return Button
545  const before = LAST.get(surface) ?? new Map<string, Kept>()
546  const now = new Map<string, Kept>()
547  LAST.set(surface, now)
548  return props => {
549    const { onPress, children, ...rest } = props
550    const key = rest.key
551    const hasKids = Array.isArray(children) ? children.length > 0 : children !== undefined && children !== null
552    if (key === undefined || hasKids || now.has(key)) {
553      return (
554        <Button {...rest} onPress={onPress}>
555          {children}
556        </Button>
557      )
558    }
559    const look = JSON.stringify(rest)
560    const hit = before.get(key)
561    if (hit !== undefined && hit.look === look) {
562      hit.run.fn = onPress
563      now.set(key, hit)
564      return hit.el
565    }
566    const run = { fn: onPress }
567    const kept: Kept = { look, el: <Button {...rest} onPress={press => run.fn(press)} />, run }
568    now.set(key, kept)
569    return kept.el
570  }
571}
572
573/** 次要按钮:终端里加 dimColor,引擎用主题的灰色画(不加的话用终端默认字色,浅底上看不清) */
574export function sec(surface: string): Pick<ButtonProps, 'variant' | 'dimColor'> {
575  return surface === 'terminal' ? { variant: 'secondary', dimColor: true } : { variant: 'secondary' }
576}
577
578/**
579 * 面板(Pane)里的正文颜色。桌面用风格的深色(暗色 App 用浅色)。
580 * 终端里看面板停在哪:停靠在对话旁边(dock)时底色是主题画的,用主题的正文色(theme key「text」);
581 * 内嵌在输入框上方(lk.inline)时没有主题的底,和 bareInk 一样不给颜色,用终端自己的前景色。
582 * 不然深色终端配浅色主题时标题是黑字落在深底上,浅色终端配深色主题时是白字落在浅底上
583 */
584export function inkOf(lk: Look, surface: string): Pick<TextProps, 'color'> {
585  if (surface !== 'terminal') return { color: deskInk(lk) }
586  return lk.inline ? {} : { color: 'text' }
587}
588
589/**
590 * 直接画在终端底色上的正文(横条、对话里的卡片):终端里不给颜色,用终端自己的前景色;桌面用风格的深色。
591 * 终端的底色不一定和 Claude Code 的主题一致:深色终端配浅色主题时,主题正文色是黑的,画在深底上看不清。
592 * 终端自己的前景色总是配得上它的底色
593 */
594export function bareInk(lk: Look, surface: string): Pick<TextProps, 'color'> {
595  return surface === 'terminal' ? {} : { color: deskInk(lk) }
596}
597
types/index.d.ts 14 lines
1// lemo-watch 的状态合约。
2
3/** 一个在等的提醒:什么时候到点(毫秒)、当初定的是几秒(提醒文字里要说「N 秒到了」) */
4export type LemoWatchRemind = { at: number; sec: number }
5
6declare module 'claude-code' {
7  interface PluginState {
8    'lemo-watch': {
9      /** 在等的提醒;没有是 null。放在会话状态里:热重载后还在,卡片读它会订阅 */
10      remind: LemoWatchRemind | null
11    }
12  }
13}
14