Skip to content

Commit cbc70a2

Browse files
nehaaprasadnehaaprasad
committed
feat: add repository analysis and one-click PR creation flow
- Add repository URL input section with GitHub URL validation - Implement full analysis flow calling /v1/rules/recommend API - Display personalized rule recommendations with confidence scores - Show PR plan details (branch, base, commit message) - Add 'Proceed with PR' button for automated PR creation - Include download and copy functionality for rules.yaml - Add comprehensive error handling and loading states - Implement responsive design for mobile compatibility - Use mock data for testing until backend is ready
1 parent 07e8ae9 commit cbc70a2

3 files changed

Lines changed: 947 additions & 33 deletions

File tree

‎index.html‎

Lines changed: 116 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,124 @@ <h1 class="title">
8080
<main class="main">
8181
<!-- Floating Decorative Elements (generated by script) -->
8282
<div class="floating-decorations"></div>
83-
83+
84+
<!-- Repository Analysis Section -->
85+
<div class="card main-card">
86+
<div class="card-content">
87+
<h2 class="section-title">Analyze your repository</h2>
88+
<p class="section-description">
89+
Paste your GitHub repository URL and get personalized Watchflow rule recommendations based on your repository's patterns, contributing guidelines, and history.
90+
</p>
91+
92+
<div class="input-section">
93+
<div class="input-wrapper">
94+
<input
95+
type="url"
96+
id="repoUrlInput"
97+
class="repo-input"
98+
placeholder="https://github.com/owner/repository"
99+
pattern="https://github\.com/[^/]+/[^/]+"
100+
>
101+
<button id="analyzeRepoBtn" class="btn btn-primary">Analyze Repository</button>
102+
</div>
103+
</div>
104+
105+
<div id="repoAnalysisResult" class="result-section hidden">
106+
<div class="success-alert">
107+
<div class="success-header">
108+
<svg class="check-icon" viewBox="0 0 24 24">
109+
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="#4CAF50"/>
110+
</svg>
111+
<span class="success-title">Analysis complete!</span>
112+
</div>
113+
<div class="success-instructions">
114+
<p>We've analyzed your repository and generated personalized rule recommendations.</p>
115+
</div>
116+
</div>
117+
118+
<div class="recommendations-section">
119+
<h3 class="recommendations-title">Recommended Rules</h3>
120+
<div id="recommendationsList" class="recommendations-list">
121+
<!-- Recommendations will be populated here -->
122+
</div>
123+
124+
<div class="pr-plan-section">
125+
<h4 class="pr-plan-title">Pull Request Plan</h4>
126+
<div id="prPlanDetails" class="pr-plan-details">
127+
<!-- PR plan details will be populated here -->
128+
</div>
129+
130+
<div class="pr-actions">
131+
<button id="proceedWithPrBtn" class="btn btn-primary proceed-btn">Proceed with PR</button>
132+
<button id="downloadRulesBtn" class="btn btn-secondary download-btn">Download rules.yaml</button>
133+
</div>
134+
</div>
135+
</div>
136+
137+
<div class="code-block">
138+
<div class="code-header">
139+
<div class="window-controls">
140+
<div class="window-dot red"></div>
141+
<div class="window-dot yellow"></div>
142+
<div class="window-dot green"></div>
143+
</div>
144+
<span class="code-title">.watchflow/rules.yaml</span>
145+
</div>
146+
<div class="code-container">
147+
<pre id="repoCodeContent" class="code-content"></pre>
148+
<button id="copyRepoCodeBtn" class="copy-icon-btn" title="Copy to clipboard">
149+
<svg viewBox="0 0 24 24" width="16" height="16">
150+
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentColor"/>
151+
</svg>
152+
</button>
153+
</div>
154+
</div>
155+
</div>
156+
157+
<div id="repoLoadingIndicator" class="loading hidden">
158+
<div class="loading-animation">
159+
<div class="robot-container">
160+
<div class="robot-head">
161+
<div class="robot-antenna">
162+
<div class="antenna-ball"></div>
163+
</div>
164+
<div class="robot-eyes">
165+
<div class="robot-eye robot-eye-left"></div>
166+
<div class="robot-eye robot-eye-right"></div>
167+
</div>
168+
<div class="robot-mouth"></div>
169+
</div>
170+
<div class="robot-body">
171+
<div class="robot-panel">
172+
<div class="robot-light robot-light-1"></div>
173+
<div class="robot-light robot-light-2"></div>
174+
<div class="robot-light robot-light-3"></div>
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
<span class="loading-text">Analyzing repository...</span>
180+
<span class="loading-subtext">This may take a few moments</span>
181+
</div>
182+
183+
<div id="repoErrorAlert" class="error-alert hidden">
184+
<div class="error-header">
185+
<svg class="error-icon" viewBox="0 0 24 24">
186+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="#F44336"/>
187+
</svg>
188+
<span class="error-title">Analysis failed</span>
189+
</div>
190+
<div class="error-content">
191+
<p id="repoErrorMessage">Something went wrong during repository analysis. Please try again.</p>
192+
</div>
193+
</div>
194+
</div>
195+
</div>
196+
197+
<!-- Rule Generation Section -->
84198
<div class="card main-card">
85199
<div class="card-content">
86-
<h2 class="section-title">Your repo, your rules</h2>
200+
<h2 class="section-title">Create custom rules</h2>
87201
<p class="section-description">
88202
Use natural language to describe the rule you want to enforce on your repo, and we will generate the Watchflow config for it.
89203
</p>

0 commit comments

Comments
 (0)