lemo-ask

1// lemo-ask：Claude 向你提问（AskUserQuestion）时，在弹窗上面加一行抬头：强调色底的「? 提问 · T03」，
2// 后面一句「2 个问题，选好再继续」。弹窗本身照引擎画，选项和按键都是原来的。
3// 别的 mod 用 $.ui.ask 弹出的问题（比如番茄钟到点）走的是同一个弹窗，也会带上这行抬头。
4// 安全页一行外观，装上就开，有开关；关了弹窗照原样
5
6import { atom, read, update } from 'claude-code'
7import type { EngineInterface, Register } from 'claude-code'
8
9import { exp, fill, word } from './shared/lemo'
10import { STR } from './i18n'
11
12// ---- lemo-shared BEGIN: 由 scripts/sync-shared.mjs 从 shared/lemo-block.tsx 复制，不要在这里改 ----
13// 下面这几个函数要用 $，所以不能放进 shared/lemo.tsx（校验规定 $ 只能传给同一个文件里定义的函数），
14// 由 scripts/sync-shared.mjs 原样插进每个 mod 的 hooks/register.tsx。只在 shared/lemo-block.tsx 里改。
15// 导入都起了 Lemo 开头的别名，免得和 mod 自己的导入重名。
16import type { EngineInterface as LemoEngine } from 'claude-code'
17import { visibleTabs as lemoVisibleTabs } from './shared/lemo'
18import type { Look as LemoLook, Tab as LemoTabId } from './shared/lemo'
19
20// lemo-core 的状态（校验规定：状态的引用要写在用它的文件里）。读它们会订阅，lemo-core 一改，读过的地方自动重画
21const LemoStyleRef = { plugin: 'lemo-core', key: 'style' } as const
22const LemoLangRef = { plugin: 'lemo-core', key: 'lang' } as const
23const LemoThemeRef = { plugin: 'lemo-core', key: 'theme' } as const
24const LemoDeskRef = { plugin: 'lemo-core', key: 'desk' } as const
25const LemoTabRef = { plugin: 'lemo-core', key: 'tab' } as const
26const LemoModsRef = { plugin: 'lemo-core', key: 'mods' } as const
27const LemoSeqRef = { plugin: 'lemo-core', key: 'seq' } as const
28const LemoTurnNoRef = { plugin: 'lemo-core', key: 'turnNo' } as const
29
30/**
31 * 画东西时要的风格和语言。读 lemo-core 的状态会订阅，lemo-core 一改自动重画；还没写过时用 $.lemo 兜底。
32 * 面板（Pane）的 hook 要把 e.props 传进来：面板停在哪（placement）决定正文用什么颜色（见 shared/lemo.tsx 的 inkOf），
33 * 面板宽度（bodyColumns）决定卡片说明在哪断行（见 shared/lemo.tsx 的 card）
34 */
35async function look($: LemoEngine, pane?: { placement: 'dock' | 'inline'; bodyColumns?: number }): Promise<LemoLook> {
36  const st = (await $.state.get(LemoStyleRef)).value ?? (await $.lemo.style({}))
37  const lang = (await $.state.get(LemoLangRef)).value ?? (await $.lemo.lang({}))
38  const theme = (await $.state.get(LemoThemeRef)).value ?? null
39  const desk = (await $.state.get(LemoDeskRef)).value ?? null
40  return { st, c: st.colors, lang, theme, desk, inline: pane?.placement === 'inline', ...(pane?.bodyColumns === undefined ? {} : { bodyColumns: pane.bodyColumns }) }
41}
42
43/** 用户本人发了几条消息（T01、T02…） */
44async function seqOf($: LemoEngine): Promise<number> {
45  return (await $.state.get(LemoSeqRef)).value ?? 0
46}
47
48/** 这一轮回的是第几条消息：提醒、助手交回、斜杠命令开头的一轮是 0（不写号）。lemo-core 还没写过时当作 seq */
49async function turnNoOf($: LemoEngine): Promise<number> {
50  return (await $.state.get(LemoTurnNoRef)).value ?? (await seqOf($))
51}
52
53/** 统一面板现在显示哪一页：存的那页在这个界面上没有，就显示第一页 */
54async function hubTab($: LemoEngine, surface: string): Promise<LemoTabId> {
55  const stored = (await $.state.get(LemoTabRef)).value ?? 'main'
56  const mods = (await $.state.get(LemoModsRef)).value
57  // 还没有报到表（lemo-core 还没写过，或者测试里用的是假核心）：照存的那页
58  if (mods === undefined) return stored
59  const shown = lemoVisibleTabs(mods, surface)
60  return shown.includes(stored) ? stored : shown[0] ?? 'behave'
61}
62// ---- lemo-shared END ----
63
64// 抬头开关：外观，装上就开。存进 $.store（键 look，全局记住），开会话时读回来；弹窗读它，一改就重画
65const lookOn = atom({ plugin: 'lemo-ask', key: 'lookOn' } as const, true)
66
67type Cap = Awaited<ReturnType<EngineInterface['lemo']['caps']>>[number]
68
69export const register: Register = on => {
70  on('session.start', async ($, e, next) => {
71    await $.lemo.join({
72      mod: 'lemo-ask',
73      title: { zh: STR.zh.name, en: STR.en.name },
74      tabs: [],
75      always: { zh: [STR.zh.always], en: [STR.en.always] },
76    })
77    try {
78      const saved = await $.store.get('look')
79      if (typeof saved === 'boolean') await update($, lookOn, () => saved)
80    } catch {
81      // 读不到存档就照默认（开）
82    }
83    return next(e)
84  })
85
86  // 弹窗本身（桌面上是原生弹窗）不让换，只能在外面加东西：返回的树里必须正好包含一次 next(e) 的结果。
87  // 终端、桌面上抬头都出现在弹窗上方，方向键和回车照常能选
88  on('ui.render', { component: 'AskUserQuestion' }, async ($, e, next) => {
89    // 安全页上关了：不加抬头，原样交给里层
90    if (!(await read($, lookOn))) return next(e)
91    const drawn = await next(e)
92    const lk = await look($)
93    const S = STR[lk.lang]
94    const n = e.props.questions.length
95    const { Box, Text } = $.ui.resolve(e)
96    // 强调色只做底色（浅色终端上黄字看不清），上面的字用 onAccent
97    const tag = fill(S.tag, { title: word(lk, 'lemo-ask.title', S.title), no: exp(await seqOf($)) })
98    return (
99      <Box flexDirection="column">
100        <Box flexDirection="row">
101          <Text backgroundColor={lk.c.accent} color={lk.c.onAccent} bold>{` ${tag} `}</Text>
102          <Text color={lk.c.pencil}>{`  ${n === 1 ? S.one : fill(S.many, { n })}`}</Text>
103        </Box>
104        {drawn}
105      </Box>
106    )
107  })
108
109  // ---------- 安全页：能力清单、开关、「全部关闭」 ----------
110
111  on('lemo.caps', async ($, e, next) => {
112    const r = await next(e)
113    const row: Cap = {
114      mod: 'lemo-ask',
115      id: 'look',
116      kind: 'look',
117      title: { zh: STR.zh.cap.title, en: STR.en.cap.title },
118      desc: { zh: STR.zh.cap.desc, en: STR.en.cap.desc },
119      on: await read($, lookOn),
120    }
121    return { value: [...(r.value ?? []), row] }
122  })
123
124  on('lemo.toggle', async ($, e, next) => {
125    if (e.mod !== 'lemo-ask') return next(e)
126    const want = e.on
127    if (e.id !== 'look' || want === undefined) return { value: false }
128    await update($, lookOn, () => want)
129    await $.store.set('look', want)
130    return { value: true }
131  })
132
133  // 「全部关闭」只关外观以外的；提问弹窗的抬头是外观，没有要关的，往下传
134  on('lemo.off', async ($, e, next) => next(e))
135}
136

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

1// lemo-ask 的文字（中性的默认文字，素色风格下显示的就是它们）。
2// 带风格味道的放在 lemo-core 的风格包 styles/<风格>/words/lemo-ask.ts，按同样的键覆盖（现在只有 title）。
3
4import type { Lang } from './shared/lemo'
5
6const zh = {
7  /** 面板「已装的 mod」里的名字和说明 */
8  name: '提问弹窗',
9  always: '提问弹窗顶部显示编号和问题数',
10  /** 抬头强调色底上的词，风格可以覆盖（柠檬实验室是「实验提问」） */
11  title: '提问',
12  /** 抬头：{title} 是上面的词，{no} 是消息编号 T03 */
13  tag: '? {title} · {no}',
14  /** 抬头右边的一句：一个问题、几个问题（英文要分单复数，所以分两条） */
15  one: '共 1 个问题',
16  many: '共 {n} 个问题',
17  /** 安全页上的那一行 */
18  cap: { title: '提问弹窗标题', desc: '在提问弹窗顶部显示消息编号和问题数，选项不变' },
19}
20
21export type AskStrings = typeof zh
22
23const en: AskStrings = {
24  name: 'Question header',
25  always: 'Shows the message number and question count above the question dialog',
26  title: 'Question',
27  tag: '? {title} · {no}',
28  one: '1 question',
29  many: '{n} questions',
30  cap: { title: 'Question header', desc: 'Shows the message number and question count above the question dialog; options unchanged' },
31}
32
33export const STR: Record<Lang, AskStrings> = { zh, en }
34

1// lemo-ask 的状态合约：提问弹窗的抬头读它，读了会订阅，一改自动重画。
2
3/** 安全页上「提问弹窗标题」开着吗（外观，装上就开） */
4export type LemoAskLook = boolean
5
6declare module 'claude-code' {
7  interface PluginState {
8    'lemo-ask': {
9      /** 存进 $.store（键 look，全局记住），开会话时读回来 */
10      lookOn: LemoAskLook
11    }
12  }
13}
14