UI Modules

Target Architecture — Final-State Design

This page describes the final-state catalog of Factory Studio UI modules. The Blazor microfrontend shell, microfrontend library, and UI Kit that host these modules are implemented today (see AI Software Factory Studio); the 13 factory modules below are the designed end state composed onto that foundation.

The Factory Studio experience is composed of 13 UI modules, each shipped as an independent Blazor microfrontend loaded by the ConnectSoft.Blazor.ShellTemplate host shell and built from ConnectSoft.Blazor.UIKit components. Modules are thin: they render view-shaped read models served by the Studio BFF services and subscribe to live updates from the StudioRealtimeGateway. No module talks to a source-of-truth platform directly — every read passes through a BFF, and every write is a governed command.

Module catalog

Module	Purpose	Primary data sources / platforms	Key MFE	Roles
Project Command Center	Top-level situational awareness: projects, blueprints, active runs, health, and alerts in one place. The default landing experience.	Control Plane, Observability & Feedback, Agent Mesh	ConnectSoft.Blazor.Mfe.Studio.CommandCenter	Factory Operator, Solution Architect, Viewer
Blueprint Designer	Author and edit project blueprints, target topology, and reuse selections before agents execute.	Control Plane (Blueprint), Knowledge Platform (patterns, templates)	ConnectSoft.Blazor.Mfe.Studio.BlueprintDesigner	Solution Architect, Product Owner
Agent Flow Explorer	Visualize agent task graphs and live execution flows; pause, resume, or redirect a flow.	Agent Mesh via AgentFlowVisualizationService	ConnectSoft.Blazor.Mfe.Studio.AgentFlow	Solution Architect, Factory Operator
Artifact Lineage Browser	Browse generated artifacts, preview bodies and diffs, and walk content-addressable lineage.	Knowledge Platform (artifact memory) via ArtifactPreviewService	ConnectSoft.Blazor.Mfe.Studio.ArtifactLineage	Solution Architect, Reviewer, Developer
Knowledge Graph Explorer	Interactively explore the factory knowledge graph — tenants, projects, modules, artifacts, decisions, events.	Knowledge Platform (knowledge graph) via KnowledgeExplorerBff	ConnectSoft.Blazor.Mfe.Studio.KnowledgeGraph	Solution Architect, Knowledge Steward
Human Review Center	The review queue and decision surface for approving, rejecting, escalating, or overriding agent output.	ReviewCenterService, Control Plane, Governance, Security & Compliance	ConnectSoft.Blazor.Mfe.Studio.ReviewCenter	Reviewer, Approver, Solution Architect
QA Center	Test results, quality gates, coverage, and validation status across modules.	Observability & Feedback, Control Plane (QA workflows)	ConnectSoft.Blazor.Mfe.Studio.QaCenter	QA Engineer, Developer
Security Center	Security findings, policy violations, dependency and secret scanning, and remediation tracking.	Governance, Security & Compliance, Observability & Feedback	ConnectSoft.Blazor.Mfe.Studio.SecurityCenter	Security Officer, Solution Architect
DevOps Center	Pipelines, GitOps state, pull requests, and deployment promotions across environments.	DevOps / GitOps, Control Plane	ConnectSoft.Blazor.Mfe.Studio.DevOpsCenter	Factory Operator, SRE
Runtime Center	Health, SLOs, and incidents of running generated SaaS products.	Observability & Feedback, Runtime Cloud	ConnectSoft.Blazor.Mfe.Studio.RuntimeCenter	SRE, Factory Operator
Cost Center	Cost, resource, and token consumption with optimization recommendations.	Observability & Feedback (FinOps signals)	ConnectSoft.Blazor.Mfe.Studio.CostCenter	FinOps Analyst, Tenant Administrator
Marketplace Install Center	Browse, evaluate, and install marketplace assets (templates, agents, modules) into a tenant.	Marketplace	ConnectSoft.Blazor.Mfe.Studio.Marketplace	Tenant Administrator, Solution Architect
Admin / Settings	Tenant, user, role, and workspace administration; Studio configuration and saved-view management.	Studio state, Governance, Security & Compliance, Identity (Identity.Admin)	ConnectSoft.Blazor.Mfe.Studio.Admin	Tenant Administrator, Platform Administrator

Module independence and reuse

Each module is an independently versioned microfrontend built on ConnectSoft.Blazor.MicrofrontendLibraryTemplate. Existing shipped MFEs — Blazor.Mfe.AIChat, Identity.Admin, Identity.SelfService, AuthorizationServer.Admin, and Logistics — are composed by the same shell and serve as the implemented reference for the factory modules above. This is the reusability principle applied to the experience layer: the shell, UI Kit, and MFE contract are shared; modules are added without a monolithic redeploy.

Page routes

Routes are owned by the shell router and lazy-load the corresponding microfrontend. All routes are tenant-scoped; the active tenantId is resolved from the authenticated session, not the URL.

Route	Module	Default view	Deep-link parameters
/studio	Project Command Center	Portfolio overview	?project={projectId}
/studio/projects/{projectId}	Project Command Center	Single-project dashboard	—
/studio/blueprints	Blueprint Designer	Blueprint list	—
/studio/blueprints/{blueprintId}	Blueprint Designer	Blueprint editor	?version={semver}
/studio/agent-flows	Agent Flow Explorer	Active flows	?project={projectId}
/studio/agent-flows/{workflowId}	Agent Flow Explorer	Flow graph	?task={taskId}
/studio/artifacts	Artifact Lineage Browser	Artifact list	?module={moduleId}
/studio/artifacts/{artifactId}	Artifact Lineage Browser	Preview + lineage	?version={semver}&diff={fromVersion}
/studio/knowledge-graph	Knowledge Graph Explorer	Graph canvas	?focus={nodeId}&depth={n}
/studio/reviews	Human Review Center	Review queue	?status={pending|escalated}
/studio/reviews/{reviewRequestId}	Human Review Center	Review detail	—
/studio/qa	QA Center	Quality gate board	?project={projectId}
/studio/security	Security Center	Findings board	?severity={level}
/studio/devops	DevOps Center	Pipeline board	?environment={env}
/studio/runtime	Runtime Center	Runtime health	?environment={env}
/studio/cost	Cost Center	Cost overview	?period={range}
/studio/marketplace	Marketplace Install Center	Asset catalog	?category={type}
/studio/admin	Admin / Settings	Tenant settings	?section={users|roles|workspaces}

The corresponding implemented studio modules — Platform Status Dashboard, Agent Orchestration Manager, SaaS Factory Workflows Launcher, Knowledge Base Management, Security & Access Control, Observability & Metrics, Versioning & History Tracking, Cost & Resource Optimization, and Governance & Compliance Center — map onto these final-state modules and are catalogued in the Portal UI Catalog.

Module layout

flowchart TB
    subgraph Shell["ShellTemplate Host"]
        Nav["Global Nav + Tenant Switcher"]
        Router["Shell Router"]
        Notifs["Notification Tray"]
        subgraph Region["Active Module Region"]
            Module["Loaded Microfrontend"]
        end
    end

    subgraph Shared["Shared Foundations"]
        UIKit["Blazor.UIKit Components"]
        Auth["OpenIddict Session Context"]
        RT["SignalR Client"]
    end

    Nav --> Router
    Router --> Region
    Module --> UIKit
    Module --> Auth
    Module --> RT
    Notifs --> RT

Hold "Alt" / "Option" to enable pan & zoom

The shell owns the persistent chrome — global navigation, the tenant switcher, and the notification tray — while the active module region hosts exactly one microfrontend at a time. Every module shares the same OpenIddict session context and a single SignalR connection multiplexed across modules, so live updates and notifications stay consistent regardless of which module is open.

Knowledge graph visualization model

The Knowledge Graph Explorer renders an interactive, access-checked projection of the Knowledge Platform graph. The Studio never queries the graph store directly; the KnowledgeExplorerBff requests a bounded neighbourhood and returns a render-ready view model.

erDiagram
    GraphView ||--o{ GraphNode : contains
    GraphView ||--o{ GraphEdge : contains
    GraphNode ||--o{ GraphEdge : "source/target"
    GraphView {
        string viewId
        string tenantId
        string focusNodeId
        int depth
        string layout
    }
    GraphNode {
        string nodeId
        string nodeType
        string label
        string classification
        bool truncated
    }
    GraphEdge {
        string edgeId
        string sourceNodeId
        string targetNodeId
        string relationship
    }

Hold "Alt" / "Option" to enable pan & zoom

Concept	Description
Focus + depth	Every view is anchored on a focusNodeId (a tenant, project, module, artifact, decision, or event) expanded to a bounded depth of neighbours. Unbounded graph loads are never permitted.
Node typing	Node types mirror the knowledge graph ontology — Tenant, Project, Blueprint, Module, Artifact, Contract, Event, Agent, Skill, Commit, Deployment, RuntimeSignal.
Edge semantics	Edges carry the relationship name (produces, dependsOn, derivedFrom, deployedAs, emitted) so the visualization is meaningful, not just topological.
Access checking	The BFF applies the requesting user's tenant and classification scope; nodes the user may not see are omitted, and partially expanded nodes are flagged truncated.
Trace overlay	A view can be overlaid with a traceId to highlight only the subgraph touched by one lifecycle, connecting visualization to traceability.
Layout hint	The layout (force, hierarchical, radial) is a render hint resolved client-side; the BFF stays presentation-agnostic.

Saved graph explorations are persisted as SavedView aggregates so an architect can return to a curated neighbourhood.

Artifact preview model

The Artifact Lineage Browser uses the ArtifactPreviewService to render artifact bodies, diffs, and lineage without copying artifact storage into the Studio. A preview is a short-lived, access-checked session over artifact memory.

erDiagram
    ArtifactPreviewSession ||--o{ PreviewRendition : produces
    ArtifactPreviewSession ||--o{ LineageEdge : resolves
    ArtifactPreviewSession {
        string sessionId
        string tenantId
        string artifactId
        string version
        string classification
        datetime expiresAt
    }
    PreviewRendition {
        string renditionId
        string renderKind
        string contentType
        bool redacted
    }
    LineageEdge {
        string edgeId
        string fromArtifactId
        string toArtifactId
        string relationship
    }

Hold "Alt" / "Option" to enable pan & zoom

Concept	Description
Preview session	A bounded, expiring handle (ArtifactPreviewSession) onto an artifact version. Sessions enforce classification and tenant scope and never expose raw storage URIs to the browser.
Renditions	The service produces render-ready forms — syntax-highlighted source, rendered markdown/diagram, structured diff against another version — selected by renderKind.
Redaction	Sensitive spans are redacted server-side per Knowledge Platform governance; the rendition is flagged redacted so the UI can indicate it.
Lineage edges	Content-addressable lineage (derivedFrom, producedBy, supersedes) is resolved into a walkable graph so a reviewer can trace an artifact back to the agent task and forward to its deployment.
Diff mode	Two versions of the same artifact produce a structured diff rendition, used heavily by the Human Review Center.
Expiry	Sessions expire (expiresAt); previews are re-requested rather than cached long-term, keeping the Studio free of artifact bodies at rest.

Related Pages

• Overview
• BFF APIs
• Workflows
• Data Model
• Security
• Portal UI Catalog
• Knowledge Platform Overview
• Naming Conventions