UI¶

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.

UI¶