Nervously/codebase-refactor-ai-wizard
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Dashboard | Codebase Refactor AI</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <style>10 .diff-added {11 background-color: rgba(74, 222, 128, 0.2);12 border-left: 3px solid rgba(74, 222, 128, 0.8);13 }14 .diff-removed {15 background-color: rgba(248, 113, 113, 0.2);16 border-left: 3px solid rgba(248, 113, 113, 0.8);17 }18 .file-tree {19 scrollbar-width: thin;20 scrollbar-color: #4b5563 #1f2937;21 }22 .file-tree::-webkit-scrollbar {23 width: 6px;24 }25 .file-tree::-webkit-scrollbar-track {26 background: #1f2937;27 }28 .file-tree::-webkit-scrollbar-thumb {29 background-color: #4b5563;30 border-radius: 6px;31 }32 </style>33</head>34<body class="bg-gray-900 text-gray-100 min-h-screen">35 <div class="flex h-screen overflow-hidden">36 <!-- Sidebar -->37 <div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">38 <div class="p-4 border-b border-gray-700">39 <h2 class="text-xl font-bold flex items-center">40 <i data-feather="folder" class="mr-2 text-indigo-400"></i>41 Project Files42 </h2>43 </div>44 <div class="file-tree overflow-y-auto flex-1 p-2">45 <div class="text-gray-400 mb-2">src/</div>46 <div class="pl-4">47 <div class="py-1 hover:bg-gray-700 rounded px-2 cursor-pointer flex items-center">48 <i data-feather="file" class="w-4 h-4 mr-2 text-blue-400"></i>49 index.js50 </div>51 <div class="py-1 hover:bg-gray-700 rounded px-2 cursor-pointer flex items-center">52 <i data-feather="file" class="w-4 h-4 mr-2 text-blue-400"></i>53 utils.js54 </div>55 <div class="text-gray-400 mb-2 mt-2">components/</div>56 <div class="pl-4">57 <div class="py-1 hover:bg-gray-700 rounded px-2 cursor-pointer flex items-center">58 <i data-feather="file" class="w-4 h-4 mr-2 text-blue-400"></i>59 Button.js60 </div>61 <div class="py-1 hover:bg-gray-700 rounded px-2 cursor-pointer flex items-center">62 <i data-feather="file" class="w-4 h-4 mr-2 text-blue-400"></i>63 Modal.js64 </div>65 </div>66 </div>67 </div>68 <div class="p-4 border-t border-gray-700 space-y-2">69 <a href="/upload.html" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded flex items-center justify-center">70 <i data-feather="upload" class="mr-2"></i> Upload Files71 </a>72 <a href="/github-connect.html" class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded flex items-center justify-center">73 <i data-feather="github" class="mr-2"></i> Connect GitHub74 </a>75 </div>76</div>77 78 <!-- Main Content -->79 <div class="flex-1 flex flex-col overflow-hidden">80 <!-- Top Bar -->81 <div class="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center">82 <div class="flex items-center space-x-4">83 <h1 class="text-xl font-bold">Refactoring Dashboard</h1>84 <div class="flex items-center text-sm bg-gray-700 px-3 py-1 rounded-full">85 <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>86 Analysis Complete87 </div>88 </div>89 <div class="flex space-x-2">90 <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded flex items-center">91 <i data-feather="download" class="mr-2"></i> Export92 </button>93 <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded flex items-center">94 <i data-feather="git-pull-request" class="mr-2"></i> Create PR95 </button>96 </div>97 </div>98 99 <!-- Content Area -->100 <div class="flex-1 overflow-auto p-6">101 <!-- Summary Cards -->102 <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">103 <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">104 <div class="text-gray-400 text-sm mb-1">Issues Found</div>105 <div class="text-2xl font-bold text-red-400">24</div>106 </div>107 <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">108 <div class="text-gray-400 text-sm mb-1">Code Smells</div>109 <div class="text-2xl font-bold text-yellow-400">15</div>110 </div>111 <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">112 <div class="text-gray-400 text-sm mb-1">Optimizations</div>113 <div class="text-2xl font-bold text-blue-400">8</div>114 </div>115 <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">116 <div class="text-gray-400 text-sm mb-1">Complexity Score</div>117 <div class="text-2xl font-bold text-purple-400">78%</div>118 </div>119 </div>120 121 <!-- Issues List -->122 <div class="bg-gray-800 rounded-lg border border-gray-700 mb-6">123 <div class="p-4 border-b border-gray-700">124 <h2 class="text-lg font-bold flex items-center">125 <i data-feather="alert-circle" class="mr-2 text-yellow-400"></i>126 Critical Issues (12)127 </h2>128 </div>129 <div class="divide-y divide-gray-700">130 <div class="p-4 hover:bg-gray-750 cursor-pointer">131 <div class="flex justify-between items-start">132 <div>133 <div class="font-medium">Memory leak in event handlers</div>134 <div class="text-sm text-gray-400 mt-1">src/components/Modal.js:42</div>135 </div>136 <div class="flex items-center space-x-2">137 <span class="px-2 py-1 bg-red-900 bg-opacity-30 text-red-400 text-xs rounded">Critical</span>138 <i data-feather="chevron-right" class="text-gray-400"></i>139 </div>140 </div>141 </div>142 <div class="p-4 hover:bg-gray-750 cursor-pointer">143 <div class="flex justify-between items-start">144 <div>145 <div class="font-medium">Unhandled promise rejection</div>146 <div class="text-sm text-gray-400 mt-1">src/utils.js:156</div>147 </div>148 <div class="flex items-center space-x-2">149 <span class="px-2 py-1 bg-red-900 bg-opacity-30 text-red-400 text-xs rounded">Critical</span>150 <i data-feather="chevron-right" class="text-gray-400"></i>151 </div>152 </div>153 </div>154 </div>155 </div>156 157 <!-- Code Diff Viewer -->158 <div class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">159 <div class="p-4 border-b border-gray-700 flex justify-between items-center">160 <h2 class="text-lg font-bold flex items-center">161 <i data-feather="git-merge" class="mr-2 text-indigo-400"></i>162 Suggested Refactoring163 </h2>164 <div class="flex space-x-2">165 <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white py-1 px-3 rounded">166 Accept167 </button>168 <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white py-1 px-3 rounded">169 Reject170 </button>171 </div>172 </div>173 <div class="grid grid-cols-1 md:grid-cols-2 divide-x divide-gray-700">174 <div class="p-4">175 <div class="flex items-center justify-between mb-3">176 <div class="font-mono text-sm text-gray-400">Original (src/utils.js)</div>177 <div class="text-xs px-2 py-1 bg-red-900 bg-opacity-30 text-red-400 rounded">Removed</div>178 </div>179 <div class="font-mono text-sm bg-gray-900 rounded p-4 overflow-x-auto">180 <div class="diff-removed px-2 -mx-2">181 function processData(data) {<br>182 let result = [];<br>183 for (let i = 0; i < data.length; i++) {<br>184 if (data[i].active) {<br>185 result.push({<br>186 id: data[i].id,<br>187 name: data[i].name.toUpperCase()<br>188 });<br>189 }<br>190 }<br>191 return result;<br>192 }193 </div>194 </div>195 </div>196 <div class="p-4">197 <div class="flex items-center justify-between mb-3">198 <div class="font-mono text-sm text-gray-400">Suggested Refactor</div>199 <div class="text-xs px-2 py-1 bg-green-900 bg-opacity-30 text-green-400 rounded">Added</div>200 </div>201 <div class="font-mono text-sm bg-gray-900 rounded202</body>203</html>