Studio modules by plane¶

Target

This page describes intended behaviour or structure. No implementation is claimed unless a section is explicitly marked Current implementation or Evidence.

Merged page (2026-10-09)

The Factory Studio UI modules page and seven per-platform ui.md pages are consolidated here, one tab each. Everything below is Target: no Studio, BFF, microfrontend or live projection exists; the Blazor shell, microfrontend library and UIKit templates exist as foundations, the AIChat MFE registers a mock service, and the 41 prototypes make no backend calls. The nine filled Studio module pages under modules/ describe the pilot-relevant experience in plane terms; the 48 prototype destinations map onto the seven work areas proposed in the Cloud Design brief (Workspace, Assets, Intelligence, Quality and releases, Operations and usage, Governance and administration, Software Factory).

Factory Studio — 13 UI modulesCapability & Tools — Marketplace UICapability & Tools — Integration UIExecution — DevOps UIExecution — Runtime UITrust & Ops — Observability UITrust & Ops — Governance UIGenerated SaaS pack — Product UI

Consolidated from platforms/factory-studio/ui-modules.md (2026 target design). Service and technology names are profile statements, not requirements.

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.

Consolidated from platforms/marketplace/ui.md (2026 target design). Service and technology names are profile statements, not requirements.

Target Architecture — Final-State Design

This page describes the final-state user surfaces of the Marketplace Platform. The UI is delivered as Blazor micro-frontends hosted in the Factory Studio shell (Blazor.ShellTemplate + Blazor.Mfe.* family), consuming the public APIs and reacting to marketplace events for live status.

The Marketplace exposes two primary surfaces: the Marketplace Install Center for consumers (engineers and agents-with-a-human-in-the-loop) and the Publisher Portal for producers. Both are micro-frontends in the Factory Studio shell, authenticated through the factory authorization server, and tenant-scoped.

Surface map¶

flowchart TB
    Shell["Factory Studio Shell"] --> Install["Marketplace Install Center MFE"]
    Shell --> Portal["Publisher Portal MFE"]
    Install -->|"GET /marketplace/assets"| Catalog["Catalog & Search APIs"]
    Install -->|"POST .../install"| InstallApi["Installation API"]
    Install -->|"POST .../compatibility/evaluate"| CompatApi["Compatibility API"]
    Portal -->|"POST /marketplace/assets"| PublishApi["Publishing API"]
    Portal -->|"GET /marketplace/publishers/{id}"| PublisherApi["Publisher API"]
    Install -. live status .-> Events["Marketplace events"]
    Portal -. live status .-> Events

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

Marketplace Install Center¶

The consumer-facing surface for discovering, evaluating, and installing assets.

Key views

Discover / Browse — faceted catalog across the nine asset types (SaaS Blueprints, Agent Packs, Template Packs, Library Packs, Integration Packs, Prompt Packs, Policy Packs, Dashboard Packs, Industry Packs), with search, filters (type, publisher, rating, compatibility), and ranking driven by MarketplaceSearchService.
Asset Detail — description, versions, release notes, dependency declarations, ratings/reviews, pricing plan, and a Compatibility panel that calls POST /marketplace/assets/{assetId}/compatibility/evaluate against the selected target project before install.
Install — a guided install dialog showing the resolved dependency graph, license/pricing summary, target project/environment, and a live progress timeline reflecting the installation state machine (Requested → Evaluating → Resolving → LicenseCheck → Applying → Installed).
My Installations — per-project inventory of installed assets, versions, provenance (requestedBy, traceId), update availability, and uninstall/rollback actions.
Reviews — submit a rating/review (gated on a verified install) and read aggregated feedback.

UX principles — compatibility and licensing are surfaced before install so failures are prevented rather than reported; every install shows full provenance; agent-initiated installs appear in the same timeline with their task- correlation so humans can audit autonomous activity.

Publisher Portal¶

The producer-facing surface for onboarding, publishing, and managing a portfolio.

Key views

Publisher Onboarding — registration, verification status (Unverified → Pending → Verified), trust tier, and signing-key management (key references in Azure Key Vault; the portal never displays secret material).
Publish Asset — create an asset (type, metadata, tags, pricing plan) via POST /marketplace/assets, then upload and release versions via POST /marketplace/assets/{assetId}/versions, with a live view of the publishing flow (staging → quality scan → policy gate → sign → release → indexed).
Quality & Findings — the AssetQualityScanned verdict and findings for each submission, with remediation guidance for rejected submissions.
Portfolio Analytics — installs, active licenses, ratings, and reputation score per asset, sourced from catalog, commerce, and review signals.
Pricing & Plans — define and publish PricingPlans (Free, Flat, PerSeat, Usage) integrated with ConnectSoft.Extensions.Saas.Billing and metering.
Version Management — release, yank, and deprecate versions; view downstream installations affected by a yank.

Cross-cutting UI concerns¶

Authentication & authorization — OAuth2 via the factory authorization server; views are gated by scope (marketplace.read, marketplace.install, marketplace.publish, marketplace.review, marketplace.admin) and tenant role, consistent with Security.
Live status — both surfaces subscribe to marketplace events (publish/install progress) for real-time timelines without polling.
Accessibility & theming — built on the shared Blazor.ComponentLibraryTemplate design system used across Factory Studio.
Traceability — every UI action carries traceId/correlationId so user activity is correlated with backend events and Observability traces.

Continue to APIs, Workflows, and Security.

Consolidated from platforms/integration-platform/ui.md (2026 target design). Service and technology names are profile statements, not requirements.

Target Architecture — Final-State Design

This page describes the final-state Integration management surfaces inside Factory Studio, the factory's operator and developer experience. These surfaces are backed by the public APIs through a backend-for-frontend and are tenant-scoped, role-gated, and fully audited.

Integration management in Factory Studio gives operators and developers a single place to configure external connectivity, govern credentials, manage webhooks, and watch external health — without ever handling raw secrets. Every action maps to a governed API call, every change emits a canonical event, and everything is filtered by tenantId.

Surface Map¶

flowchart LR
    Studio["Factory Studio"] --> Conn["Connections"]
    Studio --> Prov["Providers & API Clients"]
    Studio --> Hooks["Webhooks"]
    Studio --> Health["External Health"]
    Conn --> Runs["Connection Runs & Failures"]
    Prov --> Creds["Credentials & Rotation"]
    Hooks --> Subs["Subscriptions"]
    Hooks --> Deliv["Deliveries"]

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

Connections¶

The primary operator surface. Lists every IntegrationConnection for the tenant with provider, status, and live health.

List & filter connections by provider category, status (Active / Degraded / Retired), and project.
Establish connection wizard: pick a registered provider, choose an auth mode, bind a credential (by Key Vault reference — never by typing a secret into the page), set provider configuration, and run a live test.
Connection detail: health timeline, recent IntegrationRuns, configuration, and the bound credential reference. Drill into a run to see attempts, latency, and externalRef.
Retire connection with confirmation; emits IntegrationConnectionRetired.

Providers & API Clients¶

The Vendor Registry surface. Browse and register the providers and versioned ExternalApiClients the factory supports.

Provider catalogue with category, capabilities, auth model, and status, including global shared providers.
Register provider form and register API client (assembly + semver + declared capabilities), surfacing the Implemented clients (ConnectSoft.Deputy.ApiClient, ConnectSoft.Braze.ApiClient, ConnectSoft.Bill.ApiClient, the SMS providers, etc.) as ready-to-use.
Capability matrix showing which operations each provider/client supports.

Credentials & Rotation¶

Credential governance without secret exposure.

Credential list shows keyVaultRef, authMode, currentVersion, lastRotatedAt, and expiresAt — never the secret value.
Rotate now action (calls POST /integrations/credentials/rotate) with live verification status; shows whether the new version passed its verification run before promotion.
Rotation policy editor (cadence, expiry warnings). Upcoming expirations surface as alerts.

Webhooks¶

Both directions of the webhook gateway.

Subscriptions (outbound): create/edit subscriptions binding a factory eventType to an HTTPS endpoint with a signing-secret reference; toggle active; view egress audit.
Deliveries: searchable log of inbound and outbound WebhookDelivery records with direction, status, attempts, signature status, and per-attempt detail. Replay a delivery from its preserved payload (governed action).

External Health¶

A real-time view fed by the ExternalApiHealthWorker.

Health dashboard: per-provider/connection health (Healthy / Degraded / Unhealthy), latency, error rate, and open circuits.
Failure feed: live IntegrationFailure stream grouped by category, with links to the originating run/delivery and escalation status.
Cross-links into Observability dashboards for deeper trace analysis.

UX & Governance Principles¶

No secrets in the browser. Credential surfaces show references and metadata only; secret material never transits the UI.
Role-gated actions. Establishing connections, rotating credentials, and replaying deliveries require the corresponding security scopes; the UI hides actions the user cannot perform.
Every action is audited. UI-initiated changes carry the operator identity and traceId into the emitted event for full traceability.
Tenant-scoped by default. Operators only see their tenant's connections, providers, and deliveries.

Consolidated from platforms/devops-gitops/ui.md (2026 target design). Service and technology names are profile statements, not requirements.

The DevOps / GitOps Platform surfaces in Factory Studio as the DevOps Center — the operator's window onto the delivery plane. It is a read-and-act console: humans observe what the agents are doing and intervene only where governance requires it. The UI is built with the ConnectSoft.Blazor.* micro-frontend stack and consumes the platform's REST and gRPC streaming APIs.

Target Architecture — Final-State Design

All surfaces below are tenant- and project-scoped. They render live state from the platform and stream updates over gRPC/SignalR; they do not bypass the platform's APIs or governance gates.

Surfaces¶

flowchart LR
    DevOpsCenter["DevOps Center"] --> Repos["Repositories"]
    DevOpsCenter --> PRs["Pull Requests"]
    DevOpsCenter --> Pipelines["Pipelines"]
    DevOpsCenter --> Releases["Releases"]
    DevOpsCenter --> Environments["Environments"]

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

Repositories¶

Browse repositories per project/module with provider, default branch, and provisioning status.
Drill into branches and recent commits, each linked to its originating artifactId for lineage.
Action: request repository provisioning (delegated to the agent that calls POST /repositories).

Pull Requests¶

A board of open/merged/abandoned PRs with check status and policy-gate state.
Per-PR detail: source/target branches, checks, reviews, and the governance evaluation.
Action: a human reviewer can approve/merge where policy requires human sign-off; otherwise the Pull Request Creator agent drives it.

Pipelines¶

List generated pipeline definitions and recent runs with status and duration.
Live log tail via the PipelineExecution.StreamRunLogs gRPC stream.
Action: trigger a run (POST /pipelines/{pipelineId}/run) or regenerate a definition.

Releases¶

The release pipeline view: planned → pending approval → approved → promoting → deployed, mirroring the ReleasePlan state machine.
Approval surface enforcing segregation of duties; production releases that require a human approver appear here.
Per-release detail: build provenance, packages/images, deployment manifest, and approval audit trail.

Environments¶

Environment matrix (dev / test / staging / prod) showing the currently deployed version per module.
GitOps sync status per environment (Synced / OutOfSync / Reconciling / Degraded) with drift indicators.
Action: request a promotion or trigger a reconcile (delegated to agents/services).

Real-Time & Notifications¶

State changes arrive over SignalR/gRPC streams so the UI reflects deployments and reconciliations as they happen.
Incidents and stuck workflows surface as banners linked to the Observability & Feedback Platform.

Accessibility & Theming¶

Built on the ConnectSoft.Blazor.UIKit with WCAG-compliant components and the factory's light/dark theming.
All destructive or governance-sensitive actions present a confirmation with the policy context.

Pillar Alignment¶

Observability — the DevOps Center is the human-facing observability surface for delivery.
Governance — human approval gates and audit trails are first-class UI elements.
Autonomy — the UI shows agent activity; humans supervise rather than operate.

Consolidated from platforms/runtime-cloud/ui.md (2026 target design). Service and technology names are profile statements, not requirements.

Target Architecture — Final-State Design

The Runtime Center is the operations surface of the Runtime & Cloud Platform inside Factory Studio. It is a Blazor micro-frontend that reads the platform's APIs (REST + gRPC) and renders the live state of every generated SaaS runtime.

The Runtime Center is where humans observe and steer the running output of the factory. It does not run workloads itself — it is a governed window onto the autonomous platform, giving operators and product owners a single place to see what is live, how healthy it is, and what the platform is doing about it.

Surfaces¶

Surface	Purpose	Backing API / Source
Live Services	Inventory of every running generated component per environment and tenant, with version, compute target, and replica count.	`RuntimeInventory.GetServices` (gRPC), `GET /runtime/environments/{environmentId}`
Health	Real-time health of services and dependencies (liveness/readiness/dependency), with degraded/unhealthy drill-down.	`GET /runtime/services/{serviceId}/health`, `RuntimeHealth.StreamHealth`
Logs	Streamed and searchable workload logs and deployment step logs.	Application Insights + Blob (deployment logs)
Metrics	SLO-oriented dashboards: latency, throughput, error rate, saturation, replica counts.	Application Insights (KQL-backed tiles)
Incidents	Open incidents and their runtime context, linked to the originating signals.	Observability & Feedback
Deployments	Deployment history and live rollout status with the `RuntimeDeployment` state machine.	`GET /runtime/deployments/{deploymentId}`
Scaling	Active scaling policies and recent scaling actions per service.	`POST/GET /runtime/scaling-policies`
Drift	Open and resolved drift findings with desired-vs-actual diffs and remediation actions.	`GET /runtime/drift/{environmentId}`

Experience¶

flowchart LR
    Operator["Operator / Product Owner"] --> RC["Runtime Center (Blazor MFE)"]
    RC -->|"live services, health"| RT["Runtime & Cloud APIs"]
    RC -->|"logs, metrics"| AppI["Application Insights"]
    RC -->|"incidents"| Obs["Observability & Feedback"]
    RC -->|"deploy / rollback / remediate (governed)"| RT

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

Read-first, action-gated — the surface is primarily observational; mutating actions (trigger rollback, approve drift remediation, adjust a scaling policy) are gated by the same scopes and governance approvals as the APIs.
Trace-linked — every tile links to the originating traceId, so an operator can pivot from a runtime signal back through deployment, artifact, agent task, and business intent.
Tenant-scoped — operators see only the tenants and environments their role grants, enforced by RuntimeTenantBinding.

Integration with Factory Studio¶

The Runtime Center is one micro-frontend in the Factory Studio shell (ConnectSoft.Blazor.ShellTemplate + UIKit). It shares the Studio's identity, navigation, and design system, and cross-links to the DevOps delivery view (for what produced a deployment) and the Observability view (for deep telemetry and feedback).

Consolidated from planes/trust-operations/observability/ui.md (2026 target design). Service and technology names are profile statements, not requirements.

Target

This page describes intended behaviour or structure. No implementation is claimed unless a section is explicitly marked Current implementation or Evidence.

Reviewed 2026-10-09

UI content is consolidated into the Experience plane Studio modules page in a later portion.

Target Architecture — Final-State Design

This page describes the final-state UI surfaces of the Observability & Feedback Platform inside Factory Studio. The surfaces are Blazor microfrontends (ConnectSoft.Blazor.MicrofrontendLibraryTemplate) hosted in the Studio shell, consuming the platform's public APIs through the Studio BFF.

The platform exposes three operator-facing surfaces in Factory Studio. Each is a Blazor microfrontend that consumes the platform APIs and renders telemetry sliced by the required dimensions. All surfaces are tenant-scoped and role-gated (see Security).

Surface Map¶

flowchart LR
    Studio["Factory Studio Shell"] --> RC["Runtime Center"]
    Studio --> CC["Cost Center"]
    Studio --> QA["QA Center"]
    RC -->|"traces, metrics, alerts, incidents"| API1["Trace / Metric / Alert / Incident APIs"]
    CC -->|"cost telemetry"| API2["Cost API"]
    QA -->|"quality scores, feedback"| API3["Quality / Feedback APIs"]

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

Runtime Center¶

The operations cockpit for runtime health of generated SaaS products and the factory itself.

Live health dashboards — per-project and per-module dashboards (POST /dashboards, POST /metrics/query) showing latency, error rate, throughput, and SLO error-budget burn.
Trace explorer — search and open correlated traces (GET /traces/{traceId}), drill from a span into its logs (POST /logs/search) and any linked incidents.
Alerts & incidents — view active alert rules (POST /alerts/rules), the incident queue, and incident detail with lifecycle timeline, root cause, and escalation steps (POST /incidents).
SLO board — SLO targets, current status (healthy / at-risk / breached), and budget burn over the rolling window.

Primary roles: runtime.operator. Every view is filterable by the required dimensions (projectId, moduleId, agentId, environment, version).

Cost Center¶

The economic feedback surface — where cost is attributed, trended, and governed.

Cost overview — total and per-category cost (GET /cost/projects/{projectId}) broken down by model inference, compute, storage, and network, per tenant and project.
Anomaly feed — flagged cost anomalies with delta-vs-baseline, linked to the CostAnomalyDetected signal and any resulting feedback.
Attribution drill-down — cost sliced by agentId, skillId, workflowId, and artifactId so expensive generation paths are visible and addressable.
Budget & trend — month-over-month trend and per-tenant budget tracking, feeding governance review.

Primary roles: cost.analyst. Cost anomalies above tenant thresholds are surfaced to Governance.

QA Center¶

The quality and improvement-loop surface.

Quality scoreboard — per-project quality scores (GET /quality/projects/{projectId}) across reliability, performance, cost efficiency, maintainability, and correctness, with artifact-level drill-down.
Feedback inbox — the stream of FeedbackItem records (POST /feedback-items), categorised and sentiment-tagged, with their source (incident / runtime signal / human / agent) and attribution.
Feedback authoring — humans and reviewing agents can create feedback items directly, attributed to an artifact and trace.
Loop visibility — shows how feedback flowed into the Knowledge Platform and whether it was applied to a subsequent generation, making the improvement loop visible.

Primary roles: quality.reviewer.

UI Principles¶

Blazor microfrontends. Each surface ships as an independent microfrontend in the Studio shell, so the platform's UI deploys independently of other Studio modules.
API-only data access. Surfaces never touch stores directly; they consume the public APIs through the Studio BFF, inheriting tenant scoping and authorization.
Dimension-first navigation. Every view is built around the required telemetry dimensions, so an operator can pivot seamlessly from a project to a module to an agent to a single trace.
Trace-linked. Every signal in every surface links back to its traceId, enabling one-click navigation across Runtime, Cost, and QA centers for the same execution.
Accessible & responsive. Built on ConnectSoft.Blazor.UIKit for consistent, accessible, responsive components.

Consolidated from planes/trust-operations/governance/ui.md (2026 target design). Service and technology names are profile statements, not requirements.

Target

This page describes intended behaviour or structure. No implementation is claimed unless a section is explicitly marked Current implementation or Evidence.

Reviewed 2026-10-09

UI content is consolidated into the Experience plane Studio modules page in a later portion; the governance centre exists only as a prototype and an empty docs page today.

Target Architecture — Final-State Design

This page describes the final-state user-facing surfaces of the platform. They are Blazor micro-frontends within Factory Studio, built on ConnectSoft.Blazor.ShellTemplate + ConnectSoft.Blazor.UIKit, talking to the platform's APIs through the Studio BFF. They harden the existing Governance & Compliance Center and Security & Access Control studio modules.

The platform exposes two primary surfaces in Factory Studio: the Security Center and the Governance & Compliance Center. Both are read-rich, action-light dashboards designed for security engineers, compliance officers, and platform operators — humans step in only at approval gates and triage.

Surface Map¶

flowchart TB
    Studio["Factory Studio Shell"] --> SecCenter["Security Center"]
    Studio --> GovCenter["Governance &amp; Compliance Center"]
    SecCenter --> Findings["Security Findings &amp; triage"]
    SecCenter --> Secrets["Secret Governance &amp; rotation"]
    SecCenter --> Risk["Risk dashboard"]
    SecCenter --> Isolation["Tenant Isolation rules"]
    GovCenter --> Policies["Policy authoring &amp; versions"]
    GovCenter --> Approvals["Approval queue"]
    GovCenter --> Audit["Audit explorer"]
    GovCenter --> Compliance["Compliance reports &amp; evidence"]
    GovCenter --> Classification["Data classification"]

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

Security Center¶

The operational home for the security posture of the factory and everything it produces.

Module	Purpose	Backing API / data
Findings & triage	List, filter, and triage `SecurityFinding`s by severity/status; assign, resolve, suppress with notes.	`POST /security-findings`, finding queries; `SecurityFindingRaised` stream.
Secret governance	View `SecretReference`s, rotation due dates, and leak findings — never secret values. Trigger rotation reminders.	`SecretGovernanceService` (gRPC via BFF).
Risk dashboard	Composite `RiskScore`s by subject (action/artifact/tenant/agent) with contributing factors and bands.	`RiskScoringService`; `RiskScored` stream.
Tenant isolation	Inspect and manage `TenantIsolationRule`s (isolation mode, residency, cross-tenant grants).	`TenantIsolationPolicyService`.

Key UX principles: severity-first ordering, one-click trace pivot (jump from a finding to its traceId chain in the Audit explorer), and clear "no secret values are ever shown" affordances around secret governance.

Governance & Compliance Center¶

The home for policy, approvals, audit, classification, and evidence — hardening the existing Governance & Compliance Center.

Module	Purpose	Backing API / data
Policy authoring	Create/version `PolicyDefinition`s and `PolicyRule`s across the ten governance domains; diff versions; publish.	`POST /policies`; policy queries.
Approval queue	The human-in-the-loop surface: pending `ApprovalRequest`s with context, risk, and policy reason; approve/reject with justification.	`POST /approvals/{id}/approve`, `POST /approvals/{id}/reject`; approval stream.
Audit explorer	Query the immutable, hash-chained audit trail by `traceId`, subject, action, time; verify chain integrity.	`GET /audit`.
Compliance reports	Generate and download framework reports / evidence bundles (GDPR/SOC 2/HIPAA-style packs).	`POST /compliance/reports`; `ComplianceReportGenerated` stream.
Data classification	Review and (with approval) adjust `DataClassification` labels and categories.	`DataClassificationService`; `DataClassified` stream.

Cross-cutting UI Concerns¶

Live updates — surfaces subscribe to the governance event stream (via the Studio BFF over SignalR) so approval queues, findings, and risk update in real time without refresh.
Trace-first navigation — every record links to its traceId, enabling a pivot from intent → decision → approval → audit across the whole factory.
RBAC/ABAC-aware — modules and actions render per the viewer's roles and the platform's own policy (e.g. an approver only sees requests they may decide; segregation of duties hides self-raised requests).
Tenant-scoped — all surfaces are tenant-isolated; cross-tenant views require an explicit, audited isolation grant.
Accessibility & consistency — built on ConnectSoft.Blazor.UIKit for consistent, accessible components across Studio.

Related¶

APIs · Workflows · Security · Observability
Studio: Governance & Compliance Center · Security & Access Control · Studio Overview

Consolidated from platforms/generated-saas-platform/ui.md (2026 target design). Service and technology names are profile statements, not requirements.

Target Architecture — Final-State Design

This page describes the generated user experience of a SaaS Product. Portals are Blazor microfrontend compositions generated from ConnectSoft.Blazor.ShellTemplate and ConnectSoft.Blazor.MicrofrontendLibraryTemplate, using the shared ConnectSoft.Blazor.UIKit, produced by the Frontend Developer Agent. An optional mobile client is generated from ConnectSoft.MauiBaseTemplate.

A generated product ships two web portals — an Admin Portal for tenant administrators and platform operators, and a Customer Portal for end users — plus an optional mobile app. Both portals are microfrontend (MFE) compositions: a host shell owns routing, layout, theming, and the authenticated session, and feature areas are loaded as independently generated microfrontends. This mirrors the factory's own Factory Studio experience model.

Experience architecture¶

flowchart TB
    subgraph AdminPortal["Admin Portal"]
        AdminShell["ShellTemplate Host<br/>routing + layout + auth"]
        AdminMfes["MFEs: Tenants, Users & Roles,<br/>Subscriptions & Billing, Feature Flags,<br/>Audit, Reports, Configuration"]
    end
    subgraph CustomerPortal["Customer Portal"]
        CustShell["ShellTemplate Host<br/>routing + layout + auth"]
        CustMfes["MFEs: Dashboard, Domain Features,<br/>Profile & Account, Notifications,<br/>Subscription Self-Service, Reports"]
    end
    UIKit["Blazor.UIKit<br/>shared components"]
    Mobile["MAUI Mobile Client"]
    Gateway["API Gateway"]
    Auth["Authorization Server (OpenIddict)"]

    AdminMfes --> AdminShell
    CustMfes --> CustShell
    AdminShell --> UIKit
    CustShell --> UIKit
    AdminShell -->|"REST/gRPC"| Gateway
    CustShell -->|"REST/gRPC"| Gateway
    Mobile -->|"REST"| Gateway
    AdminShell -->|"OIDC"| Auth
    CustShell -->|"OIDC"| Auth
    Mobile -->|"OIDC"| Auth

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

Admin Portal surfaces¶

Surface	Purpose	Backing Service
Tenant Administration	Manage tenant profile, status, provisioning	Tenant Management
Users & Roles	Invite users, assign roles, manage permissions	Identity Service
Subscriptions & Billing	View/change edition, billing, invoices	Subscription & Billing
Feature Flags	Toggle flags, manage rollout	Configuration Service
Configuration	Manage tenant settings	Configuration Service
Audit Log	Search and review the audit trail	Audit Trail Service
Reports & Analytics	Define, run, and download reports	Reporting & Analytics
Integrations	Configure connections and webhooks	Integration Service

Customer Portal surfaces¶

Surface	Purpose	Backing Service
Dashboard	Overview of the user's workspace and key metrics	Domain + Reporting
Domain Features	The product's specific end-user functionality	Domain microservices
Profile & Account	Manage own profile, security, preferences	Identity Service
Notifications	In-app notification center and preferences	Notification Service
Subscription Self-Service	View plan, upgrade, manage payment	Subscription & Billing
Reports	Run and download permitted reports	Reporting & Analytics

Design system & composition¶

Shared UI Kit. Both portals consume ConnectSoft.Blazor.UIKit for a consistent component system (forms, tables, dialogs, navigation), so generated products look and behave consistently.
Microfrontend isolation. Each feature area is an independently generated and deployable MFE; adding a surface does not require a monolithic portal redeploy.
Theming & branding. Per-tenant branding (logo, palette) is applied by the shell from ConfigurationSetting values, enabling white-labeling.
Tenant-aware navigation. Menus and surfaces are gated by the user's permissions and the tenant's edition entitlements, so users see only what their role and plan allow.
Responsive + accessible. Generated UI follows responsive layout and accessibility conventions baked into the UI Kit.

Real-time & state¶

Live updates. Portals subscribe to product events (e.g. NotificationSent, ReportGenerated) over SignalR (ConnectSoft.Extensions.Saas.AspNetCore.SignalR) for live notification badges and report-ready toasts, scoped per tenant and user.
Session. The shell owns the OIDC session; tokens are validated at the gateway and per-service.
Workspace state. User preferences, saved filters, and layouts persist per user and tenant.

Implemented

The experience foundation is real today: ConnectSoft.Blazor.ShellTemplate, ConnectSoft.Blazor.MicrofrontendLibraryTemplate, ConnectSoft.Blazor.UIKit, shipped Blazor.Mfe.* microfrontends (including Identity.Admin, Identity.SelfService, AuthorizationServer.Admin), the SignalR substrate, and ConnectSoft.MauiBaseTemplate. The generated portals are compositions of these proven building blocks.

Mobile client¶

The optional mobile app is generated from ConnectSoft.MauiBaseTemplate, sharing the OIDC auth flow and API contracts with the web portals. It targets the Customer Portal surfaces most relevant on mobile (dashboard, notifications, key domain features).

How the UI contributes to the pillars¶

Traceability — every user action emits an enveloped, audited event carrying traceId.
Reusability — portals are compositions of shared shell, MFE library, and UI Kit, generated identically across products.
Autonomy — the Frontend Developer Agent generates portals and MFEs from the blueprint UI definition.
Governance — surfaces are gated by RBAC permissions and edition entitlements; admin actions are audited.
Observability — client telemetry (page views, errors, latency) feeds the product's observability dashboards.
Multi-tenant scale — branding, navigation, and data are tenant-scoped; the shell isolates tenants on every request and SignalR group.

Studio modules by plane¶

Module catalog¶

Page routes¶

Module layout¶

Knowledge graph visualization model¶

Artifact preview model¶

Related Pages¶

Surface map¶

Marketplace Install Center¶

Publisher Portal¶

Cross-cutting UI concerns¶

Surface Map¶

Connections¶

Providers & API Clients¶

Credentials & Rotation¶

Webhooks¶

External Health¶

UX & Governance Principles¶

Related Pages¶

Surfaces¶

Repositories¶

Pull Requests¶

Pipelines¶

Releases¶

Environments¶

Real-Time & Notifications¶

Accessibility & Theming¶

Pillar Alignment¶

Related¶

Surfaces¶

Experience¶

Integration with Factory Studio¶

Related Pages¶

Surface Map¶

Runtime Center¶

Cost Center¶

QA Center¶

UI Principles¶

Related Pages¶

Surface Map¶

Security Center¶

Governance & Compliance Center¶

Cross-cutting UI Concerns¶

Related¶

Experience architecture¶

Admin Portal surfaces¶

Customer Portal surfaces¶

Design system & composition¶

Real-time & state¶

Mobile client¶

How the UI contributes to the pillars¶

Related Pages¶