vome-esphome

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Code, Markdown } = $.ui.resolve(e)
    const current = (await $.state.get(build)).value ?? null
    const known = (await $.state.get(devices)).value ?? null
    const refusal = (await $.state.get(blocked)).value ?? null
    const isFxEnabled = (await $.state.get(fxOn)).value ?? true
    const view = (await $.state.get(config)).value ?? null
    const isFullLog = (await $.state.get(showLog)).value ?? false
    const siblingHint =
      !hasSibling && ((await $.state.get(sibling)).value ?? false) ? (
        <Box flexDirection="row" gap={2} marginTop={1}>
          <Text dimColor wrap="wrap">
            Working on automations too? The automation pane shows them, and their runs: <Text color="suggestion">{AUTOMATION_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
    const width = Math.max(20, e.props.bodyColumns)
    const rows = Math.max(6, (e.viewport?.rows ?? 30) - 14)

    const deviceRows = known && known.length > 0 ? (
      <Box flexDirection="column" marginTop={1}>
        <Text bold>Devices</Text>
        {known.map(d => {
          const isBehind = d.deployed !== null && d.current !== null && d.deployed !== d.current
          return (
            <Text wrap="truncate-end">
              <Text color={isBehind ? 'warning' : undefined}>{isBehind ? '↑ ' : '  '}</Text>
              {d.name}
              <Text dimColor>
                {'  '}
                {d.configuration}
                {d.deployed ? `  ${d.deployed}` : ''}
                {isBehind ? ` → ${d.current} available` : ''}
              </Text>
            </Text>
          )
        })}
      </Box>
    ) : null

    // Auto mode refuses a background read nobody asked for unless it is allowed by name.
    const help = refusal ? (
      <Box flexDirection="column" borderStyle="round" borderColor="warning" paddingX={1} marginTop={1}>
        <Text color="warning" wrap="wrap">
          Auto mode refused the pane's read of the build's progress or the device's YAML. Add these to permissions.allow
          in {settingsFile}, then the next build shows live:
        </Text>
        <Markdown text={`[${settingsFile}](file://${settingsFile})`} />
        <Code source={allowLines(refusal.server)} />
        <Box flexDirection="row" gap={2}>
          <Button key="copy-rule" hotkey="c" onPress={press => $.ui.copy({ text: allowLines(refusal.server), surface: press.surface })}>
            Copy the lines
          </Button>
          <Button
            key="retry"
            hotkey="r"
            onPress={async () => {
              // Allowed since? Try the reads again now rather than at the next build.
              await $.state.set(blocked, null)
              isUnsupported = false
              configAsked = null
              const running = (await $.state.get(build)).value ?? null
              if (running && running.command !== 'logs') void loadConfig($, refusal.server, running.configuration)
              void poll($)
            }}
          >
            Retry
          </Button>
        </Box>
      </Box>
    ) : null

    const map = view ? deviceMap($.ui.resolve(e), view) : null
    const isStage = e.surface === 'terminal' && isFxEnabled
    const things = view ? thingsOf(view) : []
    const stage = (state: Omit<ChipState, 'things' | 'hasWifi'>) => {
      if (e.surface !== 'terminal') return null
      const { Raster } = $.ui.resolve(e)
      const columns = Math.min(512, width)
      strip = { columns, state: { ...state, things, hasWifi: !!view?.rows.some(row => row.section === 'Network' && row.label === 'wifi') } }
      return <Raster key="chip" columns={columns} rows={STRIP_ROWS} cells={chipFrame(Date.now(), strip.state, columns)} />
    }

    if (!current) {
      if (!isStage) strip = null
      return (
        <Box flexDirection="column">
          {isStage
            ? stage({
                outcome: 'idle',
                scene: 'idle',
                percent: null,
                words: view ? `${view.name} · ${things.length || 'no'} thing${things.length === 1 ? '' : 's'} attached` : 'dreaming of devices…',
                endedAt: null,
              })
            : null}
          {map ?? (
            <Text dimColor wrap="wrap">
              Nothing building. When Claude reads, edits or builds an ESPHome device, its map shows here, and a build's
              progress as it runs.
            </Text>
          )}
          {deviceRows}
          {help}
          {siblingHint}
        </Box>
      )
    }

    const parsed = progressOf(current.lines, current.command)
    const progress = { ...parsed, uploadPercent: uploadShown(parsed, current) }
    const took = elapsed((current.finishedAt ?? Date.now()) - current.startedAt)
    const verb = { validate: 'Checking', compile: 'Compiling', upload: 'Flashing', logs: 'Logs from' }[current.command] ?? current.command
    const done = { validate: 'Valid', compile: 'Compiled', upload: 'Flashed', logs: 'Read the logs' }[current.command] ?? 'Done'
    const status =
      current.outcome === 'running'
        ? `${phaseWords(progress, current.command)} · ${took}`
        : current.outcome === 'ok'
          ? `✓ ${done} in ${took}`
          : `✗ Failed after ${took}`
    const isUploading = current.outcome === 'running' && progress.uploadPercent !== null
    const isCompiling = current.outcome === 'running' && !isUploading && progress.compilePercent !== null
    const kept = current.lines.filter(line => current.command === 'logs' || kindOf(line) !== 'debug')
    // The latest couple of lines unless asked for all; a failure keeps a few more, where it explains itself.
    const tail = isFullLog || current.command === 'logs' ? kept.slice(-rows) : kept.slice(current.outcome === 'failed' ? -6 : -LOG_LINES)

    // The chip on the bench: a Raster, which only the terminal draws. Not for a logs read.
    let chip = null
    if (isStage) {
      // The scene follows the build, not the command: a flash compiles first, then uploads.
      const isUploadPhase = current.command === 'upload' && (progress.uploadPercent !== null || progress.phase === 'uploading')
      const scene: Scene =
        current.command === 'logs' ? 'logs' : current.command === 'validate' ? 'validate' : isUploadPhase ? 'upload' : 'compile'
      const words =
        current.outcome === 'running'
          ? `${scene === 'upload' ? 'flashing' : scene === 'validate' ? 'checking' : scene === 'logs' ? 'listening to' : 'compiling'} ${current.configuration}${(scene === 'upload' ? progress.uploadPercent : progress.compilePercent) !== null && scene !== 'logs' ? ` · ${scene === 'upload' ? progress.uploadPercent : progress.compilePercent}%` : ''}`
          : current.outcome === 'ok'
            ? `✓ ${current.configuration} ${done.toLowerCase()}`
            : `✗ ${current.configuration} failed`
      chip = stage({
        outcome: current.outcome,
        scene,
        percent: scene === 'upload' ? progress.uploadPercent : progress.compilePercent,
        words,
        endedAt: current.finishedAt,
      })
    } else {
      strip = null
    }