kosli-dev · pbeckham · Jul 23, 2026 · Jul 23, 2026 · Jul 23, 2026 · Jul 23, 2026
@@ -126,7 +126,8 @@
             {
               "group": "Evaluation",
               "pages": [
-                "tutorials/evaluate_trails_with_opa"
+                "tutorials/evaluate_trails_with_opa",
+                "tutorials/evaluate_policies_server_side"
               ]
             },
             {

@@ -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
@@ -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.
@@ -0,0 +1,24 @@
+<div class="sidebar">
+  <img class="logo" src="logo.png" alt="Kosli">
+  <div class="org">
+    <svg class="home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" width="18" height="18"><path d="M3 10.5 12 4l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>
+    <span class="name">cyber-dojo</span>
+    <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="m6 9 6 6 6-6"/></svg>
+  </div>
+  <hr class="sep">
+  <nav>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M4 20V10M10 20V4m6 16v-7m6 7V8"/></svg>Dashboard</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></svg>Answers</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>Spaces</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg>Repos</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 9v12"/></svg>Environments</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M3 8c3-3 6 3 9 0s6-3 9 0M3 14c3-3 6 3 9 0s6-3 9 0"/></svg>Flows</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="m8 12 2.5 2.5L16 9"/></svg>Attestations</a>
+    <a class="on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>Policies</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg>Controls</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="3"/></svg>Actions</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="3" width="18" height="18" rx="2.5"/><path d="M12 8v8M8 12h8"/></svg>Integrations</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="3.2"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.5 5.5l2 2M16.5 16.5l2 2M18.5 5.5l-2 2M7.5 16.5l-2 2"/></svg>Settings</a>
+    <a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M4 4h7a2 2 0 0 1 2 2v15H6a2 2 0 0 1-2-2z"/><path d="M20 4h-7v17h5a2 2 0 0 0 2-2z"/></svg>Docs</a>
+  </nav>
+</div>
@@ -0,0 +1,6 @@
+  <footer>
+    <span class="gen">Mockup &bull; proposed design</span>
+    <img src="logo-footer.png" alt="Kosli">
+    <span>&copy; 2026 Kosli, Inc.</span>
+    <span class="links"><span>About</span><span>Blog</span><span>Terms</span><span>Privacy</span><span>Security</span><span>Status</span><span>Docs</span><span>API</span><span>Pricing</span><span>Contact</span></span>
+  </footer>
@@ -0,0 +1,5 @@
+  <div class="topbar">
+    <div class="crumb">CRUMB</div>
+    <div class="search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><circle cx="11" cy="11" r="7"/><path d="m16.5 16.5 4 4"/></svg>Search git commit or fingerprint</div>
+    <div class="avatar"><span class="ring"><svg viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="1.8" width="15" height="15"><circle cx="12" cy="8" r="3.4"/><path d="M5 20c1.2-3.6 4-5 7-5s5.8 1.4 7 5"/></svg></span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="m6 9 6 6 6-6"/></svg></div>
+  </div>