Consistently blank output screen

In my project after a certain version, no matter what I asked to do, the output remains a blank white screen. In v25 I have working code. In v26 and on, no matter how many troubleshooting attempts, it is blank. If I return to the working version and modify the request, same thing. Blank. I have forked the working version and asked for a change. Again: Blank. I have taken the working version and a broken version, plugged them into chatGPT o1 to compare and identify the issues. I provided v0 with the output to address issues noted to fix the blank output.

So the current behavior is everything renders. When I ask it to update pattern recognition to put certain characters into tokens nothing renders. Below is one iteration that is broke. Below that is the link to see it all.

v26 does not work:

'use client'

import { useState, useEffect, useMemo, useCallback } from 'react'
import { Search, ChevronDown, ChevronRight, Undo2, Redo2, Zap, X, Copy, Anchor, Merge } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface MenuItem {
  id: string
  title: string
  subItems: { id: string; title: string; pattern: string }[]
}

interface Token {
  text: string
  pattern: string
  originalText: string
  originalPattern: string
  isDragDropped: boolean
  isChangedByGrokIt: boolean
  isSelected: boolean
}

interface PatternGroup {
  [key: string]: string[]
}

const patternGroups: PatternGroup = {
  "DATE": ["DATE", "ISO8601_TIMESTAMP", "TOMCAT_DATESTAMP", "APACHE_DATESTAMP", "CISCOTIMESTAMP", "HTTPDATE"],
  "ISO8601_TIMESTAMP": ["DATE", "ISO8601_TIMESTAMP", "TOMCAT_DATESTAMP", "APACHE_DATESTAMP", "CISCOTIMESTAMP", "HTTPDATE"],
  "TOMCAT_DATESTAMP": ["DATE", "ISO8601_TIMESTAMP", "TOMCAT_DATESTAMP", "APACHE_DATESTAMP", "CISCOTIMESTAMP", "HTTPDATE"],
  "APACHE_DATESTAMP": ["DATE", "ISO8601_TIMESTAMP", "TOMCAT_DATESTAMP", "APACHE_DATESTAMP", "CISCOTIMESTAMP", "HTTPDATE"],
  "CISCOTIMESTAMP": ["DATE", "ISO8601_TIMESTAMP", "TOMCAT_DATESTAMP", "APACHE_DATESTAMP", "CISCOTIMESTAMP", "HTTPDATE"],
  "HTTPDATE": ["DATE", "ISO8601_TIMESTAMP", "TOMCAT_DATESTAMP", "APACHE_DATESTAMP", "CISCOTIMESTAMP", "HTTPDATE"],
  "IP": ["IP", "IPV4", "IPV6", "HOSTNAME", "IPORHOST", "HOSTPORT"],
  "IPV4": ["IP", "IPV4", "IPV6", "HOSTNAME", "IPORHOST", "HOSTPORT"],
  "IPV6": ["IP", "IPV4", "IPV6", "HOSTNAME", "IPORHOST", "HOSTPORT"],
  "HOSTNAME": ["IP", "IPV4", "IPV6", "HOSTNAME", "IPORHOST", "HOSTPORT"],
  "IPORHOST": ["IP", "IPV4", "IPV6", "HOSTNAME", "IPORHOST", "HOSTPORT"],
  "HOSTPORT": ["IP", "IPV4", "IPV6", "HOSTNAME", "IPORHOST", "HOSTPORT"],
  "MAC": ["MAC", "CISCOMAC", "WINDOWSMAC", "COMMONMAC", "MACADDR"],
  "CISCOMAC": ["MAC", "CISCOMAC", "WINDOWSMAC", "COMMONMAC", "MACADDR"],
  "WINDOWSMAC": ["MAC", "CISCOMAC", "WINDOWSMAC", "COMMONMAC", "MACADDR"],
  "COMMONMAC": ["MAC", "CISCOMAC", "WINDOWSMAC", "COMMONMAC", "MACADDR"],
  "MACADDR": ["MAC", "CISCOMAC", "WINDOWSMAC", "COMMONMAC", "MACADDR"],
  "INT": ["NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG", "DATA", "GREEDYDATA"],
  "NUMBER": ["NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG", "DATA", "GREEDYDATA"],
  "BASE10NUM": ["NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG", "DATA", "GREEDYDATA"],
  "POSINT": ["NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG", "DATA", "GREEDYDATA"],
  "NONNEGINT": ["NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG", "DATA", "GREEDYDATA"],
  "FLOAT": ["NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG", "DATA", "GREEDYDATA"],
  "LONG": ["NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG", "DATA", "GREEDYDATA"],
  "DATA": ["DATA", "GREEDYDATA", "WORD", "EMAIL", "UUID", "NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG"],
  "GREEDYDATA": ["DATA", "GREEDYDATA", "WORD", "EMAIL", "UUID", "NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG"],
  "WORD": ["DATA", "GREEDYDATA", "WORD", "EMAIL", "UUID", "NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG"],
  "EMAIL": ["DATA", "GREEDYDATA", "WORD", "EMAIL", "UUID", "NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG"],
  "UUID": ["DATA", "GREEDYDATA", "WORD", "EMAIL", "UUID", "NUMBER", "BASE10NUM", "INT", "POSINT", "NONNEGINT", "FLOAT", "LONG"]
}

export default function Home() {
  const [menuItems, setMenuItems] = useState<MenuItem[]>([])
  const [tokens, setTokens] = useState<Token[]>([])
  const [inputText, setInputText] = useState('')
  const [searchTerm, setSearchTerm] = useState('')
  const [openMenuItem, setOpenMenuItem] = useState<string | null>(null)
  const [history, setHistory] = useState<Token[][]>([])
  const [historyIndex, setHistoryIndex] = useState(-1)
  const [allPatterns, setAllPatterns] = useState<{[key: string]: string}>({})
  const [grokText, setGrokText] = useState('')
  const [originalGrokText, setOriginalGrokText] = useState('')
  const [isGrokDialogOpen, setIsGrokDialogOpen] = useState(false)
  const [isAnchored, setIsAnchored] = useState(false)
  const [isCopied, setIsCopied] = useState(false)

  useEffect(() => {
    fetch('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/patterns.json-yHmNwPKPV9DQW1MYrapZJx2qK4tZ3u.json')
      .then(response => response.json())
      .then(data => {
        const items: MenuItem[] = Object.entries(data).map(([key, value]) => ({
          id: key,
          title: key,
          subItems: (value as any[]).map((item, index) => ({
            id: `${key}-${index}`,
            title: item.name,
            pattern: item.pattern
          }))
        }))
        setMenuItems(items)

        const patterns: {[key: string]: string} = {}
        items.forEach(item => {
          item.subItems.forEach(subItem => {
            patterns[subItem.title] = subItem.pattern
          })
        })
        setAllPatterns(patterns)
      })
      .catch(error => console.error('Error loading patterns:', error))
  }, [])

  const filteredMenuItems = useMemo(() => {
    if (!searchTerm) return menuItems

    return menuItems.map(item => {
      const matchingSubItems = item.subItems.filter(subItem =>
        subItem.title.toLowerCase().includes(searchTerm.toLowerCase())
      )

      if (item.title.toLowerCase().includes(searchTerm.toLowerCase()) || matchingSubItems.length > 0) {
        return {
          ...item,
          subItems: matchingSubItems
        }
      }

      return null
    }).filter(Boolean) as MenuItem[]
  }, [menuItems, searchTerm])

  const tokenize = (text: string) => {
    const newTokens: Token[] = []
    let currentToken = ''
    let isInQuotes = false
    let quoteChar = ''

    for (let i = 0; i < text.length; i++) {
      const char = text[i]
      const specialChars = '()[]{}<>\'"'

      if (isInQuotes) {
        if (char === quoteChar) {
          newTokens.push(createToken(currentToken + char))
          currentToken = ''
          isInQuotes = false
          quoteChar = ''
        } else {
          currentToken += char
        }
      } else if (char === '"' || char === "'") {
        if (currentToken) {
          newTokens.push(createToken(currentToken))
          currentToken = ''
        }
        isInQuotes = true
        quoteChar = char
        currentToken = char
      } else if (specialChars.includes(char)) {
        if (currentToken) {
          newTokens.push(createToken(currentToken))
          currentToken = ''
        }
        newTokens.push(createToken(char))
      } else {
        currentToken += char
      }
    }

    if (currentToken) {
      newTokens.push(createToken(currentToken))
    }

    return newTokens
  }

  const createToken = (text: string): Token => {
    const matchedPattern = Object.entries(allPatterns).find(([_, pattern]) => 
      new RegExp(`^${pattern}$`).test(text)
    )

    return {
      text,
      pattern: matchedPattern ? `%{${matchedPattern[0]}}` : '',
      originalText: text,
      originalPattern: matchedPattern ? `%{${matchedPattern[0]}}` : '',
      isDragDropped: false,
      isChangedByGrokIt: false,
      isSelected: false
    }
  }

  const handleTokenize = () => {
    const newTokens = tokenize(inputText)
    setTokens(newTokens)
    setHistory([...history.slice(0, historyIndex + 1), newTokens])
    setHistoryIndex(historyIndex + 1)
  }

  const handleUndo = () => {
    if (historyIndex > 0) {
      setHistoryIndex(historyIndex - 1)
      setTokens(history[historyIndex - 1])
    }
  }

  const handleRedo = () => {
    if (historyIndex < history.length - 1) {
      setHistoryIndex(historyIndex + 1)
      setTokens(history[historyIndex + 1])
    }
  }

  const escapeRegexChars = (str: string) => {
    return str.replace(/[[\](){}?.+*^$\\|"']/g, '\\$&')
  }

  const handleGrokIt = () => {
    const grokPattern = tokens.map(token => {
      if (token.pattern) {
        // Don't escape characters inside Grok patterns (e.g., %{PATTERN:field})
        return token.pattern
      } else {
        // Escape special regex characters in non-pattern text
        return escapeRegexChars(token.text)
      }
    }).join('')
    setGrokText(grokPattern)
    setOriginalGrokText(grokPattern)
    setIsGrokDialogOpen(true)
  }

  const handleClear = () => {
    setInputText('')
    setTokens([])
    setHistory([])
    setHistoryIndex(-1)
  }

  const handleDragStart = (e: React.DragEvent, pattern: string) => {
    e.dataTransfer.setData('text/plain', pattern)
  }

  const handleDrop = (e: React.DragEvent, index: number) => {
    e.preventDefault()
    const droppedPattern = e.dataTransfer.getData('text/plain')
    const newTokens = [...tokens]
    newTokens[index] = { 
      ...newTokens[index], 
      pattern: droppedPattern,
      text: droppedPattern,
      isDragDropped: true,
      isChangedByGrokIt: false
    }
    setTokens(newTokens)
    setHistory([...history.slice(0, historyIndex + 1), newTokens])
    setHistoryIndex(historyIndex + 1)
  }

  const getAlternativePatterns = useCallback((currentPattern: string) => {
    const patternMatch = currentPattern.match(/%\{([^:}]+)(?::([^}]+))?\}/)
    if (patternMatch) {
      const patternName = patternMatch[1]
      return patternGroups[patternName] || []
    }
    return []
  }, [])

  const handlePatternChange = (index: number, newPatternName: string) => {
    const newTokens = [...tokens]
    const currentToken = newTokens[index]
    const patternRegex = /%\{([^:}]+)(?::([^}]+))?\}/
    const match = currentToken.pattern.match(patternRegex)
    
    if (match) {
      const newPattern = currentToken.pattern.replace(patternRegex, (_, oldPattern, field) => {
        return `%{${newPatternName}${field ? ':' + field : ''}}`
      })
      newTokens[index] = { 
        ...currentToken,
        pattern: newPattern,
        text: newPattern,
        isDragDropped: true,
        isChangedByGrokIt: false
      }
      setTokens(newTokens)
      setHistory([...history.slice(0, historyIndex + 1), newTokens])
      setHistoryIndex(historyIndex + 1)
    }
  }

  const handleApplyGrokChanges = () => {
    const newTokens = tokenize(grokText)
    const updatedTokens = newTokens.map((token, index) => {
      const oldToken = tokens[index]
      const isChanged = token.text !== oldToken?.text || token.pattern !== oldToken?.pattern
      return {
        ...token,
        originalText: oldToken?.originalText || token.text,
        originalPattern: oldToken?.originalPattern || token.pattern,
        isDragDropped: false,
        isChangedByGrokIt: isChanged,
        isSelected: false
      }
    })
    setTokens(updatedTokens)
    setHistory([...history.slice(0, historyIndex + 1), updatedTokens])
    setHistoryIndex(historyIndex + 1)
    setIsGrokDialogOpen(false)
  }

  const handleCopyGrokText = () => {
    navigator.clipboard.writeText(grokText)
    setIsCopied(true)
    setTimeout(() => setIsCopied(false), 2000)
  }

  const handleToggleAnchors = () => {
    setIsAnchored(!isAnchored)
    if (!isAnchored) {
      setGrokText(`^${grokText}$`)
    } else {
      setGrokText(grokText.replace(/^\^|\$$/g, ''))
    }
  }

  const handleDoubleClick = (index: number) => {
    const newTokens = [...tokens]
    newTokens[index] = { 
      ...newTokens[index], 
      text: newTokens[index].originalText,
      pattern: newTokens[index].originalPattern,
      isDragDropped: false,
      isChangedByGrokIt: false,
      isSelected: false
    }
    setTokens(newTokens)
    setHistory([...history.slice(0, historyIndex + 1), newTokens])
    setHistoryIndex(historyIndex + 1)
  }

  const handleTokenClick = (index: number) => {
    const newTokens = tokens.map((token, i) => ({
      ...token,
      isSelected: i === index ? !token.isSelected : token.isSelected
    }))
    setTokens(newTokens)
  }

  const handleAppendTokens = () => {
    const selectedIndices = tokens.reduce((acc, token, index) => {
      if (token.isSelected) acc.push(index)
      return acc
    }, [] as number[])

    if (selectedIndices.length < 2) return

    const start = Math.min(...selectedIndices)
    const end = Math.max(...selectedIndices)

    const newTokens = [...tokens]
    const mergedToken: Token = {
      text: newTokens.slice(start, end + 1).map(t => t.text).join(''),
      pattern: newTokens.slice(start, end + 1).map(t => t.pattern || t.text).join(''),
      originalText: newTokens.slice(start, end + 1).map(t => t.originalText).join(''),
      originalPattern: newTokens.slice(start, end + 1).map(t => t.originalPattern || t.originalText).join(''),
      isDragDropped: false,
      isChangedByGrokIt: false,
      isSelected: false
    }

    newTokens.splice(start, end - start + 1, mergedToken)

    setTokens(newTokens)
    setHistory([...history.slice(0, historyIndex + 1), newTokens])
    setHistoryIndex(historyIndex + 1)
  }

  const isGrokTextChanged = grokText !== originalGrokText

  return (
    <main className="flex min-h-screen bg-gray-900 text-gray-100">
      {/* Left Sidebar */}
      <div className="w-1/4 bg-gray-800 p-4 overflow-y-auto" style={{ maxHeight: '100vh' }}>
        <div className="relative mb-4">
          <Input
            type="text"
            placeholder="Search..."
            className="pl-10 pr-10 bg-gray-700 border-gray-600 text-gray-100"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
          <Search className="absolute left-3 top-2.5 text-gray-400" />
          {searchTerm && (
            <Button
              className="absolute right-2 top-2 h-5 w-5 p-0"
              variant="ghost"
              onClick={() => setSearchTerm('')}
            >
              <X className="h-4 w-4" />
            </Button>
          )}
        </div>
        {filteredMenuItems.map((item) => (
          <div key={item.id} className="mb-2">
            <button
              className="w-full text-left font-semibold py-2 px-4 rounded hover:bg-gray-700 flex items-center justify-between"
              onClick={() => setOpenMenuItem(openMenuItem === item.id ? null : item.id)}
            >
              {item.title}
              {openMenuItem === item.id ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
            </button>
            {openMenuItem === item.id && (
              <div className="pl-4">
                {item.subItems.map((subItem) => (
                  <div
                    key={subItem.id}
                    className="py-2 px-4 cursor-move hover:bg-gray-700 rounded"
                    draggable
                    onDragStart={(e) => handleDragStart(e, subItem.pattern)}
                  >
                    {subItem.title}
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Right Section */}
      <div className="flex-1 p-4 flex flex-col">
        <Textarea
          className="mb-4 h-[40vh] bg-gray-800 border-gray-700 text-gray-100 resize-none overflow-y-auto"
          placeholder="Enter text to tokenize..."
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          style={{ wordWrap: 'break-word', overflowWrap: 'break-word' }}
        />
        <div className="flex mb-4 space-x-2 justify-between">
          <Button onClick={handleTokenize} className="bg-blue-600 hover:bg-blue-700">Tokenize</Button>
          <div className="flex space-x-2">
            <Button onClick={handleUndo} className="bg-orange-600 hover:bg-orange-700"><Undo2 className="mr-2 h-4 w-4" />Undo</Button>
            <Button onClick={handleRedo} className="bg-orange-600 hover:bg-orange-700"><Redo2 className="mr-2 h-4 w-4" />Redo</Button>
          </div>
          <Button onClick={handleGrokIt} className="bg-purple-600 hover:bg-purple-700"><Zap className="mr-2 h-4 w-4" />Grok It</Button>
          <Button onClick={handleAppendTokens} className="bg-green-600 hover:bg-green-700"><Merge className="mr-2 h-4 w-4" />Append</Button>
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button className="bg-red-600 hover:bg-red-700"><X className="mr-2 h-4 w-4" />Clear</Button>
            </AlertDialogTrigger>
            <AlertDialogContent className="bg-gray-800 border-gray-700 text-gray-100">
              <AlertDialogHeader>
                <AlertDialogTitle>Are you sure you want to clear everything?</AlertDialogTitle>
                <AlertDialogDescription className="text-gray-400">
                  This action cannot be undone. This will permanently delete your current work.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel className="bg-gray-700 text-gray-100 hover:bg-gray-600">Cancel</AlertDialogCancel>
                <AlertDialogAction onClick={handleClear} className="bg-red-600 hover:bg-red-700">Continue</AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
        <div className="flex-1 bg-gray-800 p-4 rounded overflow-y-auto h-[40vh]" style={{ wordWrap: 'break-word', overflowWrap: 'break-word' }}>
          {tokens.map((token, index) => (
            <ContextMenu key={index}>
              <ContextMenuTrigger>
                <span
                  className={`inline-block rounded px-2 py-1 m-1 cursor-pointer ${
                    token.pattern 
                      ? (token.isChangedByGrokIt
                          ? 'bg-orange-600' // Orange for tokens changed by Grok It
                          : token.isDragDropped
                            ? 'bg-green-600' // Green for drag-and-dropped tokens and right-click menu changes
                            : 'bg-blue-400') // Light blue for original matched tokens
                      : 'bg-gray-700'
                  } ${token.isSelected ? 'ring-2 ring-yellow-400' : ''}`}
                  draggable
                  onDragOver={(e) => e.preventDefault()}
                  onDrop={(e) => handleDrop(e, index)}
                  onDoubleClick={() => handleDoubleClick(index)}
                  onClick={() => handleTokenClick(index)}
                >
                  {token.pattern || token.text}
                </span>
              </ContextMenuTrigger>
              <ContextMenuContent className="bg-gray-800 border-gray-700 text-gray-100">
                {getAlternativePatterns(token.pattern).map((altPattern) => (
                  <ContextMenuItem key={altPattern} onClick={() => handlePatternChange(index, altPattern)} className="hover:bg-gray-700 focus:bg-gray-700">
                    {altPattern}
                  </ContextMenuItem>
                ))}
              </ContextMenuContent>
            </ContextMenu>
          ))}
        </div>
      </div>

      {/* Grok It Dialog */}
      <Dialog open={isGrokDialogOpen} onOpenChange={setIsGrokDialogOpen}>
        <DialogContent 
          className="sm:max-w-[850px] bg-gray-800 border-gray-700 text-gray-100"
          style={{
            background: 'linear-gradient(to bottom right, rgba(46, 56, 82, 0.9), rgba(68, 56, 82, 0.9))',
            boxShadow: '0 0 0 100vmax rgba(46, 56, 82, 0.5)',
          }}
        >
          <DialogHeader>
            <DialogTitle>Grok Pattern</DialogTitle>
            <DialogDescription className="text-gray-400">
              You can edit the Grok pattern below. Click Apply to update the tokens.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <Textarea
              value={grokText}
              onChange={(e) => setGrokText(e.target.value)}
              className="h-[400px] bg-gray-700 border-gray-600 text-gray-100"
            />
          </div>
          <DialogFooter className="sm:justify-between">
            <Button 
              onClick={handleApplyGrokChanges} 
              className={`${isGrokTextChanged ? 'bg-green-600 hover:bg-green-700' : 'bg-gray-600 hover:bg-gray-700'}`}
              disabled={!isGrokTextChanged}
            >
              Apply
            </Button>
            <Button onClick={handleCopyGrokText} className="bg-blue-600 hover:bg-blue-700">
              <Copy className="mr-2 h-4 w-4" />
              {isCopied ? 'Copied!' : 'Copy'}
            </Button>
            <Button
              onClick={handleToggleAnchors}
              className={isAnchored ? "bg-green-600 hover:bg-green-700" : "bg-gray-600 hover:bg-gray-700"}
            >
              <Anchor className="mr-2 h-4 w-4" />
              Anchors
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </main>
  )
}

Deployment URL or Custom Domain: https://v0.dev/chat/Q0GRGJOL3UX?b=b_dyAu2weBjxa&p=0