Function IDEDemo

web/src/components/IDEDemo.tsx:177–757

({ className }: IDEDemoProps)

const EXPAND_TERMINAL_DELAY = 500

export function IDEDemo({ className }: IDEDemoProps) {
  const [showIDE, setShowIDE] = useState(false)
  const [showOriginalTerminal, setShowOriginalTerminal] = useState(true)
  const [expandTerminal, setExpandTerminal] = useState(false)

  const [terminalLines, setTerminalLines] = useState<string[]>([])
  const [typingText, setTypingText] = useState('')
  const [isTyping, setIsTyping] = useState(false)
  const [isMobile, setIsMobile] = useState(false)
  const editorRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }

    checkMobile()

    window.addEventListener('resize', checkMobile)
    return () => window.removeEventListener('resize', checkMobile)
  }, [])

  useEffect(() => {
    const timeoutIds: NodeJS.Timeout[] = []

    // Step 1: Show the IDE
    const timer1 = setTimeout(() => {
      setShowIDE(true)
    }, SHOW_IDE_DELAY)
    timeoutIds.push(timer1)

    // Step 2: Hide the original terminal
    const timer2 = setTimeout(() => {
      setShowOriginalTerminal(false)
    }, SHOW_IDE_DELAY + HIDE_TERMINAL_DELAY)
    timeoutIds.push(timer2)

    // Step 3: Expand the terminal
    const timer3 = setTimeout(
      () => {
        setExpandTerminal(true)
      },
      SHOW_IDE_DELAY + HIDE_TERMINAL_DELAY + EXPAND_TERMINAL_DELAY,
    )
    timeoutIds.push(timer3)

    // Cleanup all timeouts on component unmount
    return () => {
      timeoutIds.forEach((id) => clearTimeout(id))
    }
  }, [])

  useEffect(() => {
    if (!showIDE) return

    const messages = [
      'Codebuff will read and write files in "/Users/me/projects/your-next-app". Type "help" for commands.',
      'Welcome back! What would you like to do?',