credential-paster

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    if (e.surface === 'mobile') {
      const { Text } = $.ui.resolve(e)
      return <Text>Paste the secret on your computer: the mobile app has no input field.</Text>
    }
    const { Box, Text, Input, Button } = $.ui.resolve(e)
    const r = await read($, request)
    const count = await read($, typed)
    const problem = await read($, error)

    if (!r) {
      return <Text dimColor>No secret requested.</Text>
    }

    return (
      <Box flexDirection="column">
        <Text>
          Paste <Text bold>{describe(r)}</Text>
          <Text dimColor> · hidden from Claude, written directly to the file</Text>
        </Text>
        <Input
          key="secret"
          label="Secret"
          placeholder="paste here, then Enter"
          value={BULLET.repeat(count)}
          submitLabel="save"
          autoFocus
          onInput={value => {
            applyEdit(value)
            void update($, typed, () => secret.length)
            void update($, error, () => null)
          }}
          onSubmit={value => {
            applyEdit(value)
            void save($)
          }}
        />
        <Box>
          <Button key="save" label="Save" variant="primary" onPress={() => void save($)} />
          <Text> </Text>
          <Button key="cancel" label="Cancel" role="dismiss" onPress={async () => { await cancel($, true); await $.ui.close({ id: PANE }) }} />
        </Box>
        {problem && <Text color="red">{problem}</Text>}
      </Box>
    )
  })