Virtual Garden

1// Virtual Garden as a band above the prompt.
2//
3// After each response the Python package (scripts/virtual-garden) reads the
4// transcript, grows the garden with the turn and returns two views of it: a
5// one-line summary and the full garden. This module keeps both and draws the
6// one the format asks for; "View garden" flips between them without running
7// Python again.
8//
9// Options opens pickers for the plugin's settings. A pick is written to the
10// /config row (which reloads this module with the new options) and the last
11// response is drawn again. Python applies a turn only once, so drawing the
12// same turn again never grows the plant twice.
13
14import { atom, read, update } from 'claude-code'
15import type { EngineInterface, Register } from 'claude-code'
16
17import type { GardenView } from '../types'
18
19const last = atom({ plugin: 'virtual-garden', key: 'last' } as const, null)
20const lastStop = atom({ plugin: 'virtual-garden', key: 'lastStop' } as const, null)
21const view = atom({ plugin: 'virtual-garden', key: 'view' } as const, null)
22const isHidden = atom({ plugin: 'virtual-garden', key: 'isHidden' } as const, false)
23const isEditing = atom({ plugin: 'virtual-garden', key: 'isEditing' } as const, false)
24
25type Words = Record<string, string>
26
27const HIDE: Words = { en: 'Hide', pt: 'Ocultar' }
28const OPTIONS: Words = { en: 'Options', pt: 'Opções' }
29const DONE: Words = { en: 'Done', pt: 'Concluir' }
30const SHOW_FULL: Words = { en: 'View garden', pt: 'Ver jardim' }
31const SHOW_SUMMARY: Words = { en: 'Collapse', pt: 'Recolher' }
32
33// The userConfig fields, in the order they are drawn.
34const CHOICES: { field: string; label: Words; options: { value: string; label: Words }[] }[] = [
35  {
36    field: 'format',
37    label: { en: 'Format', pt: 'Formato' },
38    options: [
39      { value: 'short', label: { en: 'one line', pt: 'uma linha' } },
40      { value: 'full', label: { en: 'full garden', pt: 'jardim completo' } },
41      { value: 'off', label: { en: 'off (keeps growing)', pt: 'desligado (continua crescendo)' } },
42    ],
43  },
44  {
45    field: 'species',
46    label: { en: 'Plant', pt: 'Planta' },
47    options: [
48      { value: 'current', label: { en: 'keep the current one', pt: 'manter a atual' } },
49      { value: 'bonsai', label: { en: '🎍 Bonsai', pt: '🎍 Bonsai' } },
50      { value: 'cactus', label: { en: '🌵 Cactus', pt: '🌵 Mandacaru' } },
51      { value: 'sakura', label: { en: '🌸 Sakura', pt: '🌸 Cerejeira' } },
52      { value: 'ipe', label: { en: '🌼 Golden Ipê', pt: '🌼 Ipê-amarelo' } },
53    ],
54  },
55  {
56    field: 'language',
57    label: { en: 'Language', pt: 'Idioma' },
58    options: [
59      { value: 'auto', label: { en: 'automatic', pt: 'automático' } },
60      { value: 'en', label: { en: 'English', pt: 'English' } },
61      { value: 'pt', label: { en: 'Português', pt: 'Português' } },
62    ],
63  },
64]
65
66const say = (words: Words, language: string) => words[language] ?? words.en!
67
68// The Python side reads its settings the way a command hook would.
69const toEnv = (options: Record<string, unknown>) => {
70  const env: Record<string, string> = {}
71  for (const [key, value] of Object.entries(options)) {
72    if (value !== undefined && value !== null) {
73      env[`CLAUDE_PLUGIN_OPTION_${key.toUpperCase()}`] = String(value)
74    }
75  }
76  return env
77}
78
79async function tend($: EngineInterface, stop: unknown, env: Record<string, string>): Promise<GardenView | null> {
80  const { stdout } = await $.process.run(['python3', `${$.plugin.root}/scripts/virtual-garden`], {
81    stdin: JSON.stringify(stop),
82    env,
83    timeoutMs: 15000,
84  })
85  if (!stdout.trim()) return null
86  const out = JSON.parse(stdout) as Partial<GardenView>
87  return out.summary && out.full ? { summary: out.summary, full: out.full, language: out.language ?? 'en' } : null
88}
89
90async function choose($: EngineInterface, current: Record<string, unknown>, field: string, value: string) {
91  const rows = await $.config.list()
92  const row =
93    rows.find(r => r.key === `virtual-garden.${field}`) ??
94    rows.find(r => r.key.startsWith('virtual-garden') && r.key.endsWith(`.${field}`))
95  if (!row) return
96  const { deny } = await $.config.set({ key: row.key, value })
97  if (deny) {
98    $.ui.toast(deny)
99    return
100  }
101  if (field === 'format') await update($, view, () => null)
102  const stop = await read($, lastStop)
103  if (stop === null) return
104  try {
105    const garden = await tend($, stop, toEnv({ ...current, [field]: value }))
106    await update($, last, () => garden)
107  } catch {
108    // keep the band as it was
109  }
110}
111
112export const register: Register = (on, options) => {
113  const current = options as Record<string, unknown>
114
115  on('classic.Stop', async ($, e, next) => {
116    const result = await next(e)
117    try {
118      await update($, lastStop, () => e as unknown as Record<string, unknown>)
119      const garden = await tend($, e, toEnv(current))
120      await update($, last, () => garden)
121    } catch {
122      // the garden must never get in the way of the session
123    }
124    return result
125  }).catch(($, e, next) => next(e))
126
127  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
128    if (e.props.hasSurvey || e.props.isWorking || (await read($, isHidden))) {
129      return next(e)
130    }
131    const garden = await read($, last)
132    const editing = await read($, isEditing)
133    const off = current.format === 'off'
134    // With format "off" the garden is not drawn, but an open panel stays so the pick can be undone.
135    if ((garden === null || off) && !editing) {
136      return next(e)
137    }
138
139    const elements = $.ui.resolve(e)
140    const { Box, Button, Text } = elements
141    // The mobile app draws no Select yet, so it gets no Options button.
142    const Select = 'Select' in elements ? elements.Select : undefined
143    const language = garden?.language ?? (current.language === 'pt' ? 'pt' : 'en')
144    const shown = (await read($, view)) ?? (current.format === 'full' ? 'full' : 'summary')
145    const lines = garden && !off ? garden[shown] : []
146
147    return (
148      <Box flexDirection="column">
149        {lines.map((line, i) => (
150          <Text key={`line-${i}`} dimColor={shown === 'summary' && i > 0}>
151            {line}
152          </Text>
153        ))}
154        {editing && Select && (
155          <Box key="options" flexDirection="column" marginTop={1}>
156            {CHOICES.map(choice => (
157              <Select
158                key={`option-${choice.field}`}
159                label={`${say(choice.label, language)}: `}
160                value={String(current[choice.field] ?? choice.options[0]!.value)}
161                options={choice.options.map(o => ({ value: o.value, label: say(o.label, language) }))}
162                onSelect={(value: string) => choose($, current, choice.field, value)}
163              />
164            ))}
165          </Box>
166        )}
167        <Box key="actions" flexDirection="row" gap={1}>
168          {garden && !off && (
169            <Button
170              key="view"
171              label={say(shown === 'full' ? SHOW_SUMMARY : SHOW_FULL, language)}
172              onPress={() => update($, view, () => (shown === 'full' ? 'summary' : 'full'))}
173            />
174          )}
175          {Select && (
176            <Button
177              key="options"
178              label={say(editing ? DONE : OPTIONS, language)}
179              onPress={() => update($, isEditing, open => !open)}
180            />
181          )}
182          <Button
183            key="hide"
184            label={say(HIDE, language)}
185            onPress={async () => {
186              await update($, isEditing, () => false)
187              await update($, isHidden, () => true)
188            }}
189          />
190        </Box>
191      </Box>
192    )
193  })
194}
195

1export type GardenView = { summary: string[]; full: string[]; language: string }
2
3declare module 'claude-code' {
4  interface PluginState {
5    'virtual-garden': {
6      last: GardenView | null
7      /** The last Stop payload, to draw that response again after a setting changes. */
8      lastStop: Record<string, unknown> | null
9      /** The view picked with "View garden"; null follows the format setting. */
10      view: 'summary' | 'full' | null
11      isHidden: boolean
12      isEditing: boolean
13    }
14  }
15}
16