Frontend UI

Overview of Coach's web interface features and components

Dashboard Overview

The Coach dashboard is designed for clarity and ease of use, providing a comprehensive view of your repositories' security status.

Repository List

View all connected repositories with their security status indicators and last scan timestamps.

Security Overview

Get an at-a-glance summary of critical, high, medium, and low severity issues across all repositories.

Scan History

Track improvements over time with historical scan data and trend visualizations.

Action Center

Quickly access AI-powered fix suggestions and implement them with one click.

Results Page

The results page (results/page.tsx) is where scan findings are presented in an intuitive and actionable format.

Vulnerability List

Vulnerabilities are grouped by severity and displayed with detailed information:

tsx

// Vulnerability card component
<div className="bg-slate-800 border-l-4 border-red-500 p-4 rounded-md">
  <div className="flex justify-between items-start">
    <h4 className="text-lg font-medium">SQL Injection Vulnerability</h4>
    <span className="bg-red-500/20 text-red-400 px-2 py-1 rounded text-sm">
      Critical
    </span>
  </div>
  <p className="text-slate-400 mt-1">
    Unsanitized user input is passed directly to SQL query
  </p>
  <div className="mt-3">
    <p className="text-sm text-slate-500">File: src/database/queries.js:42</p>
  </div>
</div>

Fix Suggestions

The Gemini API provides intelligent fix suggestions that can be reviewed and applied:

tsx

// AI fix suggestion component
<div className="mt-4 bg-slate-850 p-4 rounded-md border border-emerald-800">
  <div className="flex items-center mb-2">
    <svg className="h-5 w-5 text-emerald-400 mr-2" fill="none" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
        d="M13 10V3L4 14h7v7l9-11h-7z" />
    </svg>
    <h5 className="font-medium text-emerald-400">AI-Suggested Fix</h5>
  </div>
  <CodeBlock language="diff">
    {`- const query = \`SELECT * FROM users WHERE id = ${userId}\`;
+ const query = \`SELECT * FROM users WHERE id = ?\`;
+ const params = [userId];`}
  </CodeBlock>
  <button className="mt-3 bg-emerald-600 hover:bg-emerald-700 px-4 py-2 rounded-md
    text-white text-sm transition-colors">
    Apply Fix
  </button>
</div>

Security Score

Each repository receives a security score based on the number and severity of issues:

Security Score

73/100 - Moderate Risk

5 issues to fix for an improved score

User Experience

Coach's frontend is designed with user experience as a priority, offering intuitive navigation and clear visualizations.

Responsive Design

Fully responsive layout that works seamlessly across desktop, tablet, and mobile devices.

Keyboard Navigation

Complete keyboard navigation support for accessibility and power users.

Progressive Loading

Scan results load progressively for quick initial rendering even with large datasets.