diff --git a/docs-site/src/components/CompilePreview.astro b/docs-site/src/components/CompilePreview.astro
new file mode 100644
index 0000000..609318d
--- /dev/null
+++ b/docs-site/src/components/CompilePreview.astro
@@ -0,0 +1,103 @@
+---
+// Side-by-side markdown → compiled YAML preview with arrow
+---
+
+
+
+
+
+
+
ado-aw compile
+
+
+
+
+
+
diff --git a/docs-site/src/content/docs/index.mdx b/docs-site/src/content/docs/index.mdx
index 98b7a54..603849f 100644
--- a/docs-site/src/content/docs/index.mdx
+++ b/docs-site/src/content/docs/index.mdx
@@ -17,27 +17,56 @@ hero:
---
import { Card, CardGrid, Tabs, TabItem } from '@astrojs/starlight/components';
+import CompilePreview from '../../components/CompilePreview.astro';
+## Define agents in markdown
+
+No pipeline YAML to hand-write. No complex scripting. Just describe the agent's purpose in a markdown file with a YAML front-matter header for configuration.
+
+
+
```markdown
---
on:
- schedule: daily around 09:00
-repos:
- - my-org/my-service
+ schedule: weekly on monday around 10:00
+engine:
+ model: gpt-4.1
+tools:
+ bash: [grep, find, wc, jq]
safe-outputs:
- create-pr:
- title-prefix: "[security] "
- max: 3
+ create-pull-request:
+ title-prefix: "[docs] "
+ max: 1
+ comment-on-work-item:
---
-## Dependency Guardian
+## Documentation Sync
-Scan all package manifests for outdated or vulnerable dependencies.
-For each finding, create a pull request that bumps the version
-and updates the lockfile. Include a summary of CVEs addressed.
+Review all public API surfaces and ensure the corresponding
+docs are up to date. Open a PR with any corrections and
+comment on related work items with a summary.
```
+
+
+```yaml
+# Auto-generated by ado-aw -- do not edit
+trigger: none
+schedules:
+ - cron: "23 10 * * 1"
+ branches:
+ include: [main]
+stages:
+ - stage: Agent
+ # Network-isolated sandbox, read-only token...
+ - stage: Detection
+ # AI threat scan of proposed outputs...
+ - stage: Execution
+ # Apply approved PRs and comments...
+```
+
+
-Wake up to security patch PRs, documentation updates, and pipeline failure analysis -- all proposed, reviewed, and applied automatically while you sleep.
+Vulnerabilities patched. Docs updated. Broken builds diagnosed and fixed. By the time you open your laptop, agents have already done the work -- proposed, reviewed, and ready to merge.
---
@@ -65,19 +94,22 @@ Wake up to security patch PRs, documentation updates, and pipeline failure analy
Every compiled pipeline enforces a defense-in-depth model. The agent **never** receives write credentials or secrets.
```mermaid
-flowchart LR
+flowchart TD
E["Trigger"] --> Agent
- subgraph Sandbox["Isolated Container -- Read-only Token -- Firewall"]
+ subgraph Sandbox["Sandbox"]
+ direction LR
Agent["AI Agent"]
+ Details["Isolated Container\nRead-only Token\nNetwork Firewall"]
end
- Agent --> Output["Proposed\nSafe Outputs"]
- Output --> Detect["Threat\nDetection"]
- Detect -->|"safe"| Write["Executor\n(write token)"]
+ Agent --> Output["Proposed Safe Outputs"]
+ Output --> Detect["Threat Detection"]
+ Detect -->|"safe"| Write["Executor (write token)"]
Detect -->|"blocked"| Fail["Rejected"]
- Write --> ADO["Azure DevOps\nAPIs"]
+ Write --> ADO["Azure DevOps APIs"]
- style Sandbox stroke:#7c3aed,stroke-width:2px
+ style Sandbox stroke:#7c3aed,stroke-width:2px,fill:none
style Agent fill:#4361ee,color:#fff,stroke:#3a56d4
+ style Details fill:none,stroke:#7c3aed,stroke-width:1px,color:#9f7aea,stroke-dasharray:4 2,font-size:0.75rem
style Detect fill:#e6a817,color:#1a1a1a,stroke:#c49000
style Write fill:#2d9d78,color:#fff,stroke:#238066
style Fail fill:#e63946,color:#fff,stroke:#c5303c
@@ -94,55 +126,6 @@ flowchart LR
---
-## Define agents in markdown
-
-No pipeline YAML to hand-write. No complex scripting. Just describe the agent's purpose in a markdown file with a YAML front-matter header for configuration.
-
-
-
-```markdown
----
-on:
- schedule: weekly on monday around 10:00
-engine:
- model: gpt-4.1
-tools:
- bash: [grep, find, wc, jq]
-safe-outputs:
- create-pr:
- title-prefix: "[docs] "
- max: 1
- comment-on-work-item:
----
-
-## Documentation Sync
-
-Review all public API surfaces and ensure the corresponding
-docs are up to date. Open a PR with any corrections and
-comment on related work items with a summary.
-```
-
-
-```yaml
-# Auto-generated by ado-aw -- do not edit
-trigger: none
-schedules:
- - cron: "23 10 * * 1"
- branches:
- include: [main]
-stages:
- - stage: Agent
- # Network-isolated sandbox, read-only token...
- - stage: Detection
- # AI threat scan of proposed outputs...
- - stage: Execution
- # Apply approved PRs and comments...
-```
-
-
-
----
-
## Get started in minutes
diff --git a/docs-site/src/styles/custom.css b/docs-site/src/styles/custom.css
index 2c578a0..9ea3b34 100644
--- a/docs-site/src/styles/custom.css
+++ b/docs-site/src/styles/custom.css
@@ -48,6 +48,73 @@
.hero {
text-align: center;
padding: 3rem 1rem;
+ position: relative;
+ overflow: hidden;
+}
+
+/* Hero background glow — dark mode: animated aurora */
+.hero::before {
+ content: '';
+ position: absolute;
+ inset: -50%;
+ z-index: -1;
+ background:
+ radial-gradient(ellipse 40% 50% at 30% 20%, rgba(139, 92, 246, 0.25) 0%, transparent 60%),
+ radial-gradient(ellipse 50% 40% at 70% 10%, rgba(236, 72, 153, 0.18) 0%, transparent 55%),
+ radial-gradient(ellipse 45% 55% at 55% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
+ radial-gradient(ellipse 35% 45% at 20% 60%, rgba(168, 85, 247, 0.20) 0%, transparent 55%);
+ animation: hero-drift 12s ease-in-out infinite alternate;
+ pointer-events: none;
+ filter: blur(40px);
+ -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
+ mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
+}
+
+.hero::after {
+ content: '';
+ position: absolute;
+ inset: -50%;
+ z-index: -1;
+ background:
+ radial-gradient(ellipse 50% 35% at 60% 40%, rgba(192, 132, 252, 0.15) 0%, transparent 55%),
+ radial-gradient(ellipse 40% 50% at 35% 70%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
+ radial-gradient(ellipse 45% 40% at 75% 65%, rgba(244, 114, 182, 0.10) 0%, transparent 50%);
+ animation: hero-drift-reverse 15s ease-in-out infinite alternate;
+ pointer-events: none;
+ filter: blur(50px);
+ -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
+ mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
+}
+
+@keyframes hero-drift {
+ 0% { transform: translate(0, 0) rotate(0deg) scale(1); }
+ 33% { transform: translate(5%, -3%) rotate(2deg) scale(1.05); }
+ 66% { transform: translate(-3%, 4%) rotate(-1deg) scale(0.97); }
+ 100% { transform: translate(4%, 2%) rotate(3deg) scale(1.03); }
+}
+
+@keyframes hero-drift-reverse {
+ 0% { transform: translate(0, 0) rotate(0deg) scale(1); }
+ 50% { transform: translate(-5%, 3%) rotate(-3deg) scale(1.06); }
+ 100% { transform: translate(3%, -4%) rotate(2deg) scale(0.95); }
+}
+
+/* Hero background glow — light mode: softer aurora */
+[data-theme='light'] .hero::before {
+ background:
+ radial-gradient(ellipse 40% 50% at 30% 20%, rgba(107, 70, 193, 0.14) 0%, transparent 60%),
+ radial-gradient(ellipse 50% 40% at 70% 10%, rgba(219, 39, 119, 0.09) 0%, transparent 55%),
+ radial-gradient(ellipse 45% 55% at 55% 50%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
+ radial-gradient(ellipse 35% 45% at 20% 60%, rgba(124, 58, 237, 0.10) 0%, transparent 55%);
+ filter: blur(50px);
+}
+
+[data-theme='light'] .hero::after {
+ background:
+ radial-gradient(ellipse 50% 35% at 60% 40%, rgba(147, 51, 234, 0.08) 0%, transparent 55%),
+ radial-gradient(ellipse 40% 50% at 35% 70%, rgba(79, 70, 229, 0.06) 0%, transparent 50%),
+ radial-gradient(ellipse 45% 40% at 75% 65%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
+ filter: blur(60px);
}
.hero h1 {
@@ -141,6 +208,13 @@ pre {
border-radius: 0.5rem;
}
+/* Mermaid diagrams — prevent mobile overflow */
+.mermaid,
+pre:has(.mermaid) {
+ overflow-x: auto;
+ max-width: 100%;
+}
+
/* Table styling */
table {
border-collapse: collapse;