feat(landing): add mermaid improvement cycle diagram

- Added Mermaid.js ESM import to `landing/index.html` head.
- Created "Autonomous Improvement Cycle" section with a Mermaid flowchart diagram.
- Diagram illustrates the cycle: Scheduler -> Candidate Loop (Audit) -> Fixer Agents -> Prompt Maintenance -> Scheduler.
- Styled the diagram with existing CSS variables (`--surface-alt`, `--accent`) to match the "vibecoded" dark theme.
- Verified visual rendering via Playwright screenshot.

Co-authored-by: PR0M3TH3AN <[email protected]>
This commit is contained in:
google-labs-jules[bot]andPR0M3TH3AN committed 2026-02-14 18:25:12 +00:00
1 parent 419189d237
commit 92fa38c603
2 files changed
+53

No files matched your search

+53
View File
@@ -7,6 +7,10 @@
<link rel="icon" type="image/svg+xml" href="../assets/favicon.svg">
<link rel="stylesheet" href="../dashboard/styles.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true, theme: 'dark' });
</script>
<style>
/* Landing Page Specific Overrides & Additions */
body {
@@ -508,6 +512,30 @@
:root {
--danger: #ef4444;
}
/* Agent Flow Section */
.agent-flow {
max-width: 1200px;
margin: 0 auto 4rem;
padding: 0 2rem;
text-align: center;
}
.agent-flow h2 {
font-size: 2rem;
margin-bottom: 2rem;
color: var(--text-strong);
}
.mermaid {
background: var(--surface-alt);
padding: 2rem;
border-radius: 1rem;
border: 1px solid var(--border);
display: flex;
justify-content: center;
overflow-x: auto;
}
</style>
</head>
<body>
@@ -589,6 +617,31 @@
</div>
</div>
</section>
<section class="agent-flow">
<h2>Autonomous Improvement Cycle</h2>
<div class="mermaid">
flowchart TD
%% Nodes
S[Scheduler<br/>Daily & Weekly]
C[Candidate Loop<br/>Audit & Check Agents]
F[Fixer Agents<br/>Code Correction]
P[Prompt Maintenance<br/>Self-Evolution]
%% Edge Connections
S -->|Orchestrates| C
C -->|Identifies Gaps| F
F -->|Resolves Issues| P
P -->|Refines Prompts| S
%% Styles
classDef box fill:#151b2f,stroke:#2a3456,color:#dbe4ff,stroke-width:1px;
classDef accent fill:#4f8cff,stroke:#2f6be5,color:#ffffff,stroke-width:2px;
class S,P accent;
class C,F box;
</div>
</section>
</main>
<footer>
Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB