daemon-sec-lotl

render-row.ts (8491B)

---

 // Pure renderers shared by the catalog island (client) and catalog.astro
 // (server-rendered first page): chips, badges, one technique row. No DOM, no
 // side effects — the same function builds the SSR'd rows and the fetched ones,
 // which is what lets the island adopt the server's markup without a re-render.
 
 import { toolRoute, type Technique } from './techniques';
 import { PLATFORM_META, CAPABILITY_META, SOURCE_META } from './taxonomy';
 import { escapeHtml as esc, highlightCommand } from './highlight';
 import { url } from './url';
 import { FACET_KEYS, facetValues, searchText, type CatalogFilters } from './techniques';
 
 /** Rows per page, server and client alike. */
 export const PAGE = 40;
 
 /**
  * The fields the list view needs — exactly what public/data/index-<hash>.json
  * carries (scripts/build-index.mjs keeps an identical list; a test pins them
  * together). Everything the text query scans is here, so search behaves the
  * same as over the full record; detection, references, paths and the rest
  * live on the tool page the row links to.
  */
 export const LIST_FIELDS = [
   'id', 'toolId', 'toolName', 'name', 'source', 'platform', 'capability', 'nativeCategory',
   'command', 'description', 'usecase', 'mitre', 'privilege', 'added',
   'context', 'requires', 'services', 'environment', 'aliases', 'availability', 'verification',
   'reviewedAt', 'compatibility', 'expected', 'troubleshooting', 'sideEffects', 'restore', 'template', 'references', 'detection',
 ] as const;
 export type ListTechnique = Pick<Technique, (typeof LIST_FIELDS)[number]>;
 
 export function toListTechnique(t: Technique): ListTechnique {
   const out: Partial<Record<(typeof LIST_FIELDS)[number], unknown>> = {};
   for (const k of LIST_FIELDS) if (t[k] !== undefined) out[k] = t[k];
   return out as ListTechnique;
 }
 
 // ---- chips -----------------------------------------------------------------
 export function chip(kind: string, value: string, label: string, accent: string, active: boolean, count: number): string {
   return `<button type="button" class="cat-chip" role="checkbox" aria-checked="${active}" data-facet="${kind}" data-value="${esc(value)}" style="--acc: var(--${accent});">
     <span class="cat-chip__lbl">${esc(label)}</span><span class="cat-chip__n">${count}</span></button>`;
 }
 
 export function facetGroup(title: string, kind: string, values: readonly string[], meta: (v: string) => string, active: string[], counts: Record<string, number>): string {
   const chips = values.filter((v) => counts[v]).map((v) => chip(kind, v, v, meta(v), active.includes(v), counts[v] || 0)).join('');
   return `<section class="cat-facet"><p class="cat-facet__head eyebrow"><span class="eyebrow__mark">^:</span><span>${esc(title)}</span></p><div class="cat-facet__chips">${chips}</div></section>`;
 }
 
 export type FacetCounts = Partial<Record<(typeof FACET_KEYS)[number], Record<string, number>>>;
 export function totalFacetCounts(rows: Technique[]): FacetCounts {
   return Object.fromEntries(FACET_KEYS.map(k => {
     const counts: Record<string, number> = {};
     for (const t of rows) for (const v of facetValues(t, k)) counts[v] = (counts[v] || 0) + 1;
     return [k, counts];
   }));
 }
 
 /** The whole facet rail: three groups, chip counts are dataset totals. */
 export function renderFacets(active: Pick<CatalogFilters, 'platform' | 'capability' | 'source'> & Partial<CatalogFilters>, counts: FacetCounts): string {
   const titles = { platform: 'Operating system / target', capability: 'Capability', source: 'Collection', context: 'Execution context', requires: 'Required access', services: 'Service', environment: 'Environment', availability: 'Availability', verification: 'Evidence' };
   return FACET_KEYS.map(k => facetGroup(titles[k], k, Object.keys(counts[k] || {}).sort(), () => k === 'source' ? 'rose' : 'foam', active[k] || [], counts[k] || {})).join('');
 }
 
 // ---- badges ----------------------------------------------------------------
 export const badge = (label: string, accent: string, extra = '') =>
   `<span class="tbadge ${extra}" style="--acc: var(--${accent});">${esc(label)}</span>`;
 
 // ---- row -------------------------------------------------------------------
 /** A DOM id for the detail panel so the expander can name what it controls. */
 export const panelId = (id: string) => `td-${id.replace(/[^A-Za-z0-9_-]+/g, '-')}`;
 
 export function renderRow(t: ListTechnique, variants: ListTechnique[] = []): string {
   const caps = t.capability.map((c) => badge(c, CAPABILITY_META[c]?.accent || 'foam')).join('');
   const plats = t.platform.map((p) => badge(p, PLATFORM_META[p]?.accent || 'foam', 'tbadge--soft')).join('');
   const src = SOURCE_META[t.source];
   const srcBadge = badge(src.label, src.accent, 'tbadge--src');
   const newBadge = t.added && t.source !== 'DAEMON' ? `<span class="tbadge tbadge--new" style="--acc: var(--love);">DÆMON</span>` : '';
   const label = t.name && t.name !== t.toolName ? `<span class="trow__sub">${esc(t.name)}</span>` : '';
   const route = url(toolRoute(t.toolId));
   const pid = panelId(t.id);
 
   const mitre = t.mitre?.length ? `<div class="tdetail__row"><span class="tdetail__k">MITRE</span><span class="tdetail__v">${t.mitre.map((m) => `<a href="https://attack.mitre.org/techniques/${esc(m.replace('.', '/'))}/" target="_blank" rel="noopener" class="tchip-link">${esc(m)}</a>`).join(' ')}</span></div>` : '';
   const priv = t.privilege ? `<div class="tdetail__row"><span class="tdetail__k">Context</span><span class="tdetail__v">${esc(t.privilege)}</span></div>` : '';
   const desc = t.description ? `<p class="tdetail__desc">${esc(t.description)}</p>` : '';
   const use = t.usecase ? `<p class="tdetail__use"><span class="tdetail__k">Use</span> ${esc(t.usecase)}</p>` : '';
   const more = `<a class="tdetail__more" href="${route}#${esc(t.id)}">Full details on the ${esc(t.toolName)} page — detection, references, paths →</a>`;
 
   return `<article class="trow" data-id="${esc(t.id)}">
     <div class="trow__head">
       <button class="trow__inspect" type="button" data-inspect aria-label="Details for ${esc(t.toolName)}" aria-controls="catalog-inspector">↗</button>
       <span class="trow__name"><a href="${route}" class="trow__tool">${esc(t.toolName)}</a>${label}</span>
       <span class="trow__badges">${srcBadge}${newBadge}${caps}${plats}</span>
     </div>
     ${variants.length > 1 ? `<label class="trow__variants">${variants.length} matching variants <select data-variant aria-label="Technique variant for ${esc(t.toolName)}">${variants.map(v => `<option value="${esc(v.id)}" ${v.id === t.id ? 'selected' : ''}>${esc(v.name || v.capability.join(', '))} · ${esc(v.context || v.privilege || 'see prerequisites')}</option>`).join('')}</select></label>` : ''}
     <div class="trow__cmdbar" data-cmdbar>
       <pre class="trow__cmd"><code>${highlightCommand(t.command)}</code></pre>
       <button class="trow__copy" type="button" data-copy aria-label="Copy command">copy</button>
     </div>
     <div class="trow__actions"><span>${esc(t.context || t.privilege || t.environment?.join(', ') || 'See prerequisites')}</span><button data-save type="button" aria-pressed="false">Save</button><button data-inspect type="button" aria-controls="catalog-inspector">${t.template ? 'Configure & details' : 'Details & sources'}</button></div>
     <div class="trow__detail" id="${pid}" hidden>
       ${desc}${use}
       <div class="tdetail__grid">${priv}${mitre}</div>
       ${more}
     </div>
   </article>`;
 }
 
 export const EMPTY_HTML = `<div class="cat-empty"><p class="eyebrow" style="--acc: var(--love);"><span class="eyebrow__mark">^:</span><span>No matches</span></p><p>Nothing matches this filter. Loosen a facet or clear the search.</p></div>`;
 
 /** The count line and the "Show more" label, so server and client agree. */
 export function countLabel(shown: number, total: number, activeFacets: number, addedOnly: boolean): string {
   return `<strong>${shown.toLocaleString()}</strong> of ${total.toLocaleString()} techniques${activeFacets ? ` · ${activeFacets} filter${activeFacets === 1 ? '' : 's'}` : ''}${addedOnly ? ' · DÆMON authored' : ''}`;
 }
 export function moreLabel(remaining: number): string {
   return `Show ${Math.min(remaining, PAGE)} more · ${remaining} remaining`;
 }
 
 /**
  * The same fields lib/techniques.ts#matchesQuery scans, lowercased once per
  * record at boot instead of once per record per keystroke.
  */
 export function haystack(t: ListTechnique): string {
   return searchText(t as Technique);
 }