browse

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    if (e.surface !== 'terminal') {
      const { Box, Button, Text } = $.ui.resolve(e)
      return (
        <Box flexDirection="column">
          <Text>The browser pane draws only in Claude Code's terminal.</Text>
          <Text dimColor>Open this session in a terminal to see the page; kitty or Ghostty show real pixels.</Text>
          <Button key="close" label="Close" onPress={() => closePane($)} />
        </Box>
      )
    }
    const { Box, Button, Client, Image, Input, Raster, Text } = $.ui.resolve(e)
    // Drawn from what this process kept after a /clear; the host gets it back off the render.
    if (!(await read($, seeded))) $.clock.after(0, () => void reseed($).catch(() => {}))
    const { status: now, message: why, page: shown, renderer: drawAs } = await read($, snapshot)
    const columns = e.props.bodyColumns
    const rows = e.props.scroll.bodyRows - HEADER_ROWS
    // No page yet: Chrome's blank page draws near-black, so the pane shows a
    // start page instead, and the address bar holds the keys from the start.
    const isBlank = shown.url === '' || shown.url === 'about:blank'

    const toolbar = (
      <Box flexDirection="row" gap={1}>
        <Button key="back" label="‹" onPress={() => call($, '/back')} />
        <Button key="forward" label="›" onPress={() => call($, '/forward')} />
        <Button key="reload" label="↻" onPress={() => call($, '/reload')} />
        <Box flexGrow={1}>
          <Input
            key="address"
            placeholder="address or search"
            value={isBlank ? '' : shown.url}
            autoFocus={isBlank ? true : undefined}
            submitLabel="go"
            onSubmit={value => go($, options, toUrl(value))}
          />
        </Box>
      </Box>
    )

    let line
    if (now === 'starting') line = <Text dimColor>Starting Chrome…</Text>
    else if (now === 'ready' && why !== null) line = <Text color="yellow" wrap="truncate-end">{why}</Text>
    else if (now === 'ready' && shown.url !== '' && shown.url !== 'about:blank') {
      line = (
        <Text wrap="truncate-end">
          <Text bold>{shown.title || shown.url}</Text>
          <Text dimColor>{`  ${shown.url}`}</Text>
        </Text>
      )
    } else if (isBlank) line = <Text dimColor wrap="truncate-end">Esc gives the keys back to the prompt.</Text>
    else line = <Text dimColor wrap="truncate-end">Click the page to type into it; Esc gives the keys back.</Text>

    let body
    if (now === 'error') {
      view = null
      body = (
        <Box flexDirection="column">
          <Text color="red">{why ?? 'The browser stopped.'}</Text>
          <Text dimColor>{NEEDS}</Text>
          <Button key="retry" label="Try again" variant="primary" onPress={() => go($, options, shown.url || null)} />
        </Box>
      )
    } else if (now === 'idle') {
      view = null
      body = (
        <Box flexDirection="column">
          <Text dimColor>The browser is stopped.</Text>
          <Button key="start" label="Start" variant="primary" onPress={() => go($, options, shown.url || null)} />
        </Box>
      )
    } else if (isBlank) {
      view = null
      body = (
        <Box flexDirection="column" paddingTop={1} gap={1}>
          <Text bold>Where to?</Text>
          <Text dimColor wrap="wrap">Type an address or a search into the bar above and press Enter, or pick one:</Text>
          <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
            {START_PAGES.map(([name, url]) => (
              <Button key={`start:${name}`} label={name} onPress={() => go($, options, url)} />
            ))}
          </Box>
        </Box>
      )
    } else if (columns < MIN_COLUMNS || rows < MIN_VIEW_ROWS) {
      view = null
      body = <Text dimColor>{`Make the pane bigger to see the page (at least ${MIN_COLUMNS}×${MIN_VIEW_ROWS + HEADER_ROWS}).`}</Text>
    } else {
      view = { columns, rows, renderer: drawAs }
      const fits = frame !== null && frame.columns === columns && frame.rows === rows
      const picture =
        drawAs === 'image' ? (
          <Image
            key="view"
            columns={columns}
            rows={rows}
            alt="This terminal cannot show images: set Picture to blocks in /config."
            source={fits && frame?.type === 'image' ? { file: frame.file, format: 'png', generation: frame.generation } : BLANK_PIXEL}
          />
        ) : (
          <Raster key="view" columns={columns} rows={rows} cells={fits && frame?.type === 'cells' ? frame.cells : blankCells(columns, rows)} />
        )
      body = (
        <Box width={columns} height={rows}>
          {picture}
          <Box position="absolute" top={0} left={0}>
            <Client key="pointer" module="./pointer.tsx" width={columns} height={rows} />
          </Box>
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
        {toolbar}
        {line}
        {body}
      </Box>
    )
  })