feat(client-electron): darken unused codes in history viewer

src/electron/renderer/components/BufferSizeViewer.tsx

@@ -1,4 +1,4 @@
-import { BreachProtocolResultJSON, BufferSize, BUFFER_SIZE_MAX } from '@/core';
+import { BreachProtocolResultJSON, BUFFER_SIZE_MAX } from '@/core';
 import styled from 'styled-components';
 import { Highlight } from './HistoryViewer';
 
@@ -25,17 +25,22 @@ const BufferSizeWrapper = styled.div`
   cursor: default;
 `;
 
-const BufferSizeItem = styled.div<{ active: boolean }>`
+const BufferSizeItem = styled.div<{ active: boolean; hasDaemon: boolean }>`
   width: var(--size);
   height: var(--size);
   flex-shrink: 0;
   border: 1px
-    ${({ active }) =>
-      active ? 'solid var(--accent)' : 'dashed var(--primary)'};
+    ${({ active, hasDaemon }) =>
+      active
+        ? hasDaemon
+          ? 'solid var(--accent)'
+          : 'solid var(--accent-dark)'
+        : 'dashed var(--primary)'};
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--accent);
+  color: ${({ hasDaemon }) =>
+    hasDaemon ? 'var(--accent)' : 'var(--accent-dark)'};
   font-size: 24px;
   font-weight: 500;
   box-sizing: border-box;
@@ -44,12 +49,14 @@ const BufferSizeItem = styled.div<{ active: boolean }>`
 interface BufferSizeViewerProps {
   bufferSize: number;
   result?: BreachProtocolResultJSON;
+  hasDaemonAttached: (index: number) => boolean;
   onHighlight?: (highlight: Highlight) => void;
 }
 
 export const BufferSizeViewer = ({
   bufferSize,
   result,
+  hasDaemonAttached,
   onHighlight,
 }: BufferSizeViewerProps) => {
   return (
@@ -58,11 +65,13 @@ export const BufferSizeViewer = ({
     >
       {Array.from({ length: bufferSize }, (s, i) => {
         const isActive = result && i < result.path.length;
+        const hasDaemon = isActive && hasDaemonAttached(i);
 
         return (
           <BufferSizeItem
             key={i}
             active={isActive}
+            hasDaemon={hasDaemon}
             onMouseEnter={
               onHighlight
                 ? () => onHighlight(isActive ? { from: 0, to: i } : null)

src/electron/renderer/components/GridViewer.tsx

@@ -40,6 +40,7 @@ interface SquareProps {
   highlight: boolean;
   spotlight: boolean;
   pathIndex: number;
+  hasDaemon: boolean;
 }
 
 function getSquarePathIndex({ active, highlight, pathIndex }: SquareProps) {
@@ -75,14 +76,7 @@ const Square = styled.div<SquareProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  color: ${({ active, highlight, spotlight }) =>
-    spotlight
-      ? 'var(--primary)'
-      : active
-      ? highlight
-        ? 'var(--background)'
-        : 'var(--accent)'
-      : 'var(--accent-darker)'};
+  color: ${getSquareColor('var(--background)', 'var(--accent-darker)')};
   width: var(--square);
   height: var(--square);
   font-size: 24px;
@@ -92,11 +86,31 @@ const Square = styled.div<SquareProps>`
     spotlight ? 'auto' : active ? 'auto' : '-3'};
   background: ${({ highlight }) =>
     highlight ? 'var(--accent)' : 'var(--background)'};
-  border: var(--border) solid
-    ${({ active, spotlight }) =>
-      active ? 'var(--accent)' : spotlight ? 'var(--primary)' : 'transparent'};
+  border: var(--border) solid ${getSquareColor('var(--accent)')};
 `;
 
+function getSquareColor(highlightColor: string, defaultColor = 'transparent') {
+  return ({ active, highlight, spotlight, hasDaemon }: SquareProps) => {
+    if (spotlight) {
+      return 'var(--primary)';
+    }
+
+    if (active) {
+      if (highlight) {
+        return highlightColor;
+      }
+
+      if (hasDaemon) {
+        return 'var(--accent)';
+      }
+
+      return 'var(--accent-dark)';
+    }
+
+    return defaultColor;
+  };
+}
+
 function getArrowBorderFor(d: GapDirection) {
   const o: GapOrientation =
     d === 'bottom' || d === 'top' ? 'horizontal' : 'vertical';
@@ -178,9 +192,15 @@ interface GridViewerProps {
   grid: GridRawData;
   path?: string[];
   highlight?: Highlight;
+  hasDaemonAttached: (index: number) => boolean;
 }
 
-export const GridViewer = ({ grid, path, highlight }: GridViewerProps) => {
+export const GridViewer = ({
+  grid,
+  path,
+  highlight,
+  hasDaemonAttached,
+}: GridViewerProps) => {
   const [spotlight, setSpotlight] = useState(null);
   const size = Math.sqrt(grid.length);
   const squares = cross(ROWS.slice(0, size), COLS.slice(0, size));
@@ -198,11 +218,13 @@ export const GridViewer = ({ grid, path, highlight }: GridViewerProps) => {
             : false;
         const shouldIgnoreHighlightArrow =
           highlight != null ? index === highlight.from : false;
+        const hasDaemon = isActive && hasDaemonAttached(index);
 
         return (
           <Square
             key={s}
             active={isActive}
+            hasDaemon={hasDaemon}
             highlight={shouldHighlight}
             spotlight={value === spotlight}
             pathIndex={index}

src/electron/renderer/components/HistoryViewer.tsx

@@ -1,12 +1,16 @@
 import {
   BreachProtocolResultJSON,
+  DaemonRawData,
+  DaemonsRawData,
+  fromHex,
   isBufferSizeFragment,
   isDaemonsFragment,
   isGridFragment,
   isTypesFragment,
+  SequenceJSON,
 } from '@/core';
 import { HistoryEntry } from '@/electron/common';
-import { useContext, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
 import { StateContext } from '../state';
 import { BufferSizeViewer } from './BufferSizeViewer';
 import { DaemonsViewer } from './DaemonsViewer';
@@ -24,6 +28,29 @@ interface HistoryViewerProps {
   customResult?: BreachProtocolResultJSON;
 }
 
+function getDaemonBounds(daemons: DaemonsRawData, sequence?: SequenceJSON) {
+  if (!sequence) {
+    return [];
+  }
+
+  const st = sequence.value.map(fromHex).join('') ?? '';
+
+  return daemons
+    .map((daemon) => {
+      const dt = daemon.map(fromHex).join('');
+      const start = st.indexOf(dt);
+
+      if (start === -1) {
+        return null;
+      }
+
+      const end = start + daemon.length;
+
+      return { start, end };
+    })
+    .filter(Boolean);
+}
+
 export const HistoryViewer = ({ entry, customResult }: HistoryViewerProps) => {
   const [highlight, setHighlight] = useState<Highlight>(null);
   const { settings } = useContext(StateContext);
@@ -34,14 +61,34 @@ export const HistoryViewer = ({ entry, customResult }: HistoryViewerProps) => {
   const { rawData: daemons } = entry.fragments.find(isDaemonsFragment);
   const typesFragment = entry.fragments.find(isTypesFragment);
   const result = customResult || entry.result;
+  const hasBreak =
+    result?.resolvedSequence.value.length > result?.sequence.value.length;
+  const bounds = getDaemonBounds(daemons, result?.resolvedSequence);
+
+  const hasDaemonAttached = useCallback(
+    (index: number) => {
+      if (hasBreak) {
+        return bounds.some(({ start, end }) => index >= start && index < end);
+      }
+
+      return true;
+    },
+    [result]
+  );
 
   return (
     <Row gap scroll={false}>
-      <GridViewer grid={grid} path={result?.path} highlight={highlight} />
+      <GridViewer
+        grid={grid}
+        path={result?.path}
+        highlight={highlight}
+        hasDaemonAttached={hasDaemonAttached}
+      />
       <Col gap grow>
         <BufferSizeViewer
           bufferSize={bufferSize}
           result={result}
+          hasDaemonAttached={hasDaemonAttached}
           onHighlight={setHighlight}
         />
         <DaemonsViewer