Components Reference

Reusable UI components live in MILTON.Client/Components/ and are consumed by the routed pages. They do not have @page directives and cannot be navigated to directly. Document-specific components are organized in the Components/Documents/ subdirectory.

---

Top-Level Components

Component.razor

File: Components/Component.razor

An empty placeholder component. Reserved for future use.

---

InstantiateTemplateDialog

File: Components/InstantiateTemplateDialog.razor

A MudBlazor dialog for creating a new document from an existing template. Opened by Templates.razor when the user clicks “Create Document” on a template card.

Parameters:

Parameter	Type	Description
Template	TemplateResponse	The template to instantiate (required)
ProjectId	int	The owning project ID (required)

Behaviour:

• Loads the project’s git repositories from GET /api/projects/{ProjectId}/config to populate a repository selector.
• Provides template variable inputs (RepoUrl, Branch, plus user-defined custom variables). Variables replace {{Key}} placeholders in the template.
• Submits to POST /api/documents/templates/instantiate.
• On success, clears DocumentStore for the project and returns the new document ID to the caller via DialogResult.Ok.

API calls: GET /api/projects/{ProjectId}/config, POST /api/documents/templates/instantiate

---

Document Components (Components/Documents/)

These components form the building blocks of the document editor and template builder experiences.

---

BlockRenderer

File: Components/Documents/BlockRenderer.razor

Dispatches content blocks to the appropriate type-specific card component based on Block.Type.

Parameters:

Parameter	Type	Description
Block	ContentBlockDto	The content block to render (required)
OnProcess	EventCallback<Guid>	Callback to trigger block processing

Routing logic:

Block Type	Rendered Component
Requirement	RequirementCard
Scanner	ScannerCard
TestCase	TestCaseCard
default	DefaultBlockView

---

DefaultBlockView

File: Components/Documents/DefaultBlockView.razor

Fallback renderer for content blocks that do not match a specialized card type. Displays the block type, status chip, and body text in a simple card layout.

Parameters:

Parameter	Type	Description
Block	ContentBlockDto	The content block to render (required)

---

DocumentPreviewPanel

File: Components/Documents/DocumentPreviewPanel.razor

A preview panel that renders a document as HTML inside a sandboxed <iframe>. Used by DocumentEditor.razor to show a live document preview.

Parameters:

Parameter	Type	Description
DocumentId	Guid	The document to preview
IsVisible	bool	Controls visibility (default true)

Behaviour:

• Fetches rendered HTML from GET /api/documents/{DocumentId}/preview.
• Auto-loads when DocumentId changes while visible.
• Provides a zoom control (50%–125%) and a manual refresh button.
• Shows loading, error, and empty states.

API calls: GET /api/documents/{DocumentId}/preview

---

RenderSection

File: Components/Documents/RenderSection.razor

Recursively renders a document section with its blocks and child sections. Used by DocumentEditor.razor as the primary content renderer.

Parameters:

Parameter	Type	Description
Section	SectionDto	The section to render (required)
Depth	int	Nesting depth for indentation
OnProcess	EventCallback<Guid>	Callback to process a block
EnableDrag	bool	Enable drag-and-drop reordering
OnSectionReordered	EventCallback	Callback after section reorder
ProjectId	int	Project ID for source file browsing

Behaviour:

• Renders section header with title and source file count.
• Shows an expandable source files panel with RepoFileAutocomplete for adding new files.
• Renders top-level blocks using BlockRenderer inside a MudDropContainer for drag-and-drop reordering.
• Persists block order changes to PUT /api/documents/sections/{SectionId}/blocks/reorder.
• Recurses into ChildSections with incremented depth.
• Subscribes to DocumentStateService.OnStateChanged for real-time updates and implements IDisposable to unsubscribe.

API calls: PUT /api/documents/sections/{SectionId}/blocks/reorder

---

RepoFileAutocomplete

File: Components/Documents/RepoFileAutocomplete.razor

An autocomplete input for browsing and selecting repository file paths. Used inside RenderSection for assigning source files to sections.

Parameters:

Parameter	Type	Description
ProjectId	int	The project whose repos to browse
Label	string	Input label (default: “Source File”)
Value	string	Current value (two-way bound)
ValueChanged	EventCallback<string>	Change callback

Behaviour:

• Browses repository file paths via POST /api/documents/repo/browse with directory prefix caching.
• Filters results client-side by the typed substring.
• Directories appear first in the suggestion list.
• Shows up to 25 suggestions.

API calls: POST /api/documents/repo/browse

---

RequirementCard

File: Components/Documents/RequirementCard.razor

An editable card for Requirement-type content blocks. Displays the requirement ID, status (Pending/Reviewed/Approved/Rejected), safety level (QM/ASIL A–D), body text, rationale, source file reference, and traceability links.

Parameters:

Parameter	Type	Description
Block	ContentBlockDto	The requirement block (required)

Behaviour:

• Read mode: Shows requirement text, rationale, source file location, and a TraceView for traceability links.
• Edit mode: Inline editing of body text, status, safety level, and rationale with save/cancel actions.
• Saves changes via PUT /api/documents/blocks/{BlockId}.
• Color-codes status and safety level chips.

API calls: PUT /api/documents/blocks/{BlockId}

---

ScannerCard

File: Components/Documents/ScannerCard.razor

A card for Scanner-type content blocks that display repository scan status and configuration.

Parameters:

Parameter	Type	Description
Block	ContentBlockDto	The scanner block (required)
OnProcess	EventCallback<Guid>	Callback to trigger processing

Behaviour:

• Displays scanner configuration: repository URL, branch, granularity, and ignore patterns.
• Shows progress indicators during active scanning (Leiden clustering algorithm).
• Transitions through Pending → Processing → Completed states.

---

SectionSettingsDrawer

File: Components/Documents/SectionSettingsDrawer.razor

A persistent right-side drawer for editing per-section style and layout settings. Used by the template editor pages.

Parameters:

Parameter	Type	Description
IsOpen	bool	Drawer open state (two-way bound)
SelectedSection	TemplateSectionDef	The section being configured
Style	SectionStyle	Section style object (two-way bound)
Depth	int	Section nesting depth
OnChanged	EventCallback	Callback when settings change

Setting panels:

• Typography: Font family, font size, heading size, line height, letter spacing.
• Spacing: Margin (top/bottom) and padding (top/bottom/left/right).

---

SectionTreeItem

File: Components/Documents/SectionTreeItem.razor

A recursive tree view item for the document section sidebar in DocumentEditor.

Parameters:

Parameter	Type	Description
Section	SectionDto	The section to display (required)
DocumentId	Guid	The parent document ID
SelectedSectionId	Guid?	Currently selected section

Behaviour:

• Renders as a MudTreeViewItem with child sections recursively nested.
• Appends requirement blocks as leaf nodes under their parent section, displaying the requirement ID or a truncated body preview.
• Clicking a requirement leaf scrolls the main content area to the corresponding block via fragment navigation (#block-{blockId}).

---

TemplatePreviewPanel

File: Components/Documents/TemplatePreviewPanel.razor

A live preview panel for template editing. Renders the current template definition as HTML in a sandboxed iframe. Used by CreateTemplate.razor and EditTemplate.razor.

Parameters:

Parameter	Type	Description
Sections	List<TemplateSectionDef>	Template section definitions
DocumentStyle	DocumentStyle?	Document-level style settings
Variables	Dictionary<string, string>?	Template variable values
IsVisible	bool	Controls visibility (default true)

Behaviour:

• Debounces preview requests (800ms) to avoid excessive API calls during rapid editing.
• Posts the current template structure to POST /api/documents/templates/preview and renders the returned HTML.
• Provides zoom control (50%–125%) and manual refresh.
• Implements IDisposable to cancel pending debounce timers.

API calls: POST /api/documents/templates/preview

---

TemplateSectionEditor

File: Components/Documents/TemplateSectionEditor.razor

A recursive section editor used by both CreateTemplate and EditTemplate. Provides the full UI for defining template sections, context sources, and AI configuration.

Parameters:

Parameter	Type	Description
Section	TemplateSectionDef	The section being edited (required)
Depth	int	Current nesting depth
OnRemove	EventCallback	Callback to remove this section
AvailableRepos	List<GitRepositoryDto>	Available repositories for context sources
AvailableDocs	List<DocumentSummaryResponse>	Available documents for reference sources
ProjectId	int	Project ID

Behaviour:

• Edits section title and optional system prompt (custom AI instruction).
• Manages context sources with three types:
  • Clustering: Repository scanning with Leiden algorithm, configurable block type (Requirement/TestCase/Text), optional LLM naming.
  • Repository: Direct file reference from a repository branch.
  • Document: Cross-reference to another document in the project.
• “Scan & Cluster” button triggers POST /api/documents/templates/scan and populates child sections from clustering results.
• Displays source files assigned to cluster-generated sub-sections.
• Recurses for child sections.

API calls: POST /api/documents/templates/scan

---

TestCaseCard

File: Components/Documents/TestCaseCard.razor

A read-only card for TestCase-type content blocks. Displays test result status, execution metadata, and traceability links.

Parameters:

Parameter	Type	Description
Block	ContentBlockDto	The test case block (required)

Displayed fields:

• Result: Pass / Fail / Skip / Error (color-coded icon and chip).
• Duration: Execution time in milliseconds.
• Tester name and execution date.
• Failure message: Shown as an error alert when present.
• Pipeline ID: CI/CD pipeline reference.
• Traceability: Rendered via embedded TraceView.

---

TraceView

File: Components/Documents/TraceView.razor

Displays traceability links for a content block. Shows how blocks relate to each other through link types like Verifies, Satisfies, DerivedFrom, and Implements.

Parameters:

Parameter	Type	Description
BlockId	Guid	The block to show trace links for (required)
AutoLoad	bool	Whether to load links automatically (default true)

Behaviour:

• Fetches trace links from GET /api/documents/blocks/{BlockId}/tracelinks.
• Renders each link as a color-coded chip with directional arrow (→ outgoing, ← incoming).
• Link types: Verifies (green), Satisfies (blue), DerivedFrom (yellow), Implements (default).

API calls: GET /api/documents/blocks/{BlockId}/tracelinks