@clear-capabilities/agentic-security-scanner 0.147.0 → 0.147.5

package/dist/frontend/src/components/evidence-inspector.js

@@ -0,0 +1,141 @@
+import { el, clear } from '../lib/dom.js';
+import { protectionVisual } from '../lib/protection-visual.js';
+
+export function computeInspectorViewModel(graph, selectedId) {
+  if (!selectedId) return null;
+
+  const flow = graph.flows.find((f) => f.id === selectedId);
+  const edge = !flow && graph.edges.find((e) => e.id === selectedId);
+  const node = !flow && !edge && graph.nodes.find((n) => n.id === selectedId);
+  const dataElement = !flow && !edge && !node && graph.dataElements.find((d) => d.id === selectedId);
+  const transformation = !flow && !edge && !node && !dataElement && graph.transformations.find((t) => t.id === selectedId);
+  const target = flow || edge || node || dataElement || transformation;
+  if (!target) return null;
+
+  const kind = flow ? 'flow' : edge ? 'edge' : node ? 'node' : dataElement ? 'dataElement' : 'transformation';
+  const evidenceRefs = target.evidenceRefs ?? [];
+  const evidenceItems = evidenceRefs
+    .map((id) => graph.evidence.find((ev) => ev.id === id))
+    .filter(Boolean);
+  const supporting = evidenceItems.filter((e) => !e.conflict);
+  const conflicting = evidenceItems.filter((e) => e.conflict);
+
+  return {
+    kind,
+    id: target.id,
+    claim: buildClaimText(graph, kind, target),
+    supporting,
+    conflicting,
+    limitations: target.limitations ?? [],
+    target,
+  };
+}
+
+function buildClaimText(graph, kind, target) {
+  if (kind === 'flow') {
+    const dataElement = graph.dataElements.find((d) => target.dataElementIds.includes(d.id));
+    const source = graph.nodes.find((n) => n.id === target.source);
+    const sink = graph.nodes.find((n) => n.id === target.sink);
+    return `${dataElement?.name ?? 'field'} flows from ${source?.label ?? 'unknown source'} to ${sink?.label ?? 'unknown destination'}: ${target.protectionSummary}`;
+  }
+  if (kind === 'edge') {
+    const from = graph.nodes.find((n) => n.id === target.from);
+    const to = graph.nodes.find((n) => n.id === target.to);
+    return `${from?.label ?? '?'} → ${to?.label ?? '?'}: handling ${target.protection.handling.verdict}, transit ${target.protection.transit.verdict}, at rest ${target.protection.atRest.verdict}`;
+  }
+  if (kind === 'dataElement') {
+    return `${target.name}: ${(target.dataClasses ?? []).join(', ') || 'no data classes recorded'}`;
+  }
+  if (kind === 'transformation') {
+    return `${target.kind} transformation (${target.reversibility})`;
+  }
+  return `${target.label} (${target.kind}/${target.subtype})`;
+}
+
+/** @param {ReturnType<typeof computeInspectorViewModel>} viewModel */
+export function renderInspector(viewModel, inspectorEl) {
+  clear(inspectorEl);
+  if (!viewModel) {
+    inspectorEl.appendChild(el('p', { class: 'inspector-empty' }, 'Select a node, edge, or flow to see its evidence.'));
+    return;
+  }
+
+  const container = el('div', { class: 'inspector' });
+  container.appendChild(el('h3', { class: 'inspector-title' }, 'Evidence inspector'));
+
+  container.appendChild(el('p', { class: 'inspector-claim' }, viewModel.claim));
+
+  container.appendChild(el('h4', { class: 'inspector-section-title' }, 'Supporting evidence'));
+  if (viewModel.supporting.length === 0) {
+    container.appendChild(el('p', { class: 'inspector-empty' }, 'No supporting evidence recorded.'));
+  } else {
+    container.appendChild(
+      el(
+        'ul',
+        { class: 'inspector-evidence-list' },
+        viewModel.supporting.map((ev) => renderEvidenceItem(ev)),
+      ),
+    );
+  }
+
+  container.appendChild(el('h4', { class: 'inspector-section-title' }, 'Conflicting evidence'));
+  if (viewModel.conflicting.length === 0) {
+    container.appendChild(el('p', { class: 'inspector-empty' }, 'None recorded.'));
+  } else {
+    container.appendChild(
+      el(
+        'ul',
+        { class: 'inspector-evidence-list' },
+        viewModel.conflicting.map((ev) => renderEvidenceItem(ev)),
+      ),
+    );
+  }
+
+  container.appendChild(el('h4', { class: 'inspector-section-title' }, 'What the scanner does not know'));
+  if (viewModel.limitations.length === 0) {
+    container.appendChild(el('p', { class: 'inspector-empty' }, 'No limitations recorded for this claim.'));
+  } else {
+    container.appendChild(
+      el(
+        'ul',
+        { class: 'inspector-limitations-list' },
+        viewModel.limitations.map((text) => el('li', {}, text)),
+      ),
+    );
+  }
+
+  if (viewModel.kind === 'edge' || viewModel.kind === 'flow') {
+    container.appendChild(renderVerdictBadges(viewModel));
+  }
+
+  inspectorEl.appendChild(container);
+}
+
+function renderEvidenceItem(evidence) {
+  return el('li', { class: 'inspector-evidence-item' }, [
+    el('span', { class: 'inspector-evidence-claim' }, evidence.claim),
+    el('span', { class: 'inspector-evidence-location' }, evidence.location?.note ?? 'location unknown'),
+  ]);
+}
+
+function renderVerdictBadges(viewModel) {
+  const target = viewModel.target;
+  const dims = viewModel.kind === 'edge'
+    ? [
+        ['Transit', target.protection.transit.verdict],
+        ['At rest', target.protection.atRest.verdict],
+        ['Handling', target.protection.handling.verdict],
+      ]
+    : [['Protection summary', target.protectionSummary]];
+  return el(
+    'div',
+    { class: 'inspector-verdicts' },
+    dims.map(([label, verdict]) => {
+      const visual = protectionVisual(verdict);
+      return el('div', { class: 'inspector-verdict-row' }, [
+        el('span', { class: 'inspector-verdict-dim-label' }, `${label}: `),
+        el('span', { class: 'inspector-verdict-badge', style: `border-color: var(${visual.colorVar})` }, `${visual.glyph} ${visual.label}`),
+      ]);
+    }),
+  );
+}

package/dist/frontend/src/components/filter-rail.js

@@ -0,0 +1,119 @@
+import { el, clear } from '../lib/dom.js';
+
+// A fixed enum, not derived from "whatever protectionSummary values happen
+// to be present in this fixture" — a filter chip for `unprotected` must
+// still exist even on a graph where nothing currently is, so a user can
+// confirm that's genuinely true rather than the chip silently not existing.
+const PROTECTION_TIERS = Object.freeze(['protected', 'unprotected', 'mixed', 'unknown']);
+
+export function computeFilterFacets(graph) {
+  const dataClasses = [...new Set((graph.dataElements ?? []).flatMap((d) => d.dataClasses ?? []))].sort();
+  const sourceCategories = [...new Set(graph.nodes.filter((n) => n.kind === 'source').map((n) => n.subtype).filter(Boolean))].sort();
+  const sinkCategories = [...new Set(graph.nodes.filter((n) => n.kind === 'sink').map((n) => n.subtype).filter(Boolean))].sort();
+  const destinationExternalities = [...new Set(graph.nodes.map((n) => n.externality?.value).filter(Boolean))].sort();
+  const transitVerdicts = [...new Set(graph.edges.map((e) => e.protection.transit.verdict))].sort();
+  const atRestVerdicts = [...new Set(graph.edges.map((e) => e.protection.atRest.verdict))].sort();
+  const handlingVerdicts = [...new Set(graph.edges.map((e) => e.protection.handling.verdict))].sort();
+  const policyVerdicts = [...new Set(graph.flows.map((f) => f.policyVerdict))].sort();
+  return {
+    dataClasses, protectionTiers: PROTECTION_TIERS,
+    sourceCategories, sinkCategories, destinationExternalities,
+    transitVerdicts, atRestVerdicts, handlingVerdicts, policyVerdicts,
+  };
+}
+
+/**
+ * @param {ReturnType<typeof computeFilterFacets>} facets
+ * @param {{dataClass?: string[], protection?: string[], ai?: boolean}} currentFilters
+ * @param {HTMLElement} railEl
+ * @param {(next: object) => void} onFiltersChange
+ */
+export function renderFilterRail(facets, currentFilters, railEl, onFiltersChange) {
+  clear(railEl);
+
+  const dataClassChips = el(
+    'div',
+    { class: 'filter-rail-group' },
+    [el('h4', {}, 'Data class'), ...facets.dataClasses.map((cls) => renderChip(cls, currentFilters.dataClass?.includes(cls) ?? false, () => toggleListFilter(currentFilters, 'dataClass', cls, onFiltersChange)))],
+  );
+
+  const protectionChips = el(
+    'div',
+    { class: 'filter-rail-group' },
+    [el('h4', {}, 'Protection'), ...facets.protectionTiers.map((tier) => renderChip(tier, currentFilters.protection?.includes(tier) ?? false, () => toggleListFilter(currentFilters, 'protection', tier, onFiltersChange)))],
+  );
+
+  const sourceCategoryChips = el(
+    'div',
+    { class: 'filter-rail-group' },
+    [el('h4', {}, 'Source category'), ...facets.sourceCategories.map((cat) => renderChip(cat, currentFilters.sourceCategory?.includes(cat) ?? false, () => toggleListFilter(currentFilters, 'sourceCategory', cat, onFiltersChange)))],
+  );
+
+  const sinkCategoryChips = el(
+    'div',
+    { class: 'filter-rail-group' },
+    [el('h4', {}, 'Sink category'), ...facets.sinkCategories.map((cat) => renderChip(cat, currentFilters.sinkCategory?.includes(cat) ?? false, () => toggleListFilter(currentFilters, 'sinkCategory', cat, onFiltersChange)))],
+  );
+
+  const destinationExternalityChips = el(
+    'div',
+    { class: 'filter-rail-group' },
+    [el('h4', {}, 'Destination externality'), ...facets.destinationExternalities.map((val) => renderChip(val, currentFilters.destinationExternality?.includes(val) ?? false, () => toggleListFilter(currentFilters, 'destinationExternality', val, onFiltersChange)))],
+  );
+
+  const transitVerdictChips = el(
+    'div',
+    { class: 'filter-rail-group' },
+    [el('h4', {}, 'Transit'), ...facets.transitVerdicts.map((v) => renderChip(v, currentFilters.transitVerdict?.includes(v) ?? false, () => toggleListFilter(currentFilters, 'transitVerdict', v, onFiltersChange)))],
+  );
+
+  const atRestVerdictChips = el(
+    'div',
+    { class: 'filter-rail-group' },
+    [el('h4', {}, 'At rest'), ...facets.atRestVerdicts.map((v) => renderChip(v, currentFilters.atRestVerdict?.includes(v) ?? false, () => toggleListFilter(currentFilters, 'atRestVerdict', v, onFiltersChange)))],
+  );
+
+  const handlingVerdictChips = el(
+    'div',
+    { class: 'filter-rail-group' },
+    [el('h4', {}, 'Handling'), ...facets.handlingVerdicts.map((v) => renderChip(v, currentFilters.handlingVerdict?.includes(v) ?? false, () => toggleListFilter(currentFilters, 'handlingVerdict', v, onFiltersChange)))],
+  );
+
+  const policyVerdictChips = el(
+    'div',
+    { class: 'filter-rail-group' },
+    [el('h4', {}, 'Policy verdict'), ...facets.policyVerdicts.map((v) => renderChip(v, currentFilters.policyVerdict?.includes(v) ?? false, () => toggleListFilter(currentFilters, 'policyVerdict', v, onFiltersChange)))],
+  );
+
+  const aiChip = el(
+    'div',
+    { class: 'filter-rail-group' },
+    [el('h4', {}, 'AI'), renderChip('AI processing', currentFilters.ai === true, () => onFiltersChange({ ...currentFilters, ai: !currentFilters.ai }))],
+  );
+
+  railEl.appendChild(el('div', { class: 'filter-rail' }, [
+    dataClassChips, protectionChips,
+    sourceCategoryChips, sinkCategoryChips, destinationExternalityChips,
+    transitVerdictChips, atRestVerdictChips, handlingVerdictChips,
+    policyVerdictChips, aiChip,
+  ]));
+}
+
+function toggleListFilter(currentFilters, key, value, onFiltersChange) {
+  const current = currentFilters[key] ?? [];
+  const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+  onFiltersChange({ ...currentFilters, [key]: next });
+}
+
+function renderChip(label, active, onClick) {
+  return el(
+    'button',
+    {
+      class: 'filter-chip',
+      'data-active': String(active),
+      'aria-pressed': String(active),
+      onClick,
+    },
+    label,
+  );
+}

package/dist/frontend/src/components/query-bar.js

@@ -0,0 +1,126 @@
+// Query bar: PRD §15.2's query-language DSL, wired into a real text input
+// plus two saved-view chips. Split the same way every other component/view
+// in this repo is: a pure compute function and a thin DOM-building render
+// function.
+//
+// `computeQueryBarViewModel` is deliberately SYNTAX-only (it calls
+// `parseQuery`, never `compileQuery`) — it operates on `state` alone, no
+// graph, matching the exact signature this task's own brief specifies. A
+// query can still fail at EVALUATION time even after parsing cleanly (an
+// unrecognized field name — see query-language.js's own `compileQuery`
+// comment), which needs a real graph to detect. `compileQuerySafely` below
+// is the graph-aware superset app.js actually uses to build a safe-to-call
+// predicate; `computeQueryBarViewModel` stays graph-free so it can be
+// unit-tested in total isolation, per the brief's own contract.
+
+import { parseQuery, compileQuery } from '../lib/query-language.js';
+import { el, clear } from '../lib/dom.js';
+
+// The two saved-view query strings this sub-project's own task brief names,
+// spot-checked against the real flagship fixture (frontend/src/data/
+// flagship-graph.js) before finalizing: `class:PCI` matches 5 of 8 real
+// flows, `class:(PII,PHI) AND ai:true` matches 1 of 8 — both non-empty and
+// sensible (a broad PCI-exposure view vs. a narrow AI+regulated-data
+// intersection), so neither needed adjustment from the brief's own text.
+export const SAVED_VIEWS = Object.freeze([
+  Object.freeze({ label: 'PCI Exposure', query: 'class:PCI' }),
+  Object.freeze({ label: 'AI + Regulated Data', query: 'class:(PII,PHI) AND ai:true' }),
+]);
+
+/**
+ * @param {{filters?: {query?: string}}} state
+ * @returns {{queryText: string, error: {message: string, pos: number} | null}}
+ */
+export function computeQueryBarViewModel(state) {
+  const queryText = state.filters?.query ?? '';
+  const { error } = parseQuery(queryText);
+  return { queryText, error: error ?? null };
+}
+
+/**
+ * Compiles a query string end-to-end against a real graph: parse, compile,
+ * and a trial evaluation against every real flow in `graph` — so a caller
+ * gets EITHER a real, safe-to-call predicate OR a structured error, never a
+ * predicate that might throw partway through filtering some rows and not
+ * others. A malformed query (a syntax error, OR an unrecognized field name,
+ * which only throws at EVALUATION time — see query-language.js's own
+ * compileQuery comment) never narrows the active filter: on error this
+ * returns a pass-through predicate (`() => true`, matching every flow), so
+ * views render exactly as if no query were active rather than silently
+ * hiding all/some rows.
+ *
+ * @param {object} graph
+ * @param {string} queryText
+ * @returns {{predicate: (flow: object) => boolean, error: {message: string, pos: number|null} | null}}
+ */
+export function compileQuerySafely(graph, queryText) {
+  const { ast, error } = parseQuery(queryText ?? '');
+  if (error) return { predicate: () => true, error };
+  try {
+    const predicate = compileQuery(ast, graph);
+    for (const flow of graph.flows) predicate(flow);
+    return { predicate, error: null };
+  } catch (err) {
+    return { predicate: () => true, error: { message: err && err.message ? err.message : String(err), pos: null } };
+  }
+}
+
+function renderError(errorEl, error) {
+  errorEl.textContent = error ? `Query error: ${error.message}${typeof error.pos === 'number' ? ` (position ${error.pos})` : ''}` : '';
+  errorEl.setAttribute('data-visible', String(Boolean(error)));
+}
+
+/**
+ * @param {ReturnType<typeof computeQueryBarViewModel>} viewModel
+ * @param {HTMLElement} railEl
+ * @param {(nextQuery: string) => void} onQueryChange - called ONLY with a
+ *   query that parses cleanly. On a parse error the input's own displayed
+ *   value still updates (so the user can see/fix what they typed) but this
+ *   is never invoked with the broken text — the caller's active filter
+ *   never changes on a malformed query.
+ */
+export function renderQueryBar(viewModel, railEl, onQueryChange) {
+  clear(railEl);
+
+  const errorEl = el('div', { class: 'query-bar__error' }, '');
+
+  const input = el('input', {
+    type: 'text',
+    class: 'query-bar__input',
+    value: viewModel.queryText,
+    placeholder: 'e.g. class:PCI AND ai:true',
+    'aria-label': 'Query',
+    onInput: () => {
+      const text = input.value;
+      const { error } = parseQuery(text);
+      renderError(errorEl, error ?? null);
+      if (!error) onQueryChange(text);
+    },
+  });
+  renderError(errorEl, viewModel.error);
+  input.setAttribute('aria-invalid', String(Boolean(viewModel.error)));
+
+  const chips = el(
+    'div',
+    { class: 'query-bar__saved-views' },
+    SAVED_VIEWS.map((view) =>
+      el(
+        'button',
+        {
+          class: 'query-bar__saved-view-chip',
+          type: 'button',
+          'data-query': view.query,
+          onClick: () => {
+            input.value = view.query;
+            input.setAttribute('value', view.query);
+            renderError(errorEl, null);
+            onQueryChange(view.query);
+          },
+        },
+        view.label,
+      ),
+    ),
+  );
+
+  railEl.appendChild(el('div', { class: 'query-bar' }, [input, errorEl, chips]));
+}