@flrande/bak-extension 0.6.15 → 0.6.17

package/src/content.ts

@@ -2,6 +2,9 @@ import type {
   AccessibilityNode,
   ConsoleEntry,
   ElementMapItem,
+  InspectPageDateControl,
+  InspectPageModeGroup,
+  InspectPageModeOption,
   Locator,
   NetworkEntry,
   PageDomSummary,
@@ -25,6 +28,7 @@ import {
   sampleValue,
   type InlineJsonInspectionSource
 } from './dynamic-data-tools.js';
+import { buildNetworkEntryDerivedFields, clampNetworkListLimit, networkEntryMatchesFilters } from './network-tools.js';
 import { inferSafeName, redactElementText, redactHtmlSnapshot, type RedactTextOptions } from './privacy.js';
 import { unsupportedLocatorHint } from './limitations.js';
 
@@ -1619,30 +1623,22 @@ function networkSnapshotEntries(): NetworkEntry[] {
 }
 
 function filterNetworkEntries(params: Record<string, unknown>): NetworkEntry[] {
-  const urlIncludes = typeof params.urlIncludes === 'string' ? params.urlIncludes : '';
-  const method = typeof params.method === 'string' ? params.method.toUpperCase() : '';
-  const status = typeof params.status === 'number' ? params.status : undefined;
-  const sinceTs = typeof params.sinceTs === 'number' ? params.sinceTs : undefined;
-  const limit = typeof params.limit === 'number' ? Math.max(1, Math.min(500, Math.floor(params.limit))) : 50;
-
-  return networkSnapshotEntries()
-    .filter((entry) => {
-      if (typeof sinceTs === 'number' && entry.ts < sinceTs) {
-        return false;
-      }
-      if (urlIncludes && !entry.url.includes(urlIncludes)) {
-        return false;
-      }
-      if (method && entry.method.toUpperCase() !== method) {
-        return false;
-      }
-      if (typeof status === 'number' && entry.status !== status) {
-        return false;
-      }
-      return true;
-    })
-    .slice(-limit)
-    .reverse();
+  const limit = clampNetworkListLimit(typeof params.limit === 'number' ? params.limit : undefined, 50);
+  const ordered = networkSnapshotEntries()
+    .map((entry) => ({ ...entry, ...buildNetworkEntryDerivedFields(entry) }))
+    .filter((entry) =>
+      networkEntryMatchesFilters(entry, {
+        urlIncludes: typeof params.urlIncludes === 'string' ? params.urlIncludes : undefined,
+        status: typeof params.status === 'number' ? params.status : undefined,
+        method: typeof params.method === 'string' ? params.method : undefined,
+        domain: typeof params.domain === 'string' ? params.domain : undefined,
+        resourceType: typeof params.resourceType === 'string' ? params.resourceType : undefined,
+        kind: typeof params.kind === 'string' ? (params.kind as NetworkEntry['kind']) : undefined,
+        sinceTs: typeof params.sinceTs === 'number' ? params.sinceTs : undefined
+      })
+    )
+    .slice(-limit);
+  return params.tail === true ? ordered : ordered.reverse();
 }
 
 function filterNetworkEntrySections(entry: NetworkEntry, include: unknown): NetworkEntry {
@@ -1662,12 +1658,26 @@ function filterNetworkEntrySections(entry: NetworkEntry, include: unknown): Netw
     delete clone.requestHeaders;
     delete clone.requestBodyPreview;
     delete clone.requestBodyTruncated;
+    if (clone.preview) {
+      clone.preview = { ...clone.preview };
+      delete clone.preview.request;
+      if (!clone.preview.query && !clone.preview.request && !clone.preview.response) {
+        delete clone.preview;
+      }
+    }
   }
   if (!sections.has('response')) {
     delete clone.responseHeaders;
     delete clone.responseBodyPreview;
     delete clone.responseBodyTruncated;
     delete clone.binary;
+    if (clone.preview) {
+      clone.preview = { ...clone.preview };
+      delete clone.preview.response;
+      if (!clone.preview.query && !clone.preview.request && !clone.preview.response) {
+        delete clone.preview;
+      }
+    }
   }
   return clone;
 }
@@ -1936,7 +1946,7 @@ function describeTables(): TableHandle[] {
   for (const [index, table] of htmlTables.entries()) {
     const handle: TableHandle = {
       id: buildTableId(table.closest('.dataTables_wrapper') ? 'dataTables' : 'html', index),
-      name: (table.getAttribute('aria-label') || table.getAttribute('data-testid') || table.id || `table-${index + 1}`).trim(),
+      label: (table.getAttribute('aria-label') || table.getAttribute('data-testid') || table.id || `table-${index + 1}`).trim(),
       kind: table.closest('.dataTables_wrapper') ? 'dataTables' : 'html',
       selector: table.id ? `#${table.id}` : undefined,
       rowCount: table.querySelectorAll('tbody tr').length || table.querySelectorAll('tr').length,
@@ -1949,7 +1959,7 @@ function describeTables(): TableHandle[] {
     const kind: TableHandle['kind'] = grid.className.includes('ag-') ? 'ag-grid' : 'aria-grid';
     const handle: TableHandle = {
       id: buildTableId(kind, index),
-      name: (grid.getAttribute('aria-label') || grid.getAttribute('data-testid') || grid.id || `grid-${index + 1}`).trim(),
+      label: (grid.getAttribute('aria-label') || grid.getAttribute('data-testid') || grid.id || `grid-${index + 1}`).trim(),
       kind,
       selector: grid.id ? `#${grid.id}` : undefined,
       rowCount: gridRowNodes(grid).length,
@@ -1962,7 +1972,13 @@ function describeTables(): TableHandle[] {
 
 function resolveTable(handleId: string): { table: TableHandle; element: Element | null } | null {
   const tables = describeTables();
-  const handle = tables.find((candidate) => candidate.id === handleId);
+  const normalizedHandleId = handleId.trim().toLowerCase();
+  const handle = tables.find((candidate) => {
+    if (candidate.id === handleId) {
+      return true;
+    }
+    return typeof candidate.label === 'string' && candidate.label.trim().toLowerCase() === normalizedHandleId;
+  });
   if (!handle) {
     return null;
   }
@@ -2635,6 +2651,225 @@ function collectInlineJsonSources(root: ParentNode): InlineJsonInspectionSource[
     .filter((item): item is InlineJsonInspectionSource => item !== null);
 }
 
+const MODE_OPTION_PATTERN = /\b(latest|historical|history|archive|archived|live|intraday|today|yesterday|session|completed)\b/i;
+
+function selectorHintForElement(element: Element): string {
+  if (element instanceof HTMLElement && element.id) {
+    return `#${element.id}`;
+  }
+  if (element instanceof HTMLElement && element.getAttribute('name')) {
+    return `${element.tagName.toLowerCase()}[name="${element.getAttribute('name')}"]`;
+  }
+  const role = element.getAttribute('role');
+  if (role) {
+    return `${element.tagName.toLowerCase()}[role="${role}"]`;
+  }
+  return element.tagName.toLowerCase();
+}
+
+function cleanControlText(value: string | null | undefined): string | undefined {
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  const normalized = value.replace(/\s+/g, ' ').trim();
+  return normalized.length > 0 ? normalized : undefined;
+}
+
+function extractElementLabel(element: Element): string | undefined {
+  if (element instanceof HTMLInputElement && element.labels && element.labels.length > 0) {
+    return cleanControlText(element.labels[0]?.textContent);
+  }
+  const ariaLabel = cleanControlText(element.getAttribute('aria-label'));
+  if (ariaLabel) {
+    return ariaLabel;
+  }
+  if (element instanceof HTMLElement && element.id) {
+    const label = document.querySelector(`label[for="${CSS.escape(element.id)}"]`);
+    if (label) {
+      return cleanControlText(label.textContent);
+    }
+  }
+  const fieldset = element.closest('fieldset');
+  if (fieldset) {
+    const legend = fieldset.querySelector('legend');
+    const legendText = cleanControlText(legend?.textContent);
+    if (legendText) {
+      return legendText;
+    }
+  }
+  return cleanControlText(element.parentElement?.getAttribute('aria-label') ?? element.parentElement?.getAttribute('data-label'));
+}
+
+function inferModeOption(element: Element): InspectPageModeOption | null {
+  const label =
+    cleanControlText(
+      element instanceof HTMLInputElement && element.type === 'radio'
+        ? element.labels?.[0]?.textContent ?? element.value
+        : element instanceof HTMLOptionElement
+          ? element.textContent ?? element.value
+          : element.textContent ?? element.getAttribute('value') ?? element.getAttribute('aria-label')
+    ) ?? cleanControlText(element.getAttribute('value'));
+  if (!label || !MODE_OPTION_PATTERN.test(label)) {
+    return null;
+  }
+  const value =
+    cleanControlText(
+      element instanceof HTMLInputElement || element instanceof HTMLOptionElement
+        ? element.value
+        : element.getAttribute('value') ?? label
+    ) ?? label;
+  const selected =
+    (element instanceof HTMLOptionElement && element.selected) ||
+    (element instanceof HTMLInputElement && element.checked) ||
+    element.getAttribute('aria-selected') === 'true' ||
+    element.getAttribute('aria-pressed') === 'true' ||
+    element.classList.contains('active') ||
+    element.classList.contains('selected') ||
+    element.classList.contains('current');
+  return {
+    label,
+    value,
+    selected
+  };
+}
+
+function buildModeGroup(
+  elements: Element[],
+  controlType: InspectPageModeGroup['controlType'],
+  container?: Element | null
+): InspectPageModeGroup | null {
+  const options = elements.map((element) => inferModeOption(element)).filter((item): item is InspectPageModeOption => item !== null);
+  const deduped = options.filter((option, index, array) => array.findIndex((candidate) => candidate.label === option.label) === index);
+  if (deduped.length < 2) {
+    return null;
+  }
+  return {
+    controlType,
+    label: container ? extractElementLabel(container) : undefined,
+    selectorHint: container ? selectorHintForElement(container) : selectorHintForElement(elements[0]!),
+    options: deduped
+  };
+}
+
+function collectModeGroups(root: ParentNode): InspectPageModeGroup[] {
+  const groups: InspectPageModeGroup[] = [];
+  const handled = new Set<Element>();
+
+  for (const select of Array.from(root.querySelectorAll('select'))) {
+    const options = Array.from(select.querySelectorAll('option'));
+    const group = buildModeGroup(options, 'select', select);
+    if (!group) {
+      continue;
+    }
+    options.forEach((option) => handled.add(option));
+    groups.push(group);
+  }
+
+  for (const container of Array.from(root.querySelectorAll('[role="tablist"], [role="radiogroup"], fieldset'))) {
+    const role = container.getAttribute('role');
+    const elements =
+      role === 'tablist'
+        ? Array.from(container.querySelectorAll('[role="tab"]'))
+        : role === 'radiogroup'
+          ? Array.from(container.querySelectorAll('[role="radio"], input[type="radio"]'))
+          : Array.from(container.querySelectorAll('input[type="radio"], button'));
+    const untouched = elements.filter((element) => !handled.has(element));
+    const group = buildModeGroup(untouched, role === 'tablist' ? 'tabs' : role === 'radiogroup' ? 'radio' : 'buttons', container);
+    if (!group) {
+      continue;
+    }
+    untouched.forEach((element) => handled.add(element));
+    groups.push(group);
+  }
+
+  const candidateParents = new Set<HTMLElement>();
+  for (const button of Array.from(root.querySelectorAll('button'))) {
+    if (button.parentElement) {
+      candidateParents.add(button.parentElement);
+    }
+  }
+  for (const parent of candidateParents) {
+    const directButtons = Array.from(parent.children).filter((child): child is HTMLButtonElement => child instanceof HTMLButtonElement);
+    if (directButtons.length < 2 || directButtons.length > 6 || directButtons.every((button) => handled.has(button))) {
+      continue;
+    }
+    const group = buildModeGroup(
+      directButtons.filter((button) => !handled.has(button)),
+      'buttons',
+      parent
+    );
+    if (!group) {
+      continue;
+    }
+    directButtons.forEach((button) => handled.add(button));
+    groups.push(group);
+  }
+
+  return groups.slice(0, 6);
+}
+
+function normalizeDateValue(value: string | null | undefined): string | undefined {
+  const normalized = cleanControlText(value);
+  if (!normalized) {
+    return undefined;
+  }
+  return Number.isFinite(Date.parse(normalized)) || /^\d{4}-\d{2}-\d{2}$/.test(normalized) ? normalized : undefined;
+}
+
+function collectDateControls(root: ParentNode): InspectPageDateControl[] {
+  const controls: InspectPageDateControl[] = [];
+
+  for (const input of Array.from(root.querySelectorAll<HTMLInputElement>('input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"]'))) {
+    controls.push({
+      controlType: 'input',
+      label: extractElementLabel(input),
+      selectorHint: selectorHintForElement(input),
+      value: normalizeDateValue(input.value),
+      min: normalizeDateValue(input.min),
+      max: normalizeDateValue(input.max),
+      dataMaxDate: normalizeDateValue(input.getAttribute('data-max-date'))
+    });
+  }
+
+  for (const select of Array.from(root.querySelectorAll('select'))) {
+    const optionValues = Array.from(select.querySelectorAll('option'))
+      .map((option) => normalizeDateValue(option.value) ?? normalizeDateValue(option.textContent))
+      .filter((value): value is string => typeof value === 'string');
+    const dataMaxDate = normalizeDateValue(select.getAttribute('data-max-date'));
+    if (optionValues.length === 0 && !dataMaxDate) {
+      continue;
+    }
+    controls.push({
+      controlType: 'select',
+      label: extractElementLabel(select),
+      selectorHint: selectorHintForElement(select),
+      value: normalizeDateValue((select as HTMLSelectElement).value),
+      dataMaxDate,
+      options: [...new Set(optionValues)].slice(0, 8)
+    });
+  }
+
+  for (const element of Array.from(root.querySelectorAll<HTMLElement>('[data-max-date], [data-date]'))) {
+    if (element instanceof HTMLInputElement || element instanceof HTMLSelectElement) {
+      continue;
+    }
+    const dataMaxDate = normalizeDateValue(element.getAttribute('data-max-date'));
+    const value = normalizeDateValue(element.getAttribute('data-date'));
+    if (!dataMaxDate && !value) {
+      continue;
+    }
+    controls.push({
+      controlType: 'dataset',
+      label: extractElementLabel(element),
+      selectorHint: selectorHintForElement(element),
+      value,
+      dataMaxDate
+    });
+  }
+
+  return controls.slice(0, 10);
+}
+
 async function collectInspectionState(params: Record<string, unknown> = {}): Promise<Record<string, unknown>> {
   const rootResult = resolveRootForLocator();
   if (!rootResult.ok) {
@@ -2656,6 +2891,8 @@ async function collectInspectionState(params: Record<string, unknown> = {}): Pro
   const previewGlobals = await globalsPreview();
   const suspiciousGlobals = [...new Set(scripts.flatMap((script) => script.suspectedVars))].slice(0, 50);
   const inlineJsonSources = collectInlineJsonSources(root);
+  const modeGroups = collectModeGroups(root);
+  const dateControls = collectDateControls(root);
   return {
     url: metadata.url,
     title: metadata.title,
@@ -2675,6 +2912,8 @@ async function collectInspectionState(params: Record<string, unknown> = {}): Pro
     cookies: cookieMetadata(),
     frames: collectFrames(),
     inlineJsonSources,
+    modeGroups,
+    dateControls,
     tables: describeTables(),
     timers: {
       timeouts: 0,

package/src/dynamic-data-tools.ts

@@ -2,8 +2,12 @@ import type {
   DynamicDataSchemaHint,
   FreshnessTimestampCategory,
   InspectPageDataCandidateProbe,
+  InspectPageCurrentMode,
+  InspectPageDateControl,
   InspectPageDataRecommendation,
   InspectPageDataResult,
+  InspectPageModeGroup,
+  InspectPagePrimaryEndpoint,
   InspectPageDataSource,
   InspectPageDataSourceMapping,
   NetworkEntry,
@@ -59,6 +63,7 @@ export interface SourceMappingInput {
   windowSources: InspectPageDataCandidateProbe[];
   inlineJsonSources: InlineJsonInspectionSource[];
   recentNetwork: NetworkEntry[];
+  pageUrl?: string;
   now?: number;
 }
 
@@ -67,6 +72,7 @@ export interface SourceMappingReport {
   sourceMappings: InspectPageDataSourceMapping[];
   recommendedNextActions: InspectPageDataRecommendation[];
   sourceAnalyses: DynamicSourceAnalysis[];
+  primaryEndpoint: InspectPagePrimaryEndpoint | null;
 }
 
 export interface ReplaySchemaMatch {
@@ -530,9 +536,9 @@ function scoreSourceMapping(table: TableAnalysis, source: DynamicSourceAnalysis,
   }
 
   const explicitReferenceHit =
-    table.table.name.toLowerCase().includes(source.source.label.toLowerCase()) ||
+    table.table.label.toLowerCase().includes(source.source.label.toLowerCase()) ||
     (table.table.selector ?? '').toLowerCase().includes(source.source.label.toLowerCase()) ||
-    source.source.label.toLowerCase().includes(table.table.name.toLowerCase());
+    source.source.label.toLowerCase().includes(table.table.label.toLowerCase());
   if (explicitReferenceHit) {
     basis.push({
       type: 'explicitReference',
@@ -609,8 +615,8 @@ function buildRecommendedNextActions(
     if (source.source.type === 'networkResponse') {
       const requestId = source.source.sourceId.replace(/^networkResponse:/, '');
       pushRecommendation({
-        title: `Replay ${requestId} with table schema`,
-        command: `bak network replay --request-id ${requestId} --mode json --with-schema auto`,
+        title: `Clone ${requestId} into a reusable fetch template`,
+        command: `bak network clone ${requestId}`,
         note: `Recent response mapped to ${mapping.tableId} with ${mapping.confidence} confidence.`
       });
       continue;
@@ -632,6 +638,122 @@ function buildRecommendedNextActions(
   return recommendations.slice(0, 6);
 }
 
+function confidenceRank(confidence: InspectPageDataSourceMapping['confidence']): number {
+  switch (confidence) {
+    case 'high':
+      return 0;
+    case 'medium':
+      return 1;
+    case 'low':
+      return 2;
+    default:
+      return 3;
+  }
+}
+
+function isSameOrigin(pageUrl: string | undefined, requestUrl: string): boolean {
+  if (!pageUrl) {
+    return false;
+  }
+  try {
+    const page = new URL(pageUrl);
+    const request = new URL(requestUrl, page);
+    return page.origin === request.origin;
+  } catch {
+    return false;
+  }
+}
+
+function selectPrimaryEndpoint(
+  recentNetwork: NetworkEntry[],
+  mappings: InspectPageDataSourceMapping[],
+  pageUrl?: string
+): InspectPagePrimaryEndpoint | null {
+  const mapped = mappings
+    .filter((mapping) => mapping.sourceId.startsWith('networkResponse:'))
+    .map((mapping) => ({
+      mapping,
+      entry: recentNetwork.find((entry) => entry.id === mapping.sourceId.replace(/^networkResponse:/, ''))
+    }))
+    .filter((candidate): candidate is { mapping: InspectPageDataSourceMapping; entry: NetworkEntry } => candidate.entry !== undefined)
+    .sort((left, right) => {
+      return (
+        confidenceRank(left.mapping.confidence) - confidenceRank(right.mapping.confidence) ||
+        right.entry.ts - left.entry.ts ||
+        left.entry.id.localeCompare(right.entry.id)
+      );
+    })[0];
+
+  if (mapped) {
+    return {
+      requestId: mapped.entry.id,
+      url: mapped.entry.url,
+      method: mapped.entry.method,
+      status: mapped.entry.status,
+      kind: mapped.entry.kind,
+      resourceType: mapped.entry.resourceType,
+      contentType: mapped.entry.contentType,
+      sameOrigin: isSameOrigin(pageUrl, mapped.entry.url),
+      matchedTableId: mapped.mapping.tableId,
+      matchedSourceId: mapped.mapping.sourceId,
+      reason: `Mapped to ${mapped.mapping.tableId} with ${mapped.mapping.confidence} confidence`
+    };
+  }
+
+  const fallback = recentNetwork
+    .filter((entry) => (entry.kind === 'fetch' || entry.kind === 'xhr') && entry.status >= 200 && entry.status < 400)
+    .sort((left, right) => right.ts - left.ts)[0];
+  if (!fallback) {
+    return null;
+  }
+  return {
+    requestId: fallback.id,
+    url: fallback.url,
+    method: fallback.method,
+    status: fallback.status,
+    kind: fallback.kind,
+    resourceType: fallback.resourceType,
+    contentType: fallback.contentType,
+    sameOrigin: isSameOrigin(pageUrl, fallback.url),
+    reason: `Latest successful ${fallback.kind.toUpperCase()} request observed on the page`
+  };
+}
+
+export function summarizeAvailableModes(modeGroups: InspectPageModeGroup[]): string[] {
+  return [...new Set(modeGroups.flatMap((group) => group.options.map((option) => option.label)))];
+}
+
+export function selectCurrentMode(modeGroups: InspectPageModeGroup[]): InspectPageCurrentMode | null {
+  for (const group of modeGroups) {
+    const selected = group.options.find((option) => option.selected);
+    if (selected) {
+      return {
+        controlType: group.controlType,
+        label: selected.label,
+        value: selected.value,
+        groupLabel: group.label
+      };
+    }
+  }
+  return null;
+}
+
+export function deriveLatestArchiveDate(dateControls: InspectPageDateControl[]): string | null {
+  const candidates = dateControls.flatMap((control) => [
+    control.value,
+    control.min,
+    control.max,
+    control.dataMaxDate,
+    ...(Array.isArray(control.options) ? control.options : [])
+  ]);
+  const dated = candidates
+    .filter((value): value is string => typeof value === 'string')
+    .map((value) => ({ value, parsed: Date.parse(value) }))
+    .filter((item) => Number.isFinite(item.parsed))
+    .sort((left, right) => right.parsed - left.parsed);
+  return dated[0]?.value ?? null;
+}
+
 export function buildSourceMappingReport(input: SourceMappingInput): SourceMappingReport {
   const now = typeof input.now === 'number' ? input.now : Date.now();
   const windowAnalyses = buildWindowSources(input.windowSources);
@@ -653,7 +775,8 @@ export function buildSourceMappingReport(input: SourceMappingInput): SourceMappi
     dataSources: sourceAnalyses.map((analysis) => analysis.source),
     sourceMappings,
     recommendedNextActions: buildRecommendedNextActions(input.tables, sourceMappings, sourceAnalyses),
-    sourceAnalyses
+    sourceAnalyses,
+    primaryEndpoint: selectPrimaryEndpoint(input.recentNetwork, sourceMappings, input.pageUrl)
   };
 }
 
@@ -752,6 +875,7 @@ export function selectReplaySchemaMatch(
 }
 
 export function buildInspectPageDataResult(input: {
+  pageUrl?: string;
   suspiciousGlobals: string[];
   tables: TableHandle[];
   visibleTimestamps: string[];
@@ -760,19 +884,29 @@ export function buildInspectPageDataResult(input: {
   recentNetwork: NetworkEntry[];
   tableAnalyses: TableAnalysis[];
   inlineJsonSources: InlineJsonInspectionSource[];
+  modeGroups: InspectPageModeGroup[];
+  dateControls: InspectPageDateControl[];
   now?: number;
-}): Pick<InspectPageDataResult, 'dataSources' | 'sourceMappings' | 'recommendedNextActions'> {
+}): Pick<
+  InspectPageDataResult,
+  'dataSources' | 'sourceMappings' | 'recommendedNextActions' | 'availableModes' | 'currentMode' | 'latestArchiveDate' | 'primaryEndpoint'
+> {
   const report = buildSourceMappingReport({
     tables: input.tableAnalyses,
     windowSources: input.pageDataCandidates,
     inlineJsonSources: input.inlineJsonSources,
     recentNetwork: input.recentNetwork,
+    pageUrl: input.pageUrl,
     now: input.now
   });
   return {
     dataSources: report.dataSources,
     sourceMappings: report.sourceMappings,
-    recommendedNextActions: report.recommendedNextActions
+    recommendedNextActions: report.recommendedNextActions,
+    availableModes: summarizeAvailableModes(input.modeGroups),
+    currentMode: selectCurrentMode(input.modeGroups),
+    latestArchiveDate: deriveLatestArchiveDate(input.dateControls),
+    primaryEndpoint: report.primaryEndpoint
   };
 }