Conversation
There was a problem hiding this comment.
Pull request overview
This PR modernizes the UI by introducing a new “Cockpit” dashboard, moving security analytics into a dedicated /security page, and aligning the app with a refreshed dark-first visual theme. It also improves developer/ops ergonomics with UI linting in CI and healthier container orchestration.
Changes:
- Redesign
/into “Cockpit” with placeholder stats/activity and quick actions; move security scan UI to/security. - Add placeholder pages for Activity, Collaborators, and Automation; update sidebar navigation accordingly.
- Refresh global theming/utilities (glow/glass/grid/gradient), default layout to dark mode, add UI linting to CI, and expose
NEXT_PUBLIC_API_BASE.
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| deploy/docker-compose.yml | Adds healthcheck/restart policy and shared network wiring for services. |
| apps/ui/package.json | Adds lint script and integrates linting into check. |
| apps/ui/components/page-header.tsx | Updates page header styling with gradient title/divider. |
| apps/ui/components/app-sidebar.tsx | New navigation structure + styling and footer state placeholder. |
| apps/ui/app/security/page.tsx | New dedicated security scan page and results UI. |
| apps/ui/app/page.tsx | Replaces old dashboard with “Cockpit” overview and quick actions. |
| apps/ui/app/layout.tsx | Dark-first layout tweaks + new background grid and header styling. |
| apps/ui/app/globals.css | Updates theme tokens and adds new utility classes (glow/glass/grid/gradient). |
| apps/ui/app/collaborators/page.tsx | Adds placeholder Collaborators page layout. |
| apps/ui/app/automation/page.tsx | Adds placeholder Automation page layout. |
| apps/ui/app/activity/page.tsx | Adds placeholder Activity page layout. |
| .github/workflows/ci.yml | Adds UI lint step; adjusts commitlint push conditions. |
| .env.example | Adds NEXT_PUBLIC_API_BASE example for frontend API access. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {c.status === "passed" ? ( | ||
| <CheckCircle className="mt-0.5 size-5 shrink-0 text-accent" /> | ||
| ) : ( | ||
| <XCircle className="mt-0.5 size-5 shrink-0 text-destructive" /> | ||
| )} |
There was a problem hiding this comment.
The API returns check statuses as "pass"/"fail" (see packages/checks + apps/api analytics router), but the UI is checking for "passed". This will mark every check as failed in the UI. Update the comparison (and any related labels) to match the backend status values.
| async function runScan() { | ||
| setError("") | ||
| setLoading(true) | ||
| try { | ||
| const res = await fetch(`${API}/analytics/overview`, { | ||
| method: "POST", | ||
| headers: { "Content-Type": "application/json" }, | ||
| body: JSON.stringify({ owner, token }), |
There was a problem hiding this comment.
runScan uses a try/finally without a catch, so network errors (DNS/CORS/connection issues) will throw and break the page instead of showing an error. Consider adding a catch that sets a user-visible error message (and optionally clearing data at scan start / on failure so stale results aren’t shown).
| const API = process.env.NEXT_PUBLIC_API_BASE || "http://localhost:8080" | ||
|
|
There was a problem hiding this comment.
Defaulting NEXT_PUBLIC_API_BASE to http://localhost:8080 in client-side code will break in most deployed setups if the env var is missing (browser "localhost" is the user’s machine). Prefer requiring NEXT_PUBLIC_API_BASE to be set at build/runtime, or use a same-origin relative path with a Next.js rewrite/proxy.
| <SidebarMenuButton | ||
| isActive={pathname === item.href || (item.href === "/repos" && pathname.startsWith("/repos"))} | ||
| isActive={isActive(item.href)} | ||
| className={isActive(item.href) ? "text-primary bg-primary/5 border-l-2 border-primary glow-sm" : ""} | ||
| render={<a href={item.href} />} | ||
| > |
There was a problem hiding this comment.
These internal navigations use plain <a href> which triggers full page reloads in Next.js (no client-side transitions/prefetch), and can drop client state. Prefer next/link (or router navigation) for in-app routes if the SidebarMenuButton supports it.
| <CardContent className="grid gap-2"> | ||
| <Button variant="outline" className="justify-between" render={<a href="/security" />}> | ||
| Run Security Scan | ||
| <ArrowRight className="size-3.5 text-muted-foreground" /> | ||
| </Button> | ||
| <Button variant="outline" className="justify-between" render={<a href="/repos" />}> | ||
| Manage Caches | ||
| <ArrowRight className="size-3.5 text-muted-foreground" /> | ||
| </Button> | ||
| <Button variant="outline" className="justify-between" render={<a href="/collaborators" />}> |
There was a problem hiding this comment.
These internal navigations use <a href> via the Button render prop, which will cause full document navigations in Next.js. Prefer next/link (or router navigation) for in-app routes to keep transitions client-side and enable prefetching.
This pull request introduces several significant UI and styling improvements to the application, focusing on a refreshed dashboard experience, new placeholder pages, and enhanced visual consistency. The main dashboard (
Cockpit) is now streamlined, with security analytics moved to a dedicated page. The global styles have been updated for a more modern look, and new utility classes have been added to support visual effects. Additionally, the CI workflow now includes linting for the UI, and a new environment variable is exposed for API access.UI/UX Improvements:
apps/ui/app/page.tsx) has been redesigned as the "Cockpit" page, showing organization stats, recent activity, and quick actions. The security scan functionality has been moved to a new dedicated page. [1] [2]Styling and Theming:
apps/ui/app/globals.csshave been updated for both light and dark themes, resulting in a more modern and accessible color palette..glass,.glow-border,.glow-sm,.text-gradient,.bg-grid) have been added to support glassmorphism, glow effects, gradients, and background grids.Developer Experience:
NEXT_PUBLIC_API_BASE) is now included in.env.examplefor frontend-backend API communication.CI Workflow:
Security Analytics:
/securitypage, with improved visual feedback and styling for scan results.These changes collectively modernize the application's look and feel, improve maintainability, and set the stage for future feature development.
closes #16