vome-automation

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Link, Code, Markdown } = $.ui.resolve(e)
    const current = (await $.state.get(view)).value ?? null
    const latest = (await $.state.get(run)).value ?? null
    const watching = (await $.state.get(watch)).value ?? null
    const message = (await $.state.get(note)).value ?? null
    const urls = (await $.state.get(haUrls)).value ?? {}
    const lit = (await $.state.get(flash)).value ?? null
    const isFxEnabled = (await $.state.get(fxOn)).value ?? true
    const playing = (await $.state.get(fx)).value ?? null
    const isBuilding = (await $.state.get(building)).value ?? false
    const refusal = (await $.state.get(blocked)).value ?? null
    const picking = (await $.state.get(choices)).value ?? null
    const isSiblingHint = !hasSibling && ((await $.state.get(sibling)).value ?? false)
    const siblingHint = isSiblingHint ? (
      <Box flexDirection="row" gap={2} marginTop={1}>
        <Text dimColor wrap="wrap">
          Working on ESPHome too? The ESPHome pane shows the device and its builds: <Text color="suggestion">{ESPHOME_INSTALL}</Text>
        </Text>
        <Button
          key="hide-sibling"
          dimColor
          onPress={async () => {
            await $.store.set('siblingHintOff', true).catch(() => undefined)
            await $.state.set(sibling, false)
          }}
        >
          Hide
        </Button>
      </Box>
    ) : null

    // The home's automations to pick one from (/automation with nothing shown, or o). The phone app
    // has no Select, so there they are buttons, the first dozen.
    let pickerList = null
    if (picking) {
      const pick = (id: string) => $.state.set(pending, { automation: id, run: true, server: picking.server })
      if (e.surface === 'mobile') {
        pickerList = picking.automations.slice(0, 12).map(item => (
          <Button key={`pick-${item.id}`} plain onPress={() => pick(item.id)}>
            {item.alias}
          </Button>
        ))
      } else {
        const { Select } = $.ui.resolve(e)
        pickerList = (
          <Select
            key="pick"
            label="Automation"
            autoFocus
            options={picking.automations.map(item => ({ value: item.id, label: `${item.isOn ? '●' : '○'} ${item.alias}` }))}
            onSelect={value => pick(value)}
          />
        )
      }
    }
    const picker = picking ? (
      <Box flexDirection="column" marginTop={1}>
        <Text bold>Pick an automation ({picking.automations.length})</Text>
        {pickerList}
        <Button key="close-picker" dimColor onPress={() => $.state.set(choices, null)}>
          Close the list
        </Button>
      </Box>
    ) : null

    // A refused read takes the whole pane until dismissed: what to add and where, over everything,
    // rather than a HooksError in the note line that names neither.
    if (refusal && !refusal.isDismissed) {
      fxSite = null
      const rules = READ_TOOLS.map(tool => `"mcp__${refusal.server}__${tool}"`).join(',\n')
      return (
        <Box flexDirection="column" borderStyle="round" borderColor="warning" paddingX={1}>
          <Text bold color="warning">
            The automation pane needs permission to read
          </Text>
          <Text wrap="wrap">
            Auto mode refused its background read of {refusal.tool} on the {refusal.server} server. Claude Code refuses
            reads nobody asked for unless they are allowed by name.
          </Text>
          <Box marginTop={1}>
            <Text wrap="wrap">Add these lines to permissions.allow in</Text>
          </Box>
          <Markdown text={`[${settingsFile}](file://${settingsFile})`} />
          <Code source={rules} />
          <Text dimColor wrap="wrap">
            Or run /permissions and choose Allow for each. They only read: an automation and its recorded runs.
          </Text>
          <Box marginTop={1}>
            <Text dimColor wrap="wrap">
              Claude Code said: {compact(refusal.error, 300)}
            </Text>
          </Box>
          <Box flexDirection="row" gap={2} marginTop={1}>
            <Button
              key="copy-rules"
              hotkey="c"
              variant="primary"
              autoFocus
              onPress={press => $.ui.copy({ text: rules, surface: press.surface })}
            >
              Copy the lines
            </Button>
            <Button
              key="retry"
              hotkey="r"
              onPress={async () => {
                isBlocked = false
                await $.state.set(blocked, null)
                await $.state.set(note, null)
                await $.state.set(pending, { run: true })
              }}
            >
              Try again
            </Button>
            <Button key="dismiss" hotkey="d" role="dismiss" onPress={() => $.state.set(blocked, { ...refusal, isDismissed: true })}>
              Dismiss
            </Button>
          </Box>
          <Link href={README_URL}>Why the pane needs these</Link>
        </Box>
      )
    }
    // Dismissed: the pane as usual, its note line saying how to get the help back.
    const showHelp = refusal ? (
      <Button key="help" hotkey="h" dimColor onPress={() => $.state.set(blocked, { ...refusal, isDismissed: false })}>
        What to allow
      </Button>
    ) : null

    // While an interstitial plays it takes the header's first four lines; the swim (the intro, or
    // while an automation is worked on) takes all six. Same heights, so nothing below moves.
    // Both are Rasters, which only the terminal draws; elsewhere the pane goes without.
    const isSwimming = !current || isBuilding
    let sceneStrip = null
    let swimStrip = null
    if (e.surface === 'terminal' && isFxEnabled && (playing || isSwimming)) {
      const { Raster } = $.ui.resolve(e)
      const columns = Math.max(10, Math.min(512, e.props.bodyColumns))
      fxSite = { columns, isSwim: !playing }
      if (playing) {
        sceneStrip = <Raster key="bulbs" columns={columns} rows={FX_ROWS} cells={frame(Date.now() - playing.at, playing.scene, columns)} />
      } else {
        swimStrip = <Raster key="bulbs" columns={columns} rows={SWIM_ROWS} cells={swim(Date.now(), columns)} />
      }
    } else {
      fxSite = null
    }

    const connected = (await $.state.get(servers)).value ?? null
    if (!current && connected !== null && connected.length === 0) {
      return (
        <Box flexDirection="column">
          {swimStrip ?? sceneStrip}
          <Text bold>Connect Home Assistant first</Text>
          <Text wrap="wrap">
            This pane follows Claude's work through the Home Assistant MCP (@vortitron/home-assistant-mcp), and nothing
            connected in this session has its tools.
          </Text>
          <Box flexDirection="column" marginTop={1}>

function drawRow(T: ElementTable['Text'], row: Row, highlight: string | undefined) {
  if (row.isSection) {
    return (
      <T bold color="suggestion">
        {row.text.toUpperCase()}
      </T>
    )
  }
  const isStruck = row.change === '-' || row.tone === 'disabled'
  return (
    <T wrap="truncate-end" backgroundColor={highlight}>
      <T color={changeColour(row.change)}>{row.change === '-' ? '−' : row.change ?? ' '}</T>
      {'  '.repeat(row.depth)}
      <T color={toneColour(row.tone)}>{toneGlyph(row.tone)} </T>
      <T dimColor={row.tone === 'skipped' || row.tone === 'disabled'} strikethrough={isStruck}>
        {row.text}
      </T>
      {row.note ? <T dimColor>{`  ${row.note}`}</T> : null}
    </T>
  )
}