{label}
- {large ? `${roundedPercentage} %` : <>{value.toLocaleString('en-US')}{roundedPercentage}%}
+ {!large && {value.toLocaleString('en-US')}}
{helper && {helper}}
;
@@ -88,6 +89,12 @@ export interface DashboardRiskTool {
count: number;
}
+const dashboardCisCatSeverityValue = 'dashboard-cis-cat-without-severity';
+
+export interface DashboardCisCatSeverityRemainder extends DynamicFacetValue {
+ sourceValues: string[];
+}
+
export function dashboardRiskTools(values: DynamicFacetValue[]): DashboardRiskTool[] {
const tools = new Map
+
;
+}
+
+function DashboardFactList({ items }: { items: Array<{ label: string; value: string }> }) {
+ return
+
+ {total.toLocaleString('en-US')}{centerLabel}
+
+ -
+ {segments.map(segment =>
- {segment.onClick + ? + : {segment.label}{segment.value.toLocaleString('en-US')}} )} +
- {items.map(item =>
- {item.label}
- {item.value}
- {items.map(item =>
- + {item.label} + + {item.value.toLocaleString('en-US')}{item.detail ? ` ${item.detail}` : ''} + {item.restricted && Restricted} + )}
{title}
{meta && {meta}}
-
-
-
-
+
+
+ jump(() => setStatusFilter('deviation'))} />
+ jump(() => setStatusFilter('passed'))} />
+ severityFacet && jump(() => setFacetFilter(severityFacet.id, { values: ['high'] }))} />
+
-
-
);
diff --git a/src/features/dataset-viewer/DatasetViewer.tsx b/src/features/dataset-viewer/DatasetViewer.tsx
index d5d85b1..a29ba5f 100644
--- a/src/features/dataset-viewer/DatasetViewer.tsx
+++ b/src/features/dataset-viewer/DatasetViewer.tsx
@@ -37,12 +37,12 @@ const RECORD_ROW_HEIGHT = 78;
/** Verbindliche Inhaltskachelbreite, siehe `--tile-content-width`. */
const TILE_MIN_WIDTH = 320;
/** Einheitlicher Segmentabstand, siehe `--segment-gap`. */
-const TILE_GAP = 8;
+const TILE_GAP = 12;
/** `padding` von `.tile-grid` (--panel-inset-Token, 20px je Seite). */
const TILE_GRID_INSET = 20;
/** Geschaetzte Kachelzeilenhoehe inklusive Zeilenabstand, aus demselben Grund
* wie {@link RECORD_ROW_HEIGHT} nur eine Naeherung fuer die Scrollmathematik. */
-const TILE_ROW_HEIGHT = 168;
+const TILE_ROW_HEIGHT = 172;
const resultColors = [
'#7c3aed', // Violet
diff --git a/src/features/finding-reader/FindingReader.tsx b/src/features/finding-reader/FindingReader.tsx
index 62a91b6..cc9dddc 100644
--- a/src/features/finding-reader/FindingReader.tsx
+++ b/src/features/finding-reader/FindingReader.tsx
@@ -48,7 +48,7 @@ const normalizeValue = (value: string) => value.trim().replace(/\s+/g, ' ').toLo
*/
const isAdditionalOnlyField = (label: string) => {
const normalized = normalizeLabel(label);
- return /^(?:shortname|si version|target|runtime|points scale|rule id)$/.test(normalized)
+ return /^(?:short\s*name|si version|target|runtime|points scale|rule id)$/.test(normalized)
|| /^(?:quelle|source):? /.test(normalized)
|| /^anssi \d+$/.test(normalized);
};
@@ -62,9 +62,39 @@ const isAdditionalOnlyField = (label: string) => {
const isHeadingOrBadgeField = (label: string) => /^(?:name|title|finding|indicator|results?|status|evaluation|category|severity|criticality|priority|weight|score)$/.test(normalizeLabel(label));
/** Werkzeugdetails, die bei strukturierten Results nicht doppelt erscheinen duerfen. */
-const isRedundantDetailField = (label: string) => /^details?$/.test(normalizeLabel(label));
+const isRedundantDetailField = (label: string) => /^(?:details?|result detail|resultdetail)$/.test(normalizeLabel(label));
const isPingCastleLinkedSectionField = (label: string) => normalizeLabel(label) === 'verwandte daten';
+function legacyPurpleKnightFrameworkFields(record: FindingRecord, toolId?: string): {
+ fields: RecordField[];
+ sourceIndexes: number[];
+} {
+ if (toolId !== 'purple-knight') return { fields: [], sourceIndexes: [] };
+ const source = record.fields.find(field => normalizeLabel(field.label) === 'framework' && field.value);
+ if (!source || source.value.length > 64 * 1024) return { fields: [], sourceIndexes: [] };
+ let parsed: unknown;
+ try {
+ parsed = JSON.parse(source.value);
+ } catch {
+ return { fields: [], sourceIndexes: [] };
+ }
+ if (!Array.isArray(parsed) || parsed.length > 32) return { fields: [], sourceIndexes: [] };
+ const fields: RecordField[] = [];
+ const nextIndex = Math.max(-1, ...record.fields.map(field => field.index)) + 1;
+ parsed.forEach(item => {
+ if (!item || typeof item !== 'object' || Array.isArray(item)) return;
+ const framework = item as { Name?: unknown; Tags?: unknown };
+ if (typeof framework.Name !== 'string' || !Array.isArray(framework.Tags)) return;
+ const frameworkName = framework.Name;
+ framework.Tags.slice(0, 32).forEach(tag => {
+ if (typeof tag !== 'string' || !tag.trim()) return;
+ const ordinal = fields.filter(field => normalizeLabel(field.label).startsWith(normalizeLabel(frameworkName))).length + 1;
+ fields.push({ index: nextIndex + fields.length, label: `${frameworkName}_${ordinal}`, value: tag.trim() });
+ });
+ });
+ return fields.length ? { fields, sourceIndexes: [source.index] } : { fields: [], sourceIndexes: [] };
+}
+
const CIS_CAT_DETAILS_LABEL = 'cis cat details';
const RULE_RESULT_XML_LABEL = 'rule result xml';
const RULE_RESULT_XML_HEADING = /^##\s+Rule Result XML\s*$/im;
@@ -137,8 +167,10 @@ function splitReferenceSection(fields: RecordField[]): RecordField[] {
export function selectFindingFields(record: FindingRecord, title: string, hasStructuredResults = false, toolId?: string) {
const derivedCategories = cisBenchmarkCategories(record, toolId);
+ const legacyFramework = legacyPurpleKnightFrameworkFields(record, toolId);
const resultSectionIndexes = new Set(resultSectionFields(record, toolId).map(field => field.index));
const { optionalFields, hiddenFieldIndexes } = cisCatOptionalFields(record, toolId, resultSectionIndexes);
+ legacyFramework.sourceIndexes.forEach(index => hiddenFieldIndexes.add(index));
// Die technische PingCastle-Sektions-ID bleibt im Datensatz, weil der
// Results-Linker damit die aufgeloesten Tabellen eindeutig zuordnet. Im
// Reader ist sie jedoch reine Implementierungsprovenienz ohne fachlichen
@@ -149,11 +181,16 @@ export function selectFindingFields(record: FindingRecord, title: string, hasStr
.filter(field => isPingCastleLinkedSectionField(field.label))
.forEach(field => hiddenFieldIndexes.add(field.index));
}
- if (hasStructuredResults && toolId === 'pingcastle') {
+ if (hasStructuredResults) {
record.fields
.filter(field => isRedundantDetailField(field.label))
.forEach(field => hiddenFieldIndexes.add(field.index));
}
+ if (toolId === 'purple-knight' && (legacyFramework.fields.length || record.fields.some(field => isRedundantDetailField(field.label)))) {
+ record.fields
+ .filter(field => /^(?:grade|exposure type)$/.test(normalizeLabel(field.label)))
+ .forEach(field => hiddenFieldIndexes.add(field.index));
+ }
const statusField = resultStatusFieldFor(record, toolId);
const badges = record.fields.filter(field => {
if (!field.value) return false;
@@ -161,7 +198,7 @@ export function selectFindingFields(record: FindingRecord, title: string, hasStr
return /^(?:category|severity|weight|score|category score|domain risk level)$/.test(label)
|| (/^points?$/.test(label) && normalizeNumericValue(field.value) !== null);
});
- const mitre = record.fields.filter(field => mitreBadgeLabel(field.label) && field.value);
+ const mitre = [...record.fields, ...legacyFramework.fields].filter(field => mitreBadgeLabel(field.label) && field.value);
const summaryPriority = (label: string) => {
const normalized = normalizeLabel(label);
if (normalized === 'result message') return 0;
@@ -195,7 +232,7 @@ export function selectFindingFields(record: FindingRecord, title: string, hasStr
...(statusField ? [statusField.index] : [])
]);
const displayedTextValues = new Set([title, ...summary.map(field => field.value)].map(normalizeValue));
- const remainingFields = record.fields.filter(field => {
+ const remainingFields = [...record.fields, ...legacyFramework.fields.filter(field => !mitreBadgeLabel(field.label))].filter(field => {
if (!field.value || displayedIndexes.has(field.index)) return false;
if (isAdditionalOnlyField(field.label)) return true;
if (isHeadingOrBadgeField(field.label)) return false;
diff --git a/src/features/linked-results/inline-result-tables.ts b/src/features/linked-results/inline-result-tables.ts
index 9a6ab75..f0b09ea 100644
--- a/src/features/linked-results/inline-result-tables.ts
+++ b/src/features/linked-results/inline-result-tables.ts
@@ -24,6 +24,48 @@ import { clean } from '../../shared/text';
const RESULT_DETAIL_LABEL =
/^(?:result\s*detail|resultdetail|result\s*details|details?|ergebnisdetails?|befund|evidence|nachweis|result|results|ergebnis|ergebnisse)$/i;
+const MAX_INLINE_JSON_LENGTH = 5 * 1024 * 1024;
+const MAX_INLINE_JSON_ROWS = 10_000;
+const MAX_INLINE_JSON_COLUMNS = 256;
+
+interface InlineTable {
+ headers: string[];
+ rows: string[][];
+}
+
+/**
+ * Legacy PurpleKnight HTML imports retained `IndicatorReportObjects` as a
+ * JSON array whose cells are encoded as `Column: value`. Interpret that inert
+ * value as a table projection; never execute report code and never mutate the
+ * preserved source field.
+ */
+function extractLabelValueJsonTable(value: string): InlineTable | undefined {
+ const source = value.trim();
+ if (!source.startsWith('[[') || source.length > MAX_INLINE_JSON_LENGTH) return undefined;
+ let parsed: unknown;
+ try {
+ parsed = JSON.parse(source);
+ } catch {
+ return undefined;
+ }
+ if (!Array.isArray(parsed) || !parsed.length || parsed.length > MAX_INLINE_JSON_ROWS) return undefined;
+ const rows = parsed.filter((row): row is unknown[] => Array.isArray(row));
+ if (rows.length !== parsed.length || !rows[0].length || rows[0].length > MAX_INLINE_JSON_COLUMNS) return undefined;
+ const headers = rows[0].map(cell => {
+ if (typeof cell !== 'string') return '';
+ const separator = cell.indexOf(':');
+ return separator > 0 && separator <= 120 ? cell.slice(0, separator).trim() : '';
+ });
+ if (headers.some(header => !header) || new Set(headers).size !== headers.length) return undefined;
+ const tableRows = rows.map(row => headers.map((header, columnIndex) => {
+ const cell = row[columnIndex];
+ const text = cell === null || cell === undefined ? '' : String(cell);
+ const prefix = `${header}:`;
+ return text.startsWith(prefix) ? text.slice(prefix.length).trimStart() : text;
+ }));
+ return { headers, rows: tableRows };
+}
+
/**
* Die Markdown-Auswertung ist mehrere Regex-Durchlaeufe je Feld (siehe
* `shared/markdown.ts`) und lohnt sich nicht fuer jeden Aufruf neu: bei einem
@@ -39,7 +81,11 @@ export function inlineResultTableSheets(record: FindingRecord): DatasetSheet[] {
const sheets: DatasetSheet[] = [];
for (const field of record.fields) {
if (!field.value || !RESULT_DETAIL_LABEL.test(clean(field.label))) continue;
- extractMarkdownTables(field.value).forEach((table, index) => {
+ const markdownTables = extractMarkdownTables(field.value);
+ const tables: InlineTable[] = markdownTables.length
+ ? markdownTables
+ : [extractLabelValueJsonTable(field.value)].filter((table): table is InlineTable => Boolean(table));
+ tables.forEach((table, index) => {
const rows = [table.headers, ...table.rows];
const name = index === 0 ? field.label : `${field.label} (${index + 1})`;
sheets.push(makeSheet(name, rows, rows.map(row => row.join('\t')).join('\n'), record.id, {
diff --git a/src/features/project-import/DataHub.tsx b/src/features/project-import/DataHub.tsx
index c8e9670..8c6d84f 100644
--- a/src/features/project-import/DataHub.tsx
+++ b/src/features/project-import/DataHub.tsx
@@ -319,9 +319,6 @@ export function DataHub({ activeProjectId, onProjectSelected, onProjectDataChang
? current.includes(timeslotId) ? current : [...current, timeslotId]
: current.filter(id => id !== timeslotId));
if (group) setExcludedScanRunIds(current => current.filter(runId => !group.scanRunIds.includes(runId)));
- setExpandedTimeslotIds(current => checked
- ? current.includes(timeslotId) ? current : [...current, timeslotId]
- : current.filter(id => id !== timeslotId));
setError(null);
};
@@ -566,10 +563,10 @@ export function DataHub({ activeProjectId, onProjectSelected, onProjectDataChang
}}
>
- severityFacet && jump(() => setFacetFilter(severityFacet.id, { values: [value] }))}
- />
- sourceFacet && jump(() => setFacetFilter(sourceFacet.id, { values: [value] }))}
- />
-
+
+
+ jump(() => setStatusFilter('deviation')) },
+ { label: 'Passed', value: passed, tone: 'passed', onClick: () => jump(() => setStatusFilter('passed')) },
+ { label: 'Not Run', value: notRun, tone: 'not-run', onClick: () => jump(() => setStatusFilter('not-run')) },
+ { label: 'Not Applicable', value: notApplicable, tone: 'neutral', onClick: () => jump(() => setStatusFilter('not-applicable')) },
+ { label: 'Error', value: errors, tone: 'error', onClick: () => jump(() => setStatusFilter('error')) },
+ { label: 'IOEs found', value: explicitIoes, tone: 'info', onClick: explicitIoes > 0 ? () => jump(() => { setStatusFilter('all'); setPathFindingIds(explicitIoeRecordIds); }) : undefined }
+ ]} />
+
-
- sourceFacet && jump(() => setFacetFilter(sourceFacet.id, { values: sourceValues }))}
- onSelectCategory={(value, sourceValues) => categoryFacet && sourceFacet && jump(() => {
- setFacetFilter(sourceFacet.id, { values: sourceValues });
- setFacetFilter(categoryFacet.id, { values: [value] });
- })}
- onSelectSeverity={(value, sourceValues) => severityFacet && sourceFacet && jump(() => {
- if (sourceValues.length) setFacetFilter(sourceFacet.id, { values: sourceValues });
- setFacetFilter(severityFacet.id, { values: [value] });
- })}
- />
+ sum + value.count, 0).toLocaleString('en-US')} classified`}>
+ sum + value.count, 0))} centerLabel="classified" segments={severityDistributionValues.map(value => ({
+ label: value.label,
+ value: value.count,
+ tone: value.value,
+ onClick: () => {
+ if (value.value === dashboardCisCatSeverityValue && sourceFacet && cisCatSeverityRemainder) {
+ jump(() => setFacetFilter(sourceFacet.id, { values: cisCatSeverityRemainder.sourceValues }));
+ } else if (severityFacet) jump(() => setFacetFilter(severityFacet.id, { values: [value.value] }));
+ }
+ }))} />
+
+
+
+ {!environment.snapshot && !environment.failed ?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ reviews[record.id]?.include).length.toLocaleString('en-US')} marked`} className="client-info-resilience">
+
+
Loading scanner context…
:{typedObservationCount.toLocaleString('en-US')} typed observations · {directorySectionCount.toLocaleString('en-US')} sections
+No scan reports
This timeslot does not contain a scan report yet.
@@ -614,7 +611,7 @@ export function DataHub({ activeProjectId, onProjectSelected, onProjectDataChang
Use imported {report.tool.name}
: ();
dataset.sheets.forEach((sheet, tableIndex) => {
- const sourceTableIndex = dataset.intermediate?.tables.find(table => table.id === sheet.id)?.index ?? tableIndex;
+ const sourceTableIndex = sheet.sourceTableIndex
+ ?? dataset.intermediate?.tables.find(table => table.id === sheet.id)?.index
+ ?? tableIndex;
const tableId = `table-${safeBatchId}-${fileIndex}-${sourceTableIndex}`;
sourceTableIds.set(sourceTableIndex, tableId);
sourceTables.push({
diff --git a/src/importers/embedded-report-json.ts b/src/importers/embedded-report-json.ts
new file mode 100644
index 0000000..0ad0562
--- /dev/null
+++ b/src/importers/embedded-report-json.ts
@@ -0,0 +1,61 @@
+import type { JsonValue } from '../domain/canonical-model';
+
+const MAX_JSON_DEPTH = 256;
+
+export interface EmbeddedJsonValue {
+ value: JsonValue;
+ start: number;
+ end: number;
+}
+
+/** Reads a JSON object without evaluating the surrounding script. */
+export function readEmbeddedJsonObject(text: string, start: number): EmbeddedJsonValue | undefined {
+ if (text[start] !== '{') return undefined;
+ let depth = 0;
+ let quoted = false;
+ let escaped = false;
+ for (let index = start; index < text.length; index += 1) {
+ const character = text[index];
+ if (escaped) {
+ escaped = false;
+ continue;
+ }
+ if (quoted && character === '\\') {
+ escaped = true;
+ continue;
+ }
+ if (character === '"') {
+ quoted = !quoted;
+ continue;
+ }
+ if (quoted) continue;
+ if (character === '{' || character === '[') {
+ depth += 1;
+ if (depth > MAX_JSON_DEPTH) return undefined;
+ } else if (character === '}' || character === ']') {
+ depth -= 1;
+ if (depth < 0) return undefined;
+ if (depth === 0) {
+ const end = index + 1;
+ try {
+ return { value: JSON.parse(text.slice(start, end)) as JsonValue, start, end };
+ } catch {
+ return undefined;
+ }
+ }
+ }
+ }
+ return undefined;
+}
+
+export function isJsonObject(value: JsonValue | undefined): value is Record {
+ return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function embeddedObjectAfter(text: string, marker: RegExp): EmbeddedJsonValue | undefined {
+ marker.lastIndex = 0;
+ const match = marker.exec(text);
+ if (!match) return undefined;
+ const start = text.indexOf('{', match.index + match[0].length);
+ return start >= 0 ? readEmbeddedJsonObject(text, start) : undefined;
+}
diff --git a/src/importers/engine.ts b/src/importers/engine.ts
index 7a26dc3..8c16e1a 100644
--- a/src/importers/engine.ts
+++ b/src/importers/engine.ts
@@ -12,8 +12,11 @@ import { importHtml } from './html-importer';
import { importJson } from './json-importer';
import { importXml } from './xml-importer';
import { mapFindingCandidates } from './candidate-mapping';
+import { makeSheet } from './sheet-factory';
import type { ImportRuntimeAdapters } from './runtime-adapters';
import { extractSourceDocument } from './source-extractor-registry';
+import { rowsToCsv } from '../exports/csv-export';
+import { cellText } from '../shared/text';
import {
resolveImportResourcePolicy, validateDecodedTextResources, validateImportDocumentResources,
validateImportSourceResources, type ImportResourcePolicy
@@ -135,14 +138,6 @@ export async function importSource(
}
imported = attachFormatDetection(imported, detection, decodedEncoding);
if (imported.intermediate) validateImportDocumentResources(imported.intermediate, resourcePolicy);
- const hasContent = imported.sheets.some(sheet => sheet.rows.some(row => row.some(cell => cell.trim())));
- if (!hasContent) {
- throw new ImportError('Die Datei enthält keine auswertbaren Tabellen.', [{
- severity: 'error',
- code: 'empty-import',
- message: 'Der Parser hat keine nicht-leeren Tabellenzellen geliefert.'
- }]);
- }
if (!options.profiles.length) {
throw new ImportError('Für den Import ist mindestens ein Profil erforderlich.', [{
severity: 'error',
@@ -152,8 +147,18 @@ export async function importSource(
}
if (imported.intermediate) {
const extraction = extractSourceDocument(imported.intermediate);
+ const supportingTableIndexBase = Math.max(-1, ...imported.intermediate.tables.map(table => table.index)) + 1;
+ const supportingSheets = (extraction.supportingTables ?? []).map((table, index) => {
+ const rows = [table.headers, ...table.rows.map(row => row.map(cellText))];
+ return makeSheet(table.name, rows, rowsToCsv(rows), source.metadata.name, {
+ sourceFile: source.metadata.name,
+ sourceSheet: table.name,
+ sourceTableIndex: supportingTableIndexBase + index
+ });
+ });
imported = {
...imported,
+ sheets: [...imported.sheets, ...supportingSheets],
extraction,
intermediate: {
...imported.intermediate,
@@ -162,6 +167,19 @@ export async function importSource(
}
};
}
+ const hasTableContent = imported.sheets.some(sheet => sheet.rows.some(row => row.some(cell => cell.trim())));
+ const hasExtractedContent = Boolean(imported.extraction && (
+ imported.extraction.candidates.length
+ || imported.extraction.reportSections?.length
+ || imported.extraction.environmentObservations?.length
+ ));
+ if (!hasTableContent && !hasExtractedContent) {
+ throw new ImportError('Die Datei enthält keine auswertbaren Tabellen.', [{
+ severity: 'error',
+ code: 'empty-import',
+ message: 'Der Parser und die registrierten Quellenextraktoren haben keine auswertbaren Inhalte geliefert.'
+ }]);
+ }
const recognition = imported.intermediate ? recognizeImportDocument(imported.intermediate) : undefined;
const profile = recognition
? selectImportProfile(recognition, options.profiles)
@@ -190,4 +208,4 @@ export async function importSource(
recognition,
mapping
};
-}
\ No newline at end of file
+}
diff --git a/src/importers/maester-html-source-extractor.ts b/src/importers/maester-html-source-extractor.ts
new file mode 100644
index 0000000..08d3de4
--- /dev/null
+++ b/src/importers/maester-html-source-extractor.ts
@@ -0,0 +1,111 @@
+import type { JsonValue } from '../domain/canonical-model';
+import type { DecodedSourceDocument, ImportDiagnostic } from '../domain/import-intermediate';
+import type { FindingCandidate, SourceExtractor, SourceFieldCandidate } from '../domain/source-extraction';
+import { cellText, plainTextValue, stringifyCell } from '../shared/text';
+import { isJsonObject, readEmbeddedJsonObject } from './embedded-report-json';
+
+const ASSIGNMENT = /(?:var|const|let)\s+[$A-Za-z_][\w$]*\s*=\s*/g;
+const MAX_TESTS = 250_000;
+
+interface MaesterPayload {
+ roots: Array<{ value: Record; path: string }>;
+ recognized: boolean;
+ diagnostics: ImportDiagnostic[];
+}
+
+function maesterPayload(document: DecodedSourceDocument): MaesterPayload {
+ if (document.format !== 'HTML') return { roots: [], recognized: false, diagnostics: [] };
+ for (const match of document.rawText.matchAll(ASSIGNMENT)) {
+ const start = document.rawText.indexOf('{', match.index! + match[0].length);
+ if (start < 0) continue;
+ const embedded = readEmbeddedJsonObject(document.rawText, start);
+ if (!embedded || !isJsonObject(embedded.value)) continue;
+ const value = embedded.value;
+ if (Array.isArray(value.Tenants)) {
+ const roots = value.Tenants
+ .map((tenant, index) => isJsonObject(tenant) ? { value: tenant, path: `$.Tenants[${index}]` } : undefined)
+ .filter((item): item is { value: Record; path: string } => Boolean(item));
+ return { roots, recognized: true, diagnostics: [] };
+ }
+ if (Array.isArray(value.Tests) && ('Result' in value || 'EndOfJson' in value)) {
+ return { roots: [{ value, path: '$' }], recognized: true, diagnostics: [] };
+ }
+ }
+ return { roots: [], recognized: false, diagnostics: [] };
+}
+
+function field(
+ fileName: string,
+ path: string,
+ key: string,
+ label: string,
+ value: JsonValue,
+ decodedValue = cellText(value)
+): SourceFieldCandidate {
+ return { key, label, originalValue: value, decodedValue, source: { fileName, objectPath: `${path}.${key}` } };
+}
+
+function optionalField(
+ fields: SourceFieldCandidate[], fileName: string, path: string, key: string, label: string,
+ value: JsonValue | undefined, decodedValue?: string
+): void {
+ if (value === undefined || value === null || stringifyCell(value).trim() === '') return;
+ fields.push(field(fileName, path, key, label, value, decodedValue));
+}
+
+function testCandidate(fileName: string, test: Record, path: string, index: number): FindingCandidate {
+ const detail = isJsonObject(test.ResultDetail) ? test.ResultDetail : {};
+ const fields: SourceFieldCandidate[] = [];
+ optionalField(fields, fileName, path, 'Id', 'ID', test.Id);
+ optionalField(fields, fileName, path, 'Title', 'Title', test.Title ?? test.Name);
+ optionalField(fields, fileName, path, 'Result', 'Result', test.Result);
+ optionalField(fields, fileName, path, 'Severity', 'Severity', test.Severity ?? detail.Severity);
+ optionalField(fields, fileName, path, 'Tag', 'Tag', test.Tag);
+ optionalField(fields, fileName, path, 'Block', 'Block', test.Block);
+ optionalField(fields, fileName, path, 'Duration', 'Duration', test.Duration);
+ optionalField(fields, fileName, `${path}.ResultDetail`, 'TestDescription', 'Description', detail.TestDescription,
+ plainTextValue(detail.TestDescription));
+ optionalField(fields, fileName, `${path}.ResultDetail`, 'TestResult', 'ResultDetail', detail.TestResult,
+ plainTextValue(detail.TestResult));
+ optionalField(fields, fileName, `${path}.ResultDetail`, 'TestSkipped', 'TestSkipped', detail.TestSkipped);
+ optionalField(fields, fileName, `${path}.ResultDetail`, 'SkippedReason', 'SkippedReason', detail.SkippedReason);
+ optionalField(fields, fileName, path, 'ErrorRecord', 'ErrorMessage', test.ErrorRecord);
+ optionalField(fields, fileName, path, 'Name', 'Name', test.Name);
+ optionalField(fields, fileName, path, 'HelpUrl', 'HelpUrl', test.HelpUrl);
+ optionalField(fields, fileName, path, 'ScriptBlockFile', 'TestScriptFile', test.ScriptBlockFile);
+ optionalField(fields, fileName, path, 'ScriptBlock', 'TestScript', test.ScriptBlock);
+ optionalField(fields, fileName, `${path}.ResultDetail`, 'Service', 'Service', detail.Service);
+ return { version: 1, id: `maester-test-${index}`, source: { fileName, objectPath: path }, fields };
+}
+
+export const maesterHtmlSourceExtractor: SourceExtractor = {
+ id: 'maester-html-source-extractor',
+ version: '1.0.0',
+ detect(document) {
+ const payload = maesterPayload(document);
+ const tests = payload.roots.reduce((count, root) => count + (Array.isArray(root.value.Tests) ? root.value.Tests.length : 0), 0);
+ return payload.recognized && tests > 0
+ ? { score: 1, evidence: [`Sicher eingebettetes Maester-Ergebnisobjekt mit ${tests} Testeinträgen erkannt.`] }
+ : { score: 0, evidence: [] };
+ },
+ extract(document) {
+ const payload = maesterPayload(document);
+ const candidates: FindingCandidate[] = [];
+ let sourceIndex = 0;
+ for (const root of payload.roots) {
+ const tests = Array.isArray(root.value.Tests) ? root.value.Tests : [];
+ for (let index = 0; index < tests.length && candidates.length < MAX_TESTS; index += 1) {
+ const test = tests[index];
+ if (!isJsonObject(test) || (!test.Id && !test.Title && !test.Name)) continue;
+ const path = `${root.path}.Tests[${index}]`;
+ candidates.push(testCandidate(document.file.name, test, path, sourceIndex++));
+ }
+ }
+ const diagnostics = [...payload.diagnostics];
+ if (candidates.length >= MAX_TESTS) diagnostics.push({
+ severity: 'warning', code: 'maester-test-limit', stage: 'extraction',
+ message: `Der Maester-Bericht wurde auf ${MAX_TESTS} Testeinträge begrenzt.`
+ });
+ return { version: 1, candidates, diagnostics };
+ }
+};
diff --git a/src/importers/purple-knight-html-source-extractor.ts b/src/importers/purple-knight-html-source-extractor.ts
new file mode 100644
index 0000000..2252896
--- /dev/null
+++ b/src/importers/purple-knight-html-source-extractor.ts
@@ -0,0 +1,210 @@
+import type { JsonValue } from '../domain/canonical-model';
+import type { DecodedSourceDocument, ImportDiagnostic } from '../domain/import-intermediate';
+import type {
+ FindingCandidate, SourceExtractor, SourceFieldCandidate, SupportingTableCandidate
+} from '../domain/source-extraction';
+import { cellText, plainTextValue } from '../shared/text';
+import { embeddedObjectAfter, isJsonObject, readEmbeddedJsonObject } from './embedded-report-json';
+
+const SCRIPT_GLOBAL = 'win' + 'dow';
+const CATEGORY_ASSIGNMENT = new RegExp(`${SCRIPT_GLOBAL}\\["Category_(\\d+)"\\]\\["([^"]+)"\\]\\s*=\\s*`, 'g');
+const REPORT_ASSIGNMENT = new RegExp(`${SCRIPT_GLOBAL}\\.reportJSON\\s*=\\s*`, 'g');
+const MAX_INDICATORS = 250_000;
+
+interface PurplePayload {
+ indicators: Array<{ value: Record; path: string }>;
+ categoryNames: Map;
+ recognized: boolean;
+ diagnostics: ImportDiagnostic[];
+}
+
+const EXCEL_HEADERS = [
+ 'ShortName', 'Name', 'SI version', 'Target', 'Status', 'Runtime', 'Score', 'Severity', 'Weight', 'Category',
+ 'MITRE ATT&CK_1', 'MITRE ATT&CK_2', 'MITRE ATT&CK_3', 'MITRE ATT&CK_4',
+ 'ANSSI_1', 'ANSSI_2', 'ANSSI_3', 'ANSSI_4', 'MITRE D3FEND_1', 'MITRE D3FEND_2',
+ 'Description', 'Likelihood of compromise', 'Result message', 'Number of results', 'Result', 'Remediation'
+] as const;
+
+function purplePayload(document: DecodedSourceDocument): PurplePayload {
+ if (document.format !== 'HTML') return { indicators: [], categoryNames: new Map(), recognized: false, diagnostics: [] };
+ const root = embeddedObjectAfter(document.rawText, REPORT_ASSIGNMENT);
+ if (!root || !isJsonObject(root.value) || !Array.isArray(root.value.reportResultsList)) {
+ return { indicators: [], categoryNames: new Map(), recognized: false, diagnostics: [] };
+ }
+ const categoryNames = new Map();
+ const generalConfig = isJsonObject(root.value.GeneralConfig) ? root.value.GeneralConfig : undefined;
+ const categories = generalConfig && Array.isArray(generalConfig.Categories) ? generalConfig.Categories : [];
+ for (const category of categories) {
+ if (!isJsonObject(category) || typeof category.ID !== 'number' || typeof category.Name !== 'string') continue;
+ categoryNames.set(category.ID, category.Name);
+ }
+ const indicators: PurplePayload['indicators'] = [];
+ for (const match of document.rawText.matchAll(CATEGORY_ASSIGNMENT)) {
+ if (indicators.length >= MAX_INDICATORS) break;
+ const start = document.rawText.indexOf('{', match.index! + match[0].length);
+ const embedded = start >= 0 ? readEmbeddedJsonObject(document.rawText, start) : undefined;
+ if (!embedded || !isJsonObject(embedded.value) || !isJsonObject(embedded.value.ResIndicator)) continue;
+ indicators.push({ value: embedded.value, path: `$.Category_${match[1]}[${JSON.stringify(match[2])}]` });
+ }
+ const diagnostics: ImportDiagnostic[] = [];
+ if (indicators.length >= MAX_INDICATORS) diagnostics.push({
+ severity: 'warning', code: 'purple-knight-indicator-limit', stage: 'extraction',
+ message: `Der PurpleKnight-Bericht wurde auf ${MAX_INDICATORS} Indikatoren begrenzt.`
+ });
+ return { indicators, categoryNames, recognized: true, diagnostics };
+}
+
+function field(
+ fileName: string, path: string, key: string, label: string, value: JsonValue,
+ decodedValue = cellText(value), columnIndex?: number
+): SourceFieldCandidate {
+ return {
+ key, label, originalValue: value, decodedValue,
+ source: { fileName, objectPath: `${path}.${key}`, columnIndex }
+ };
+}
+
+function purpleStatus(indicator: Record, execution: Record): string {
+ if (indicator.IsFailedToRun === true) return 'Failed to run';
+ if (indicator.IsAborted === true) return 'Canceled';
+ if (indicator.Selected === false) return 'Not selected';
+ if (indicator.IsEvaluated === false) return 'Not Relevant';
+ if (indicator.IsFailed === true && typeof indicator.ExposureType === 'string' && /IOE/i.test(indicator.ExposureType)) return 'IOE Found';
+ if (indicator.IsFailed === true && typeof indicator.ExposureType === 'string' && /IOC/i.test(indicator.ExposureType)) return 'IOC Found';
+ const status = execution.Status ?? indicator.State;
+ return typeof status === 'string' ? status.replace(/([a-z])([A-Z])/g, '$1 $2') : '';
+}
+
+function target(indicator: Record): string {
+ const targets = Array.isArray(indicator.Targets) ? indicator.Targets.map(cellText).filter(Boolean) : [];
+ return targets.includes('AAD') && targets.includes('AD') ? 'Hybrid (AD)' : targets.join(', ');
+}
+
+function category(indicator: Record, categoryNames: Map): string {
+ const name = typeof indicator.CategoryID === 'number' ? categoryNames.get(indicator.CategoryID) ?? '' : '';
+ return target(indicator) === 'Hybrid (AD)' && name === 'Hybrid' ? 'Hybrid (AD)' : name || cellText(indicator.CategoryID);
+}
+
+function runtime(indicator: Record): string {
+ if (typeof indicator.StartTime !== 'string' || typeof indicator.CompletionTime !== 'string') return '';
+ const ticks = (value: string): bigint | undefined => {
+ const match = value.match(/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2})(?:\.(\d+))?Z$/);
+ if (!match) return undefined;
+ const seconds = Date.parse(`${match[1]}Z`);
+ if (!Number.isFinite(seconds)) return undefined;
+ const fraction = BigInt((match[2] ?? '').slice(0, 7).padEnd(7, '0'));
+ return BigInt(seconds) * 10_000n + fraction;
+ };
+ const start = ticks(indicator.StartTime);
+ const completion = ticks(indicator.CompletionTime);
+ if (start === undefined || completion === undefined || completion < start) return '';
+ const totalCentiseconds = Number((completion - start) / 100_000n);
+ const hours = Math.floor(totalCentiseconds / 360_000);
+ const minutes = Math.floor(totalCentiseconds / 6_000) % 60;
+ const seconds = Math.floor(totalCentiseconds / 100) % 60;
+ const centiseconds = totalCentiseconds % 100;
+ return [hours, minutes, seconds, centiseconds].map(value => String(value).padStart(2, '0')).join(':');
+}
+
+function frameworkValues(indicator: Record, frameworkName: string, count: number): JsonValue[] {
+ const frameworks = Array.isArray(indicator.SecurityFrameworks) ? indicator.SecurityFrameworks : [];
+ const tags = frameworks.flatMap(item => isJsonObject(item) && item.Name === frameworkName && Array.isArray(item.Tags)
+ ? item.Tags : []);
+ return Array.from({ length: count }, (_, index) => tags[index] ?? null);
+}
+
+function workbookResultValue(header: string, value: string): string {
+ if (!/(?:date|timestamp|lastset)$/i.test(header)) return value;
+ const match = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})\s+(\d{1,2}):(\d{2})(?::\d{2})?\s+(AM|PM)$/i);
+ if (!match) return value;
+ let hour = Number(match[4]) % 12;
+ if (match[6].toUpperCase() === 'PM') hour += 12;
+ return `${match[3]}-${match[1].padStart(2, '0')}-${match[2].padStart(2, '0')} ${String(hour).padStart(2, '0')}:${match[5]}`;
+}
+
+function reportTable(
+ fileName: string, item: Record, path: string
+): SupportingTableCandidate | undefined {
+ const indicator = isJsonObject(item.ResIndicator) ? item.ResIndicator : {};
+ const name = typeof indicator.ShortName === 'string' ? indicator.ShortName.trim() : '';
+ const sourceRows = Array.isArray(item.IndicatorReportObjects) ? item.IndicatorReportObjects : [];
+ const rows = sourceRows.filter(Array.isArray);
+ if (!name || !rows.length) return undefined;
+ const headers = rows[0].map((cell, index) => {
+ const value = cellText(cell);
+ const separator = value.indexOf(':');
+ return separator > 0 ? value.slice(0, separator).trim() : `Column ${index + 1}`;
+ });
+ return {
+ version: 1,
+ name,
+ headers,
+ rows: rows.map(row => headers.map((header, index) => {
+ const value = cellText(row[index]);
+ const prefix = `${header}:`;
+ const unprefixed = value.startsWith(prefix) ? value.slice(prefix.length).trimStart() : value;
+ return workbookResultValue(header, unprefixed);
+ })),
+ source: { fileName, objectPath: `${path}.IndicatorReportObjects` },
+ attributes: { kind: 'finding-result', findingReference: name }
+ };
+}
+
+function indicatorCandidate(
+ fileName: string, item: Record, path: string, categoryNames: Map, index: number
+): FindingCandidate {
+ const indicator = isJsonObject(item.ResIndicator) ? item.ResIndicator : {};
+ const execution = isJsonObject(item.ExecutionResult) ? item.ExecutionResult : {};
+ const hasResults = Array.isArray(item.IndicatorReportObjects) && item.IndicatorReportObjects.length > 0;
+ const frameworkTags = [
+ ...frameworkValues(indicator, 'MITRE ATT&CK', 4),
+ ...frameworkValues(indicator, 'ANSSI', 4),
+ ...frameworkValues(indicator, 'MITRE D3FEND', 2)
+ ];
+ const values: Array<{ key: string; value: JsonValue; decoded?: string }> = [
+ { key: 'ShortName', value: indicator.ShortName ?? null },
+ { key: 'Name', value: indicator.Name ?? null },
+ { key: 'Version', value: indicator.Version ?? null },
+ { key: 'Targets', value: indicator.Targets ?? null, decoded: target(indicator) },
+ { key: 'Status', value: execution.Status ?? indicator.State ?? null, decoded: purpleStatus(indicator, execution) },
+ { key: 'Runtime', value: runtime(indicator) },
+ { key: 'Score', value: execution.Score ?? null },
+ { key: 'Severity', value: indicator.Severity ?? null },
+ { key: 'Weight', value: indicator.Weight ?? null },
+ { key: 'CategoryID', value: indicator.CategoryID ?? null, decoded: category(indicator, categoryNames) },
+ ...frameworkTags.map((value, index) => ({ key: `Framework_${index + 1}`, value })),
+ { key: 'Description', value: indicator.Description ?? null, decoded: plainTextValue(indicator.Description) },
+ { key: 'LikelihoodOfCompromise', value: indicator.LikelihoodOfCompromise ?? null,
+ decoded: plainTextValue(indicator.LikelihoodOfCompromise) },
+ { key: 'ResultMessage', value: execution.ResultMessage ?? null },
+ { key: 'TotalResultsCount', value: item.TotalResultsCount ?? 0 },
+ { key: 'Result', value: hasResults ? indicator.ShortName ?? null : null },
+ { key: 'Remediation', value: execution.Remediation ?? null, decoded: plainTextValue(execution.Remediation) }
+ ];
+ const fields = values.map((itemValue, columnIndex) => field(
+ fileName, path, itemValue.key, EXCEL_HEADERS[columnIndex], itemValue.value,
+ itemValue.decoded ?? cellText(itemValue.value), columnIndex
+ ));
+ return { version: 1, id: `purple-knight-indicator-${index}`, source: { fileName, objectPath: path }, fields };
+}
+
+export const purpleKnightHtmlSourceExtractor: SourceExtractor = {
+ id: 'purple-knight-html-source-extractor',
+ version: '1.1.0',
+ detect(document) {
+ const payload = purplePayload(document);
+ return payload.recognized && payload.indicators.length > 0
+ ? { score: 1, evidence: [`Sicher eingebettetes PurpleKnight-Reportmodell mit ${payload.indicators.length} Indikatoren erkannt.`] }
+ : { score: 0, evidence: [] };
+ },
+ extract(document) {
+ const payload = purplePayload(document);
+ const candidates = payload.indicators.map((item, index) =>
+ indicatorCandidate(document.file.name, item.value, item.path, payload.categoryNames, index));
+ const supportingTables = payload.indicators.flatMap(item => {
+ const table = reportTable(document.file.name, item.value, item.path);
+ return table ? [table] : [];
+ });
+ return { version: 1, candidates, supportingTables, diagnostics: payload.diagnostics };
+ }
+};
diff --git a/src/importers/source-extractors.ts b/src/importers/source-extractors.ts
index a7a52d7..ada7a5b 100644
--- a/src/importers/source-extractors.ts
+++ b/src/importers/source-extractors.ts
@@ -4,6 +4,8 @@ import type { FindingCandidate, SourceExtractor, SourceFieldCandidate } from '..
import { stringifyCell } from '../shared/text';
import { cisCatSourceExtractor } from './cis-cat-source-extractor';
import { pingCastleSourceExtractor } from './pingcastle-source-extractor';
+import { maesterHtmlSourceExtractor } from './maester-html-source-extractor';
+import { purpleKnightHtmlSourceExtractor } from './purple-knight-html-source-extractor';
function safeId(value: string): string {
return value.replace(/[^a-zA-Z0-9_-]/g, '-');
@@ -91,6 +93,8 @@ export const genericTableSourceExtractor: SourceExtractor = {
export const sourceExtractors: SourceExtractor[] = [
pingCastleSourceExtractor,
cisCatSourceExtractor,
+ purpleKnightHtmlSourceExtractor,
+ maesterHtmlSourceExtractor,
nativeObjectSourceExtractor,
genericTableSourceExtractor
];
diff --git a/src/styles/base.css b/src/styles/base.css
index 6624b91..b018b07 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -12,7 +12,7 @@ h4 { font-size: var(--type-h4-size); font-weight: var(--fw-semibold); line-heigh
svg { display: block; width: 17px; height: 17px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
-td { font-size: var(--type-body-size); font-weight: var(--fw-regular); }
+td { font-size: var(--type-table-body-size); font-weight: var(--fw-regular); }
th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: var(--panel-soft); font-size: var(--type-table-head-size); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
tbody tr:hover td { background: var(--panel-hover); }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@@ -30,7 +30,7 @@ button, .btn, .icon-btn, .tab-btn, .bookmark-btn, .results-btn {
}
.select, .input {
min-height: var(--control-height); border: var(--border-hair) solid var(--line); border-radius: 0;
- color: var(--text); background-color: var(--panel-raised); font-size: var(--type-label-size); font-weight: var(--fw-regular);
+ color: var(--text); background-color: var(--panel-raised); font-size: var(--type-button-size); font-weight: var(--fw-regular);
}
/* Verbindliche Buttonform: eine Hoehe, ein Radius, ein waagerechtes Polster.
Senkrecht traegt der Knopf kein eigenes Polster - die Hoehe kommt aus
diff --git a/src/styles/components.css b/src/styles/components.css
index 6d76f9f..93af17a 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -129,7 +129,7 @@ html[data-theme="light"] .empty-brand-logo-light { opacity: 1; }
--heading ist im hellen Skin dunkelgrau, im dunklen nahezu weiss. */
/* Der Fundname als Ueberschrift des Fensterrumpfs - dieselbe Typografie wie
die Finding-Ueberschrift im Reader. */
-.linked-results-heading { margin: 0; color: var(--heading); font-size: var(--ui-heading-size); font-weight: var(--ui-strong-weight); line-height: 1.35; }
+.linked-results-heading { margin: 0; color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--ui-strong-weight); line-height: 1.35; }
.linked-results-empty { padding: 18px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); line-height: 1.55; }
/* Ergebnisabschnitte bleiben bewusst rahmenlos: Tabellen besitzen bereits
eigene Zelllinien. Ein zusaetzlicher Kasten samt Innenabstand verbraucht im
@@ -336,9 +336,9 @@ html[data-theme="light"] .empty-brand-logo-light { opacity: 1; }
(nowrap-Text hat als min-content seine volle Laenge) und sprengte damit
die Fensterbreite, statt den Namen per Ellipsis zu kuerzen. */
.results-window-head { display: flex; align-items: stretch; justify-content: space-between; gap: 0; min-height: 32px; min-width: 0; padding: 0 8px 0 0; color: var(--heading); background: var(--panel-soft); border-bottom: 1px solid var(--line); cursor: move; touch-action: none; user-select: none; }
-/* Der Fenstertitel traegt dieselbe Typografie wie die Finding-Ueberschrift
- (.reader-summary h3) - es ist derselbe Satz aus demselben Fund. */
-.results-window-head h2 { display: flex; align-items: stretch; gap: 10px; min-width: 0; margin: 0; color: var(--heading); font-size: var(--ui-heading-size); font-weight: var(--ui-strong-weight); line-height: 1.35; }
+/* Nur die beiden wiederholten Resulttitel verwenden die kompakte H4-Stufe;
+ Finding- und Tabellenhierarchie ausserhalb des Resultfensters bleibt gleich. */
+.results-window-head h2 { display: flex; align-items: stretch; gap: 10px; min-width: 0; margin: 0; color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--ui-strong-weight); line-height: 1.35; }
.results-window-result-summary { display: inline-flex; align-items: center; align-self: center; flex: 0 0 auto; gap: 5px; padding-left: 8px; color: var(--heading); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.results-window-toggle, .results-window-toggle-icon { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; color: var(--result-color); }
.results-window-toggle { padding: 0; border: 0; border-radius: 3px; background: transparent; }
@@ -445,17 +445,6 @@ html[data-theme="light"] .empty-brand-logo-light { opacity: 1; }
background: var(--tile-surface);
box-shadow: var(--tile-card-shadow);
}
-.donut-metric-card::before {
- position: absolute;
- top: var(--space-1);
- left: var(--space-3);
- width: 48%;
- height: var(--bw-emphasis);
- background: linear-gradient(90deg, currentColor 0 72%, transparent 100%);
- transform-origin: left center;
- animation: donut-accent-build var(--dur-data-build) var(--ease-data-build) both;
- content: "";
-}
.donut-metric-card__title {
min-width: 0;
margin: 0;
@@ -493,10 +482,6 @@ html[data-theme="light"] .empty-brand-logo-light { opacity: 1; }
from { stroke-dasharray: 0 100; }
to { stroke-dasharray: var(--donut-progress-dash); }
}
-@keyframes donut-accent-build {
- from { opacity: 0; transform: scaleX(0); }
- to { opacity: 1; transform: scaleX(1); }
-}
.donut-metric-card__values {
position: absolute;
inset: 0;
@@ -586,17 +571,15 @@ html[data-theme="light"] .empty-brand-logo-light { opacity: 1; }
left: calc(100% + var(--donut-compact-unit-gap));
font-size: var(--donut-compact-percent-size);
}
-.sidebar-severity-card:hover,
+.sidebar-severity-card:hover { border-color: transparent; }
.sidebar-severity-card[aria-pressed="true"] {
border-color: currentColor;
-}
-.sidebar-severity-card[aria-pressed="true"] {
outline: var(--bw-emphasis) solid currentColor;
outline-offset: calc(-1 * var(--bw-emphasis));
}
@media (prefers-reduced-motion: reduce) {
- .donut-metric-card__progress, .donut-metric-card::before { animation: none; }
+ .donut-metric-card__progress { animation: none; }
}
@media (max-width: 1100px) {
.donut-metric-rack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
diff --git a/src/styles/datahub-redesign.css b/src/styles/datahub-redesign.css
index 39b7847..9af9b53 100644
--- a/src/styles/datahub-redesign.css
+++ b/src/styles/datahub-redesign.css
@@ -39,7 +39,7 @@
.datahub-tenant-card { position: relative; min-height: var(--donut-card-min-h); padding: 0; transition: background .12s ease, border-color .12s ease; }
.datahub-tenant-card::before { content: none; }
.datahub-tenant-card:hover,
-.datahub-tenant-card:focus-within { border-color: var(--line-strong); background: var(--tile-surface-hover); box-shadow: var(--tile-card-shadow); }
+.datahub-tenant-card:focus-within { border-color: transparent; background: var(--tile-surface-hover); box-shadow: var(--tile-card-shadow); }
.datahub-tenant-card.is-selected { border-color: var(--tile-selected-border); outline: var(--bw-emphasis) solid var(--tile-selected-border); outline-offset: calc(-1 * var(--bw-emphasis)); }
.datahub-tenant-processing-dot { position: absolute; z-index: 3; top: var(--datahub-readiness-dot-inset); left: var(--datahub-readiness-dot-inset); width: var(--datahub-readiness-dot-size); height: var(--datahub-readiness-dot-size); border: var(--border-hair) solid var(--surface-app); border-radius: 50%; background: var(--state-online); pointer-events: none; }
.datahub-tenant-processing-dot[data-status="update"] { background: var(--warning); }
diff --git a/src/styles/datahub.css b/src/styles/datahub.css
index ec9ebd7..a2d1a0a 100644
--- a/src/styles/datahub.css
+++ b/src/styles/datahub.css
@@ -11,7 +11,7 @@
.datahub-section-heading > strong { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 1px 6px; border: 1px solid var(--border-default); border-radius: 0; color: var(--text-primary); background: var(--surface-input); font-size: var(--ui-value-size); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.datahub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(0, var(--tile-content-width))); justify-content: start; gap: var(--segment-gap); padding: var(--segment-inset); border: var(--border-hair) solid var(--segment-border); border-radius: var(--segment-radius); background: var(--segment-surface); }
.datahub-card { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: var(--legacy-space-3); min-width: 0; min-height: 96px; padding: var(--legacy-space-4); overflow: hidden; border: var(--border-hair) solid var(--tile-border); border-radius: var(--tile-radius); color: var(--text); background: var(--tile-surface); box-shadow: var(--tile-card-shadow); text-align: left; transition: border-color .12s ease, background .12s ease; }
-.datahub-card:hover { border-color: var(--line-strong); background: var(--tile-surface-hover); }
+.datahub-card:hover { border-color: transparent; background: var(--tile-surface-hover); }
.datahub-card-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--legacy-radius-sm); color: var(--text-on-accent); background: var(--legacy-accent); font-size: var(--ui-control-size); font-weight: var(--ui-strong-weight); letter-spacing: .05em; }
.datahub-card-body { display: grid; gap: var(--legacy-space-1); min-width: 0; }
.datahub-card-body strong { color: var(--heading); font-size: var(--ui-body-size); overflow: hidden; text-overflow: ellipsis; }
@@ -162,13 +162,14 @@
/* Dashboard: kompaktes Lagebild des geoeffneten Mandanten. Statuskarten und
Verteilungen bleiben direkte Einstiege in Work mit passendem Filter. */
-.dashboard-page { box-sizing: border-box; display: grid; align-content: start; gap: var(--space-4); width: 100%; min-height: 100%; padding: var(--panel-inset); color: var(--text); background: var(--surface-app); }
+.dashboard-page { box-sizing: border-box; display: grid; align-content: start; gap: var(--space-4); width: 100%; min-height: 100%; padding: var(--panel-inset); color: var(--text); background: var(--surface-app); container-type: inline-size; }
.dashboard-context { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0 var(--space-2); color: var(--muted); font-size: var(--ui-label-size); }
.dashboard-context strong { color: var(--heading); font-size: var(--ui-body-size); }
+.dashboard-context .work-timeslot-select { margin-left: auto; }
.dashboard-status-rack { display: grid; grid-template-columns: 290px repeat(3, 210px) 250px; justify-content: start; gap: var(--segment-gap); padding: var(--segment-inset); border: var(--border-hair) solid var(--segment-border); border-radius: var(--segment-radius); background: var(--segment-surface); }
.dashboard-status-metric { display: grid; grid-template-columns: 98px minmax(0, 1fr); align-items: center; gap: var(--space-3); min-width: 0; min-height: 190px; padding: var(--space-3); overflow: hidden; border: var(--border-hair) solid var(--tile-border); border-radius: var(--tile-radius); color: var(--text); background: var(--tile-surface); box-shadow: var(--tile-card-shadow); text-align: left; }
button.dashboard-status-metric { cursor: pointer; }
-button.dashboard-status-metric:hover { border-color: currentColor; background: var(--tile-surface-hover); }
+button.dashboard-status-metric:hover { border-color: transparent; background: var(--tile-surface-hover); }
button.dashboard-status-metric:focus-visible { outline: var(--border-hair) solid var(--focus-ring); outline-offset: -1px; }
button.dashboard-status-metric[aria-pressed="true"] { border-color: var(--tile-selected-border); outline: var(--bw-emphasis) solid var(--tile-selected-border); outline-offset: calc(-1 * var(--bw-emphasis)); }
.dashboard-status-metric-large { grid-template-columns: 154px minmax(0, 1fr); }
@@ -192,7 +193,7 @@ button.dashboard-status-metric[aria-pressed="true"] { border-color: var(--tile-s
.dashboard-status-copy { display: grid; gap: var(--space-3); min-width: 0; max-width: 100%; overflow: hidden; }
.dashboard-status-copy > span { min-width: 0; color: var(--heading); font-size: var(--ui-body-size); overflow-wrap: normal; word-break: normal; hyphens: manual; }
.dashboard-status-copy > strong { display: grid; gap: var(--space-1); min-width: 0; color: var(--heading); font-size: calc(var(--ui-heading-size) * 1.35); font-variant-numeric: tabular-nums; white-space: normal; }
-.dashboard-status-copy > strong small, .dashboard-status-copy > small { display: block; color: var(--muted); font-size: var(--ui-body-size); font-weight: var(--fw-regular); line-height: 1.35; overflow-wrap: normal; word-break: normal; hyphens: manual; }
+.dashboard-status-copy > small { display: block; color: var(--muted); font-size: var(--ui-body-size); font-weight: var(--fw-regular); line-height: 1.35; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.dashboard-status-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .8fr); align-items: stretch; min-width: 0; min-height: 190px; padding: var(--space-4); overflow: hidden; border: var(--border-hair) solid var(--tile-border); border-radius: var(--tile-radius); background: var(--tile-surface); box-shadow: var(--tile-card-shadow); }
.dashboard-status-summary-stack { display: grid; align-content: center; padding-right: var(--space-4); border-right: var(--border-hair) solid var(--line-strong); }
.dashboard-status-summary-stack button { display: grid; gap: var(--space-2); min-height: 64px; padding: var(--space-2); border: 0; border-radius: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
@@ -207,7 +208,7 @@ button.dashboard-status-metric[aria-pressed="true"] { border-color: var(--tile-s
.dashboard-ioe-summary strong { color: var(--accent); font: var(--fw-semibold) calc(var(--donut-value-size) * 1.45) / 1 var(--font-donut-display); font-variant-numeric: tabular-nums; }
.dashboard-distribution-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--segment-gap); padding: var(--segment-inset); border: var(--border-hair) solid var(--segment-border); border-radius: var(--segment-radius); background: var(--segment-surface); }
.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); align-items: stretch; gap: var(--segment-gap); padding: var(--segment-inset); border: var(--border-hair) solid var(--segment-border); border-radius: var(--segment-radius); background: var(--segment-surface); }
-.dashboard-environment { min-width: 0; margin: 0; padding: var(--space-4); overflow: hidden; border: var(--border-hair) solid var(--tile-border); border-left: 3px solid var(--legacy-accent); border-radius: var(--tile-radius); background: var(--tile-surface); box-shadow: var(--tile-card-shadow); }
+.dashboard-environment { min-width: 0; margin: 0; padding: var(--space-4); overflow: hidden; border: var(--border-hair) solid var(--tile-border); border-radius: var(--tile-radius); background: var(--tile-surface); box-shadow: var(--tile-card-shadow); }
.dashboard-environment .datahub-section-heading h2, .dashboard-block h2 { margin: 0; color: var(--heading); font-size: var(--ui-body-size); font-weight: var(--ui-label-weight); letter-spacing: var(--ui-label-tracking); text-transform: uppercase; }
.dashboard-coverage-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: var(--border-hair) solid var(--line); }
.dashboard-coverage-summary > span { display: grid; gap: var(--space-1); min-width: 0; padding: 0 var(--space-3); text-align: center; }
@@ -238,6 +239,7 @@ button.dashboard-status-metric[aria-pressed="true"] { border-color: var(--tile-s
.dashboard-viz-4 { --severity: var(--viz-4); }
.dashboard-viz-5 { --severity: var(--viz-5); }
.dashboard-viz-6 { --severity: var(--viz-6); }
+.severity-dashboard-cis-cat-without-severity { --severity: var(--donut-not-run); }
.dashboard-empty { margin: 0; color: var(--muted); font-size: var(--ui-control-size); }
.dashboard-risk-profile { display: grid; align-content: start; }
.dashboard-risk-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 32px; }
@@ -283,6 +285,161 @@ button.dashboard-status-metric[aria-pressed="true"] { border-color: var(--tile-s
.dashboard-risk-severity { padding: var(--space-4) 0 0; }
}
+/* Client Info folgt dem SOC-Board mit genau zwei quadratischen
+ Kachelgroessen. Das gemeinsame dichte Raster nutzt auch Luecken neben den
+ kleinen Kennzahlen, statt getrennte, ueber die Breite gestreckte Zeilen zu
+ erzeugen. */
+.client-info-tile-grid {
+ --client-info-columns: 12;
+ display: grid;
+ grid-template-columns: repeat(var(--client-info-columns), minmax(0, 1fr));
+ grid-auto-rows: calc((100cqw - 11 * var(--segment-gap)) / 12);
+ grid-auto-flow: row dense;
+ gap: var(--segment-gap);
+}
+.client-info-metric-grid {
+ display: contents;
+}
+.client-info-metric {
+ display: grid;
+ align-content: space-between;
+ gap: var(--space-2);
+ min-width: 0;
+ aspect-ratio: 1;
+ min-height: 0;
+ padding: var(--space-3);
+ border: 0;
+ border-radius: var(--radius-sm);
+ color: var(--text);
+ background: var(--tile-surface);
+ box-shadow: none;
+ text-align: left;
+}
+button.client-info-metric { cursor: pointer; }
+button.client-info-metric:hover { border-color: transparent; background: var(--tile-surface-hover); }
+button.client-info-metric:focus-visible { outline: var(--bw-emphasis) solid var(--focus-ring); outline-offset: calc(-1 * var(--bw-emphasis)); }
+button.client-info-metric[aria-pressed="true"] { border-color: var(--tile-selected-border); outline: var(--bw-emphasis) solid var(--tile-selected-border); outline-offset: calc(-1 * var(--bw-emphasis)); }
+.client-info-metric > span { color: var(--heading); font-size: var(--type-label-size); font-weight: var(--fw-semibold); line-height: 1.25; }
+.client-info-metric > strong { color: var(--chart-color, var(--heading)); font-size: calc(var(--type-h1-size) * .72); font-weight: var(--fw-regular); line-height: 1; font-variant-numeric: tabular-nums; }
+
+.client-info-card-grid {
+ display: contents;
+}
+.client-info-card {
+ grid-column: span 2;
+ grid-row: span 2;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-4);
+ min-width: 0;
+ aspect-ratio: 1;
+ min-height: 0;
+ padding: var(--space-3);
+ border: 0;
+ border-radius: var(--radius-sm);
+ color: var(--text);
+ background: var(--tile-surface);
+ box-shadow: none;
+}
+.client-info-card > header {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: var(--space-3);
+ min-height: 24px;
+ padding-bottom: 0;
+ border-bottom: 0;
+}
+.client-info-card > header h2 { margin: 0; color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--fw-semibold); line-height: 1.35; }
+.client-info-card > header span { color: var(--muted); font-size: var(--type-meta-size); font-variant-numeric: tabular-nums; text-align: right; }
+
+.client-info-donut-layout { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(130px, 1fr); align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; }
+.client-info-donut { position: relative; width: min(160px, 100%); aspect-ratio: 1; justify-self: center; }
+.client-info-donut svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
+.client-info-donut circle { fill: none; stroke-width: var(--donut-ring-stroke); }
+.client-info-donut-track { stroke: var(--donut-track); }
+.client-info-donut-segment { stroke: var(--chart-color, var(--info)); }
+.client-info-donut > span { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: var(--heading); text-align: center; }
+.client-info-donut > span strong { font-size: calc(var(--type-h2-size) * 1.08); font-weight: var(--fw-regular); line-height: 1; font-variant-numeric: tabular-nums; }
+.client-info-donut > span small { margin-top: var(--space-1); color: var(--muted); font-size: var(--type-meta-size); }
+.client-info-legend { display: grid; align-content: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
+.client-info-legend button, .client-info-legend-row { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); width: 100%; min-height: 36px; padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--btn-radius); color: var(--text); background: transparent; text-align: left; }
+.client-info-legend button { cursor: pointer; }
+.client-info-legend button:hover { background: var(--panel-hover); }
+.client-info-legend button:focus-visible { outline: var(--border-hair) solid var(--focus-ring); outline-offset: -1px; }
+.client-info-legend i { width: 11px; height: 11px; background: var(--chart-color, var(--muted)); }
+.client-info-legend span { min-width: 0; font-size: var(--type-table-body-size); line-height: 1.25; overflow-wrap: normal; word-break: normal; }
+.client-info-legend strong { color: var(--heading); font-size: var(--type-table-body-size); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
+
+.client-info-facts { display: grid; align-content: start; margin: 0; }
+.client-info-facts > div { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); align-items: baseline; gap: var(--space-3); min-height: 32px; padding: var(--space-1) 0; border-bottom: var(--border-hair) solid var(--line); }
+.client-info-facts > div:last-child { border-bottom: 0; }
+.client-info-facts dt { color: var(--muted); font-size: var(--type-table-body-size); }
+.client-info-facts dd { margin: 0; color: var(--heading); font-size: var(--type-table-body-size); line-height: 1.35; overflow-wrap: normal; word-break: normal; }
+
+.client-info-bars { display: grid; align-content: start; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
+.client-info-bars li { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(50px, .9fr) auto; align-items: center; gap: var(--space-2); min-height: 36px; }
+.client-info-bars li > span:first-child { color: var(--text); font-size: var(--type-table-body-size); line-height: 1.25; }
+.client-info-bar-track { height: 14px; background: var(--surface-active); }
+.client-info-bar-track i { --share: 0%; display: block; width: var(--share); min-width: 2px; height: 100%; background: var(--chart-color, var(--accent)); }
+.client-info-bars strong { color: var(--heading); font-size: var(--type-table-body-size); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-align: right; }
+.client-info-bars small { grid-column: 3; color: var(--warning); font-size: var(--type-meta-size); text-align: right; }
+.client-info-card-caption { margin: auto 0 0; padding-top: var(--space-3); border-top: var(--border-hair) solid var(--line); color: var(--muted); font-size: var(--type-meta-size); }
+.client-info-resilience { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: var(--space-3); }
+.client-info-resilience > header { grid-column: 1; }
+.client-info-resilience .client-info-bars { grid-column: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-self: start; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: var(--border-hair) solid var(--line); }
+.client-info-resilience .client-info-bars li { display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: var(--space-1); min-height: 58px; padding: var(--space-1); border-right: var(--border-hair) solid var(--line); }
+.client-info-resilience .client-info-bars li:last-child { border-right: 0; }
+.client-info-resilience .client-info-bars li > span:first-child { font-size: var(--type-meta-size); }
+.client-info-resilience .client-info-bar-track { display: none; }
+.client-info-resilience .client-info-bars strong { grid-column: 1; text-align: left; }
+.client-info-resilience .client-info-facts { grid-column: 1; align-self: start; }
+.client-info-resilience .client-info-facts > div { grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); gap: var(--space-2); min-height: 24px; padding: var(--space-1) 0; border-bottom: 0; }
+
+.tone-deviation, .tone-error, .tone-critical { --chart-color: var(--critical); }
+.tone-passed, .tone-low, .tone-coverage { --chart-color: var(--success); }
+.tone-high { --chart-color: var(--high); }
+.tone-medium { --chart-color: var(--medium); }
+.tone-info { --chart-color: var(--info); }
+.tone-not-run, .tone-neutral, .tone-dashboard-cis-cat-without-severity { --chart-color: var(--donut-not-run); }
+.tone-accent, .tone-pki { --chart-color: var(--accent); }
+.tone-gpo { --chart-color: var(--high); }
+.tone-risk { --chart-color: var(--warning); }
+
+@media (max-width: 1800px) {
+ .client-info-tile-grid {
+ --client-info-columns: 10;
+ grid-auto-rows: calc((100cqw - 9 * var(--segment-gap)) / 10);
+ }
+}
+@media (max-width: 1400px) {
+ .client-info-tile-grid {
+ --client-info-columns: 8;
+ grid-auto-rows: calc((100cqw - 7 * var(--segment-gap)) / 8);
+ }
+}
+@media (max-width: 1100px) {
+ .client-info-tile-grid {
+ --client-info-columns: 6;
+ grid-auto-rows: calc((100cqw - 5 * var(--segment-gap)) / 6);
+ }
+}
+@media (max-width: 800px) {
+ .client-info-tile-grid {
+ --client-info-columns: 4;
+ grid-auto-rows: calc((100cqw - 3 * var(--segment-gap)) / 4);
+ }
+}
+@media (max-width: 560px) {
+ .client-info-tile-grid {
+ --client-info-columns: 2;
+ grid-auto-rows: calc((100cqw - var(--segment-gap)) / 2);
+ }
+ .client-info-donut-layout { grid-template-columns: minmax(0, 1fr); }
+ .client-info-bars li { grid-template-columns: minmax(110px, 1fr) minmax(60px, 1fr) auto; }
+ .client-info-resilience .client-info-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
/* DB-Struktur panel */
.db-structure-page { width: 100%; max-width: none; }
/* Der Abstand nach oben gehoert der Zeile, nicht dem Text darin: die Metazeile
@@ -759,7 +916,10 @@ button.dashboard-status-metric[aria-pressed="true"] { border-color: var(--tile-s
line-height: 1;
}
.tenant-timeslot-list {
+ display: grid;
+ align-content: start;
flex: 1 1 auto;
+ gap: var(--space-3);
min-height: 0;
padding: var(--space-2) var(--space-2);
overflow-y: auto;
@@ -772,23 +932,18 @@ button.dashboard-status-metric[aria-pressed="true"] { border-color: var(--tile-s
}
.tenant-scan-history {
position: relative;
- border: 0;
- border-radius: 0;
+ overflow: hidden;
+ border: var(--bw-hairline) solid var(--border-default);
+ border-radius: var(--radius-nav-item);
background: var(--surface-panel-raised);
}
.tenant-scan-history::after {
- position: absolute;
- right: var(--space-4);
- bottom: 0;
- left: var(--space-4);
- height: var(--bw-hairline);
- background: var(--border-subtle);
- content: "";
- pointer-events: none;
+ content: none;
}
.tenant-timeslot.is-selected {
- border-color: var(--border-default);
- outline: 0;
+ border-color: var(--state-active);
+ outline: var(--bw-hairline) solid var(--state-active);
+ outline-offset: calc(-1 * var(--bw-hairline));
box-shadow: inset var(--marker-width) 0 0 var(--state-active);
}
.tenant-timeslot.is-selected::after {
@@ -809,7 +964,17 @@ button.dashboard-status-metric[aria-pressed="true"] { border-color: var(--tile-s
background: var(--surface-hover);
}
.tenant-timeslot-title {
+ align-self: stretch;
+ flex: 0 0 calc(var(--space-8) * 4.25);
+ padding-left: var(--space-1);
gap: var(--space-3);
+ cursor: pointer;
+}
+.tenant-timeslot > .tenant-section-bar > .tenant-history-meta {
+ align-self: stretch;
+ flex: 1 1 auto;
+ justify-content: flex-end;
+ cursor: pointer;
}
.tenant-timeslot-title input[type="checkbox"],
.tenant-report-row input[type="checkbox"] {
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 8d813d5..710f9cd 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -127,7 +127,7 @@ aside { position: relative; z-index: 10; min-width: 0; min-height: 0; background
.tile-view-scroll { padding: var(--panel-inset); }
.tile-grid { box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fill, minmax(0, var(--tile-content-width))); align-content: start; justify-content: start; gap: var(--segment-gap); min-height: 100%; padding: var(--segment-inset); border: var(--border-hair) solid var(--segment-border); border-radius: var(--segment-radius); background: var(--segment-surface); }
.table-scroll { max-width: 100%; overflow: auto; background: var(--surface-app); }
-.raw-view { min-height: 100%; padding: var(--panel-inset); color: var(--text); background: var(--surface-app); font: var(--fs-lg)/1.55 var(--font-mono); }
+.raw-view { min-height: 100%; padding: var(--panel-inset); color: var(--text); background: var(--surface-app); font: var(--type-table-body-size)/1.55 var(--font-mono); }
@media (max-width: 1500px) { .topbar-kpi { min-width: 74px; padding-inline: 10px; } .topbar-kpi.kpi-format { min-width: 190px; } .delimiter-select { width: 170px; } .tab-btn { min-width: 68px; } }
@media (max-width: 1200px) { .status-line-tools { position: static; width: min(520px, 100%); margin-left: auto; transform: none; } }
@media (max-width: 1050px) { .workbar { grid-template-columns: minmax(0, 1fr); } .workbar-action { grid-column: 1; justify-content: flex-end; } .records-layout { grid-template-columns: minmax(320px, 42%) minmax(0, 1fr); } }
@@ -147,6 +147,10 @@ aside { position: relative; z-index: 10; min-width: 0; min-height: 0; background
.area-topbar strong { margin-right: auto; color: var(--heading); font-size: var(--type-h1-size); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: -.04em; }
.area-topbar-heading { display: flex; align-items: center; gap: 18px; min-width: 0; margin-right: auto; overflow: hidden; }
.area-topbar-heading > strong { flex: 0 0 auto; margin-right: 0; }
+.area-client-context-inline { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
+.area-client-marker { flex: 0 0 auto; color: var(--state-active); }
+.area-client-marker .triangle-icon { width: 24px; height: 24px; }
+.area-client-name { min-width: 0; overflow: hidden; color: var(--heading); font-size: var(--type-h3-size); font-weight: var(--fw-semibold); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.pathfinder-filter-trail { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--heading); font-size: calc(var(--fs-xl) * 1.5); font-weight: var(--fw-semibold); line-height: 1.15; white-space: nowrap; }
.pathfinder-filter-trail-marker, .pathfinder-filter-trail-plus { flex: 0 0 auto; color: var(--state-active); }
.pathfinder-filter-trail-marker { display: inline-flex; }
diff --git a/src/styles/legacy-views.css b/src/styles/legacy-views.css
index 976dd27..0806c86 100644
--- a/src/styles/legacy-views.css
+++ b/src/styles/legacy-views.css
@@ -76,14 +76,14 @@ button, input, select, textarea { font-family: inherit; }
.record-card {
position: relative;
display: grid;
- grid-template-columns: 34px minmax(0, 1fr);
+ grid-template-columns: 28px minmax(0, 1fr);
grid-template-rows: auto auto;
- column-gap: var(--legacy-space-3);
+ column-gap: var(--space-2);
row-gap: var(--legacy-space-2);
width: 100%;
min-height: 74px;
margin: 0;
- padding: 13px 16px;
+ padding: 11px 14px;
border: 0;
/* Die Auswahlkante ist immer vorhanden, nur unsichtbar. Sonst versetzt die
aktive Zeile ihren Inhalt gegen alle anderen. */
@@ -155,9 +155,9 @@ button, input, select, textarea { font-family: inherit; }
align-self: end;
min-width: 0;
color: var(--heading);
- font-size: var(--ui-heading-size);
- font-weight: var(--ui-strong-weight);
- line-height: 1.35;
+ font-size: var(--type-h4-size);
+ font-weight: var(--fw-regular);
+ line-height: 1.28;
overflow-wrap: anywhere;
}
.record-meta {
@@ -294,13 +294,21 @@ button, input, select, textarea { font-family: inherit; }
text-align: left;
transition: background .12s ease, border-color .12s ease;
}
-.data-tile:hover, .data-tile:focus-visible {
- border-color: var(--line-strong);
+.data-tile:hover {
+ border-color: transparent;
border-radius: var(--tile-radius);
background: var(--tile-surface-hover);
box-shadow: var(--tile-card-shadow);
outline: 0;
}
+.data-tile:focus-visible {
+ border-color: transparent;
+ border-radius: var(--tile-radius);
+ background: var(--tile-surface-hover);
+ box-shadow: var(--tile-card-shadow);
+ outline: var(--bw-emphasis) solid var(--focus-ring);
+ outline-offset: calc(-1 * var(--bw-emphasis));
+}
.data-tile-hex {
position: relative;
width: 26px;
@@ -364,7 +372,7 @@ button, input, select, textarea { font-family: inherit; }
`.table-scroll`, statt sich in die Panelbreite zu quetschen. Zuvor erzwang
`table { width: 100% }` aus base.css bei rund dreissig Spalten Spalten von
wenigen Pixeln. */
-.view-table table { width: max-content; min-width: 100%; border-color: var(--line); background: var(--panel); color: var(--text); font-size: var(--fs-lg); }
+.view-table table { width: max-content; min-width: 100%; border-color: var(--line); background: var(--panel); color: var(--text); font-size: var(--type-table-body-size); }
.view-table th, .view-table td {
min-width: var(--table-col-min-w);
max-width: min(440px, 46vw);
@@ -379,13 +387,13 @@ button, input, select, textarea { font-family: inherit; }
.view-table th {
color: var(--muted);
background: var(--panel-soft);
- font-size: var(--fs-lg);
+ font-size: var(--type-table-head-size);
font-weight: var(--ui-label-weight);
line-height: 1.2;
letter-spacing: var(--ui-label-tracking);
text-transform: uppercase;
}
-.view-table td { color: var(--text); background: var(--panel); font-size: var(--fs-lg); font-weight: 400; line-height: 1.35; }
+.view-table td { color: var(--text); background: var(--panel); font-size: var(--type-table-body-size); font-weight: 400; line-height: 1.35; }
/* Zeilenwechsel als ruhige Lesehilfe, in beiden Skins aus denselben Tokens. */
.view-table tbody tr:nth-child(even) td { background: var(--panel-soft); }
.view-table tbody tr:hover td { color: var(--heading); background: var(--panel-hover); }
@@ -399,7 +407,7 @@ button, input, select, textarea { font-family: inherit; }
color: var(--text);
background: var(--panel);
font-family: var(--font-ui);
- font-size: var(--fs-lg);
+ font-size: var(--type-table-body-size);
font-weight: var(--fw-regular);
line-height: 1.5;
white-space: pre-wrap;
@@ -421,5 +429,3 @@ button, input, select, textarea { font-family: inherit; }
.data-tile, .record-card { transition: none; }
.record-card:hover { transform: none; }
}
-
-
diff --git a/src/styles/mitre-graph.css b/src/styles/mitre-graph.css
index c2a2949..41d88ad 100644
--- a/src/styles/mitre-graph.css
+++ b/src/styles/mitre-graph.css
@@ -36,7 +36,7 @@
.finding-tactic-column > header span { display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: var(--radius-pill); color: var(--muted); background: var(--surface-inset); font-size: var(--ui-value-size); font-weight: var(--fw-semibold); }
.finding-tactic-column > div { display: grid; gap: 7px; max-height: 560px; padding: 8px; overflow-y: auto; }
.finding-path-card { position: relative; display: grid; gap: 7px; width: 100%; min-width: 0; min-height: 126px; padding: 11px 11px 10px 14px; overflow: hidden; border: var(--border-hair) solid var(--tile-border); border-radius: var(--tile-radius); color: var(--text); background: var(--tile-surface); box-shadow: var(--tile-card-shadow); text-align: left; }
-.finding-path-card:hover { border-color: var(--line-strong); background: var(--tile-surface-hover); }
+.finding-path-card:hover { border-color: transparent; background: var(--tile-surface-hover); }
.finding-path-card.is-path-step { border-left: var(--marker-width) solid var(--severity); padding-left: 7px; }
.finding-path-card.is-selected { border-color: var(--tile-selected-border); outline: var(--bw-emphasis) solid var(--tile-selected-border); outline-offset: calc(-1 * var(--bw-emphasis)); }
.finding-path-card-head { display: flex; align-items: center; gap: 7px; color: var(--severity); font-size: var(--ui-label-size); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 8cfc3b1..dc41e58 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -53,7 +53,7 @@
--state-selected-flat-text: var(--text-selected-flat);
--state-selected-flat-muted: var(--text-muted-selected-flat);
--state-selected-flat-border: var(--border-selected-flat);
- --state-active: var(--band-surface);
+ --state-active: var(--marking-color);
--state-active-text: var(--band-text);
--result-color: var(--state-active);
@@ -148,7 +148,7 @@
--ui-small-size: var(--type-meta-size);
--ui-value-size: var(--type-label-size);
--ui-control-size: var(--type-button-size);
- --ui-body-size: var(--type-body-size);
+ --ui-body-size: var(--type-table-body-size);
--ui-heading-size: var(--type-h3-size);
--ui-reading-size: var(--type-body-size);
--ui-reading-heading-size: var(--type-h2-size);
diff --git a/src/styles/ui-tokens.css b/src/styles/ui-tokens.css
index fc552ba..d52dd80 100644
--- a/src/styles/ui-tokens.css
+++ b/src/styles/ui-tokens.css
@@ -40,31 +40,30 @@
--type-detail-title-size: 20px;
--type-h4-size: 16px;
--type-body-size: 16px;
- --type-label-size: 14px;
- --type-meta-size: 13px;
- --type-badge-size: 12px;
- --type-table-head-size: 13px;
- --type-button-size: 14px;
+ --type-table-body-size: 14px;
+ --type-label-size: 12px;
+ --type-meta-size: 12px;
+ --type-badge-size: 11px;
+ --type-table-head-size: 12px;
+ --type-button-size: 13px;
/* ---------- Verbindlicher Donut-Standard ---------- */
- /* Der Donut-Rack ist ein Panel wie jedes andere: Rack = Hintergrund,
- Karte = Element, Ringspur = eingesenkt. Geometrie und Datenfarben des
- Donut-Standards bleiben unveraendert, nur die Grundtoene folgen jetzt
- dem Panelstandard. */
+ /* Racks und andere Segmente sind reine, transparente Layoutgruppen.
+ Karte = Element, Ringspur = eingesenkt. */
/* ---------- Verbindliche Segment-/Kachelgrammatik ---------- */
- --segment-surface: #242426;
- --segment-border: #383840;
+ --segment-surface: transparent;
+ --segment-border: transparent;
--segment-radius: 10px;
--segment-inset: var(--space-3);
- --segment-gap: var(--space-2);
+ --segment-gap: var(--space-3);
--tile-surface: #323238;
--tile-surface-hover: #3A3A42;
- --tile-border: #555B65;
- --tile-selected-border: #A68AF9;
- --tile-radius: 8px;
+ --tile-border: transparent;
+ --tile-selected-border: var(--marking-color);
+ --tile-radius: var(--radius-sm);
--tile-compact-width: 186px;
--tile-content-width: 320px;
- --tile-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.24);
+ --tile-card-shadow: none;
--donut-rack-surface: var(--segment-surface);
--donut-card-surface: var(--tile-surface);
@@ -96,10 +95,10 @@
--datahub-readiness-dot-size: 14px;
--datahub-readiness-dot-inset: var(--space-1);
- --fs-micro: var(--type-meta-size);
+ --fs-micro: var(--type-badge-size);
--fs-sm: var(--type-meta-size);
- --fs-base: var(--type-label-size);
- --fs-md: var(--type-label-size);
+ --fs-base: var(--type-button-size);
+ --fs-md: var(--type-table-body-size);
--fs-lg: var(--type-body-size);
--fs-xl: var(--type-h3-size);
@@ -265,7 +264,7 @@
--surface-selected-flat: #43434C;
--text-selected-flat: #E2DFE6;
--text-muted-selected-flat: #B7BAC0;
- --border-selected-flat: #7C5CF5;
+ --border-selected-flat: var(--marking-color);
--surface-tab-active: #323238; /* Grundfarbe Element */
--text-tab-active: #E2DFE6;
--surface-results-action: #242426;
@@ -283,7 +282,7 @@
--graph-technique: #7E8D9C;
--graph-tactic: #668BB3;
--graph-alert: #E45E63;
- --graph-selected: #FFFFFF;
+ --graph-selected: var(--marking-color);
/* Rahmen: Weiche Konturen; dezenter heller Trennstrich fuer Listen */
--border-subtle: rgba(255, 255, 255, 0.14); /* Zellen-, Zeilentrenner */
@@ -300,6 +299,7 @@
--button-accent: #E9A63C;
--button-accent-hover: #F0B252;
--button-accent-text: #000000;
+ --marking-color: #E9A63C;
/* Sidebar-Navigation (Ableton-Preferences-Muster).
Nicht gewaehlte Eintraege liegen erhoben ueber der Shell, der gewaehlte
@@ -376,8 +376,8 @@
/* Interaktion */
--focus-ring: #4CC2FF; /* eigenstaendig, kollidiert mit nichts */
- --selection-border: var(--accent);
- --selection-marker: var(--accent);
+ --selection-border: var(--marking-color);
+ --selection-marker: var(--marking-color);
--search-highlight-bg: #FFE600;
--search-highlight-text: #000000;
/* Markierung einer vom Bericht selbst ausgewerteten Belegzeile (z. B.
@@ -415,13 +415,13 @@
color-scheme: light;
/* Donut-Standard: identische Geometrie, helle Referenzpalette. */
- --segment-surface: #E7E9ED;
- --segment-border: #B9BEC7;
+ --segment-surface: transparent;
+ --segment-border: transparent;
--tile-surface: #FFFFFF;
--tile-surface-hover: #F3F4F6;
- --tile-border: #B9BEC7;
- --tile-selected-border: #D99A14;
- --tile-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 2px 7px rgba(23, 25, 29, 0.12);
+ --tile-border: transparent;
+ --tile-selected-border: var(--marking-color);
+ --tile-card-shadow: none;
--donut-rack-surface: var(--segment-surface);
--donut-card-surface: var(--tile-surface);
--donut-card-surface-end: var(--tile-surface);
@@ -450,7 +450,7 @@
--surface-selected-flat: #E4E4EC;
--text-selected-flat: #17171C;
--text-muted-selected-flat: #55555F;
- --border-selected-flat: #7C3AED;
+ --border-selected-flat: var(--marking-color);
/* Aktive Ansicht (View-Tabs): neutrale erhobene Flaeche. Das Chrome bleibt
farblos, Farbe gehoert den Daten. */
--surface-tab-active: #FFFFFF;
@@ -472,7 +472,7 @@
--graph-technique: #71808E;
--graph-tactic: #426C97;
--graph-alert: #C83E45;
- --graph-selected: #111116;
+ --graph-selected: var(--marking-color);
--border-subtle: #E2E2E8;
--border-default: #CFCFD8;
@@ -487,6 +487,7 @@
--button-accent: #E9A63C;
--button-accent-hover: #F0B252;
--button-accent-text: #000000;
+ --marking-color: #E9A63C;
/* Sidebar-Navigation, siehe Dark-Skin. Gleiche Rollen, eigene Werte:
der gewaehlte Eintrag ist hier heller als die Shell, weil die
@@ -543,8 +544,8 @@
--state-offline: #C60F3E;
--focus-ring: #0A66C2;
- --selection-border: var(--accent);
- --selection-marker: var(--accent);
+ --selection-border: var(--marking-color);
+ --selection-marker: var(--marking-color);
--search-highlight-bg: #FFE600;
--search-highlight-text: #000000;
--evidence-highlight-bg: #CBF8FF;
diff --git a/tests/app/typography-system.test.ts b/tests/app/typography-system.test.ts
index bba79de..cf74fe9 100644
--- a/tests/app/typography-system.test.ts
+++ b/tests/app/typography-system.test.ts
@@ -17,11 +17,12 @@ describe('binding ASSESSOR typography system', () => {
expect(tokens).toContain('--type-h3-size: 18px;');
expect(tokens).toContain('--type-h4-size: 16px;');
expect(tokens).toContain('--type-body-size: 16px;');
- expect(tokens).toContain('--type-label-size: 14px;');
- expect(tokens).toContain('--type-meta-size: 13px;');
- expect(tokens).toContain('--type-badge-size: 12px;');
- expect(tokens).toContain('--type-table-head-size: 13px;');
- expect(tokens).toContain('--type-button-size: 14px;');
+ expect(tokens).toContain('--type-table-body-size: 14px;');
+ expect(tokens).toContain('--type-label-size: 12px;');
+ expect(tokens).toContain('--type-meta-size: 12px;');
+ expect(tokens).toContain('--type-badge-size: 11px;');
+ expect(tokens).toContain('--type-table-head-size: 12px;');
+ expect(tokens).toContain('--type-button-size: 13px;');
expect(tokens).toContain('--fw-regular: 400;');
expect(tokens).toContain('--fw-semibold: 600;');
expect(tokens).toContain('--fw-bold: 700;');
@@ -29,7 +30,7 @@ describe('binding ASSESSOR typography system', () => {
it('uses title case for semantic headings and labels while reserving uppercase for table heads', () => {
expect(base).toMatch(/h1\s*\{[^}]*font-size:\s*var\(--type-h1-size\);[^}]*font-weight:\s*var\(--fw-semibold\);/s);
- expect(base).toMatch(/td\s*\{[^}]*font-size:\s*var\(--type-body-size\);/s);
+ expect(base).toMatch(/td\s*\{[^}]*font-size:\s*var\(--type-table-body-size\);/s);
expect(base).toMatch(/th\s*\{[^}]*font-size:\s*var\(--type-table-head-size\);[^}]*text-transform:\s*uppercase;/s);
expect(datahub).toMatch(/\.tenant-timeslots-heading\s*\{[^}]*font-size:\s*var\(--type-h3-size\);[^}]*text-transform:\s*none;/s);
expect(datahub).toMatch(/\.tenant-information-title > strong\s*\{[^}]*font-size:\s*var\(--type-h3-size\);[^}]*text-transform:\s*none;/s);
diff --git a/tests/components/donut-metric-card.test.tsx b/tests/components/donut-metric-card.test.tsx
index 761f3d1..b1fcda9 100644
--- a/tests/components/donut-metric-card.test.tsx
+++ b/tests/components/donut-metric-card.test.tsx
@@ -25,7 +25,8 @@ describe('DonutMetricCard binding design contract', () => {
expect(styles).toMatch(/\.donut-metric-card__primary\s*\{[^}]*position:\s*relative;/s);
expect(styles).not.toContain('stroke-linecap: round;');
expect(styles).toContain('@keyframes donut-progress-build');
- expect(styles).toContain('@keyframes donut-accent-build');
+ expect(styles).not.toContain('.donut-metric-card::before');
+ expect(styles).not.toContain('@keyframes donut-accent-build');
expect(styles).toContain('animation: donut-progress-build var(--dur-data-build) var(--ease-data-build) both;');
expect(styles).toMatch(/\.donut-metric-rack\s*\{[^}]*grid-template-columns:\s*repeat\(6, minmax\(0, 1fr\)\);/s);
expect(tileContract).toMatch(/\.donut-metric-rack\s*\{[^}]*grid-template-columns:\s*repeat\(auto-fill, var\(--tile-compact-width\)\);[^}]*justify-content:\s*start;/s);
diff --git a/tests/features/dashboard-layout.test.ts b/tests/features/dashboard-layout.test.ts
index d947601..9f5bda0 100644
--- a/tests/features/dashboard-layout.test.ts
+++ b/tests/features/dashboard-layout.test.ts
@@ -1,57 +1,78 @@
import { readFileSync } from 'node:fs';
import { describe, expect, it } from 'vitest';
import type { FindingRecord } from '../../src/domain/finding';
-import { dashboardExplicitIoeCount, dashboardExplicitIoeRecordIds, dashboardPingCastleRiskCategories, dashboardRiskTools, dashboardScanSourceLabel } from '../../src/features/dashboard/DashboardPanel';
+import type { EnvironmentSnapshot } from '../../src/domain/environment-context';
+import { dashboardCisCatSeverityRemainder, dashboardEnvironmentSummary, dashboardExplicitIoeCount, dashboardExplicitIoeRecordIds, dashboardPingCastleRiskCategories, dashboardRiskTools, dashboardScanSourceLabel } from '../../src/features/dashboard/DashboardPanel';
const component = readFileSync(new URL('../../src/features/dashboard/DashboardPanel.tsx', import.meta.url), 'utf8');
const styles = readFileSync(new URL('../../src/styles/datahub.css', import.meta.url), 'utf8');
describe('dashboard reference layout', () => {
- it('uses the reference metric strip for compliance, primary statuses and the compact summary', () => {
- expect(component).toContain('className="dashboard-status-rack"');
- expect(component).toContain('label="Compliance Score"');
- expect(component).toContain('Not Applicable');
- expect(component).toContain('Error');
- expect(component).toContain('className="dashboard-ioe-summary" type="button"');
+ it('uses exactly six compact square metrics with the existing timeslot context', () => {
+ expect(component).toContain('className="client-info-tile-grid"');
+ expect(component).toContain('className="client-info-metric-grid"');
+ expect(component).toContain(' strong\s*\{[^}]*display:\s*grid;[^}]*white-space:\s*normal;/s);
- expect(styles).toMatch(/\.dashboard-status-copy > strong small, \.dashboard-status-copy > small\s*\{[^}]*display:\s*block;/s);
- expect(styles).toContain('grid-template-columns: repeat(2, minmax(0, 290px));');
- expect(component).toContain("{value.toLocaleString('en-US')}{roundedPercentage}%");
- expect(styles).toContain('.dashboard-status-ring-track { stroke: var(--donut-track); }');
- expect(styles).toContain('button.dashboard-status-metric:hover { border-color: currentColor; background: var(--tile-surface-hover); }');
+ expect(styles).toMatch(/\.client-info-tile-grid\s*\{[^}]*grid-template-columns:\s*repeat\(var\(--client-info-columns\), minmax\(0, 1fr\)\);[^}]*grid-auto-flow:\s*row dense;/s);
+ expect(styles).toMatch(/\.client-info-metric-grid\s*\{[^}]*display:\s*contents;/s);
+ expect(styles).toMatch(/\.client-info-metric\s*\{[^}]*aspect-ratio:\s*1;[^}]*min-height:\s*0;[^}]*border:\s*0;[^}]*border-radius:\s*var\(--radius-sm\);[^}]*background:\s*var\(--tile-surface\);[^}]*box-shadow:\s*none;/s);
});
- it('uses paired segmented distributions and a compact lower dashboard row', () => {
- expect(component).toContain('heading="Severity distribution"');
- expect(component).toContain('heading="Scan source distribution"');
- expect(component).toContain('className="dashboard-lower-grid"');
- expect(styles).toMatch(/\.dashboard-distribution-grid\s*\{[^}]*grid-template-columns:\s*repeat\(2,/s);
- expect(styles).toContain('.dashboard-segmented-bar');
+ it('uses exactly nine square information cards in the same dense grid', () => {
+ expect(component).toContain('className="client-info-card-grid"');
+ expect(component.match(/ expect(component).toContain(`title="${title}"`));
+ expect(styles).toMatch(/\.client-info-card-grid\s*\{[^}]*display:\s*contents;/s);
+ expect(styles).toMatch(/\.client-info-card\s*\{[^}]*grid-column:\s*span 2;[^}]*grid-row:\s*span 2;[^}]*aspect-ratio:\s*1;[^}]*min-height:\s*0;[^}]*border:\s*0;[^}]*border-radius:\s*var\(--radius-sm\);[^}]*background:\s*var\(--tile-surface\);[^}]*box-shadow:\s*none;/s);
+ expect(styles).toMatch(/\.client-info-card > header\s*\{[^}]*padding-bottom:\s*0;[^}]*border-bottom:\s*0;/s);
+ expect(component).not.toContain('className="dashboard-status-rack"');
+ expect(component).not.toContain('className="dashboard-lower-grid"');
});
- it('matches the reference structure for directory coverage and risk profile', () => {
- expect(component).toContain('className="dashboard-coverage-summary"');
- expect(component).toContain('typed observations');
- expect(component).toContain('className="dashboard-block dashboard-risk-profile"');
- expect(component).toContain('className="dashboard-marked-summary"');
- expect(component).toContain('className="dashboard-risk-tool"');
- expect(component).toContain('');
- expect(component).toContain('className="dashboard-risk-donut"');
- expect(component).toContain('100%');
- expect(styles).toContain('.dashboard-risk-donut-track { stroke: var(--donut-track); }');
- expect(styles).toMatch(/\.dashboard-donut-primary\s*\{[^}]*position:\s*relative;/s);
- expect(styles).toMatch(/\.dashboard-status-ring > span small\s*\{[^}]*left:\s*calc\(100% \+ var\(--space-1\)\);/s);
- expect(component).toContain('categories.slice(0, 4)');
- expect(component).toContain('matchesDynamicFacets(record, [sourceFacet]');
- expect(component).not.toContain('dashboard-review-block');
- expect(styles).toMatch(/\.dashboard-facts\s*\{[^}]*grid-template-columns:\s*repeat\(4,/s);
- expect(styles).toMatch(/\.dashboard-risk-body\s*\{[^}]*grid-template-columns:/s);
+ it('projects normalized scanner context into reusable fact, bar and donut displays', () => {
+ expect(component).toContain('dashboardEnvironmentSummary(environment.snapshot)');
+ expect(component).toContain('className="client-info-donut"');
+ expect(component).toContain('className="client-info-bars"');
+ expect(component).toContain('className="client-info-facts"');
+ expect(component).toContain("sectionObservationCount(snapshot, 'sectionAdminGroups')");
+ expect(component).toContain("observationNumber(snapshot, 'risk.anomalies', 'Anomalies score')");
+ expect(styles).toContain('.client-info-donut-track { stroke: var(--donut-track); }');
+ expect(styles).not.toMatch(/\.client-info-card\s*\{[^}]*border-left:/s);
+ expect(styles).not.toMatch(/\.client-info-card\s*\{[^}]*overflow:\s*hidden;/s);
+ });
+
+ it('derives card values only from normalized environment snapshot contracts', () => {
+ const observation = (property: string, label: string, value: string | number | boolean, sectionKey?: string) => ({
+ version: 1 as const, id: `${property}-${label}`, scanRunId: 'run-1', importFileId: 'file-1',
+ tool: { id: 'synthetic', name: 'Synthetic', version: '1' }, subject: { type: 'directory' },
+ property, label, originalValue: value, normalizedValue: value, valueType: typeof value === 'number' ? 'number' as const : typeof value === 'boolean' ? 'boolean' as const : 'string' as const,
+ state: 'observed' as const, sectionKey, source: { rowIndex: 0 }, mappingVersion: '1', attributes: {}
+ });
+ const snapshot = {
+ version: 1, projectId: 'project-1', scanRunIds: ['run-1'], generatedAt: '2026-08-25T00:00:00.000Z',
+ coverage: { observed: 4, explicitlyAbsent: 1, empty: 2, restricted: 3, incomplete: 0 },
+ sections: [{ version: 1, id: 'section-1', scanRunId: 'run-1', importFileId: 'file-1', tool: { id: 'synthetic', name: 'Synthetic', version: '1' }, sectionKey: 'sectionAdminGroups', label: 'Groups', ordinal: 1, state: 'license-restricted', tables: [], source: { rowIndex: 0 }, extractorVersion: '1', attributes: {} }],
+ observations: [
+ observation('domain.fqdn', 'Domain', 'example.local'),
+ observation('risk.anomalies', 'Anomalies score', 42),
+ observation('admin.name', 'Name', 'Admin A', 'sectionAdminGroups')
+ ]
+ } satisfies EnvironmentSnapshot;
+ const summary = dashboardEnvironmentSummary(snapshot);
+ expect(summary.directoryFacts[0]).toEqual({ label: 'Domain', value: 'example.local' });
+ expect(summary.coverage.map(item => item.value)).toEqual([4, 2, 1, 3, 0]);
+ expect(summary.identity[0]).toMatchObject({ label: 'Admin groups', value: 1, restricted: true });
+ expect(summary.risk[1]).toMatchObject({ label: 'Anomalies', value: 42 });
});
it('removes only a trailing scan timestamp from source labels', () => {
@@ -71,6 +92,22 @@ describe('dashboard reference layout', () => {
]);
});
+ it('adds only the severity-less CIS-CAT share as a neutral distribution segment', () => {
+ expect(dashboardCisCatSeverityRemainder([
+ { value: 'cis-cat-run', label: 'CIS-CAT Pro · 2026-08-17', count: 411 },
+ { value: 'maester-run', label: 'Maester · 2026-07-28', count: 318 }
+ ], [])).toEqual({
+ value: 'dashboard-cis-cat-without-severity',
+ label: 'CIS-CAT',
+ count: 411,
+ sourceValues: ['cis-cat-run']
+ });
+ expect(dashboardCisCatSeverityRemainder([
+ { value: 'cis-cat-run', label: 'CIS-CAT Pro · 2026-08-17', count: 411 }
+ ], [{ value: 'high', label: 'High', count: 12 }])?.count).toBe(399);
+ expect(styles).toContain('.severity-dashboard-cis-cat-without-severity { --severity: var(--donut-not-run); }');
+ });
+
it('keeps the complete PingCastle risk catalog including zero scores', () => {
expect(dashboardPingCastleRiskCategories([
{ property: 'risk.anomalies', normalizedValue: 20, originalValue: '20' },
diff --git a/tests/features/datahub-centered-layout.test.ts b/tests/features/datahub-centered-layout.test.ts
index 9d3bcff..313b01b 100644
--- a/tests/features/datahub-centered-layout.test.ts
+++ b/tests/features/datahub-centered-layout.test.ts
@@ -28,7 +28,7 @@ describe('Datahub centered reference rack layout', () => {
expect(datahubStyles).toContain('outline: var(--bw-emphasis) solid var(--tile-selected-border);');
expect(datahubStyles).toContain('.datahub-tenant-card::before { content: none; }');
expect(datahubStyles).toContain('transition: background .12s ease, border-color .12s ease;');
- expect(datahubStyles).toMatch(/\.datahub-tenant-card:hover,\s*\.datahub-tenant-card:focus-within\s*\{[^}]*border-color:\s*var\(--line-strong\);[^}]*background:\s*var\(--tile-surface-hover\);[^}]*box-shadow:\s*var\(--tile-card-shadow\);/s);
+ expect(datahubStyles).toMatch(/\.datahub-tenant-card:hover,\s*\.datahub-tenant-card:focus-within\s*\{[^}]*border-color:\s*transparent;[^}]*background:\s*var\(--tile-surface-hover\);[^}]*box-shadow:\s*var\(--tile-card-shadow\);/s);
expect(datahubStyles).not.toMatch(/\.datahub-tenant-card\s*\{[^}]*box-shadow/s);
expect(datahubStyles).toContain('box-shadow: var(--tile-card-shadow);');
expect(datahubStyles).not.toContain('translateY(-2px)');
@@ -50,7 +50,7 @@ describe('Datahub centered reference rack layout', () => {
expect(componentStyles).toContain('grid-template-columns: repeat(6, minmax(0, 1fr));');
expect(tileContractStyles).toMatch(/@media \(min-width: 1101px\)\s*\{\s*\.datahub-reference-controls\s*\{[^}]*grid-template-columns:\s*repeat\(6, minmax\(0, 1fr\)\);/s);
expect(componentStyles).toContain('padding: var(--segment-inset);');
- expect(componentStyles).toContain('.donut-metric-card::before');
+ expect(componentStyles).not.toContain('.donut-metric-card::before');
expect(componentStyles).toContain('border-radius: var(--tile-radius);');
expect(componentStyles).toContain('background: var(--tile-surface);');
expect(componentStyles).toContain('.donut-metric-card__progress');
@@ -71,7 +71,8 @@ describe('Datahub centered reference rack layout', () => {
expect(tokens).toContain('--datahub-readiness-dot-size: 14px;');
expect(tokens).toContain('--datahub-readiness-dot-inset: var(--space-1);');
expect(tokens).toContain('Donut-Standard: identische Geometrie, helle Referenzpalette.');
- expect(tokens).toContain('--segment-surface: #E7E9ED;');
+ expect(tokens.match(/--segment-surface: transparent;/g)).toHaveLength(2);
+ expect(tokens.match(/--segment-border: transparent;/g)).toHaveLength(2);
expect(tokens).toContain('--donut-rack-surface: var(--segment-surface);');
expect(tokens).toContain('--donut-deviation: #9A6500;');
expect(donut).toContain(' 0 ? 100 : 0} tone="all"');
@@ -108,6 +109,7 @@ describe('Datahub centered reference rack layout', () => {
expect(datahub).toContain('New ASSESSOR processing profile available');
expect(datahub).toContain('ASSESSOR has updated its internal scanner-processing profile.');
expect(datahub).toContain('replacesScanRunId={report.scanRunId}');
+ expect(datahub).toContain('targetAssessmentId={report.assessmentIds[0]}');
expect(datahub).toContain('Use imported {report.tool.name}');
expect(datahub).toContain("compareReimportSourceHashes(affected.files.map(file => file.sha256), report.files.map(file => file.sha256)) === 'match'");
expect(datahub).toContain('adoptScanRunReplacement');
diff --git a/tests/features/datahub-tenant-detail-reference.test.ts b/tests/features/datahub-tenant-detail-reference.test.ts
index dd80164..88a94e9 100644
--- a/tests/features/datahub-tenant-detail-reference.test.ts
+++ b/tests/features/datahub-tenant-detail-reference.test.ts
@@ -17,7 +17,8 @@ describe('Mandant detail reference', () => {
expect(styles).toMatch(/\.tenant-detail-page > \.tenant-detail-layout\s*\{[^}]*grid-template-columns:\s*clamp\(420px, 27vw, 520px\) minmax\(0, 1fr\);/s);
expect(styles).toMatch(/\.tenant-information-sheet\s*\{[^}]*width:\s*min\(794px, 100%\);[^}]*background:\s*transparent;/s);
expect(styles).toMatch(/\.tenant-timeslot-list\s*\{[^}]*overflow-y:\s*auto;/s);
- expect(styles).toMatch(/\.tenant-scan-history\s*\{[^}]*border:\s*0;[^}]*background:\s*var\(--surface-panel-raised\);/s);
+ expect(styles).toMatch(/\.tenant-timeslot-list\s*\{[^}]*display:\s*grid;[^}]*gap:\s*var\(--space-3\);[^}]*overflow-y:\s*auto;/s);
+ expect(styles).toMatch(/\.tenant-scan-history\s*\{[^}]*border:\s*var\(--bw-hairline\) solid var\(--border-default\);[^}]*background:\s*var\(--surface-panel-raised\);/s);
expect(styles).toMatch(/\.tenant-detail-information\s*\{[^}]*overflow-y:\s*auto;/s);
expect(styles).toMatch(/\.tenant-timeslot\.is-selected\s*\{[^}]*var\(--marker-width\)[^}]*var\(--state-active\)/s);
});
@@ -42,6 +43,7 @@ describe('Mandant detail reference', () => {
expect(dataHub).toContain('label="Import Scan"');
expect(dataHub).toContain('label="Import GPO Backup Folder (Zip)"');
expect(dataHub).toContain('targetAssessmentId={group.assessmentIds[0]}');
+ expect(dataHub).toContain('targetAssessmentId={report.assessmentIds[0]}');
expect(dataHub).toContain('assessmentId={group.assessmentIds[0]}');
expect(dataHub).toContain('showStatus={false}');
expect(gpoImport).toContain('