Something went wrong

\n The application encountered an error. Please refresh the page to try again.\n

\n window.location.reload()}\n className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700\"\n >\n Refresh Page\n \n

Error Details

\n                {this.state.error?.message || 'Unknown error'}\n

\n );\n }\n\n return this.props.children;\n }\n}\n\n// Elegant markdown renderer component\nfunction MarkdownRenderer({ content }: { content: string }) {\n const renderMarkdown = (text: string) => {\n return text\n .split('\\n')\n .map((line, index) => {\n // Headers\n if (line.startsWith('### ')) {\n return

{line.substring(4)}

;\n }\n if (line.startsWith('## ')) {\n return

{line.substring(3)}

;\n }\n if (line.startsWith('# ')) {\n return

{line.substring(2)}

;\n }\n \n // Bullet points - handle bold text within bullet points first\n if (line.startsWith('- ') || line.startsWith('* ')) {\n const bulletContent = line.substring(2);\n // Process bold text within bullet points\n const boldFormatted = bulletContent.replace(/\\*\\*(.*?)\\*\\*/g, '$1');\n const italicFormatted = boldFormatted.replace(/(?$1');\n const codeFormatted = italicFormatted.replace(/`(.*?)`/g, '$1');\n \n return (\n

\n );\n }\n \n // Process other formatting for non-bullet lines\n const boldFormatted = line.replace(/\\*\\*(.*?)\\*\\*/g, '$1');\n const italicFormatted = boldFormatted.replace(/(?$1');\n const codeFormatted = italicFormatted.replace(/`(.*?)`/g, '$1');\n \n // Empty lines\n if (!line.trim()) {\n return
;\n }\n \n // Regular paragraphs\n return (\n

\n );\n });\n };\n\n return

{renderMarkdown(content)}

;\n}\n\n// Individual chunk response component with elegant design\nfunction ChunkResponseCard({ chunkResponse, organizeChunks }: { chunkResponse: ChunkResponse; organizeChunks: boolean }) {\n if (organizeChunks) {\n return (\n

\n ◈\n TASK {chunkResponse.chunkIndex + 1}\n

\n \n {chunkResponse.tokenCount.toLocaleString()} tokens\n \n

\n \n

\n Progress: Pending\n

\n ☑\n Pending\n

\n ☐\n Started\n

\n ☐\n Completed\n

\n \n

\n ◎\n View Original Content ({chunkResponse.tokenCount.toLocaleString()} tokens)\n

{chunkResponse.content}

\n\n {/* Context Information */}\n {(chunkResponse.precedentContext || chunkResponse.subsequentContext) && (\n

\n ◈\n View Context Information\n

\n {chunkResponse.precedentContext && (\n

\n ←\n Previous Context\n

{chunkResponse.precedentContext}

\n )}\n {chunkResponse.subsequentContext && (\n

\n →\n Next Context\n

{chunkResponse.subsequentContext}

\n )}\n

\n );\n }\n\n // Original format when organize chunks is disabled\n return (\n

\n ◈\n

\n Chunk #{chunkResponse.chunkIndex + 1}\n

\n {chunkResponse.tokenCount.toLocaleString()} tokens\n

\n \n

\n {chunkResponse.precedentContext && (\n \n ← Previous Context\n \n )}\n {chunkResponse.subsequentContext && (\n \n Next Context →\n \n )}\n

\n \n

\n ◉\n Analysis\n

\n \n

\n ◎\n View Original Content ({chunkResponse.tokenCount.toLocaleString()} tokens)\n

{chunkResponse.content}

\n\n {/* Context Information */}\n {(chunkResponse.precedentContext || chunkResponse.subsequentContext) && (\n

\n ◈\n View Context Information\n

\n {chunkResponse.precedentContext && (\n

\n ←\n Previous Context\n

{chunkResponse.precedentContext}

\n )}\n {chunkResponse.subsequentContext && (\n

\n →\n Next Context\n

{chunkResponse.subsequentContext}

\n )}\n

\n );\n}\n\nfunction App() {\n const [prText, setPrText] = useState(\"\");\n const [analysis, setAnalysis] = useState(null);\n const [loading, setLoading] = useState(false);\n const [maxTokensPerChunk, setMaxTokensPerChunk] = useState(300);\n const [maxTokensPerResponse, setMaxTokensPerResponse] = useState(800);\n const [organizeChunks, setOrganizeChunks] = useState(true);\n\n const handleAnalyze = async () => {\n if (!prText.trim()) {\n setAnalysis({\n success: false,\n error: \"Please paste some PR text to analyze\"\n });\n return;\n }\n\n setLoading(true);\n setAnalysis(null);\n\n try {\n const response = await fetch(\"/api/analyze\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ \n prText,\n maxTokensPerChunk,\n maxTokensPerResponse,\n organizeChunks\n } as AnalysisRequest),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const result: AnalysisResponse = await response.json();\n \n // Validate the response structure\n if (typeof result !== 'object' || result === null) {\n throw new Error(\"Invalid response format\");\n }\n\n setAnalysis(result);\n } catch (error) {\n console.error(\"Analysis error:\", error);\n setAnalysis({\n success: false,\n error: error instanceof Error ? error.message : \"Failed to analyze PR text\"\n });\n } finally {\n setLoading(false);\n }\n };\n\n const handleClear = () => {\n setPrText(\"\");\n setAnalysis(null);\n };\n\n const handleDownloadMarkdown = () => {\n if (!analysis || !analysis.success) return;\n\n let content = \"\";\n \n if (organizeChunks && analysis.chunkResponses) {\n // Generate organized format with task structure\n content = generateOrganizedMarkdown(analysis);\n } else {\n // Use the original full markdown report\n content = analysis.fullMarkdownReport || \"\";\n }\n\n const blob = new Blob([content], { type: 'text/markdown' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `pr-analysis-${organizeChunks ? 'organized-' : ''}${new Date().toISOString().split('T')[0]}.md`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n };\n\n const generateOrganizedMarkdown = (analysis: AnalysisResponse): string => {\n if (!analysis.success || !analysis.chunkResponses) return \"\";\n \n let markdown = \"# pr-analysis.md\\n\\n\";\n markdown += \"---\\n\\n\";\n \n analysis.chunkResponses.forEach((chunk, index) => {\n const taskNumber = index + 1;\n markdown += `## TASK ${taskNumber}\\n`;\n markdown += \"**Progress:** Pending\\n\\n\";\n markdown += \"- ☑ Pending\\n\";\n markdown += \"- ☐ Started\\n\";\n markdown += \"- ☐ Completed\\n\\n\";\n markdown += chunk.analysis + \"\\n\\n\";\n markdown += \"---\\n\\n\";\n });\n \n return markdown;\n };\n\n return (\n

\n {/* Hero Header */}\n

\n ◉\n

\n PR Message Analyzer\n

\n Advanced AI-powered analysis of GitHub PR conversations with context-aware chunking, \n concurrent processing, and opinionated technical insights.\n

\n\n {/* Input Section */}\n

\n \n ◈\n PR Conversation Text\n \n setPrText(e.target.value)}\n placeholder=\"Paste your entire PR conversation here (including bot messages, reviews, comments, etc.)...\"\n className=\"w-full h-80 p-6 border-2 border-red-100 rounded-2xl resize-none focus:ring-4 focus:ring-red-200 focus:border-red-300 transition-all text-gray-800 text-base leading-relaxed\"\n style={{ fontFamily: \"'Inter', sans-serif\" }}\n />\n \n {/* Token Configuration */}\n

\n ⚙\n Configuration\n

\n \n {/* Organize Chunks Checkbox */}\n

\n \n

\n setOrganizeChunks(e.target.checked)}\n className=\"sr-only\"\n />\n

\n {organizeChunks && (\n \n )}\n

\n \n Organize chunks with task format\n \n \n Recommended\n \n

\n Format each chunk with task headers, progress indicators, and organized structure for better readability\n

\n \n

\n \n Max Tokens Per Chunk (10-4000)\n \n {\n const value = parseInt(e.target.value);\n if (!isNaN(value) && value >= 10 && value <= 4000) {\n setMaxTokensPerChunk(value);\n }\n }}\n className=\"w-full px-4 py-3 text-base border-2 border-red-100 rounded-xl focus:ring-4 focus:ring-red-200 focus:border-red-300 transition-all\"\n style={{ fontFamily: \"'Inter', sans-serif\" }}\n />\n

\n How much content AI receives per analysis (smaller = more granular, includes context from adjacent chunks)\n

\n \n

\n \n Max Tokens Per Response (100-2000)\n \n {\n const value = parseInt(e.target.value);\n if (!isNaN(value) && value >= 100 && value <= 2000) {\n setMaxTokensPerResponse(value);\n }\n }}\n className=\"w-full px-4 py-3 text-base border-2 border-red-100 rounded-xl focus:ring-4 focus:ring-red-200 focus:border-red-300 transition-all\"\n style={{ fontFamily: \"'Inter', sans-serif\" }}\n />\n

\n How detailed AI responses can be (larger = more thorough analysis)\n

\n \n

\n \n {loading &&

}\n ◆\n {loading ? \"Analyzing...\" : \"Analyze PR Messages\"}\n \n \n \n Clear\n \n

\n\n {/* Results Section */}\n {analysis && (\n

\n {analysis.success ? (\n <>\n

\n ◎\n Analysis Results\n

\n \n ⬇\n Download Full Report\n \n

\n \n {/* Analysis Stats */}\n

Total Tokens

\n {analysis.totalTokens?.toLocaleString()}\n

Total Chunks

\n {analysis.totalChunks}\n

Max Tokens/Chunk

\n {analysis.maxTokensPerChunk}\n

\n \n {/* Executive Summary */}\n {analysis.summary && (\n

\n ◉\n Executive Summary\n

\n \n

\n )}\n \n {/* Individual Chunk Responses */}\n {analysis.chunkResponses && analysis.chunkResponses.length > 0 && (\n

\n ◈\n Detailed Analysis by Chunk\n

\n {analysis.chunkResponses.map((chunkResponse, index) => (\n \n ))}\n

\n )}\n \n ) : (\n

\n Error: {analysis.error}\n

\n )}\n

\n )}\n\n {/* Features Section */}\n

\n ◆\n Advanced Features\n

\n ◈\n

Context-Aware Chunking

Each chunk receives context from adjacent chunks for better understanding

\n ◉\n

Granular Analysis

Smaller default chunk size (300 tokens) for more detailed analysis

\n ◎\n

Contextual Tags

AI receives precedent and subsequent context with clear focus markers

\n ◆\n

Concurrent Processing

All chunks analyzed simultaneously for maximum speed

\n ◇\n

Opinionated Analysis

AI provides technical insights and code suggestions

\n ⬡\n

Critical Evaluation

Assessment of proposed solutions vs. alternatives

\n ◐\n

Code Improvements

Original vs. corrected code with AI enhancements

\n ◑\n

Markdown Export

Download complete analysis as formatted markdown

\n ◒\n

No Content Filtering

AI analyzes every detail without omitting information

\n ◓\n

Transparent Process

See original content, context, and token count for each chunk

\n );\n}\n\n// Mount the app with error handling\nfunction mountApp() {\n try {\n const rootElement = document.getElementById(\"root\");\n if (!rootElement) {\n throw new Error(\"Root element not found\");\n }\n const root = createRoot(rootElement);\n root.render(\n \n \n \n );\n } catch (error) {\n console.error(\"Failed to mount React app:\", error);\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n rootElement.innerHTML = `\n

Application Error

Failed to load the application. Please refresh the page.

Error Details

${error instanceof Error ? error.message : String(error)}

\n `;\n }\n }\n}\n\n// Ensure DOM is loaded before mounting\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', mountApp);\n} else {\n mountApp();\n}","deleted","label",[168,149],"frontend","permalink","https://www.val.town/x/arthrod/ai_comments_to_tasks/code/frontend/index.tsx","extension","actionData","errors"]