diff --git a/config/navigation.json b/config/navigation.json
index e2f857e4..cdb5f2bd 100644
--- a/config/navigation.json
+++ b/config/navigation.json
@@ -126,7 +126,8 @@
{
"group": "Evaluation",
"pages": [
- "tutorials/evaluate_trails_with_opa"
+ "tutorials/evaluate_trails_with_opa",
+ "tutorials/evaluate_policies_server_side"
]
},
{
diff --git a/images/tutorials/policy-decision-detail.png b/images/tutorials/policy-decision-detail.png
new file mode 100644
index 00000000..dfded4cb
Binary files /dev/null and b/images/tutorials/policy-decision-detail.png differ
diff --git a/images/tutorials/policy-decisions.png b/images/tutorials/policy-decisions.png
new file mode 100644
index 00000000..c63cf716
Binary files /dev/null and b/images/tutorials/policy-decisions.png differ
diff --git a/images/tutorials/policy-list.png b/images/tutorials/policy-list.png
new file mode 100644
index 00000000..ea5d1b8e
Binary files /dev/null and b/images/tutorials/policy-list.png differ
diff --git a/images/tutorials/policy-source.png b/images/tutorials/policy-source.png
new file mode 100644
index 00000000..d1940976
Binary files /dev/null and b/images/tutorials/policy-source.png differ
diff --git a/mockups/policies-ui/.gitignore b/mockups/policies-ui/.gitignore
new file mode 100644
index 00000000..f3f494d5
--- /dev/null
+++ b/mockups/policies-ui/.gitignore
@@ -0,0 +1,5 @@
+# generated by build.py + Chrome headless
+# NB: the stylesheet must NOT be committed -- Mintlify auto-applies any .css in the project
+kosli-mock.css
+policy-*.html
+policy-*.png
diff --git a/mockups/policies-ui/README.md b/mockups/policies-ui/README.md
new file mode 100644
index 00000000..0dea1c85
--- /dev/null
+++ b/mockups/policies-ui/README.md
@@ -0,0 +1,25 @@
+# Proposed Policies UI — wireframe mockups
+
+Sources for the mockup images used by
+[`tutorials/evaluate_policies_server_side.mdx`](../../tutorials/evaluate_policies_server_side.mdx).
+They depict a **proposed** UI that does not exist yet, so every rendered page carries a
+"Mockup · proposed design" marker.
+
+Chrome and palette were matched against the real Controls screenshots in
+`images/tutorials/controls-*.png` (sidebar `#101c2b`, primary `#1e55cd`, compliant `#3ca36f`,
+non-compliant `#ce4a3e`). `logo.png` / `logo-footer.png` are crops of the real logo with the ICC
+profile stripped, so they blend with the CSS colors.
+
+## Regenerate
+
+```bash
+python3 build.py # also writes kosli-mock.css (gitignored)
+for p in policy-list policy-source policy-decisions policy-decision-detail; do
+ "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
+ --headless=new --disable-gpu --hide-scrollbars --force-device-scale-factor=1 \
+ --window-size=1535,1011 --screenshot="$p.png" "file://$PWD/$p.html"
+done
+cp policy-*.png ../../images/tutorials/
+```
+
+1535x1011 at 1x matches the existing Controls screenshots.
diff --git a/mockups/policies-ui/_chrome.html b/mockups/policies-ui/_chrome.html
new file mode 100644
index 00000000..a9f0568d
--- /dev/null
+++ b/mockups/policies-ui/_chrome.html
@@ -0,0 +1,24 @@
+
+
+
+
+ cyber-dojo
+
+
+
+
+
diff --git a/mockups/policies-ui/_footer.html b/mockups/policies-ui/_footer.html
new file mode 100644
index 00000000..d1c7831e
--- /dev/null
+++ b/mockups/policies-ui/_footer.html
@@ -0,0 +1,6 @@
+
diff --git a/mockups/policies-ui/_topbar.html b/mockups/policies-ui/_topbar.html
new file mode 100644
index 00000000..221ce3c1
--- /dev/null
+++ b/mockups/policies-ui/_topbar.html
@@ -0,0 +1,5 @@
+
The bundle is read-only here. Edit it in your repository and publish a new
+ version with kosli create policy — the version shown is the one that runs
+ when an evaluation names this policy. Tests are stored with the bundle for audit but are not
+ executed server-side.
+