MockTerminal

Simula terminal com comandos, outputs coloridos e efeito de digitação. Ideal para demos de CLI e agentes.

Visão Geral

O MockTerminal reproduz um terminal de linha de comando com barra de título macOS, comandos com prompt, e outputs coloridos por tipo. Perfeito para demonstrar a CLI da kodda ou logs de agentes.

Importação

import {
  MockTerminal,
  demoTerminalLines,
  demoAgentLines
} from '@/components/linear/mock-terminal'

Props

Prop	Tipo	Default	Descrição
`title`	`string`	`'Terminal'`	Título na barra
`lines`	`TerminalLine[]`	—	Linhas do terminal
`showControls`	`boolean`	`true`	Botões vermelho/amarelo/verde
`animate`	`boolean`	`false`	Animação de digitação
`className`	`string`	—	Classes adicionais

TerminalLine

interface TerminalLine {
  type: 'command' | 'output' | 'success' | 'error' | 'info' | 'thinking';
  content: string;
  prefix?: string;  // Override do prefixo padrão
}

Uso Básico

<MockTerminal
  lines={demoTerminalLines}
  className="h-64"
/>

Dados de Demo

CLI kodda

export const demoTerminalLines: TerminalLine[] = [
  { type: 'command', content: 'npx @koddaai/ui init' },
  { type: 'output', content: '' },
  { type: 'info', content: 'Inicializando kodda UI...' },
  { type: 'success', content: 'Criado kodda.json' },
  { type: 'success', content: 'Criado src/components/kodda/' },
  { type: 'output', content: '' },
  { type: 'command', content: 'npx @koddaai/ui add data-table' },
  { type: 'thinking', content: 'Resolvendo dependências...' },
  { type: 'success', content: 'Instalado status-badge' },
  { type: 'success', content: 'Instalado filter-bar' },
  { type: 'success', content: 'Instalado data-table' },
  { type: 'output', content: '' },
  { type: 'info', content: 'Pronto! 3 componentes instalados.' },
]

Agente Coding

export const demoAgentLines: TerminalLine[] = [
  { type: 'output', content: 'Entendido! Recebi sua solicitação.' },
  { type: 'info', content: 'Iniciando tarefa no ambiente kodda/kodda-site.' },
  { type: 'output', content: '' },
  { type: 'output', content: 'Buscando arquivo AGENTS na raiz' },
  { type: 'command', content: 'rg --files -g \'AGENTS.md\'', prefix: 'kodda/kodda-site$ ' },
  { type: 'success', content: 'AGENTS.md' },
  { type: 'output', content: '' },
  { type: 'thinking', content: 'Pensando...' },
]

Tipos de Linha

Tipo	Prefixo	Cor	Uso
`command`	`$`	Branco (prefixo primary)	Comandos digitados
`output`	—	Cinza muted	Output genérico
`success`	`✓`	Verde	Operação bem-sucedida
`error`	`✗`	Vermelho	Erro
`info`	`ℹ`	Azul	Informação
`thinking`	`⋯`	Cinza itálico	Processando

Prefixo Customizado

Override o prefixo padrão:

{
  type: 'command',
  content: 'git status',
  prefix: 'user@server:~/projeto$ ',  // Prefixo customizado
}

Visual

Barra de Título

Background: #141414
Botões macOS (vermelho, amarelo, verde)
Título em mono pequeno

Área de Conteúdo

Background: #0a0a0a
Fonte mono
Linhas com whitespace-pre-wrap

Exemplo Customizado

import { MockTerminal } from '@/components/linear/mock-terminal'

const myLines = [
  { type: 'command' as const, content: 'npm run build' },
  { type: 'output' as const, content: '' },
  { type: 'info' as const, content: 'Creating optimized build...' },
  { type: 'success' as const, content: 'Compiled successfully!' },
  { type: 'output' as const, content: '' },
  { type: 'output' as const, content: 'Build size: 245 kB' },
  { type: 'success' as const, content: 'Done in 12.4s' },
]

export function Demo() {
  return (
    <MockTerminal
      title="~/projeto"
      lines={myLines}
      className="h-48"
    />
  )
}

Sem Controles

Para embed em contextos onde os botões macOS não fazem sentido:

<MockTerminal
  lines={lines}
  showControls={false}
/>

Com BentoCard

<BentoCard
  title="CLI kodda"
  description="Instale componentes com um comando"
  number="FIG 0.4"
>
  <MockTerminal
    lines={demoTerminalLines}
    className="h-48"
  />
</BentoCard>

On this page