deploy: sync cordon-cloud server + dashboard

Dockerfile

@@ -6,8 +6,8 @@
 #   Dockerfile          — this file
 #   app.py              — cloud_server/app.py copied at deploy time
 #   storage.py          — cloud_server/storage.py copied at deploy time
-#   templates/          — dashboard.html
-#   static/             — dashboard.js
+#   templates/          — dashboard.html, landing.html
+#   static/             — dashboard.js, policies.js
 #
 # The Space's $HOME is writable for user 1000, so the sqlite db lives at
 # /home/app/data/cordon_cloud.db. Note that this filesystem is ephemeral:
@@ -35,7 +35,7 @@ RUN pip install \
         "uvicorn[standard]>=0.27,<1.0" \
         "pydantic>=2.5,<3.0" \
         "psycopg[binary,pool]>=3.2,<4.0" \
-        "cordon-ai==0.2.1"
+        "cordon-ai==0.2.2"
 
 # Lay the Python module out as ``cloud_server`` so the imports in
 # ``app.py`` (``from cloud_server.storage import EventStore``) resolve

app.py

@@ -405,11 +405,19 @@ class TryRequest(BaseModel):
 
     Kept deliberately small so the surface stays clearly demo-only;
     the real SDK exposes the full :class:`cordon.Action` shape.
+
+    Lane 4: optional ``policy`` field lets the dashboard policy editor
+    test a proposed policy against an action *before* the operator
+    hits Save. When ``policy`` is non-empty it overrides ``profile``.
     """
     kind: str = Field(default="shell", description="'shell' or 'write_file'")
     command: str | None = Field(default=None, max_length=4096)
     changes: dict[str, str] | None = Field(default=None)
     profile: str = Field(default="strict", description="'strict' | 'default' | 'permissive'")
+    policy: str | None = Field(
+        default=None, max_length=64 * 1024,
+        description="Optional inline policy DSL; overrides `profile` when set.",
+    )
 
 
 _TRY_RL_WINDOW_S = 60.0
@@ -467,13 +475,32 @@ def try_probe(payload: TryRequest, request: Request) -> dict[str, Any]:
             detail=f"cordon SDK not installed in this Space: {exc}",
         ) from exc
 
-    profile = (payload.profile or "strict").lower()
-    if profile == "strict":
-        guard = Guard.strict()
-    elif profile == "permissive":
-        guard = Guard.permissive()
+    # Two paths: inline policy text (overrides everything) or a bare
+    # profile name. The inline-policy path is what the dashboard
+    # editor calls when previewing a draft.
+    if payload.policy and payload.policy.strip():
+        try:
+            guard = Guard.from_policy(payload.policy)
+        except Exception as exc:  # noqa: BLE001 — surface to the UI
+            raise HTTPException(
+                status_code=400,
+                detail={
+                    "message": str(exc),
+                    "line":    getattr(exc, "line", 0),
+                    "snippet": getattr(exc, "snippet", ""),
+                },
+            ) from exc
+        # Surface to the response payload so callers can confirm the
+        # try-call did exercise the policy path, not a default profile.
+        profile = guard.name
     else:
-        guard = Guard.default()
+        profile = (payload.profile or "strict").lower()
+        if profile == "strict":
+            guard = Guard.strict()
+        elif profile == "permissive":
+            guard = Guard.permissive()
+        else:
+            guard = Guard.default()
 
     # Map the request to an Action. Bound by Pydantic's max_length so
     # we don't accept arbitrarily large payloads on a public endpoint.
@@ -508,6 +535,98 @@ def try_probe(payload: TryRequest, request: Request) -> dict[str, Any]:
     }
 
 
+# ─── Per-project policy endpoints (Lane 4) ────────────────────────────────────
+
+
+class PutPolicyRequest(BaseModel):
+    """Body for ``PUT /v1/policies/{project}``."""
+    text: str = Field(..., min_length=0, max_length=64 * 1024)
+
+
+class ValidatePolicyRequest(BaseModel):
+    """Body for ``POST /v1/policies/validate``."""
+    text: str = Field(..., max_length=64 * 1024)
+
+
+@app.get("/v1/policies/{project}")
+def get_policy(project: str, request: Request) -> dict[str, Any]:
+    """Return the current policy for a project, or 404 if none set.
+
+    Read surface — gated by the dashboard token, same as ``/v1/events``.
+    """
+    _require_dashboard_access(request)
+    row = STORE.get_policy(project)
+    if row is None:
+        raise HTTPException(status_code=404, detail="no policy configured for project")
+    return row
+
+
+@app.put("/v1/policies/{project}")
+def put_policy(
+    project: str,
+    payload: PutPolicyRequest,
+    request: Request,
+) -> dict[str, Any]:
+    """Upsert the policy for a project. Validates the DSL before storing.
+
+    Write surface — gated by the dashboard token, intentionally NOT by
+    the ingest key (writing policies is a *control-plane* action, not
+    a data-plane action, so it shouldn't share credentials with the
+    agent SDK).
+    """
+    _require_dashboard_access(request)
+
+    # Validate before storing — never persist a policy that won't load.
+    try:
+        from cordon.policy import parse as parse_policy
+        parse_policy(payload.text)
+    except Exception as exc:  # noqa: BLE001 — surface line+snippet to the editor
+        line = getattr(exc, "line", 0)
+        snippet = getattr(exc, "snippet", "")
+        raise HTTPException(
+            status_code=400,
+            detail={
+                "message": str(exc),
+                "line":    line,
+                "snippet": snippet,
+            },
+        ) from exc
+
+    return STORE.put_policy(project, payload.text)
+
+
+@app.delete("/v1/policies/{project}")
+def delete_policy(project: str, request: Request) -> dict[str, Any]:
+    _require_dashboard_access(request)
+    removed = STORE.delete_policy(project)
+    return {"project": project, "removed": removed}
+
+
+@app.post("/v1/policies/validate")
+def validate_policy(payload: ValidatePolicyRequest) -> dict[str, Any]:
+    """Parse the supplied text and report errors. Public, rate-limited.
+
+    Drives the live syntax-check in the dashboard editor — we don't
+    want every keystroke to hit ``PUT`` and clobber the saved version.
+    No persistence; the storage layer never sees this text.
+    """
+    try:
+        from cordon.policy import parse as parse_policy
+        policy = parse_policy(payload.text)
+    except Exception as exc:  # noqa: BLE001
+        return {
+            "ok":      False,
+            "message": str(exc),
+            "line":    getattr(exc, "line", 0),
+            "snippet": getattr(exc, "snippet", ""),
+        }
+    return {
+        "ok":        True,
+        "profile":   policy.profile,
+        "n_rules":   len(policy.rules),
+    }
+
+
 @app.get("/v1/events")
 def list_events(
     request: Request,

static/policies.js

@@ -0,0 +1,313 @@
+/* Cordon Cloud — Policy editor (Lane 4).
+ *
+ * Self-contained, no framework. Drives the #policies section of
+ * dashboard.html:
+ *
+ *   - Loads the project's saved policy on mount (GET /v1/policies/{p}).
+ *   - Validates as the operator types (debounced POST /v1/policies/validate).
+ *   - Save  → PUT /v1/policies/{p}
+ *   - Try   → POST /v1/try with the editor's current text inline
+ *   - Revert → re-fetch the saved version
+ *   - Delete → DELETE /v1/policies/{p} (with a confirm)
+ *
+ * The dashboard token is read from the URL once (via the same
+ * convention as dashboard.js) and forwarded as ``?t=`` on every
+ * authed request. We don't rely on cookies — the magic-link flow is
+ * the only auth surface and it lives entirely in the URL.
+ *
+ * Why a separate file: keeps the policy code reviewable on its own,
+ * and lets us A/B-deploy the editor without touching the well-tested
+ * verdict-stream code path.
+ */
+
+(() => {
+  "use strict";
+
+  const $ = (id) => document.getElementById(id);
+
+  // The editor only exists on the dashboard. Bail quietly if loaded
+  // somewhere else (defensive: the same script gets bundled in the
+  // landing template too, by mistake or by future intent).
+  const editor = $("pol-editor");
+  if (!editor) return;
+
+  const status   = $("pol-status");
+  const meta     = $("pol-meta");
+  const btnVal   = $("pol-validate");
+  const btnSave  = $("pol-save");
+  const btnRev   = $("pol-revert");
+  const btnDel   = $("pol-delete");
+  const tryKind  = $("pol-try-kind");
+  const tryCmd   = $("pol-try-cmd");
+  const btnTry   = $("pol-try-run");
+  const tryOut   = $("pol-try-result");
+
+  const TOKEN = new URLSearchParams(location.search).get("t") || "";
+
+  /** Build a relative URL with the access token forwarded. */
+  function url(path) {
+    const u = new URL(path, location.origin);
+    if (TOKEN) u.searchParams.set("t", TOKEN);
+    return u.pathname + u.search;
+  }
+
+  /** Read the project from the dashboard's project-select; falls back to "demo". */
+  function project() {
+    const sel = document.getElementById("project-select");
+    return (sel && sel.value) || "demo";
+  }
+
+  // ─── Status line helpers ──────────────────────────────────────────
+
+  function setStatus(msg, kind = "info") {
+    const colors = {
+      info:    "text-neutral-500",
+      ok:      "text-emerald-400",
+      warn:    "text-yellow-300",
+      error:   "text-red-400",
+    };
+    status.className =
+      "mono text-xs px-5 py-2 border-t border-white/5 min-h-[34px] " +
+      (colors[kind] || colors.info);
+    status.textContent = msg;
+  }
+
+  function setMeta(text) {
+    meta.textContent = text || "";
+  }
+
+  // ─── Saved-state tracking ─────────────────────────────────────────
+
+  // The last text we know matches the server. Used by Revert + by the
+  // dirty-indicator on the Save button.
+  let savedText = "";
+  let savedVersion = null;
+
+  function applyServerState(payload) {
+    savedText = payload.text || "";
+    savedVersion = payload.version ?? null;
+    editor.value = savedText;
+    if (savedVersion != null) {
+      const ts = new Date((payload.updated_at || 0) * 1000);
+      setMeta(`v${savedVersion} · saved ${ts.toLocaleString()}`);
+    } else {
+      setMeta("");
+    }
+    refreshDirty();
+  }
+
+  function refreshDirty() {
+    const dirty = editor.value !== savedText;
+    btnSave.classList.toggle("opacity-50", !dirty);
+    btnSave.disabled = !dirty;
+    btnRev.classList.toggle("opacity-50", !dirty);
+    btnRev.disabled = !dirty;
+  }
+
+  // ─── Initial load ─────────────────────────────────────────────────
+
+  async function loadCurrentPolicy() {
+    setStatus("loading current policy…");
+    try {
+      const r = await fetch(url(`/v1/policies/${encodeURIComponent(project())}`));
+      if (r.status === 404) {
+        applyServerState({ text: "", version: null, updated_at: 0 });
+        setStatus("no policy set yet — type one in and click save.", "info");
+        return;
+      }
+      if (!r.ok) {
+        setStatus(`load failed: HTTP ${r.status}`, "error");
+        return;
+      }
+      const body = await r.json();
+      applyServerState(body);
+      setStatus("loaded.", "ok");
+    } catch (err) {
+      setStatus(`load error: ${err.message}`, "error");
+    }
+  }
+
+  // ─── Validate (debounced + on-demand) ─────────────────────────────
+
+  let validateTimer = 0;
+
+  async function validateNow({ silent = false } = {}) {
+    const text = editor.value;
+    if (!text.trim()) {
+      if (!silent) setStatus("editor is empty.", "warn");
+      return;
+    }
+    try {
+      const r = await fetch(url("/v1/policies/validate"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text }),
+      });
+      const body = await r.json();
+      if (body.ok) {
+        setStatus(
+          `valid — profile: ${body.profile}, ${body.n_rules} rule(s).`,
+          "ok",
+        );
+      } else {
+        setStatus(`line ${body.line}: ${body.message}`, "error");
+      }
+    } catch (err) {
+      setStatus(`validate failed: ${err.message}`, "error");
+    }
+  }
+
+  editor.addEventListener("input", () => {
+    refreshDirty();
+    clearTimeout(validateTimer);
+    // Debounce: 500 ms after the operator stops typing — typing-fast
+    // operators get a single round-trip per pause, not per keystroke.
+    validateTimer = setTimeout(() => validateNow({ silent: true }), 500);
+  });
+
+  btnVal.addEventListener("click", () => validateNow({ silent: false }));
+
+  // ─── Save ─────────────────────────────────────────────────────────
+
+  btnSave.addEventListener("click", async () => {
+    const text = editor.value;
+    setStatus("saving…");
+    try {
+      const r = await fetch(url(`/v1/policies/${encodeURIComponent(project())}`), {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text }),
+      });
+      if (r.status === 401) {
+        setStatus(
+          "401 — open the dashboard via the magic-link URL with `?t=<token>`.",
+          "error",
+        );
+        return;
+      }
+      if (!r.ok) {
+        // The server returns {detail: {message, line, snippet}} for
+        // syntax errors. Show the line number so it's actionable.
+        const body = await r.json().catch(() => ({}));
+        const d = body.detail || {};
+        setStatus(
+          d.line
+            ? `line ${d.line}: ${d.message}`
+            : `save failed: HTTP ${r.status}`,
+          "error",
+        );
+        return;
+      }
+      const body = await r.json();
+      applyServerState(body);
+      setStatus(`saved as v${body.version}.`, "ok");
+    } catch (err) {
+      setStatus(`save error: ${err.message}`, "error");
+    }
+  });
+
+  // ─── Revert ───────────────────────────────────────────────────────
+
+  btnRev.addEventListener("click", () => {
+    editor.value = savedText;
+    refreshDirty();
+    setStatus(savedVersion ? `reverted to v${savedVersion}.` : "reverted.", "info");
+  });
+
+  // ─── Delete ───────────────────────────────────────────────────────
+
+  btnDel.addEventListener("click", async () => {
+    if (!confirm(`Delete policy for project "${project()}"? Agents will fall back to the strict default.`)) return;
+    setStatus("deleting…");
+    try {
+      const r = await fetch(url(`/v1/policies/${encodeURIComponent(project())}`), {
+        method: "DELETE",
+      });
+      if (!r.ok) {
+        setStatus(`delete failed: HTTP ${r.status}`, "error");
+        return;
+      }
+      const body = await r.json();
+      applyServerState({ text: "", version: null, updated_at: 0 });
+      setStatus(
+        body.removed ? "deleted." : "no policy was set; nothing to delete.",
+        "info",
+      );
+    } catch (err) {
+      setStatus(`delete error: ${err.message}`, "error");
+    }
+  });
+
+  // ─── Try this policy ──────────────────────────────────────────────
+
+  function renderTry(body) {
+    const decision = (body.decision || "?").toLowerCase();
+    const colors = {
+      block: "text-red-300 bg-red-500/10 border-red-500/30",
+      flag:  "text-yellow-300 bg-yellow-500/10 border-yellow-500/30",
+      allow: "text-emerald-300 bg-emerald-500/10 border-emerald-500/30",
+    };
+    const cls = colors[decision] || "text-neutral-300 border-white/10 bg-white/5";
+
+    const probes = (body.probes || []).map(
+      (p) => `<div class="text-neutral-500">→ ${escapeHtml(p.probe)} (${escapeHtml(p.severity)}) · ${escapeHtml(p.evidence || "")}</div>`,
+    ).join("");
+
+    const reason = body.reason ? `<div class="text-neutral-400 mt-1">${escapeHtml(body.reason)}</div>` : "";
+
+    tryOut.innerHTML = `
+      <div class="px-2 py-1 rounded border ${cls} inline-block uppercase tracking-wider">${decision}</div>
+      <div class="text-neutral-500">profile: <span class="text-neutral-300">${escapeHtml(body.profile || "?")}</span></div>
+      ${reason}
+      ${probes}
+    `;
+  }
+
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, (c) => ({
+      "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
+    }[c]));
+  }
+
+  btnTry.addEventListener("click", async () => {
+    const cmd = (tryCmd.value || "").trim();
+    if (!cmd) {
+      tryOut.innerHTML = '<div class="text-yellow-300">enter a command first.</div>';
+      return;
+    }
+    tryOut.innerHTML = '<div class="text-neutral-500">running probes…</div>';
+    try {
+      const r = await fetch(url("/v1/try"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          kind: tryKind.value || "shell",
+          command: cmd,
+          policy: editor.value,
+        }),
+      });
+      if (!r.ok) {
+        const body = await r.json().catch(() => ({}));
+        const d = body.detail || {};
+        tryOut.innerHTML =
+          `<div class="text-red-300">${
+            d.line ? `line ${d.line}: ${escapeHtml(d.message || "")}` : `error: HTTP ${r.status}`
+          }</div>`;
+        return;
+      }
+      renderTry(await r.json());
+    } catch (err) {
+      tryOut.innerHTML =
+        `<div class="text-red-300">${escapeHtml(err.message)}</div>`;
+    }
+  });
+
+  // ─── Boot ────────────────────────────────────────────────────────
+
+  // Reload the saved policy if the operator switches projects via the
+  // dashboard's project-select. Same convention dashboard.js uses.
+  const projSel = document.getElementById("project-select");
+  if (projSel) projSel.addEventListener("change", loadCurrentPolicy);
+
+  loadCurrentPolicy();
+})();

storage.py

@@ -90,6 +90,15 @@ class EventStore(Protocol):
     def count(self, project: str | None = None) -> int: ...
     def close(self) -> None: ...
 
+    # ── Per-project policy storage (Lane 4) ────────────────────────────────
+    # Stored as the verbatim policy text plus a monotonic version + an
+    # updated_at timestamp. Returns None when no policy has ever been
+    # configured for the project — callers fall back to whichever
+    # default Guard profile they prefer.
+    def get_policy(self, project: str) -> dict[str, Any] | None: ...
+    def put_policy(self, project: str, text: str) -> dict[str, Any]: ...
+    def delete_policy(self, project: str) -> bool: ...
+
 
 class SqliteEventStore:
     """Single-file sqlite backend. The default.
@@ -141,6 +150,13 @@ class SqliteEventStore:
                     ON events (project, blocked, ts DESC);
                 CREATE INDEX IF NOT EXISTS idx_events_probe
                     ON events (project, top_probe, ts DESC);
+
+                CREATE TABLE IF NOT EXISTS policies (
+                    project    TEXT PRIMARY KEY,
+                    text       TEXT NOT NULL,
+                    version    INTEGER NOT NULL DEFAULT 1,
+                    updated_at REAL    NOT NULL
+                );
                 """
             )
 
@@ -325,6 +341,58 @@ class SqliteEventStore:
                 ).fetchone()
         return int(row["n"] or 0)
 
+    # ─── Policy storage ───────────────────────────────────────────────────────
+
+    def get_policy(self, project: str) -> dict[str, Any] | None:
+        """Return ``{text, version, updated_at}`` or ``None`` if unset."""
+        with self._lock:
+            row = self._conn.execute(
+                "SELECT text, version, updated_at FROM policies WHERE project = ?",
+                (project,),
+            ).fetchone()
+        if row is None:
+            return None
+        return {
+            "project":    project,
+            "text":       row["text"],
+            "version":    int(row["version"]),
+            "updated_at": float(row["updated_at"]),
+        }
+
+    def put_policy(self, project: str, text: str) -> dict[str, Any]:
+        """Upsert the policy for ``project``; auto-increments ``version``."""
+        now = time.time()
+        with self._lock:
+            self._conn.execute(
+                """
+                INSERT INTO policies (project, text, version, updated_at)
+                VALUES (?, ?, 1, ?)
+                ON CONFLICT(project) DO UPDATE SET
+                    text       = excluded.text,
+                    version    = policies.version + 1,
+                    updated_at = excluded.updated_at
+                """,
+                (project, text, now),
+            )
+            row = self._conn.execute(
+                "SELECT version, updated_at FROM policies WHERE project = ?",
+                (project,),
+            ).fetchone()
+        return {
+            "project":    project,
+            "text":       text,
+            "version":    int(row["version"]),
+            "updated_at": float(row["updated_at"]),
+        }
+
+    def delete_policy(self, project: str) -> bool:
+        """Delete the policy for ``project``. Returns True if a row was removed."""
+        with self._lock:
+            cur = self._conn.execute(
+                "DELETE FROM policies WHERE project = ?", (project,),
+            )
+        return cur.rowcount > 0
+
     def close(self) -> None:
         with self._lock:
             self._conn.close()
@@ -488,6 +556,13 @@ class PostgresEventStore:
         ON events (project, blocked, ts DESC);
     CREATE INDEX IF NOT EXISTS idx_events_probe
         ON events (project, top_probe, ts DESC);
+
+    CREATE TABLE IF NOT EXISTS policies (
+        project    TEXT PRIMARY KEY,
+        text       TEXT NOT NULL,
+        version    INTEGER NOT NULL DEFAULT 1,
+        updated_at DOUBLE PRECISION NOT NULL
+    );
     """
 
     def _ensure_schema(self) -> None:
@@ -650,6 +725,53 @@ class PostgresEventStore:
             row = cur.fetchone() or {}
         return int(row.get("n") or 0)
 
+    # ─── Policy storage ───────────────────────────────────────────────────
+
+    def get_policy(self, project: str) -> dict[str, Any] | None:
+        with self._pool.connection() as conn, conn.cursor() as cur:
+            cur.execute(
+                "SELECT text, version, updated_at FROM policies WHERE project = %s",
+                (project,),
+            )
+            row = cur.fetchone()
+        if row is None:
+            return None
+        return {
+            "project":    project,
+            "text":       row["text"],
+            "version":    int(row["version"]),
+            "updated_at": float(row["updated_at"]),
+        }
+
+    def put_policy(self, project: str, text: str) -> dict[str, Any]:
+        now = time.time()
+        with self._pool.connection() as conn, conn.cursor() as cur:
+            cur.execute(
+                """
+                INSERT INTO policies (project, text, version, updated_at)
+                VALUES (%s, %s, 1, %s)
+                ON CONFLICT (project) DO UPDATE SET
+                    text       = EXCLUDED.text,
+                    version    = policies.version + 1,
+                    updated_at = EXCLUDED.updated_at
+                RETURNING version, updated_at
+                """,
+                (project, text, now),
+            )
+            row = cur.fetchone() or {}
+        return {
+            "project":    project,
+            "text":       text,
+            "version":    int(row.get("version") or 1),
+            "updated_at": float(row.get("updated_at") or now),
+        }
+
+    def delete_policy(self, project: str) -> bool:
+        with self._pool.connection() as conn, conn.cursor() as cur:
+            cur.execute("DELETE FROM policies WHERE project = %s", (project,))
+            n = cur.rowcount
+        return n > 0
+
     def close(self) -> None:
         self._pool.close()
 

templates/dashboard.html

@@ -88,6 +88,8 @@
           <option value="86400" selected>last 24 h</option>
           <option value="604800">last 7 d</option>
         </select>
+        <a href="#policies"
+           class="hover:text-white transition-colors hidden md:inline">Policies</a>
         <a href="/api/docs" target="_blank" rel="noopener"
            class="hover:text-white transition-colors hidden md:inline">API</a>
         <a href="https://github.com/Ashok-kumar290/cordon" target="_blank" rel="noopener"
@@ -183,6 +185,118 @@
   </section>
 
   <!-- ─── How to send your own events ────────────────────────────── -->
+  <!-- ─── Policy editor (Lane 4) ─────────────────────────────────── -->
+  <section id="policies" class="max-w-7xl mx-auto px-6 mt-10 scroll-mt-20">
+    <div class="panel rounded-lg overflow-hidden">
+
+      <!-- Header strip ─ identifies the project + carries action buttons -->
+      <div class="flex flex-wrap items-center gap-3 px-5 py-3 border-b border-white/5">
+        <div class="flex items-center gap-2">
+          <iconify-icon icon="ph:shield-check-bold" width="18"
+                        class="text-emerald-400"></iconify-icon>
+          <div class="text-sm font-medium text-white">Project policy</div>
+          <span id="pol-meta" class="mono text-xs text-neutral-500"></span>
+        </div>
+
+        <div class="ml-auto flex items-center gap-2">
+          <button id="pol-validate"
+                  class="px-3 py-1 text-xs rounded mono border border-white/10
+                         text-neutral-300 hover:text-white hover:border-white/30
+                         transition-colors">
+            validate
+          </button>
+          <button id="pol-save"
+                  class="px-3 py-1 text-xs rounded mono bg-white text-black
+                         hover:bg-neutral-200 transition-colors">
+            save
+          </button>
+          <button id="pol-revert"
+                  class="px-3 py-1 text-xs rounded mono border border-white/10
+                         text-neutral-300 hover:text-white hover:border-white/30
+                         transition-colors">
+            revert
+          </button>
+          <button id="pol-delete"
+                  class="px-3 py-1 text-xs rounded mono border border-red-500/30
+                         text-red-300 hover:text-red-200 hover:border-red-500/60
+                         transition-colors">
+            delete
+          </button>
+        </div>
+      </div>
+
+      <!-- Two-column body: editor on the left, "try it" on the right -->
+      <div class="grid grid-cols-1 lg:grid-cols-3">
+
+        <!-- Editor + status line -->
+        <div class="lg:col-span-2 border-b lg:border-b-0 lg:border-r border-white/5">
+          <textarea id="pol-editor"
+                    spellcheck="false"
+                    class="w-full h-[420px] block bg-black/40 text-neutral-200 mono text-[13px]
+                           leading-6 px-5 py-4 outline-none resize-none scrollbar"
+                    placeholder="profile: strict
+&#10;
+# Carve out a real-world need our agents have:
+allow when command_starts_with: &quot;rm -rf node_modules&quot;
+allow when command_starts_with: &quot;rm -rf ./build&quot;
+&#10;
+# Promote a known-risky pattern to a hard block:
+block when path_starts_with: &quot;/etc/&quot;
+&#10;
+# Downgrade a noisy probe to flag-only:
+flag when probe: typosquat"></textarea>
+
+          <div id="pol-status"
+               class="mono text-xs px-5 py-2 border-t border-white/5
+                      text-neutral-500 min-h-[34px]">
+            ready.
+          </div>
+        </div>
+
+        <!-- Try-it panel: run the draft policy against an action without saving -->
+        <div class="p-5">
+          <div class="text-[11px] uppercase tracking-wider text-neutral-500">
+            Try this policy
+          </div>
+          <p class="mt-1 text-xs text-neutral-400">
+            Run the editor's current text against an action. Doesn't save —
+            useful for sanity-checking carve-outs before they go live.
+          </p>
+
+          <label class="block mt-4 text-[11px] uppercase tracking-wider text-neutral-500">
+            Action kind
+          </label>
+          <select id="pol-try-kind"
+                  class="mt-1 w-full bg-transparent border border-white/10 rounded px-2 py-1.5
+                         mono text-xs focus:outline-none focus:border-white/30">
+            <option value="shell">shell</option>
+            <option value="file">file</option>
+          </select>
+
+          <label class="block mt-3 text-[11px] uppercase tracking-wider text-neutral-500">
+            Command
+          </label>
+          <input id="pol-try-cmd" type="text"
+                 spellcheck="false"
+                 placeholder="rm -rf node_modules"
+                 class="mt-1 w-full bg-black/40 border border-white/10 rounded px-2 py-1.5
+                        mono text-xs text-neutral-200 focus:outline-none focus:border-white/30" />
+
+          <button id="pol-try-run"
+                  class="mt-4 w-full px-3 py-2 text-xs rounded mono
+                         bg-white text-black hover:bg-neutral-200 transition-colors">
+            run probes
+          </button>
+
+          <div id="pol-try-result"
+               class="mt-4 mono text-xs space-y-2 min-h-[120px]">
+            <div class="text-neutral-500">Output appears here.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <section class="max-w-7xl mx-auto px-6 mt-10 mb-10">
     <div class="panel rounded-lg p-6">
       <h2 class="text-lg font-semibold text-white">Ship your own verdicts here</h2>
@@ -232,5 +346,6 @@ guard.add_listener(CloudReporter(
   </footer>
 
   <script src="/static/dashboard.js"></script>
+  <script src="/static/policies.js"></script>
 </body>
 </html>