Wireframe: Workbench Policy Enforcement IA - #4022
Conversation
Interactive Console-style prototype for programmable OPA/Rego policies: security sidenav (Policies vs Gatekeeper), policy CRUD with editor and evaluation simulation, and workbench attach matching chatbot/webhook flow. Co-authored-by: Anna Nguyen <wailingwombat@users.noreply.github.com>
Soffi AI SummaryThis PR delivers interactive HTML wireframes and an information architecture (IA) document for the upcoming Workbench Policy Enforcement feature (backend tracked in #4014). It is purely a design/prototype artifact — no production Console UI code is included. The wireframes model the GraphQL API surface accurately across three core types:
The prototype went through several iterations: initial IA scaffolding → alignment to GraphQL CRUD fields → a short-lived simplification of the policy body to a plain textarea (reverted) → reintroduction of the body field inline in the create flow → splitting the policy list into Enforcement and Auto-attach tabs. A README documents the full field map, screen inventory, and CRUD matrix for handoff to frontend engineers. Commits
Updated: 2026-08-18 20:40 UTC |
Policy list/detail now use name, type, description, project, policy, and bindingPolicies. Evaluations show input/output/policyIds maps only. WorkbenchPolicy attach is policyId plus matches.regexes; ignore and immutable policy-on-edit are corrected. Co-authored-by: Anna Nguyen <wailingwombat@users.noreply.github.com>
The Body tab is now a single textarea for Policy.policy instead of a split metadata form plus highlighted editor. Co-authored-by: Anna Nguyen <wailingwombat@users.noreply.github.com>
This reverts commit fd9e2d5.
Create policy step two is now an open textarea for Policy.policy instead of jumping to the edit screen. Co-authored-by: Anna Nguyen <wailingwombat@users.noreply.github.com>
Keep WORKBENCH/STACK as place icons on the default Enforcement tab and BINDING on Auto-attach, instead of a flat type chip. Co-authored-by: Anna Nguyen <wailingwombat@users.noreply.github.com>
Summary
Clickable wireframes for programmable workbench policies (backend in #4014). Screens are aligned to the GraphQL types:
Policy—name,type,description,policy,project,policyEvaluations,bindingPoliciesPolicyEvaluation—input,output,policyIds(read-only samples)WorkbenchPolicy— nestedpolicy+matches.regexes(no ignore on the API)Prototype: http://127.0.0.1:8080/index.html (or open
docs/wireframes/workbench-policy-enforcement/index.html)IA + field map:
docs/wireframes/workbench-policy-enforcement/README.mdThis PR does not implement the Console UI.
CRUD vs types (corrected)
PolicycreatePolicy({ name, type, description, policy, projectId })policystring plus name/type/description/projectdeletePolicy(id)PolicyEvaluationpolicy.policyEvaluationsas input/output/policyIds mapsevaluatePolicyis a query replayWorkbenchPolicycreateWorkbenchPolicy(workbenchId, { policyId, matches: { regexes } })policyupdateWorkbenchPolicymatches only — policy is immutabledeleteWorkbenchPolicy(id)Policy has no workbenches connection. Attachments live on the workbench. Policy’s child tabs are Evaluations and Bindings.
WorkbenchPolicyMatchesonly hasregexes. Ignore names were removed from the attach form until they exist on GraphQL.Screens
Policies list
Rego editor
Simulate evaluation
Gatekeeper rename
Attach policy to workbench
Workbench launch with policies in side panel
Screenshots above are from the previous pass; open the HTML for the GraphQL-aligned fields (Bindings tab, evaluation maps, matches.regexes-only attach, edit-matches-only).
Test Plan
Visual review of the HTML prototype. No product tests.
Checklist
Plural Flow: console
To show artifacts inline, enable in settings.