env

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.surface !== 'terminal' && e.surface !== 'desktop') return next(e)
    if (e.props.hasSurvey || !(await read($, isWaiting))) return next(e)
    const asked = await read($, request)
    if (!asked) return next(e)
    // isWaiting trails the surface by up to a poll; ask the surface itself
    // so the card leaves the moment the pane is placed
    const pane = (await $.ui.panes()).find(p => p.id === PANE)
    if (!pane || pane.isPlaced) return next(e)
    return requestCard($, $.ui.resolve(e), asked, 'band')
  })

async function requestCard($: Engine, ui: ElementTable<'terminal' | 'desktop'>, asked: EnvRequest, where: 'pane' | 'band') {
  const { Box, Text, Button, Input, Markdown } = ui
  const pasted = await read($, fit)
  return (
    <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1} marginBottom={where === 'pane' ? 1 : 0}>
      <Text bold color="yellow">
        Claude needs a value
      </Text>
      <Box gap={1} marginTop={1}>
        <Text bold>{asked.key}</Text>
        <Text dimColor>→ {asked.file}</Text>
      </Box>
      {asked.reason !== '' && <Text wrap="wrap">{asked.reason}</Text>}

      {asked.steps.length > 0 && (
        <Box flexDirection="column" marginTop={1}>
          {asked.steps.map((step, i) => (
            <Box key={`step:${i}`} gap={1}>
              <Text bold color="yellow">
                {String(i + 1)}.
              </Text>
              <Text wrap="wrap">{step}</Text>
            </Box>
          ))}
        </Box>
      )}

      {asked.url && (
        <Box gap={1} marginTop={1}>
          <Markdown text={`[${asked.url}](${asked.url})`} />
          <Button
            key="copy-url"
            label="copy link"
            plain
            dimColor
            onPress={press => void $.ui.copy({ text: asked.url ?? '', surface: press.surface })}
          />
        </Box>
      )}
      {asked.format && <Text dimColor>Looks like: {asked.format}</Text>}

      <Box marginTop={1}>
        <Input
          key="request"
          label="Paste ▸ "
          placeholder={`${asked.key}, then Enter`}
          submitLabel="save"
          autoFocus
          onInput={value => void update($, fit, () => fitOf(value, asked.pattern))}
          onSubmit={value => void store($, asked.file, asked.key, value.trim())}
        />
      </Box>
      {pasted === 'ok' && <Text color="green">✓ looks right</Text>}
      {pasted === 'off' && <Text color="red">✗ doesn't look like {asked.format ?? 'the expected format'}; Enter still saves</Text>}
      <Box gap={1} marginTop={1}>
        <Button key="skip" label="skip for now" plain dimColor onPress={() => void abandon($, 'skipped')} />
        {where === 'band' && (
          <Button
            key="open-pane"
            label="open /env pane"
            plain
            dimColor
            onPress={async () => {
              const opened = await $.ui.open({ id: PANE, title: 'env', focus: true })
              await update($, isWaiting, () => !opened.isPlaced)
            }}
          />
        )}
      </Box>
      {where === 'band' && <Text dimColor>Click the field or press ctrl+x tab to paste.</Text>}
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    if (e.surface !== 'terminal' && e.surface !== 'desktop') {
      const { Text } = $.ui.resolve(e)
      return <Text>Open a terminal or the desktop app to edit env files.</Text>
    }
    const ui = $.ui.resolve(e)
    const { Box, Text, Button, Input } = ui

    await read($, rev)
    const names = await read($, files)
    const file = await read($, active)
    const edit = await read($, editing)
    const shown = await read($, revealed)
    const asked = await read($, request)
    const pending = await read($, confirm)
    const note = await read($, flash)

    const lines = file ? await load($, file) : []
    const list = env.entries(lines)
    const template = names.find(env.isTemplate)
    const isTemplate = env.isTemplate(file)
    const missing =
      template && !isTemplate
        ? env.entries(await load($, template)).map(entry => entry.key).filter(key => !list.some(entry => entry.key === key))
        : []
    const isUnignored = file !== '' && !isTemplate && !(await isIgnored($, file))
    const keyWidth = Math.min(32, Math.max(8, ...list.map(entry => entry.key.length)) + 2)

    const say = (text: string | null) => update($, flash, () => text)

    const card = asked && (await requestCard($, ui, asked, 'pane'))

    const valueEditor = (key: string) => (
      <Box flexDirection="column" marginBottom={1}>
        <Input
          key="value"
          label={`${key} = `}
          placeholder="paste the value, Enter saves"
          submitLabel="save"
          autoFocus
          onSubmit={value => void store($, file, key, value)}
        />
        <Box gap={1}>
          <Button key="gen" label="generate random" onPress={() => void store($, file, key, env.randomSecret(32, 'base64url'))} />
          <Button key="cancel" label="cancel" onPress={() => void update($, editing, () => null)} />
        </Box>
      </Box>
    )

    const row = (entry: env.Entry) => {
      const k = entry.key
      if (edit && edit.file === file && edit.key === k) return valueEditor(k)
      const isShown = shown === `${file}:${k}`
      return (
        <Box key={`row:${k}`} gap={1}>
          <Box width={keyWidth} flexShrink={0}>
            <Text bold wrap="truncate">{k}</Text>
          </Box>
          <Box flexGrow={1}>
            <Text dimColor={!isShown} wrap="truncate">{isShown ? entry.value || '(empty)' : env.shape(entry.value, true)}</Text>
          </Box>
          <Button
            key={`copy:${k}`}
            label="copy"
            plain
            onPress={async press => {
              const { isCopied } = await $.ui.copy({ text: entry.value, surface: press.surface })
              await say(isCopied ? `Copied ${k}` : `Could not copy ${k}`)
            }}
          />
          <Button key={`edit:${k}`} label="edit" plain onPress={() => void update($, editing, () => ({ file, key: k }))} />
          <Button
            key={`show:${k}`}
            label={isShown ? 'hide' : 'show'}
            plain
            onPress={() => void update($, revealed, now => (now === `${file}:${k}` ? null : `${file}:${k}`))}
          />
          {pending === `${file}:${k}` ? (
            <Button
              key={`really:${k}`}
              label="really delete?"
              variant="primary"
              onPress={async () => {
                await save($, file, env.remove(await load($, file), k))
                await update($, confirm, () => null)
                await say(`Deleted ${k} from ${file}`)
              }}
            />
          ) : (
            <Button key={`del:${k}`} label="del" plain dimColor onPress={() => void update($, confirm, () => `${file}:${k}`)} />
          )}
        </Box>
      )
    }

    const isNewKey = edit !== null && edit.file === file && edit.key !== null && !list.some(entry => entry.key === edit.key)

    return (
      <Box flexDirection="column">
        {card}

        <Box gap={1} flexWrap="wrap" marginBottom={1}>
          {names.map(name => (
            <Button
              key={`file:${name}`}
              label={name}
              variant={name === file ? 'primary' : undefined}
              dimColor={name !== file}
              onPress={() => void update($, active, () => name)}
            />
          ))}
          {!names.includes('.env.local') && (
            <Button key="create" label="+ .env.local" plain dimColor onPress={() => void save($, '.env.local', [])} />
          )}
        </Box>

        {isUnignored && <Text color="red">{file} is not in .gitignore</Text>}
        {note && <Text dimColor>{note}</Text>}
        {names.length === 0 && <Text dimColor>No .env files in the project root yet.</Text>}

        {list.map(row)}
        {isNewKey && edit?.key && valueEditor(edit.key)}

        {edit && edit.file === file && edit.key === null ? (
          <Input
            key="name"
            label="New key: "
            placeholder="NAME, Enter to continue"
            autoFocus
            onSubmit={name => {
              const key = name.trim()
              if (KEY_NAME.test(key)) void update($, editing, () => ({ file, key }))
              else void say(`"${key}" is not a valid key name`)
            }}
          />
        ) : (
          file !== '' && <Button key="add" label="+ add key" plain onPress={() => void update($, editing, () => ({ file, key: null }))} />
        )}

        {missing.length > 0 && (
          <Box flexDirection="column" marginTop={1}>
            <Text dimColor>Missing compared with {template}:</Text>
            <Box gap={1} flexWrap="wrap">
              {missing.map(key => (
                <Button key={`fill:${key}`} label={key} plain dimColor onPress={() => void update($, editing, () => ({ file, key }))} />
              ))}
            </Box>
          </Box>
        )}
      </Box>
    )
  })