Function TerminalDemo

web/src/components/TerminalDemo.tsx:300–1075

()

}

const TerminalDemo = () => {
  const [terminalLines, setTerminalLines] = useState<React.ReactNode[]>([
    <TerminalOutput key="welcome">
      <span className="text-green-400 font-bold">Codebuff CLI v1.5.0</span>
      <p>Interactive coding assistant that understands your entire codebase.</p>
      <p>
        Working directory:{' '}
        <span className="text-blue-400">/my-demo-project</span>
      </p>
      <p>
        Type <span className="text-yellow-400 font-bold">"help"</span> for a
        list of commands or try a natural language request.
      </p>
    </TerminalOutput>,
  ])
  const [previewContent, setPreviewContent] =
    useState<string>(`<div style="padding: 16px; border-radius: 8px;">
      <h1 class="text-xl font-bold">👋 Welcome to the Codebuff Demo!</h1>
      <p class="dim" style="margin-top: 16px;">Try these example prompts in the terminal:</p>
      <div style="margin: 16px 0; padding: 16px; background: rgba(59,130,246,0.1); border-radius: 8px;">
        <p>🚀 <b>"Optimize performance"</b> - Speed up your application</p>
        <p>🔄 <b>"Refactor auth flow"</b> - Improve code architecture</p>
        <p>🌙 <b>"Add dark mode"</b> - Implement new feature</p>
        <p>🐛 <b>"Fix memory leak"</b> - Resolve coding issues</p>
      </div>
      <p class="dim">Type <b>"help"</b> to see all available commands!</p>
      <div style="margin-top: 16px; padding: 8px; background: rgba(74,222,128,0.1); border-radius: 4px; border-left: 3px solid rgba(74,222,128,0.5);">
        <p style="font-style: italic; font-size: 0.9em;">This is just a demo. Install Codebuff to experience the full capabilities with your own projects!</p>
      </div>`)
  const [showError, setShowError] = useState(FIX_BUG_FLAG)

  const isRainbow = false
  const [previewTheme, setPreviewTheme] = useState<PreviewTheme>('default')
  const [messages, setMessages] = useState<string[]>([])
  const [autoTypeIndex, setAutoTypeIndex] = useState(0)
  const [isAutoTyping, setIsAutoTyping] = useState(false)
  const exampleCommands = useRef([
    'optimize performance',
    'fix memory leak',
    'refactor auth flow',
  ])
  const terminalRef = useRef<HTMLDivElement>(null)

  const demoMutation = useMutation<DemoResponse, Error, string>({
    mutationFn: async (input: string) => {
      const response = await fetch('/api/demo', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          prompt: [...messages, input],
        }),
      })

      if (!response.ok) {
        const error = await response.json()
        if (response.status === 429) {
          throw new Error('Rate limit exceeded. Please try again in a minute.')
        }