feat: expand mock with governance features and split into components

Split the monolithic unified-platform.html (2,642 lines) into three
co-located files: HTML (~1,500 lines), CSS (~1,300 lines), and JS
(~150 lines) for easier developer onboarding.

Added new features based on browser feedback and doc alignment:
- Role-based views with sidebar switcher (Admin/Designer/Caseworker)
- Process versioning with diff summary, version history, deploy modal
- Settings panel with Keycloak/SSO config and AD role mapping
- Agent management panel with detail views and create modal
- Automation detail view with workflow steps
- AI Assistant with chat history, slash-command skills, and rich output
- Operations chart improvements (y-axis labels, hover tooltips)

Updated mocks.md to document all current mock capabilities.
Updated CLAUDE.md convention for co-located mock files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: yepzdk

CLAUDE.md

@@ -28,7 +28,7 @@ requirements.txt                   # Python dependencies
 ## Conventions
 
 - All content is written in Markdown
-- Interactive mocks are self-contained HTML files (no external dependencies)
+- Interactive mocks are self-contained (no external dependencies). Small mocks use a single HTML file. Larger mocks may split CSS and JS into co-located files with the same base name (e.g. `unified-platform.html`, `.css`, `.js`)
 - Images are PNG screenshots of the mocks
 - Every project document starts with a project label: `<small>**Project:** Project Name</small>`
 - Use MkDocs Material admonitions (`!!! info`, `!!! warning`) for callouts

docs/projects/agentic-orchestration/mocks.md

@@ -7,10 +7,32 @@ Interactive HTML prototypes demonstrating the proposed platform. Open them to tr
 ---
 
 **[Unified Platform](mocks/unified-platform.html)**
-A mock of the full orchestration studio showing how Flowable, n8n, and Grafana can feel like a single seamless platform. Click through five views in the sidebar:
+A mock of the full orchestration studio showing how Flowable, n8n, and Grafana can feel like a single seamless platform. Click through eight views in the sidebar:
 
-- **Process Map** — a BPMN-style flow for "Parking Complaint Handling" with color-coded steps (agent, human task, integration) and live process metrics
-- **My Tasks** — a human-in-the-loop task inbox with priority indicators
-- **Automations** — n8n-style integration cards showing connectors, status, and run counts
-- **Dashboard** — Grafana-style analytics with process completions, hours saved, and type breakdown
-- **AI Assistant** — a chat-based assistant that proposes process flows with a step-by-step preview panel
+### Overview
+
+- **Dashboard** — platform-wide analytics with stat cards (active processes, completions, hours saved, pending tasks), a 14-day bar chart with hover tooltips, and a donut chart breaking down work by type (human tasks, integrations, AI agents, automated)
+
+### Processes
+
+- **Process Map** — list of all processes with status, running instances, and completion metrics. Click a process to see its full BPMN-style flow with color-coded node types (agent, human task, n8n integration, gateway). Process detail shows live metrics including running instances (clickable — navigates to tasks), average completion time, human wait count, dependencies, and estimated time saved per case. The Parking Complaint process also demonstrates **process versioning**: a diff-style changes summary (v2.1 vs v2.0), a version history timeline with deployer and notes, and a "Deploy new version" button that opens a confirmation modal with deployment notes and stakeholder notification. Two example processes: Parking Complaint Handling and Employee Onboarding
+- **My Tasks** — Kanban board with four columns (New, In Progress, Waiting, Done). Click a task to open the detail view showing full context, an AI-drafted response with approve/edit/regenerate/reject actions, a details sidebar (status, priority, assignee, SLA with countdown), linked external systems (KMD, SBSYS), and a process timeline showing completed and pending steps
+- **Automations** — grid of n8n automation cards with name, description, connector tags, status, and run counts. Click the first card to see the detail view with statistics (runs, success rate, avg duration), numbered workflow steps (trigger → transform → validate → create → notify), connectors, and actions (Edit in n8n, View logs, Disable)
+
+### Tools
+
+- **AI Assistant** — chat interface with a history sidebar showing previous personal conversations. The assistant supports executable skills via slash commands (`/analyze-process`, `/check-status`, `/draft-automation`, `/explain-errors`). The example conversation demonstrates rich output including inline process flow diagrams, metrics analysis, code blocks (Flowable expressions), and optimization suggestions
+
+### Admin
+
+- **Agents** — management panel for AI agents (admin-only). Shows agent cards with name, role, skill tags, and usage stats. Click the first card to see the detail view with description, statistics (accuracy, response time), skills with descriptions, system access permissions, and actions. The "Create Agent" button opens a modal with three options: configure manually, AI-assisted setup, or chat about it. Three example agents: Complaint Classifier, Response Drafter, Onboarding Assistant
+- **Operations** — Grafana-style monitoring for IT administrators. Shows infrastructure health (Flowable engine, n8n workers, PostgreSQL, alerts), an API response time chart (95th percentile, 24h) with y-axis labels and hover tooltips, errors by component, and a recent alerts table
+- **Settings** — identity and access management configuration (admin-only). Shows Keycloak identity provider connection, SAML 2.0 / Microsoft Entra ID federation, AD group to platform role mapping table (AAK-IT-Admins → Administrator, etc.), and session management settings
+
+### Governance
+
+- **Role-based views** — use the "View as role" dropdown in the sidebar (below the user avatar) to switch between Administrator, Process Designer, and Caseworker. The UI adapts: caseworkers see only Dashboard, My Tasks, and AI Assistant; process designers also see Process Map and Automations; administrators see everything including Agents, Operations, and Settings. The user name and role label update per role.
+
+### Modals
+
+All creation flows (New Process, New Automation, Create Agent) use a consistent modal pattern offering three paths: design/configure manually, AI-assisted draft/setup, or chat about it with the AI assistant. The deploy confirmation modal includes deployment notes and stakeholder notification.