feat(hub): wiki and mockups views in blueprints; document mockups

CHANGELOG.md

@@ -20,5 +20,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Multiple layout engines: ELK (hierarchical/layered/force), webcola, Smart Layout
 - PNG/SVG export, JSON save/load
 - Electron desktop app + browser mode
+- Mockup element (UX) with screen / route, design link and a low-fi SVG wireframe — generated by AI from the linked requirements and scenarios, sanitised and rendered as an image; shown on the canvas, in the properties panel and on Wiki pages
+- Mockup relations: Illustrates (→ requirement / scenario), Presented by (→ web app / container), Navigates to (→ mockup) for screen flows
+- Radical Forge: Mockups stage before C4 with batch wireframe generation, "Finish here" at every stage with a summary step, and a single footer action bar
+- Hub blueprints: per-actor screen flows (79 mockups in 19 flows) and named views — canvas: System context, Containers, Governance map, Mockups, technical flow, one per screen flow; wiki: Governance, Requirements; a per-mode view selector and `/cv/<viewId>` deep links in the Hub; views are imported with the concept
+
+### Fixed
+- Hub concept files' `views` were ignored by the viewer and on import
+- Importing from the Hub no longer stacks one "Imported …" notification per concept over the template-parameter form
 
 [Unreleased]: https://github.com/radicaltools/radical.tools/compare/HEAD

README.md

@@ -8,10 +8,12 @@ An open-source software architecture design studio — diagram, document, and ev
 
 - **C4 model** — Person, Software System, Container, Component, Database, Web App, Queue, Relation
 - **Domain & Governance elements** — Domain, ADR, Fitness Function, Requirement, Blueprint
+- **UI mockups** — Mockup element with a design link or an AI-generated low-fi wireframe, linked to requirements and scenarios (*illustrates*), to the container that renders it (*presented by*) and to other screens (*navigates to*) to model screen flows
 - **Smart Layout** — SA-based auto-layout with crossing minimisation, edge-length optimisation, aspect-ratio penalty, and compound parent fitting
 - **Multiple layout engines** — ELK (hierarchical/layered/force), webcola (live physics), custom Smart Layout pipeline
 - **AI assistant** — chat with OpenAI / Anthropic / Gemini / Ollama to generate and modify diagrams
-- **Architecture Hub** — browse and import 120+ curated architecture concepts (patterns, fitness functions, ADRs, requirements, blueprints) from [hub.radical.tools](https://hub.radical.tools)
+- **Radical Forge** — turn a system description into requirements, fitness functions, Gherkin scenarios, UI mockups and a C4 model, one reviewable stage at a time
+- **Architecture Hub** — browse and import 120+ curated architecture concepts (patterns, fitness functions, ADRs, requirements, blueprints) from [hub.radical.tools](https://hub.radical.tools); blueprints include per-actor screen flows and named views
 - **Multiple views** — Canvas, Matrix, Sequence, Treemap, Table, Wiki per diagram
 - **Presentation mode** — fullscreen slides with navigation bar
 - **Metamodel editor** — customise node types, relation types, and constraints

hub/blueprint/bp-ai-assistant-platform.radical

@@ -1267,7 +1267,7 @@
     },
     {
       "id": "view-governance",
-      "name": "Governance",
+      "name": "Governance map",
       "kind": "static",
       "nodeIds": [
         "req-escalation-pickup",
@@ -1385,6 +1385,106 @@
         }
       }
     },
+    {
+      "id": "view-mockups",
+      "name": "Mockups",
+      "kind": "static",
+      "nodeIds": [
+        "flow-customer",
+        "flow-human-agent",
+        "flow-assistant-ops",
+        "mockup-chat-start",
+        "mockup-chat-answer",
+        "mockup-support-chat",
+        "mockup-chat-human",
+        "mockup-escalation-queue",
+        "mockup-case-review",
+        "mockup-case-resolved",
+        "mockup-case-audit",
+        "mockup-kb-sources",
+        "mockup-quality-drift"
+      ],
+      "positions": {
+        "flow-assistant-ops": {
+          "x": 0,
+          "y": 2904,
+          "width": 600,
+          "height": 330
+        },
+        "flow-customer": {
+          "x": 0,
+          "y": 2084,
+          "width": 1240,
+          "height": 330
+        },
+        "flow-human-agent": {
+          "x": 0,
+          "y": 2494,
+          "width": 1240,
+          "height": 330
+        },
+        "mockup-case-audit": {
+          "x": 990,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-case-resolved": {
+          "x": 670,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-case-review": {
+          "x": 350,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-chat-answer": {
+          "x": 350,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-chat-human": {
+          "x": 990,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-chat-start": {
+          "x": 30,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-escalation-queue": {
+          "x": 30,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-kb-sources": {
+          "x": 30,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-quality-drift": {
+          "x": 350,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-support-chat": {
+          "x": 670,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        }
+      }
+    },
     {
       "id": "view-flow-customer",
       "name": "Customer journey",
@@ -1505,6 +1605,37 @@
           "height": 190
         }
       }
+    },
+    {
+      "id": "view-wiki-governance",
+      "name": "Governance",
+      "kind": "wiki",
+      "nodeIds": [
+        "req-escalation-pickup",
+        "req-extraction-review",
+        "req-kb-freshness",
+        "req-case-audit-trail",
+        "ff-escalation-backlog-guard",
+        "ff-extraction-drift-monitor",
+        "ff-cost-per-case-guard",
+        "adr-confidence-gated-autonomy",
+        "adr-retrieval-over-finetuning"
+      ],
+      "positions": {},
+      "wikiFocusId": null
+    },
+    {
+      "id": "view-wiki-requirements",
+      "name": "Requirements",
+      "kind": "wiki",
+      "nodeIds": [
+        "req-escalation-pickup",
+        "req-extraction-review",
+        "req-kb-freshness",
+        "req-case-audit-trail"
+      ],
+      "positions": {},
+      "wikiFocusId": null
     }
   ]
 }

hub/blueprint/bp-analytical-data-platform.radical

@@ -1099,7 +1099,7 @@
     },
     {
       "id": "view-governance",
-      "name": "Governance",
+      "name": "Governance map",
       "kind": "static",
       "nodeIds": [
         "req-freshness",
@@ -1210,6 +1210,92 @@
         }
       }
     },
+    {
+      "id": "view-mockups",
+      "name": "Mockups",
+      "kind": "static",
+      "nodeIds": [
+        "flow-analyst",
+        "flow-data-engineer",
+        "mockup-bi-home",
+        "mockup-sales-dashboard",
+        "mockup-explore",
+        "mockup-dataset-lineage",
+        "mockup-access-request",
+        "mockup-pipelines",
+        "mockup-quality-runs",
+        "mockup-quarantine",
+        "mockup-freshness"
+      ],
+      "positions": {
+        "flow-analyst": {
+          "x": 0,
+          "y": 1534,
+          "width": 1560,
+          "height": 330
+        },
+        "flow-data-engineer": {
+          "x": 0,
+          "y": 1944,
+          "width": 1240,
+          "height": 330
+        },
+        "mockup-access-request": {
+          "x": 1310,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-bi-home": {
+          "x": 30,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-dataset-lineage": {
+          "x": 990,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-explore": {
+          "x": 670,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-freshness": {
+          "x": 990,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-pipelines": {
+          "x": 30,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-quality-runs": {
+          "x": 350,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-quarantine": {
+          "x": 670,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        },
+        "mockup-sales-dashboard": {
+          "x": 350,
+          "y": 110,
+          "width": 220,
+          "height": 190
+        }
+      }
+    },
     {
       "id": "view-flow-analyst",
       "name": "Analyst journey",
@@ -1306,6 +1392,37 @@
           "height": 190
         }
       }
+    },
+    {
+      "id": "view-wiki-governance",
+      "name": "Governance",
+      "kind": "wiki",
+      "nodeIds": [
+        "req-freshness",
+        "req-quality-gate",
+        "req-rls",
+        "req-lineage",
+        "ff-freshness",
+        "ff-quality",
+        "ff-cost",
+        "adr-lakehouse",
+        "adr-dbt"
+      ],
+      "positions": {},
+      "wikiFocusId": null
+    },
+    {
+      "id": "view-wiki-requirements",
+      "name": "Requirements",
+      "kind": "wiki",
+      "nodeIds": [
+        "req-freshness",
+        "req-quality-gate",
+        "req-rls",
+        "req-lineage"
+      ],
+      "positions": {},
+      "wikiFocusId": null
     }
   ]
 }