@tradejs/app 2.0.18 → 2.0.20

package/src/app/components/Strategies/RuntimeStrategyChart.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Box, Flex, Text } from '@chakra-ui/react';
 import { Chart, useChart } from '@chakra-ui/charts';
 import {
@@ -13,20 +13,24 @@ import {
   YAxis,
 } from 'recharts';
 import { getFormatted } from '@tradejs/core/backtest';
-import type { SimpleOrderLogData, TestStat } from '@tradejs/types';
 import type {
-  RuntimeStrategyAiGateChange,
-  RuntimeStrategyMaxLossValueTimeline,
-} from '#app/lib/runtimeStrategies';
+  SimpleOrderLogData,
+  StrategyEvidenceMarkerType,
+  StrategyEvidenceTimeline,
+  TestStat,
+} from '@tradejs/types';
 import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
 import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
+import {
+  filterStrategyEvidenceMarkers,
+  STRATEGY_EVIDENCE_MARKER_PRESENTATION,
+  StrategyEvidencePopover,
+} from './StrategyEvidencePopover';
 
 interface RuntimeStrategyChartProps {
   orderLog: SimpleOrderLogData;
   stat: TestStat;
-  aiGateObservedFrom: number | null;
-  aiGateChanges: RuntimeStrategyAiGateChange[];
-  maxLossValueTimeline: RuntimeStrategyMaxLossValueTimeline;
+  evidenceTimeline: StrategyEvidenceTimeline;
   startTimestamp: number;
   endTimestamp: number;
   height?: string | number;
@@ -35,13 +39,13 @@ interface RuntimeStrategyChartProps {
 export const RuntimeStrategyChart = ({
   orderLog,
   stat,
-  aiGateObservedFrom,
-  aiGateChanges,
-  maxLossValueTimeline,
+  evidenceTimeline,
   startTimestamp,
   endTimestamp,
   height = '350px',
 }: RuntimeStrategyChartProps) => {
+  const [showParity, setShowParity] = useState(true);
+  const [showRecommendations, setShowRecommendations] = useState(true);
   const chartData = useMemo(
     () => ({
       data: orderLog.map(([timestamp, amount]) => ({
@@ -61,193 +65,120 @@ export const RuntimeStrategyChart = ({
   const chart = useChart(chartData as any);
   const { formatted: maxAmount } = getFormatted(stat, 'maxAmount');
   const { formatted: minAmount } = getFormatted(stat, 'minAmount');
-  const gateChangeColor = chart.color('purple.400');
-  const maxLossValueChangeColor = chart.color('orange.400');
-
-  if (!orderLog.length) {
-    return (
-      <Box
-        w="100%"
-        minW="600px"
-        h={height}
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Text color="gray.500">No runtime trades for the selected window.</Text>
-      </Box>
-    );
-  }
+  const visibleEvidenceMarkers = filterStrategyEvidenceMarkers({
+    markers:
+      evidenceTimeline.status === 'verified' ? evidenceTimeline.markers : [],
+    showParity,
+    showRecommendations,
+  });
+  const markerColor = (type: StrategyEvidenceMarkerType) =>
+    chart.color(STRATEGY_EVIDENCE_MARKER_PRESENTATION[type].color);
+  const markerDash = (type: StrategyEvidenceMarkerType) => {
+    if (type === 'L') return '7 4';
+    if (type === 'P' || type === 'R') return '2 5';
+    return '3 5';
+  };
 
   return (
     <Box w="100%" minW="600px" h={height} display="flex" flexDirection="column">
-      {aiGateObservedFrom != null ? (
-        <Flex
-          minH="24px"
-          px={2}
-          gap={4}
-          alignItems="center"
-          overflowX="auto"
-          flexShrink={0}
-          whiteSpace="nowrap"
-        >
-          <Text
-            flexShrink={0}
-            fontSize="xs"
-            color="gray.500"
-            title="AI-gate changes before this first runtime observation are unavailable"
-          >
-            AI-gate history from{' '}
-            {formatTimeSeriesTooltipTimestamp(aiGateObservedFrom)}
-          </Text>
-          {aiGateChanges.map((change, index) => (
-            <Text
-              key={`${change.timestamp}:${change.fingerprint}:legend`}
-              flexShrink={0}
-              fontSize="xs"
-              color="gray.400"
-              title={`${change.previousFingerprint} → ${change.fingerprint}`}
-            >
-              <Text as="span" color={gateChangeColor} fontWeight="semibold">
-                G{index + 1}
-              </Text>{' '}
-              {formatTimeSeriesTooltipTimestamp(change.timestamp)} ·{' '}
-              {change.fingerprint.slice(0, 7)}
-            </Text>
-          ))}
-          {maxLossValueTimeline.observedFrom != null &&
-          maxLossValueTimeline.initialValue != null ? (
-            <Text
-              flexShrink={0}
-              fontSize="xs"
-              color="gray.500"
-              title="MAX_LOSS_VALUE changes before this first runtime observation are unavailable"
-            >
-              MAX_LOSS_VALUE history from{' '}
-              {formatTimeSeriesTooltipTimestamp(
-                maxLossValueTimeline.observedFrom,
-              )}{' '}
-              · initial {maxLossValueTimeline.initialValue}$
-            </Text>
-          ) : null}
-          {maxLossValueTimeline.changes.map((change, index) => (
-            <Text
-              key={`${change.timestamp}:${change.value}:max-loss-legend`}
-              flexShrink={0}
-              fontSize="xs"
-              color="gray.400"
-            >
-              <Text
-                as="span"
-                color={maxLossValueChangeColor}
-                fontWeight="semibold"
-              >
-                L{index + 1}
-              </Text>{' '}
-              {formatTimeSeriesTooltipTimestamp(change.timestamp)} ·{' '}
-              {change.previousValue}$ → {change.value}$
-            </Text>
-          ))}
-        </Flex>
-      ) : null}
+      <Flex minH="32px" px={2} justify="flex-end" align="center" flexShrink={0}>
+        <StrategyEvidencePopover
+          timeline={evidenceTimeline}
+          showParity={showParity}
+          showRecommendations={showRecommendations}
+          onShowParityChange={setShowParity}
+          onShowRecommendationsChange={setShowRecommendations}
+        />
+      </Flex>
       <Box flex="1" minH={0} pr={2}>
-        <ResponsiveContainer width="100%" height="100%">
-          <Chart.Root maxH="md" chart={chart}>
-            <LineChart data={chart.data}>
-              <CartesianGrid stroke={chart.color('border')} vertical={false} />
-              <ReferenceLine
-                stroke={chart.color('gray.600')}
-                strokeDasharray="5 5"
-                y={stat.maxAmount}
-                label={{
-                  value: `Max: ${maxAmount}`,
-                  offset: 10,
-                  fill: chart.color('gray.600'),
-                  position: 'top',
-                }}
-              />
-              <ReferenceLine
-                stroke={chart.color('gray.600')}
-                strokeDasharray="8 8"
-                y={100}
-              />
-              <ReferenceLine
-                stroke={chart.color('gray.600')}
-                strokeDasharray="5 5"
-                y={stat.minAmount}
-                label={{
-                  value: `Min: ${minAmount}`,
-                  offset: 10,
-                  fill: chart.color('gray.600'),
-                  position: 'bottom',
-                }}
-              />
-              {aiGateChanges.map((change, index) => (
+        {orderLog.length ? (
+          <ResponsiveContainer width="100%" height="100%">
+            <Chart.Root maxH="md" chart={chart}>
+              <LineChart data={chart.data}>
+                <CartesianGrid
+                  stroke={chart.color('border')}
+                  vertical={false}
+                />
                 <ReferenceLine
-                  key={`${change.timestamp}:${change.fingerprint}`}
-                  x={change.timestamp}
-                  stroke={gateChangeColor}
-                  strokeDasharray="3 5"
-                  strokeWidth={1.5}
+                  stroke={chart.color('gray.600')}
+                  strokeDasharray="5 5"
+                  y={stat.maxAmount}
                   label={{
-                    value: `G${index + 1}`,
-                    fill: gateChangeColor,
-                    fontSize: 10,
-                    fontWeight: 600,
-                    offset: 6,
-                    position:
-                      index % 2 === 0 ? 'insideTopRight' : 'insideTopLeft',
+                    value: `Max: ${maxAmount}`,
+                    offset: 10,
+                    fill: chart.color('gray.600'),
+                    position: 'top',
                   }}
                 />
-              ))}
-              {maxLossValueTimeline.changes.map((change, index) => (
                 <ReferenceLine
-                  key={`${change.timestamp}:${change.value}:max-loss`}
-                  x={change.timestamp}
-                  stroke={maxLossValueChangeColor}
-                  strokeDasharray="7 4"
-                  strokeWidth={1.5}
+                  stroke={chart.color('gray.600')}
+                  strokeDasharray="8 8"
+                  y={100}
+                />
+                <ReferenceLine
+                  stroke={chart.color('gray.600')}
+                  strokeDasharray="5 5"
+                  y={stat.minAmount}
                   label={{
-                    value: `L${index + 1}`,
-                    fill: maxLossValueChangeColor,
-                    fontSize: 10,
-                    fontWeight: 600,
-                    offset: 6,
-                    position:
-                      index % 2 === 0
-                        ? 'insideBottomRight'
-                        : 'insideBottomLeft',
+                    value: `Min: ${minAmount}`,
+                    offset: 10,
+                    fill: chart.color('gray.600'),
+                    position: 'bottom',
                   }}
                 />
-              ))}
-              <TimeSeriesXAxis
-                startTimestamp={startTimestamp}
-                endTimestamp={endTimestamp}
-              />
-              <YAxis tickCount={10} domain={[stat.minAmount - 10, 'auto']} />
-              <Tooltip
-                animationDuration={100}
-                cursor={false}
-                content={
-                  <Chart.Tooltip
-                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                {visibleEvidenceMarkers.map((marker, index) => (
+                  <ReferenceLine
+                    key={marker.id}
+                    x={marker.timestamp}
+                    stroke={markerColor(marker.type)}
+                    strokeDasharray={markerDash(marker.type)}
+                    strokeWidth={1.5}
+                    label={{
+                      value: marker.type,
+                      fill: markerColor(marker.type),
+                      fontSize: 10,
+                      fontWeight: 600,
+                      offset: 6,
+                      position:
+                        index % 2 === 0 ? 'insideTopRight' : 'insideTopLeft',
+                    }}
                   />
-                }
-              />
-              {chart.series.map((item) => (
-                <Line
-                  key={item.name as string}
-                  isAnimationActive={false}
-                  dataKey={chart.key(item.name) as string}
-                  stroke={chart.color(item.color)}
-                  strokeWidth={2}
-                  dot={false}
-                  activeDot={{ r: 5, strokeWidth: 2 }}
+                ))}
+                <TimeSeriesXAxis
+                  startTimestamp={startTimestamp}
+                  endTimestamp={endTimestamp}
                 />
-              ))}
-            </LineChart>
-          </Chart.Root>
-        </ResponsiveContainer>
+                <YAxis tickCount={10} domain={[stat.minAmount - 10, 'auto']} />
+                <Tooltip
+                  animationDuration={100}
+                  cursor={false}
+                  content={
+                    <Chart.Tooltip
+                      labelFormatter={formatTimeSeriesTooltipTimestamp}
+                    />
+                  }
+                />
+                {chart.series.map((item) => (
+                  <Line
+                    key={item.name as string}
+                    isAnimationActive={false}
+                    dataKey={chart.key(item.name) as string}
+                    stroke={chart.color(item.color)}
+                    strokeWidth={2}
+                    dot={false}
+                    activeDot={{ r: 5, strokeWidth: 2 }}
+                  />
+                ))}
+              </LineChart>
+            </Chart.Root>
+          </ResponsiveContainer>
+        ) : (
+          <Flex h="100%" align="center" justify="center">
+            <Text color="gray.500">
+              No runtime trades for the selected window.
+            </Text>
+          </Flex>
+        )}
       </Box>
     </Box>
   );

package/src/app/components/Strategies/StrategyEvidencePopover.tsx

@@ -0,0 +1,259 @@
+'use client';
+
+import {
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  Flex,
+  Popover,
+  Portal,
+  Text,
+} from '@chakra-ui/react';
+import type {
+  StrategyEvidenceMarker,
+  StrategyEvidenceMarkerType,
+  StrategyEvidenceTimeline,
+} from '@tradejs/types';
+import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
+
+export const STRATEGY_EVIDENCE_MARKER_PRESENTATION: Record<
+  StrategyEvidenceMarkerType,
+  { name: string; color: string; optional: boolean }
+> = {
+  G: { name: 'Composition / gate', color: 'purple.400', optional: false },
+  L: { name: 'MAX_LOSS_VALUE', color: 'orange.400', optional: false },
+  E: { name: 'Evidence boundary', color: 'teal.400', optional: false },
+  D: { name: 'Deployment', color: 'blue.400', optional: false },
+  P: { name: 'Runtime parity', color: 'cyan.400', optional: true },
+  R: { name: 'Recommendation', color: 'pink.400', optional: true },
+};
+
+const MARKER_TYPES = Object.keys(
+  STRATEGY_EVIDENCE_MARKER_PRESENTATION,
+) as StrategyEvidenceMarkerType[];
+
+export const filterStrategyEvidenceMarkers = ({
+  markers,
+  showParity,
+  showRecommendations,
+}: {
+  markers: StrategyEvidenceMarker[];
+  showParity: boolean;
+  showRecommendations: boolean;
+}) =>
+  markers.filter(
+    (marker) =>
+      (marker.type !== 'P' || showParity) &&
+      (marker.type !== 'R' || showRecommendations),
+  );
+
+const statusColor = (status: StrategyEvidenceTimeline['status']) => {
+  if (status === 'verified') return 'teal';
+  if (status === 'invalid') return 'red';
+  return 'orange';
+};
+
+const uniqueProvenance = (markers: StrategyEvidenceMarker[]) => {
+  const seen = new Set<string>();
+  return markers.filter((marker) => {
+    const key = `${marker.artifactId}:${marker.artifactSha256}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+};
+
+const FilterCheckbox = ({
+  checked,
+  label,
+  onChange,
+}: {
+  checked: boolean;
+  label: string;
+  onChange: (checked: boolean) => void;
+}) => (
+  <Checkbox.Root
+    size="sm"
+    checked={checked}
+    onCheckedChange={({ checked: nextChecked }) =>
+      onChange(nextChecked === true)
+    }
+  >
+    <Checkbox.HiddenInput />
+    <Checkbox.Control>
+      <Checkbox.Indicator />
+    </Checkbox.Control>
+    <Checkbox.Label>{label}</Checkbox.Label>
+  </Checkbox.Root>
+);
+
+export const StrategyEvidencePopover = ({
+  timeline,
+  showParity,
+  showRecommendations,
+  onShowParityChange,
+  onShowRecommendationsChange,
+}: {
+  timeline: StrategyEvidenceTimeline;
+  showParity: boolean;
+  showRecommendations: boolean;
+  onShowParityChange: (checked: boolean) => void;
+  onShowRecommendationsChange: (checked: boolean) => void;
+}) => {
+  const provenance =
+    timeline.status === 'verified' ? uniqueProvenance(timeline.markers) : [];
+
+  return (
+    <Popover.Root positioning={{ placement: 'bottom-end' }} lazyMount>
+      <Popover.Trigger asChild>
+        <Button
+          size="xs"
+          variant="outline"
+          aria-label={`Evidence: ${timeline.status}`}
+        >
+          Evidence
+          <Badge size="xs" colorPalette={statusColor(timeline.status)}>
+            {timeline.status === 'verified'
+              ? `${timeline.markers.length}`
+              : timeline.status}
+          </Badge>
+        </Button>
+      </Popover.Trigger>
+      <Portal>
+        <Popover.Positioner>
+          <Popover.Content width="min(430px, calc(100vw - 24px))">
+            <Popover.Arrow />
+            <Popover.Body>
+              <Flex direction="column" gap={3}>
+                <Box>
+                  <Text fontWeight="semibold">Immutable evidence</Text>
+                  <Text fontSize="xs" color="gray.500">
+                    {timeline.status === 'verified'
+                      ? timeline.observedFrom == null
+                        ? 'Verified artifact; no observation boundary supplied.'
+                        : `Verified from ${formatTimeSeriesTooltipTimestamp(
+                            timeline.observedFrom,
+                          )}.`
+                      : timeline.status === 'invalid'
+                        ? 'Evidence failed checksum, identity, or structure verification. No markers are rendered.'
+                        : 'No checksum-verified evidence artifact is available. No mutable fallback is used.'}
+                  </Text>
+                </Box>
+
+                <Box>
+                  <Text fontSize="xs" fontWeight="semibold" mb={1}>
+                    Legend
+                  </Text>
+                  <Flex wrap="wrap" gapX={3} gapY={1}>
+                    {MARKER_TYPES.map((type) => (
+                      <Flex key={type} align="center" gap={1}>
+                        <Text
+                          color={
+                            STRATEGY_EVIDENCE_MARKER_PRESENTATION[type].color
+                          }
+                          fontWeight="bold"
+                          fontSize="xs"
+                        >
+                          {type}
+                        </Text>
+                        <Text fontSize="xs" color="gray.500">
+                          {STRATEGY_EVIDENCE_MARKER_PRESENTATION[type].name}
+                        </Text>
+                      </Flex>
+                    ))}
+                  </Flex>
+                </Box>
+
+                <Box>
+                  <Text fontSize="xs" fontWeight="semibold" mb={1}>
+                    Optional markers
+                  </Text>
+                  <Flex gap={4}>
+                    <FilterCheckbox
+                      checked={showParity}
+                      label="Parity (P)"
+                      onChange={onShowParityChange}
+                    />
+                    <FilterCheckbox
+                      checked={showRecommendations}
+                      label="Recommendations (R)"
+                      onChange={onShowRecommendationsChange}
+                    />
+                  </Flex>
+                </Box>
+
+                <Box>
+                  <Text fontSize="xs" fontWeight="semibold" mb={1}>
+                    Events and provenance
+                  </Text>
+                  {timeline.status === 'verified' && timeline.markers.length ? (
+                    <Flex
+                      direction="column"
+                      gap={2}
+                      maxH="220px"
+                      overflowY="auto"
+                    >
+                      {timeline.markers.map((marker) => (
+                        <Box key={marker.id}>
+                          <Flex align="baseline" gap={2}>
+                            <Text
+                              color={
+                                STRATEGY_EVIDENCE_MARKER_PRESENTATION[
+                                  marker.type
+                                ].color
+                              }
+                              fontWeight="bold"
+                              fontSize="xs"
+                            >
+                              {marker.type}
+                            </Text>
+                            <Text fontSize="xs" fontWeight="semibold">
+                              {marker.label}
+                            </Text>
+                            <Text fontSize="xs" color="gray.500">
+                              {formatTimeSeriesTooltipTimestamp(
+                                marker.timestamp,
+                              )}
+                            </Text>
+                          </Flex>
+                          <Text fontSize="xs" color="gray.500">
+                            {marker.summary}
+                          </Text>
+                        </Box>
+                      ))}
+                    </Flex>
+                  ) : (
+                    <Text fontSize="xs" color="gray.500">
+                      No verified events in the selected window.
+                    </Text>
+                  )}
+                </Box>
+
+                {provenance.length ? (
+                  <Box>
+                    <Text fontSize="xs" fontWeight="semibold" mb={1}>
+                      Artifact provenance
+                    </Text>
+                    {provenance.map((marker) => (
+                      <Text
+                        key={`${marker.artifactId}:${marker.artifactSha256}`}
+                        fontSize="xs"
+                        color="gray.500"
+                        fontFamily="mono"
+                        title={marker.artifactSha256}
+                      >
+                        {marker.artifactId} ·{' '}
+                        {marker.artifactSha256.slice(0, 12)}
+                      </Text>
+                    ))}
+                  </Box>
+                ) : null}
+              </Flex>
+            </Popover.Body>
+          </Popover.Content>
+        </Popover.Positioner>
+      </Portal>
+    </Popover.Root>
+  );
+};