Upload 6 files

prompts/code_review_prompts.txt

@@ -0,0 +1,80 @@
+You are a veteran principal engineer. Review the following code changes :
+ identify concrete issues, explain impact, and propose minimal, correct patches.
+Prioritize security, maintainability, and extensibility over cleverness. 
+When in doubt, choose the fix with the lowest blast radius and clearest long-term path.
+
+Context
+
+Repository/Service: {repo_name}
+
+Change Scope: {brief_change_summary}
+
+Diff/Patch (unified):
+
+{diff_or_code_block}
+
+Extra context based on Change Scope 
+
+{tool_outputs}
+
+---
+Architectural/Domain notes (if any): 
+None
+Non-negotiable guidelines (style, lint, frameworks, security baselines):
+None
+Threat model highlights (if known): 
+None
+Performance/SLOs:
+None
+---
+What to Deliver (strict structure)
+Executive Summary (≤10 bullets)
+
+3–5 top risks (by user impact and exploitability)
+
+Overall maintainability & extensibility posture
+Overall security posture
+Must-fix before merge (list)
+Findings (one object per issue; exhaustive but de-duplicated)
+
+```
+title: "Short, specific title"
+severity: "critical|high|medium|low|info"
+category: "security|maintainability|extensibility|performance|reliability|testing|compliance"
+ai_generated_smell: true
+file: "relative/path.ext"
+lines: "start-end"
+code_snippet: "short excerpt that shows the problem"
+why_it_matters: "Impact in plain language; include user impact and ops risk"
+root_cause: "What design/assumption caused this"
+cwe: "CWE-### (if security) or 'N/A'"
+owasp_top10: "A# (if web) or 'N/A'"
+fix:
+  strategy: "Minimal change strategy that fits current design"
+  patch: "unified diff applying the minimal safe fix"
+  follow_up:
+    - "refactor debts that can be deferred safely"
+tests:
+  new_or_changed:
+    - "test names to add/update"
+  cases:
+    - "happy path"
+    - "edge case 1"
+    - "edge case 2"
+    - "negative case"
+    - "property-based (if relevant)"
+breaking_change_risk: "none|low|medium|high"
+migration_notes: "If any contract/DB/index/config migration is needed"
+references:
+  - "links to official docs or standards (if applicable)"
+```
+
+Scorecard (0–5; justify each score in 1–2 sentences)
+
+Security:
+Maintainability:
+Extensibility:
+Reliability (errors, retries, idempotency, timeouts):
+Test Quality & Coverage:
+Performance/Complexity:
+Documentation & Naming:

protos/agent.proto

@@ -0,0 +1,18 @@
+syntax = "proto3";
+
+package agent;
+
+service CodeReviewAgent {
+  rpc ReviewPR (ReviewRequest) returns (stream ReviewResponse) {}
+}
+
+message ReviewRequest {
+  string repo_url = 1;
+  int32 pr_number = 2;
+}
+
+message ReviewResponse {
+  string status = 1;
+  string review_comment = 2;
+  string file_path = 3;
+}

protos/agent_pb2.py

@@ -0,0 +1,40 @@
+# -*- coding: utf-8 -*-
+# Generated by the protocol buffer compiler.  DO NOT EDIT!
+# NO CHECKED-IN PROTOBUF GENCODE
+# source: protos/agent.proto
+# Protobuf Python Version: 5.29.0
+"""Generated protocol buffer code."""
+from google.protobuf import descriptor as _descriptor
+from google.protobuf import descriptor_pool as _descriptor_pool
+from google.protobuf import runtime_version as _runtime_version
+from google.protobuf import symbol_database as _symbol_database
+from google.protobuf.internal import builder as _builder
+_runtime_version.ValidateProtobufRuntimeVersion(
+    _runtime_version.Domain.PUBLIC,
+    5,
+    29,
+    0,
+    '',
+    'protos/agent.proto'
+)
+# @@protoc_insertion_point(imports)
+
+_sym_db = _symbol_database.Default()
+
+
+
+
+DESCRIPTOR = _descriptor_pool.Default().AddSerializedFile(b'\n\x12protos/agent.proto\x12\x05\x61gent\"4\n\rReviewRequest\x12\x10\n\x08repo_url\x18\x01 \x01(\t\x12\x11\n\tpr_number\x18\x02 \x01(\x05\"K\n\x0eReviewResponse\x12\x0e\n\x06status\x18\x01 \x01(\t\x12\x16\n\x0ereview_comment\x18\x02 \x01(\t\x12\x11\n\tfile_path\x18\x03 \x01(\t2N\n\x0f\x43odeReviewAgent\x12;\n\x08ReviewPR\x12\x14.agent.ReviewRequest\x1a\x15.agent.ReviewResponse\"\x00\x30\x01\x62\x06proto3')
+
+_globals = globals()
+_builder.BuildMessageAndEnumDescriptors(DESCRIPTOR, _globals)
+_builder.BuildTopDescriptorsAndMessages(DESCRIPTOR, 'protos.agent_pb2', _globals)
+if not _descriptor._USE_C_DESCRIPTORS:
+  DESCRIPTOR._loaded_options = None
+  _globals['_REVIEWREQUEST']._serialized_start=29
+  _globals['_REVIEWREQUEST']._serialized_end=81
+  _globals['_REVIEWRESPONSE']._serialized_start=83
+  _globals['_REVIEWRESPONSE']._serialized_end=158
+  _globals['_CODEREVIEWAGENT']._serialized_start=160
+  _globals['_CODEREVIEWAGENT']._serialized_end=238
+# @@protoc_insertion_point(module_scope)

protos/agent_pb2_grpc.py

@@ -0,0 +1,97 @@
+# Generated by the gRPC Python protocol compiler plugin. DO NOT EDIT!
+"""Client and server classes corresponding to protobuf-defined services."""
+import grpc
+import warnings
+
+from protos import agent_pb2 as protos_dot_agent__pb2
+
+GRPC_GENERATED_VERSION = '1.71.0'
+GRPC_VERSION = grpc.__version__
+_version_not_supported = False
+
+try:
+    from grpc._utilities import first_version_is_lower
+    _version_not_supported = first_version_is_lower(GRPC_VERSION, GRPC_GENERATED_VERSION)
+except ImportError:
+    _version_not_supported = True
+
+if _version_not_supported:
+    raise RuntimeError(
+        f'The grpc package installed is at version {GRPC_VERSION},'
+        + f' but the generated code in protos/agent_pb2_grpc.py depends on'
+        + f' grpcio>={GRPC_GENERATED_VERSION}.'
+        + f' Please upgrade your grpc module to grpcio>={GRPC_GENERATED_VERSION}'
+        + f' or downgrade your generated code using grpcio-tools<={GRPC_VERSION}.'
+    )
+
+
+class CodeReviewAgentStub(object):
+    """Missing associated documentation comment in .proto file."""
+
+    def __init__(self, channel):
+        """Constructor.
+
+        Args:
+            channel: A grpc.Channel.
+        """
+        self.ReviewPR = channel.unary_stream(
+                '/agent.CodeReviewAgent/ReviewPR',
+                request_serializer=protos_dot_agent__pb2.ReviewRequest.SerializeToString,
+                response_deserializer=protos_dot_agent__pb2.ReviewResponse.FromString,
+                _registered_method=True)
+
+
+class CodeReviewAgentServicer(object):
+    """Missing associated documentation comment in .proto file."""
+
+    def ReviewPR(self, request, context):
+        """Missing associated documentation comment in .proto file."""
+        context.set_code(grpc.StatusCode.UNIMPLEMENTED)
+        context.set_details('Method not implemented!')
+        raise NotImplementedError('Method not implemented!')
+
+
+def add_CodeReviewAgentServicer_to_server(servicer, server):
+    rpc_method_handlers = {
+            'ReviewPR': grpc.unary_stream_rpc_method_handler(
+                    servicer.ReviewPR,
+                    request_deserializer=protos_dot_agent__pb2.ReviewRequest.FromString,
+                    response_serializer=protos_dot_agent__pb2.ReviewResponse.SerializeToString,
+            ),
+    }
+    generic_handler = grpc.method_handlers_generic_handler(
+            'agent.CodeReviewAgent', rpc_method_handlers)
+    server.add_generic_rpc_handlers((generic_handler,))
+    server.add_registered_method_handlers('agent.CodeReviewAgent', rpc_method_handlers)
+
+
+ # This class is part of an EXPERIMENTAL API.
+class CodeReviewAgent(object):
+    """Missing associated documentation comment in .proto file."""
+
+    @staticmethod
+    def ReviewPR(request,
+            target,
+            options=(),
+            channel_credentials=None,
+            call_credentials=None,
+            insecure=False,
+            compression=None,
+            wait_for_ready=None,
+            timeout=None,
+            metadata=None):
+        return grpc.experimental.unary_stream(
+            request,
+            target,
+            '/agent.CodeReviewAgent/ReviewPR',
+            protos_dot_agent__pb2.ReviewRequest.SerializeToString,
+            protos_dot_agent__pb2.ReviewResponse.FromString,
+            options,
+            channel_credentials,
+            insecure,
+            call_credentials,
+            compression,
+            wait_for_ready,
+            timeout,
+            metadata,
+            _registered_method=True)

schemas/steps_schema.json

@@ -0,0 +1,25 @@
+{
+  "version": 1,
+  "summary": "Brief summary of the steps and what you are trying to achieve.",
+  "steps": [
+    {
+      "name": "step1",
+      "description": "Describe the first step in detail. If any tool is used, mention the tool name and parameters. If more context is needed for the code to be reviewed, like caller or callee or function references, mention the tool to be used to get that context as given in tools schema YAML. Example below.",
+      "tools": [
+        {
+          "name": "ast_mcp_tools",
+          "function": "get_function_context_for_project_mcp",
+          "parameters": {
+            "github_repo": "https://github.com/huggingface/accelerate",
+            "function_name": "example_function"
+          }
+        }
+      ],
+      "tool_results" : "Results from the tool execution can be captured here to be used in subsequent steps.Will be filled in by the agent during execution."
+    },
+    {
+      "name": "step2",
+      "description": "Second step description. If no tool is used, just describe the step. Continue for all steps needed for the code review."
+    }
+  ]
+}

templates/index.html

@@ -0,0 +1,714 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Review Agent</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .step-content {
+            display: none;
+        }
+
+        .step-content.open {
+            display: block;
+        }
+
+        /* Custom scrollbar for sidebar */
+        .sidebar-scroll::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .sidebar-scroll::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+
+        .sidebar-scroll::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 3px;
+        }
+
+        .sidebar-scroll::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+
+        /* JSON Renderer Styles */
+        .json-key {
+            color: #4b5563;
+            font-weight: 600;
+        }
+
+        .json-string {
+            color: #059669;
+        }
+
+        .json-number {
+            color: #d97706;
+        }
+
+        .json-boolean {
+            color: #7c3aed;
+        }
+
+        .json-null {
+            color: #9ca3af;
+        }
+
+        .json-block {
+            margin-left: 1.5rem;
+            border-left: 2px solid #e5e7eb;
+            padding-left: 0.5rem;
+            margin-top: 0.25rem;
+            margin-bottom: 0.25rem;
+        }
+    </style>
+</head>
+
+<body class="bg-gray-100 h-screen flex overflow-hidden">
+
+    <!-- Sidebar -->
+    <div class="w-64 bg-white shadow-lg flex flex-col h-full">
+        <div class="p-4 border-b">
+            <h1 class="text-xl font-bold text-gray-800">Agentic AI Code Review</h1>
+        </div>
+
+        <div class="p-4 border-b">
+            <div id="settingsPanel" class="space-y-3">
+                <div>
+                    <label for="mcpUrl" class="block text-xs font-medium text-gray-700">MCP Server URL</label>
+                    <div class="flex space-x-2 mt-1">
+                        <input type="text" id="mcpUrl" name="mcpUrl"
+                            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-xs p-2 border"
+                            placeholder="https://alexcpn-treesitter-mcp.hf.space/mcp/"
+                            value="https://alexcpn-treesitter-mcp.hf.space/mcp/">
+                        <button type="button" id="connectMcpBtn"
+                            class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                            Connect
+                        </button>
+                    </div>
+                    <div id="toolsList" class="mt-2 text-xs text-gray-600 hidden">
+                        <p class="font-semibold mb-1">Available Tools:</p>
+                        <ul class="list-disc pl-4 space-y-1" id="toolsListContent"></ul>
+                    </div>
+                </div>
+                <div>
+                    <label for="apiKey" class="block text-xs font-medium text-gray-700">OpenAI API Key
+                        (Optional)</label>
+                    <input type="password" id="apiKey" name="apiKey"
+                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-xs p-2 border"
+                        placeholder="sk-...">
+                </div>
+                <div class="flex space-x-2">
+                    <button type="button" id="fetchHistoryBtn"
+                        class="flex-1 justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        Fetch History
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex-1 overflow-y-auto sidebar-scroll p-4">
+            <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">History</h2>
+            <div id="runsList" class="space-y-2">
+                <!-- Runs will be listed here -->
+                <div class="text-xs text-gray-400 text-center italic">No runs found</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="flex-1 flex flex-col h-full overflow-hidden">
+        <header class="bg-white shadow-sm p-4 flex justify-between items-center z-10">
+            <h2 id="currentRunTitle" class="text-lg font-medium text-gray-900">Select a run or trigger a new one</h2>
+            <div class="flex items-center space-x-3">
+                <button id="refreshBtn" onclick="refreshCurrentRun()"
+                    class="hidden px-3 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    Refresh
+                </button>
+                <span id="connectionStatus"
+                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                    Disconnected
+                </span>
+            </div>
+        </header>
+
+        <main class="flex-1 overflow-y-auto p-6 space-y-6" id="mainContent">
+            <!-- New Review Section -->
+            <div id="newReviewSection" class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+                <label for="prUrl" class="block text-sm font-medium text-gray-700 mb-2">Start a New Review</label>
+                <div class="flex space-x-3">
+                    <input type="text" id="prUrl" name="prUrl"
+                        class="flex-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm p-2 border"
+                        placeholder="https://github.com/owner/repo/pull/123">
+                    <button type="button" id="triggerBtn"
+                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        Trigger Review
+                    </button>
+                </div>
+            </div>
+            <!-- Plan Section -->
+            <!-- Summary Section -->
+            <div id="summaryContainer" class="hidden mb-8">
+                <div class="bg-white rounded-lg shadow border-l-4 border-purple-500 overflow-hidden">
+                    <div class="p-4 border-b border-gray-100">
+                        <h3 class="text-lg font-semibold text-purple-700" id="summaryHeader">Executive Summary</h3>
+                    </div>
+                    <div id="summaryContent" class="p-6 prose prose-sm max-w-none text-gray-700 bg-gray-50">
+                        <!-- Summary will be injected here -->
+                    </div>
+                </div>
+            </div>
+
+            <!-- Files Container -->
+            <div id="filesContainer" class="space-y-8">
+                <!-- File reviews will be appended here -->
+            </div>
+
+            <!-- Debug Log -->
+            <div class="mt-8 p-4 bg-gray-800 text-green-400 rounded text-xs font-mono hidden" id="debugLog">
+                <h3 class="font-bold border-b border-gray-700 mb-2">Debug Log</h3>
+                <div id="debugContent" class="h-32 overflow-y-auto"></div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        const runsList = document.getElementById('runsList');
+        const filesContainer = document.getElementById('filesContainer');
+        const currentRunTitle = document.getElementById('currentRunTitle');
+        const connectionStatus = document.getElementById('connectionStatus');
+
+        let eventSource = null;
+        let currentRepo = '';
+        let currentPr = '';
+
+        // Load runs on input blur or submit
+        async function loadRuns(repoUrl, prNumber) {
+            if (!repoUrl || !prNumber) return;
+
+            const repoName = repoUrl.replace(/\/$/, '').split('/').pop();
+            currentRepo = repoName;
+            currentPr = prNumber;
+
+            try {
+                const response = await fetch(`/runs/${repoName}/${prNumber}`);
+                const data = await response.json();
+                renderRuns(data.runs);
+            } catch (error) {
+                console.error('Failed to load runs:', error);
+            }
+        }
+
+        function renderRuns(runs) {
+            runsList.innerHTML = '';
+            if (runs.length === 0) {
+                runsList.innerHTML = '<div class="text-xs text-gray-400 text-center italic">No runs found</div>';
+                return;
+            }
+
+            runs.forEach(run => {
+                const div = document.createElement('div');
+
+                let timeHash, repoName, prNumber;
+
+                if (typeof run === 'object') {
+                    timeHash = run.time_hash;
+                    repoName = run.repo_name;
+                    prNumber = run.pr_number;
+                } else {
+                    timeHash = run;
+                    repoName = currentRepo;
+                    prNumber = currentPr;
+                }
+
+                // Format timestamp: YYYYMMDDHHMMSS -> Local Date Time
+                const year = timeHash.substring(0, 4);
+                const month = timeHash.substring(4, 6);
+                const day = timeHash.substring(6, 8);
+                const hour = timeHash.substring(8, 10);
+                const minute = timeHash.substring(10, 12);
+                const second = timeHash.substring(12, 14);
+                const date = new Date(year, month - 1, day, hour, minute, second);
+
+                div.className = 'p-3 bg-white rounded border border-gray-200 hover:border-indigo-500 cursor-pointer transition-colors shadow-sm';
+
+                let content = `<div class="text-sm font-medium text-gray-900">Run ${timeHash}</div>`;
+                if (typeof run === 'object') {
+                    content += `<div class="text-xs text-indigo-600 font-semibold mb-1">${repoName} #${prNumber}</div>`;
+                }
+                content += `<div class="text-xs text-gray-500">${date.toLocaleString()}</div>`;
+
+                div.innerHTML = content;
+                div.onclick = () => {
+                    // Update context if switching runs
+                    if (repoName && prNumber) {
+                        currentRepo = repoName;
+                        currentPr = prNumber;
+                        // Only update input if we have a valid URL structure, otherwise keep it or clear it?
+                        // Since we don't have the full owner/repo from the run history (only repo name),
+                        // we can't reconstruct the full URL accurately.
+                        // Better to NOT update the input with a broken URL.
+                        // Or try to use the saved one if it matches.
+
+                        const savedPrUrl = localStorage.getItem('lastPrUrl');
+                        if (savedPrUrl && savedPrUrl.includes(repoName) && savedPrUrl.includes(prNumber)) {
+                            document.getElementById('prUrl').value = savedPrUrl;
+                        } else {
+                            // If we can't reconstruct it, maybe just show a placeholder or don't touch it
+                            // document.getElementById('prUrl').value = `https://github.com/.../${repoName}/pull/${prNumber}`;
+                        }
+                    }
+                    loadRun(timeHash);
+                };
+                runsList.appendChild(div);
+            });
+        }
+
+        function loadRun(timeHash) {
+            log(`Loading run: ${timeHash}`);
+            currentRunHash = timeHash;
+            document.getElementById('refreshBtn').classList.remove('hidden');
+
+            // Update UI
+            currentRunTitle.textContent = `Viewing Run: ${timeHash} for Task: Code Review of PR ${currentRepo} #${currentPr}`;
+
+            // Clear previous content
+            filesContainer.innerHTML = '';
+            document.getElementById('summaryContainer').classList.add('hidden');
+            document.getElementById('summaryContent').innerHTML = '';
+
+            // Close existing stream
+            if (eventSource) {
+                eventSource.close();
+            }
+
+            // Start new stream
+            const streamUrl = `/stream/${currentRepo}/${currentPr}/${timeHash}`;
+            log(`Connecting to stream: ${streamUrl}`);
+            connectStream(streamUrl);
+        }
+
+        function connectStream(url) {
+            connectionStatus.className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800';
+            connectionStatus.textContent = 'Connecting...';
+
+            eventSource = new EventSource(url);
+
+            eventSource.onopen = () => {
+                log('Stream connected');
+                connectionStatus.className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800';
+                connectionStatus.textContent = 'Live';
+            };
+
+            eventSource.onmessage = (event) => {
+                // log(`Received event: ${event.data.substring(0, 50)}...`);
+                try {
+                    const data = JSON.parse(event.data);
+                    renderEvent(data);
+                } catch (e) {
+                    log(`Error parsing event: ${e}`);
+                }
+            };
+
+            eventSource.onerror = (error) => {
+                log('Stream error');
+                console.error('EventSource failed:', error);
+                connectionStatus.className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800';
+                connectionStatus.textContent = 'Disconnected';
+                // eventSource.close(); // Don't close immediately, it might reconnect
+            };
+        }
+
+        function renderEvent(data) {
+            const type = data.type;
+            const filePath = data.file_path;
+
+            log(`Rendering event: ${type} for ${filePath}`);
+
+            if (!filePath) {
+                log('Missing filePath, skipping');
+                return;
+            }
+
+            let content = {};
+            try {
+                content = JSON.parse(data.content || '{}');
+            } catch (e) {
+                content = { raw: data.content };
+            }
+
+            // Get or create file section (skip for summary)
+            let fileSection = null;
+            if (type !== 'summary') {
+                fileSection = document.getElementById(`file-${btoa(filePath)}`);
+                if (!fileSection) {
+                    log(`Creating new section for ${filePath}`);
+                    fileSection = createFileSection(filePath);
+                    filesContainer.appendChild(fileSection);
+                }
+            }
+
+            const planContent = fileSection ? fileSection.querySelector('.plan-content') : null;
+            const planSection = fileSection ? fileSection.querySelector('.plan-section') : null;
+            const stepsSection = fileSection ? fileSection.querySelector('.steps-section') : null;
+
+            if (type === 'plan') {
+                planSection.classList.remove('hidden');
+                planContent.innerHTML = renderContent(content);
+
+                // Update header with timestamp if available (optional, or just keep static)
+                // const header = fileSection.querySelector('.plan-header-text');
+                // header.textContent = `Review Plan for ${filePath}`;
+
+            } else if (type === 'step') {
+                const stepName = data.step_name;
+                const stepId = `step-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+                const div = document.createElement('div');
+                div.className = 'bg-white rounded-lg shadow border-l-4 border-green-500 overflow-hidden';
+                div.innerHTML = `
+                    <div class="p-4 flex justify-between items-center cursor-pointer hover:bg-gray-50 transition-colors" onclick="toggleStep('${stepId}')">
+                        <div class="flex items-center space-x-3">
+                            <span class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 flex items-center justify-center text-green-600">✓</span>
+                            <div>
+                                <h3 class="text-md font-medium text-gray-900">${stepName}</h3>
+                            </div>
+                        </div>
+                        <span class="text-gray-400 transform transition-transform duration-200" id="icon-${stepId}">▼</span>
+                    </div>
+                    <div id="${stepId}" class="step-content border-t border-gray-100 bg-gray-50">
+                        <div class="p-4 text-sm font-mono text-gray-700 overflow-x-auto">
+                            ${renderContent(content)}
+                        </div>
+                    </div>
+                `;
+                stepsSection.appendChild(div);
+            } else if (type === 'summary') {
+                const summaryContainer = document.getElementById('summaryContainer');
+                const summaryContent = document.getElementById('summaryContent');
+                const summaryHeader = document.getElementById('summaryHeader');
+
+                summaryContainer.classList.remove('hidden');
+
+                // Update header with full URL if available
+                if (data.repo_url && data.pr_number) {
+                    const repoUrl = data.repo_url.replace(/\/$/, ""); // Remove trailing slash
+                    const prUrl = `${repoUrl}/pull/${data.pr_number}`;
+                    summaryHeader.innerHTML = `Executive Summary of <a href="${prUrl}" target="_blank" class="underline hover:text-purple-900">PR #${data.pr_number}</a>`;
+                } else {
+                    summaryHeader.textContent = "Executive Summary";
+                }
+
+                // Simple markdown rendering (bold, headers, lists)
+                let html = data.content
+                    .replace(/^# (.*$)/gim, '<h1 class="text-2xl font-bold mb-4">$1</h1>')
+                    .replace(/^## (.*$)/gim, '<h2 class="text-xl font-bold mb-3 mt-4">$1</h2>')
+                    .replace(/^### (.*$)/gim, '<h3 class="text-lg font-bold mb-2 mt-3">$1</h3>')
+                    .replace(/\*\*(.*)\*\*/gim, '<b>$1</b>')
+                    .replace(/^\- (.*$)/gim, '<li class="ml-4">$1</li>')
+                    .replace(/\n/gim, '<br>');
+
+                summaryContent.innerHTML = html;
+            }
+        }
+
+        function createFileSection(filePath) {
+            const safeId = btoa(filePath);
+            const div = document.createElement('div');
+            div.id = `file-${safeId}`;
+            div.className = 'space-y-4';
+
+            div.innerHTML = `
+                <div class="flex items-center space-x-2 mb-4">
+                    <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                    <h2 class="text-xl font-bold text-gray-800">Review Plan for File: ${filePath}</h2>
+                </div>
+
+                <div class="plan-section hidden">
+                    <div class="bg-white rounded-lg shadow border-l-4 border-blue-500 overflow-hidden">
+                        <div class="p-4 border-b border-gray-100 flex justify-between items-center cursor-pointer hover:bg-gray-50 transition-colors"
+                            onclick="togglePlan('${safeId}')">
+                            <h3 class="plan-header-text text-lg font-semibold text-blue-700">Review Plan</h3>
+                            <span class="text-gray-400 transform transition-transform duration-200" id="planIcon-${safeId}">▼</span>
+                        </div>
+                        <div id="planBody-${safeId}" class="p-4 transition-all duration-200">
+                            <pre class="plan-content bg-gray-50 p-4 rounded text-sm overflow-x-auto font-mono text-gray-700 mb-6"></pre>
+
+                            <h4 class="text-sm font-semibold text-gray-600 mb-3 uppercase tracking-wider">Execution Steps</h4>
+                            <div class="steps-section space-y-4">
+                                <!-- Steps will be appended here -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            return div;
+        }
+
+        function renderContent(data) {
+            if (typeof data === 'object' && data !== null) {
+                if (Array.isArray(data)) {
+                    if (data.length === 0) return '<span class="text-gray-400">[]</span>';
+                    let html = '<div class="json-block">';
+                    data.forEach(item => {
+                        html += `<div>${renderContent(item)}</div>`;
+                    });
+                    html += '</div>';
+                    return html;
+                } else {
+                    if (Object.keys(data).length === 0) return '<span class="text-gray-400">{}</span>';
+                    let html = '<div class="json-block">';
+                    for (const [key, value] of Object.entries(data)) {
+                        html += `<div class="mb-1"><span class="json-key">${key}:</span> ${renderContent(value)}</div>`;
+                    }
+                    html += '</div>';
+                    return html;
+                }
+            } else if (typeof data === 'string') {
+                // Check if it looks like a code block or long text
+                if (data.includes('\n') || data.length > 50) {
+                    return `<div class="mt-1 p-2 bg-gray-100 rounded text-xs whitespace-pre-wrap border border-gray-200 text-gray-800">${escapeHtml(data)}</div>`;
+                }
+                return `<span class="json-string">"${escapeHtml(data)}"</span>`;
+            } else if (typeof data === 'number') {
+                return `<span class="json-number">${data}</span>`;
+            } else if (typeof data === 'boolean') {
+                return `<span class="json-boolean">${data}</span>`;
+            } else if (data === null) {
+                return `<span class="json-null">null</span>`;
+            }
+            return String(data);
+        }
+
+        function escapeHtml(text) {
+            const map = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#039;'
+            };
+            return text.replace(/[&<>"']/g, function (m) { return map[m]; });
+        }
+
+        window.toggleStep = function (id) {
+            const el = document.getElementById(id);
+            const icon = document.getElementById(`icon-${id}`);
+            el.classList.toggle('open');
+            if (el.classList.contains('open')) {
+                icon.style.transform = 'rotate(180deg)';
+            } else {
+                icon.style.transform = 'rotate(0deg)';
+            }
+        }
+
+        window.togglePlan = function (id) {
+            const el = document.getElementById(`planBody-${id}`);
+            const icon = document.getElementById(`planIcon-${id}`);
+            if (el.style.display === 'none') {
+                el.style.display = 'block';
+                icon.style.transform = 'rotate(0deg)';
+            } else {
+                el.style.display = 'none';
+                icon.style.transform = 'rotate(-90deg)';
+            }
+        }
+
+        function parsePrUrl(url) {
+            try {
+                // Expected format: https://github.com/owner/repo/pull/123
+                const regex = /github\.com\/([^\/]+\/[^\/]+)\/pull\/(\d+)/;
+                const match = url.match(regex);
+                if (match) {
+                    return {
+                        repoUrl: `https://github.com/${match[1]}`,
+                        prNumber: match[2]
+                    };
+                }
+            } catch (e) {
+                console.error("Error parsing URL", e);
+            }
+            return null;
+        }
+
+        // MCP Connection Handler
+        document.getElementById('connectMcpBtn').addEventListener('click', async () => {
+            const mcpUrl = document.getElementById('mcpUrl').value;
+            const toolsList = document.getElementById('toolsList');
+            const toolsListContent = document.getElementById('toolsListContent');
+            const btn = document.getElementById('connectMcpBtn');
+
+            if (!mcpUrl) return;
+
+            btn.disabled = true;
+            btn.textContent = 'Connecting...';
+            toolsList.classList.add('hidden');
+
+            try {
+                const response = await fetch('/list-tools', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ mcp_server_url: mcpUrl })
+                });
+
+                const data = await response.json();
+
+                if (data.status === 'success') {
+                    let content = '';
+                    if (Array.isArray(data.tools)) {
+                        // Format array of tool objects
+                        content = data.tools.map(tool => {
+                            const name = tool.name || tool.inputSchema?.title || 'Unknown';
+                            const desc = tool.description || 'No description';
+                            return `<div class="mb-2">
+                                <span class="font-bold text-indigo-700">${name}</span>
+                                <p class="text-gray-600 ml-2">${desc}</p>
+                            </div>`;
+                        }).join('');
+                    } else if (typeof data.tools === 'object') {
+                        content = `<pre class="whitespace-pre-wrap font-mono bg-gray-50 p-2 rounded border">${JSON.stringify(data.tools, null, 2)}</pre>`;
+                    } else {
+                        content = `<pre class="whitespace-pre-wrap font-mono bg-gray-50 p-2 rounded border">${data.tools}</pre>`;
+                    }
+
+                    toolsListContent.innerHTML = content;
+                    toolsList.classList.remove('hidden');
+                    localStorage.setItem('mcpServerUrl', mcpUrl);
+                } else {
+                    alert('Failed to connect: ' + data.message);
+                }
+            } catch (e) {
+                alert('Error connecting to MCP server: ' + e.message);
+            } finally {
+                btn.disabled = false;
+                btn.textContent = 'Connect';
+            }
+        });
+
+        document.getElementById('triggerBtn').addEventListener('click', async (e) => {
+            e.preventDefault();
+
+            const prUrl = document.getElementById('prUrl').value;
+            const apiKey = document.getElementById('apiKey').value;
+            const mcpUrl = document.getElementById('mcpUrl').value;
+            const parsed = parsePrUrl(prUrl);
+
+            if (!parsed) {
+                alert('Invalid GitHub PR URL. Expected format: https://github.com/owner/repo/pull/123');
+                return;
+            }
+
+            const { repoUrl, prNumber } = parsed;
+
+            // Save to localStorage
+            localStorage.setItem('lastPrUrl', prUrl);
+            if (apiKey) {
+                localStorage.setItem('openaiApiKey', apiKey);
+            }
+            if (mcpUrl) {
+                localStorage.setItem('mcpServerUrl', mcpUrl);
+            }
+
+            // Refresh runs list just in case
+            await loadRuns(repoUrl, prNumber);
+
+            try {
+                const btn = document.getElementById('triggerBtn');
+                const originalText = btn.textContent;
+                btn.disabled = true;
+                btn.textContent = 'Starting...';
+
+                const response = await fetch('/review', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        repo_url: repoUrl,
+                        pr_number: parseInt(prNumber),
+                        openai_api_key: apiKey || null,
+                        mcp_server_url: mcpUrl || null
+                    }),
+                });
+
+                const data = await response.json();
+
+                // Refresh runs list to show the new one
+                await loadRuns(repoUrl, prNumber);
+
+                // Automatically select the new run
+                loadRun(data.time_hash);
+
+                btn.disabled = false;
+                btn.textContent = originalText;
+
+            } catch (error) {
+                console.error('Error:', error);
+                alert('Failed to trigger review');
+                document.getElementById('triggerBtn').disabled = false;
+                document.getElementById('triggerBtn').textContent = 'Trigger Review';
+            }
+        });
+
+        // Helper to fetch all runs
+        async function fetchAllRuns() {
+            try {
+                const response = await fetch('/runs');
+                const data = await response.json();
+                renderRuns(data.runs);
+            } catch (error) {
+                console.error('Failed to load all runs:', error);
+            }
+        }
+
+        document.getElementById('fetchHistoryBtn').addEventListener('click', fetchAllRuns);
+
+        // Load saved values on startup
+        window.addEventListener('DOMContentLoaded', () => {
+            const savedPrUrl = localStorage.getItem('lastPrUrl');
+            const savedApiKey = localStorage.getItem('openaiApiKey');
+            const savedMcpUrl = localStorage.getItem('mcpServerUrl');
+
+            const prUrlInput = document.getElementById('prUrl');
+            const apiKeyInput = document.getElementById('apiKey');
+            const mcpUrlInput = document.getElementById('mcpUrl');
+
+            if (savedPrUrl) {
+                prUrlInput.value = savedPrUrl;
+            }
+            if (savedApiKey) {
+                apiKeyInput.value = savedApiKey;
+            }
+            if (savedMcpUrl) {
+                mcpUrlInput.value = savedMcpUrl;
+            }
+
+            // Always fetch all runs on startup
+            fetchAllRuns();
+        });
+
+        let currentRunHash = '';
+
+        function refreshCurrentRun() {
+            if (currentRunHash) {
+                loadRun(currentRunHash);
+            }
+        }
+
+        // ... (rest of script) ...
+        function log(msg) {
+            const debugLog = document.getElementById('debugLog');
+            const debugContent = document.getElementById('debugContent');
+            debugLog.classList.remove('hidden');
+            const div = document.createElement('div');
+            div.textContent = `${new Date().toISOString().split('T')[1]} - ${msg}`;
+            debugContent.appendChild(div);
+            debugContent.scrollTop = debugContent.scrollHeight;
+        }
+    </script>
+</body>
+
+</html>