phone-check-nudge

1import { atom, read, update } from 'claude-code'
2import type { Register } from 'claude-code'
3
4import type { Unchecked } from '../types'
5
6// The owner kept asking "Did you check the rest of the app on simulators?".
7// This notices a turn that edited UI files and ran nothing that looks at them,
8// and offers the check above the prompt. Showing the band costs nothing; the
9// Run check button starts one turn.
10
11const unchecked = atom({ plugin: 'phone-check-nudge', key: 'unchecked' } as const, null)
12
13const UI_FILE = /\.(tsx|jsx|vue|svelte|css|scss|sass|less|html|swift|kt)$|\/res\/layout\/[^/]+\.xml$/
14const NOT_UI = /(^|\/)(tests?|__tests__|e2e|spec|\.claude|node_modules)\/|\.(test|spec|stories)\.[jt]sx?$|\.d\.ts$/
15const LOOKS = /\bxcrun\s+simctl\b|\bidb\b|\badb\b|\bmaestro\b|\bplaywright\b|screenshot|\bcodeandconfirm\b|agent-browser|--headless/i
16const LOOK_TOOL = /claude-in-chrome|computer-use|Claude_Browser|Claude_Preview/
17
18export const CHECK_PROMPT =
19  'Check the UI you just changed the way a person would see it: the iOS simulator and the Android emulator for app code, or a phone-width browser for web pages. ' +
20  'Look at light and dark mode, and scroll the screens you touched. Show me the screenshots and list anything that looks wrong.'
21
22export const isUiFile = (path: string) => UI_FILE.test(path) && !NOT_UI.test(path)
23export const looksAtUi = (tool: string, command?: string) => LOOK_TOOL.test(tool) || (tool === 'Bash' && LOOKS.test(command ?? ''))
24
25export const register: Register = on => {
26  let touched = new Set<string>()
27  let looked = false
28
29  on('tool.call', async ($, e, next) => {
30    const ran = await next(e)
31    if (ran.deny !== undefined || ran.isError === true) return ran
32    const input = e as { file_path?: string; notebook_path?: string; command?: string }
33    const path = input.file_path ?? input.notebook_path
34    if ((e.tool === 'Edit' || e.tool === 'Write' || e.tool === 'NotebookEdit') && path && isUiFile(path)) touched.add(path)
35    if (looksAtUi(String(e.tool), input.command)) looked = true
36    return ran
37  }).catch(($, e, next) => next(e))
38
39  on('turn.complete', async ($, e, next) => {
40    if (e.agentId === undefined && !e.isAborted) {
41      if (looked) await update($, unchecked, () => null)
42      else if (touched.size > 0) {
43        const files = [...touched]
44        await update($, unchecked, old => ({ files: [...new Set([...(old?.files ?? []), ...files])].slice(-20) }))
45      }
46      touched = new Set()
47      looked = false
48    }
49    return next(e)
50  })
51
52  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
53    const pending = await read($, unchecked)
54    if (pending === null || e.props.isWorking || e.props.hasSurvey) return next(e)
55    const { Box, Button, Text } = $.ui.resolve(e)
56    const names = pending.files.map(f => f.split('/').pop())
57    const shown = names.slice(0, 3).join(', ') + (names.length > 3 ? ` +${names.length - 3}` : '')
58    return (
59      <Box flexDirection="row" columnGap={1}>
60        <Text color="warning">UI changed, not checked on a phone</Text>
61        <Text dimColor>({shown})</Text>
62        <Button
63          key="run-check"
64          label="Run check"
65          variant="primary"
66          onPress={async () => {
67            await update($, unchecked, () => null)
68            await $.prompt.submit({ text: CHECK_PROMPT })
69          }}
70        />
71        <Button key="dismiss" label="Dismiss" onPress={() => update($, unchecked, () => null)} />
72      </Box>
73    )
74  })
75}
76

1export type Unchecked = { files: string[] }
2
3declare module 'claude-code' {
4  interface PluginState {
5    'phone-check-nudge': { unchecked: Unchecked | null }
6  }
7}
8