osceia-chat

1import { atom, read, update } from 'claude-code'
2import type { Register } from 'claude-code'
3
4// As cores da marca, as do site da OSCEIA; fixas, para a marca não mudar com o tema escolhido.
5const MARINHO = '#101840'
6const VERDE = '#00CA6A'
7const DOURADO = '#FBC26E'
8
9const isMarcaVisivel = atom({ plugin: 'osceia-chat', key: 'isMarcaVisivel' } as const, true)
10
11// Respiro no chat: uma linha em branco entre as mensagens, o texto recuado sob o marcador e a
12// mensagem da pessoa em bloco sombreado, como o Codex. Só desenho: a conversa guardada não muda.
13export const register: Register = on => {
14  on('session.start', async ($, e, next) => {
15    await $.command.register({
16      name: 'osceia-marca',
17      description: 'Mostra ou oculta a faixa da marca OSCEIA acima do prompt',
18    })
19    $.ui.status('OSCEIA')
20    $.ui.toast('OSCEIA Chat ativo · /osceia-marca oculta a faixa')
21
22    return next(e)
23  })
24
25  on('command.run', { command: 'osceia-marca' }, async $ => {
26    const isVisivel = await update($, isMarcaVisivel, atual => !atual)
27
28    return { text: isVisivel ? 'Faixa OSCEIA visível.' : 'Faixa OSCEIA oculta.' }
29  })
30
31  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
32    const abaixo = await next(e)
33
34    if (e.props.hasSurvey || !(await read($, isMarcaVisivel))) {
35      return abaixo
36    }
37    const { Box, Text } = $.ui.resolve(e)
38
39    return (
40      <Box flexDirection="column">
41        <Box>
42          <Text backgroundColor={MARINHO} color={VERDE} bold>
43            {' OSCEIA '}
44          </Text>
45          <Text color={DOURADO}> ▪ </Text>
46          <Text dimColor>chat</Text>
47        </Box>
48        {abaixo}
49      </Box>
50    )
51  })
52
53  on('ui.render', { component: 'AssistantMessage' }, async ($, e) => {
54    const { Box, Text, Markdown } = $.ui.resolve(e)
55    const { text, isFirstOfReply } = e.props
56
57    return (
58      <Box flexDirection="row" marginTop={isFirstOfReply ? 1 : 0} marginBottom={1} paddingRight={2}>
59        <Box width={3}>
60          <Text color="claude">{isFirstOfReply ? '●' : ' '}</Text>
61        </Box>
62        <Box flexGrow={1}>
63          <Markdown text={text} />
64        </Box>
65      </Box>
66    )
67  })
68
69  on('ui.render', { component: 'UserMessage' }, async ($, e, next) => {
70    // Notificações e mensagens de outros agentes ficam como o Claude Code as desenha.
71    if (e.props.origin.kind !== 'composer' || !e.props.isExpanded) {
72      return next(e)
73    }
74    const { Box, Text } = $.ui.resolve(e)
75
76    return (
77      <Box marginTop={1} marginBottom={1} paddingX={2} paddingY={1} backgroundColor="userMessageBackground">
78        <Text color="text">{e.props.text}</Text>
79      </Box>
80    )
81  })
82
83  on('ui.render', { component: 'ToolUse' }, async ($, e, next) => {
84    const drawn = await next(e)
85    const { Box } = $.ui.resolve(e)
86
87    return (
88      <Box marginTop={1} paddingLeft={3}>
89        {drawn}
90      </Box>
91    )
92  })
93}
94

1export type Marca = { isMarcaVisivel: boolean }
2
3declare module 'claude-code' {
4  interface PluginState {
5    'osceia-chat': { isMarcaVisivel: boolean }
6  }
7}
8