From d6e591df1fcbb0a6852aff7908b062ae45eb638f Mon Sep 17 00:00:00 2001
From: Jordan Rome <jordalgo@meta.com>
Date: Fri, 7 Nov 2025 20:12:25 -0500
Subject: [PATCH 1/2] Add ability to paste c-source files

The pasted C source files need to match up
with what the verifier has or else we don't
allow the contents to be overwritten.
---
 src/App.tsx        |  42 ++++++++++++++
 src/components.tsx | 141 ++++++++++++++++++++++++++++++++++++++++++++-
 src/index.css      |  67 ++++++++++++++++++++-
 3 files changed, 247 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 70222da..ca574e0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -62,6 +62,8 @@ function getVisibleLogLines(
 
 function getVisibleCLines(
   verifierLogState: VerifierLogState,
+  fileName: string = "",
+  pastedLines: string[] = [],
 ): [CSourceRow[], Map<string, number>] {
   const cLineIdToVisualIdx: Map<string, number> = new Map();
   const cLines: CSourceRow[] = [];
@@ -74,6 +76,24 @@ function getVisibleCLines(
     });
     ++j;
 
+    if (file === fileName && pastedLines.length > 0) {
+      pastedLines.forEach((lineText, i) => {
+        const lineNum = i + 1;
+        const sourceId = getCLineId(file, lineNum);
+        cLines.push({
+          type: "c_line",
+          file,
+          lineNum: i + 1,
+          lineText,
+          sourceId,
+          ignore: false,
+        });
+        cLineIdToVisualIdx.set(sourceId, j);
+        ++j;
+      });
+      continue;
+    }
+
     let unknownStart = 0;
     for (let i = range[0]; i < range[1]; ++i) {
       const sourceId = getCLineId(file, i);
@@ -144,6 +164,7 @@ const ContentRaw = ({
   handleLogLinesOut,
   handleFullLogToggle,
   testListHeight,
+  addPastedCSourceFile,
 }: {
   loadError: string | null;
   visualLogState: VisualLogState;
@@ -154,6 +175,7 @@ const ContentRaw = ({
   handleLogLinesOut: (event: React.MouseEvent<HTMLDivElement>) => void;
   handleFullLogToggle: () => void;
   testListHeight: number | undefined;
+  addPastedCSourceFile: (fileName: string, pastedLines: string[]) => void;
 }) => {
   if (loadError) {
     return <div>{loadError}</div>;
@@ -167,6 +189,7 @@ const ContentRaw = ({
         handleLogLinesOut={handleLogLinesOut}
         handleFullLogToggle={handleFullLogToggle}
         testListHeight={testListHeight}
+        addPastedCSourceFile={addPastedCSourceFile}
       />
     );
   } else {
@@ -268,6 +291,24 @@ function App({ testListHeight }: { testListHeight?: number }) {
     setIsLoading(false);
   }, []);
 
+  const addPastedCSourceFile = useCallback(
+    (fileName: string, pastedLines: string[]) => {
+      setVisualLogState((prevState) => {
+        const [cLines, cLineIdToVisualIdx] = getVisibleCLines(
+          verifierLogState,
+          fileName,
+          pastedLines,
+        );
+        return {
+          ...prevState,
+          cLines,
+          cLineIdToVisualIdx,
+        };
+      });
+    },
+    [verifierLogState],
+  );
+
   const loadInputText = useCallback(
     (text: string) => {
       const rawLines = text.split("\n");
@@ -452,6 +493,7 @@ function App({ testListHeight }: { testListHeight?: number }) {
           handleLogLinesOut={handleLogLinesOut}
           handleFullLogToggle={handleFullLogToggle}
           testListHeight={testListHeight}
+          addPastedCSourceFile={addPastedCSourceFile}
         />
         <div id="hint">
           <SelectedLineHint
diff --git a/src/components.tsx b/src/components.tsx
index 7bae9b8..f179f76 100644
--- a/src/components.tsx
+++ b/src/components.tsx
@@ -14,6 +14,7 @@ import {
   BpfConditionalJmpInstruction,
   BpfTargetJmpInstruction,
   InstructionLine,
+  getCLineId,
 } from "./parser";
 import {
   BpfMemSlotMap,
@@ -821,6 +822,98 @@ export function SelectedLineHint({
   );
 }
 
+function CSourcePastePopup({
+  verifierLogState,
+  fileName,
+  onHideCSourcePaste,
+  addPastedCSourceFile,
+}: {
+  verifierLogState: VerifierLogState;
+  fileName: string;
+  onHideCSourcePaste: () => void;
+  addPastedCSourceFile: (fileName: string, pastedLines: string[]) => void;
+}) {
+  const [pastedContent, setPastedContent] = useState("");
+  const [mismatchError, setMismatcError] = useState(false);
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => {
+      setMismatcError(false);
+      const pastedText = event.target.value;
+      setPastedContent(pastedText);
+      const pastedLines: string[] = pastedText.split("\n");
+      for (const [file] of verifierLogState.cSourceMap.fileRange) {
+        if (file !== fileName) {
+          continue;
+        }
+        pastedLines.some((lineText, i) => {
+          const lineNum = i + 1;
+          const sourceId = getCLineId(file, lineNum);
+          const sourceLine =
+            verifierLogState.cSourceMap.cSourceLines.get(sourceId);
+          if (sourceLine && !sourceLine.ignore) {
+            if (!lineText.includes(sourceLine.content)) {
+              setMismatcError(true);
+              return true;
+            }
+          }
+          return false;
+        });
+      }
+    },
+    [],
+  );
+
+  const handleConfirm = useCallback(() => {
+    addPastedCSourceFile(fileName, pastedContent.split("\n"));
+    onHideCSourcePaste();
+  }, [pastedContent]);
+
+  const handleClear = useCallback(() => {
+    setPastedContent("");
+    setMismatcError(false);
+  }, []);
+
+  const onContentClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+    },
+    [],
+  );
+
+  return (
+    <div onClick={onHideCSourcePaste} className="c-source-popup-overlay">
+      <div onClick={onContentClick} className="c-source-popup-content">
+        <h3>Paste contents of {fileName}</h3>
+        <textarea
+          className="c-source-textarea"
+          value={pastedContent}
+          onChange={handleChange}
+          placeholder="Paste the entire file contents"
+        />
+        {mismatchError && (
+          <div className="c-source-popup-error">
+            Pasted content does not match the verifier log.
+            <br />
+            Make sure the entire file contents are pasted and the line numbers
+            match
+          </div>
+        )}
+        <button
+          className="c-source-button"
+          onClick={handleConfirm}
+          disabled={mismatchError || pastedContent === ""}
+        >
+          Apply
+        </button>
+        <button className="c-source-button" onClick={handleClear}>
+          Clear
+        </button>
+      </div>
+    </div>
+  );
+}
+
 function HideShowButton({
   isVisible,
   rightOpen,
@@ -1162,6 +1255,7 @@ type CSourceRowProps = {
   cLines: CSourceRow[];
   dependencyCLines: Set<string>;
   selectedCLine: string;
+  onShowCSourcePaste: (fileName: string) => void;
 };
 
 function CSourceRowHeight(index: number, { cLines }: CSourceRowProps) {
@@ -1181,17 +1275,29 @@ const CSourceRowComponent = ({
   cLines,
   dependencyCLines,
   selectedCLine,
+  onShowCSourcePaste,
 }: RowComponentProps<CSourceRowProps>) => {
   const item = cLines[index];
 
+  const onFilePasteClick = () => {
+    onShowCSourcePaste(item.file);
+  };
+
   if (item.type == "file_name") {
     const fileNameStyle = { ...style };
     if (index === 0) {
       fileNameStyle["borderTop"] = "0px";
     }
     return (
-      <div className="filename-header" style={fileNameStyle}>
-        {item.file}
+      <div
+        onClick={onFilePasteClick}
+        className="filename-header"
+        style={fileNameStyle}
+      >
+        {item.file} {"\u{1F4CB}"}
+        <div className="filename-tooltip">
+          Click to replace lines with actual source code
+        </div>
       </div>
     );
   }
@@ -1241,6 +1347,7 @@ function CSourceLinesRaw({
   handleFullLogToggle,
   handleCLinesClick,
   onCRowsRendered,
+  onShowCSourcePaste,
 }: {
   showFullLog: boolean;
   selectedState: LogLineState;
@@ -1251,6 +1358,7 @@ function CSourceLinesRaw({
   handleFullLogToggle: () => void;
   handleCLinesClick: (event: React.MouseEvent<HTMLDivElement>) => void;
   onCRowsRendered: (start: number, end: number) => void;
+  onShowCSourcePaste: (fileName: string) => void;
 }) {
   const buttonId = "csource-toggle";
 
@@ -1358,6 +1466,7 @@ function CSourceLinesRaw({
             cLines: visualLogState.cLines,
             dependencyCLines,
             selectedCLine,
+            onShowCSourcePaste,
           }}
         />
       </div>
@@ -1375,6 +1484,7 @@ export function MainContent({
   handleLogLinesOut,
   handleFullLogToggle,
   testListHeight,
+  addPastedCSourceFile,
 }: {
   visualLogState: VisualLogState;
   selectedState: LogLineState;
@@ -1383,6 +1493,7 @@ export function MainContent({
   handleLogLinesOut: (event: React.MouseEvent<HTMLDivElement>) => void;
   handleFullLogToggle: () => void;
   testListHeight: number | undefined;
+  addPastedCSourceFile: (fileName: string, pastedLines: string[]) => void;
 }) {
   const logListRef = useListRef(null);
   const cListRef = useListRef(null);
@@ -1410,6 +1521,19 @@ export function MainContent({
     visualLogEnd: number;
   }>({ visualLogStart: 0, visualLogEnd: 0 });
 
+  const [cSourcePaste, setCSourcePaste] = useState<{
+    show: boolean;
+    fileName: string;
+  }>({ show: false, fileName: "" });
+
+  const onShowCSourcePaste = useCallback((fileName: string) => {
+    setCSourcePaste({ show: true, fileName });
+  }, []);
+
+  const onHideCSourcePaste = useCallback(() => {
+    setCSourcePaste({ show: false, fileName: "" });
+  }, []);
+
   const onCRowsRendered = useCallback((start: number, end: number) => {
     setVisualCIndexRange({ visualLogStart: start, visualLogEnd: end });
   }, []);
@@ -1484,6 +1608,10 @@ export function MainContent({
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (cSourcePaste.show) {
+        return;
+      }
+
       let delta = 0;
       let areCLinesInFocus = selectedState.cLine !== "";
       let min = 0;
@@ -1931,6 +2059,7 @@ export function MainContent({
         cListRef={cListRef}
         onCRowsRendered={onCRowsRendered}
         testListHeight={testListHeight}
+        onShowCSourcePaste={onShowCSourcePaste}
       />
       <div
         id="log-container"
@@ -1977,6 +2106,14 @@ export function MainContent({
         handleStateCLineClick={handleStateCLineClick}
         handleStateRowClick={handleStateRowClick}
       />
+      {cSourcePaste.show && (
+        <CSourcePastePopup
+          verifierLogState={verifierLogState}
+          onHideCSourcePaste={onHideCSourcePaste}
+          fileName={cSourcePaste.fileName}
+          addPastedCSourceFile={addPastedCSourceFile}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index 8b87d7e..c763d2a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -73,7 +73,7 @@ h1 {
   height: 40px;
   background-color: var(--mid-gray-20);
   font-family: "Roboto Mono", monospace;
-  z-index: 1;
+  z-index: 2;
 }
 
 .nav-arrow:hover {
@@ -179,6 +179,29 @@ h1 {
   border-bottom: 2px solid var(--mid-gray);
   font-family: "Roboto", sans-serif;
   box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.filename-tooltip {
+  background-color: #f8f8f8;
+  padding: 5px 8px;
+  border: 1px solid var(--mid-gray);
+  color: #000;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  line-height: 20px;
+  position: absolute;
+  z-index: 1;
+  visibility: hidden;
+  top: 38px;
+  left: 1%;
+  font-weight: normal;
+}
+
+.filename-header:hover .filename-tooltip {
+  visibility: visible;
 }
 
 .c-source-file:first-child .filename-header {
@@ -196,6 +219,7 @@ h1 {
 
 .c-source-line {
   color: var(--dark-blue);
+  white-space: pre;
 }
 
 /* Log Lines */
@@ -556,6 +580,47 @@ h1 {
   left: 30px;
 }
 
+/* C Source Paste Popup */
+.c-source-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.c-source-popup-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  max-width: 800px;
+  width: 90%;
+}
+
+.c-source-textarea {
+  width: 98%;
+  height: 400px;
+  margin-bottom: 10px;
+  padding: 1%;
+  border: 2px dashed var(--primary-dark);
+}
+
+.c-source-popup-error {
+  margin-bottom: 10px;
+  font-weight: bold;
+  color: var(--bright-red);
+}
+
+.c-source-button {
+  margin-right: 10px;
+}
+
 /* Footer */
 
 #hint {

From 6e880ef4c0d1382b27ed2ee47c1a31bfdc679656 Mon Sep 17 00:00:00 2001
From: Jordan Rome <jordalgo@meta.com>
Date: Tue, 18 Nov 2025 05:14:24 -0800
Subject: [PATCH 2/2] Store pasted C Lines in local DB

This is so users don't have to re-paste C source files
when they re-load a log from local storage.
---
 src/App.tsx        | 112 +++++++++++++++++++++++++++++++++++----------
 src/components.tsx |   7 ++-
 2 files changed, 93 insertions(+), 26 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ca574e0..7feafcc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,9 +20,14 @@ import {
   Examples,
   CSourceRow,
   StoredLogs,
+  StoredCLines,
 } from "./components";
 import { getCLineId, ParsedLine, ParsedLineType } from "./parser";
 
+// Increment the version if there is a breaking change
+// in what we store
+const STORED_LOG_KEY = "logs-v2";
+
 function getEmptyVisualLogState(): VisualLogState {
   return {
     verifierLogState: getEmptyVerifierState(),
@@ -62,8 +67,7 @@ function getVisibleLogLines(
 
 function getVisibleCLines(
   verifierLogState: VerifierLogState,
-  fileName: string = "",
-  pastedLines: string[] = [],
+  storedCLines: StoredCLines = {},
 ): [CSourceRow[], Map<string, number>] {
   const cLineIdToVisualIdx: Map<string, number> = new Map();
   const cLines: CSourceRow[] = [];
@@ -76,8 +80,8 @@ function getVisibleCLines(
     });
     ++j;
 
-    if (file === fileName && pastedLines.length > 0) {
-      pastedLines.forEach((lineText, i) => {
+    if (file in storedCLines) {
+      storedCLines[file].forEach((lineText, i) => {
         const lineNum = i + 1;
         const sourceId = getCLineId(file, lineNum);
         cLines.push({
@@ -232,7 +236,7 @@ function App({ testListHeight }: { testListHeight?: number }) {
     logLineIdxToVisualIdx.get(hoveredState.line) || 0;
 
   useEffect(() => {
-    ldb.get("logs", function (value) {
+    ldb.get(STORED_LOG_KEY, function (value) {
       try {
         const logs: StoredLogs = JSON.parse(value);
         if (logs) {
@@ -268,7 +272,12 @@ function App({ testListHeight }: { testListHeight?: number }) {
     });
   }, [verifierLogState]);
 
-  const updateStoredLogs = useCallback(
+  const updateStoredLogs = useCallback((nextStoredLogs: StoredLogs) => {
+    ldb.set(STORED_LOG_KEY, JSON.stringify(nextStoredLogs));
+    setStoredLogs(nextStoredLogs);
+  }, []);
+
+  const addStoredLog = useCallback(
     (lines: string[], name: string = "") => {
       const now = new Date();
       const nextName = name
@@ -276,11 +285,10 @@ function App({ testListHeight }: { testListHeight?: number }) {
         : `pasted log (${now.toDateString().toLowerCase()} - ${now.toLocaleTimeString().toLocaleLowerCase()})`;
       // Only keep 5 stored logs for now
       const nextStoredLogs: StoredLogs = [
-        [nextName, lines],
+        [nextName, { rawLogLines: lines, pastedCLines: {} }],
         ...storedLogs.slice(0, 5),
       ];
-      ldb.set("logs", JSON.stringify(nextStoredLogs));
-      setStoredLogs(nextStoredLogs);
+      updateStoredLogs(nextStoredLogs);
     },
     [storedLogs],
   );
@@ -293,29 +301,60 @@ function App({ testListHeight }: { testListHeight?: number }) {
 
   const addPastedCSourceFile = useCallback(
     (fileName: string, pastedLines: string[]) => {
-      setVisualLogState((prevState) => {
-        const [cLines, cLineIdToVisualIdx] = getVisibleCLines(
-          verifierLogState,
-          fileName,
-          pastedLines,
-        );
-        return {
-          ...prevState,
-          cLines,
-          cLineIdToVisualIdx,
-        };
+      const nextStoredLogs: StoredLogs = [];
+      storedLogs.forEach((storedLog, idx) => {
+        // The first stored log is the current one
+        if (idx !== 0) {
+          nextStoredLogs.push(storedLog);
+          return;
+        }
+
+        const nextPastedCLines: StoredCLines = {};
+        let found = false;
+        for (const [storedFileName, lines] of Object.entries(
+          storedLog[1].pastedCLines,
+        )) {
+          if (storedFileName !== fileName) {
+            nextPastedCLines[storedFileName] = lines;
+            return;
+          }
+          found = true;
+          nextPastedCLines[storedFileName] = pastedLines;
+        }
+        if (!found) {
+          nextPastedCLines[fileName] = pastedLines;
+        }
+        nextStoredLogs.push([
+          storedLog[0],
+          {
+            rawLogLines: storedLog[1].rawLogLines,
+            pastedCLines: nextPastedCLines,
+          },
+        ]);
+        setVisualLogState((prevState) => {
+          const [cLines, cLineIdToVisualIdx] = getVisibleCLines(
+            verifierLogState,
+            nextPastedCLines,
+          );
+          return {
+            ...prevState,
+            cLines,
+            cLineIdToVisualIdx,
+          };
+        });
       });
+      updateStoredLogs(nextStoredLogs);
     },
-    [verifierLogState],
+    [verifierLogState, storedLogs],
   );
 
   const loadInputText = useCallback(
     (text: string) => {
       const rawLines = text.split("\n");
       loadLog(rawLines);
-      updateStoredLogs(rawLines);
+      addStoredLog(rawLines);
     },
-    [updateStoredLogs],
+    [addStoredLog],
   );
 
   const prepareNewLog = useCallback(() => {
@@ -352,7 +391,30 @@ function App({ testListHeight }: { testListHeight?: number }) {
         if (!found) {
           console.error("Couldn't load previous log", example);
         } else {
-          loadLog(found[1]);
+          loadLog(found[1].rawLogLines);
+          // Move this to the most recent stored log
+          const nextStoredLogs: StoredLogs = [[found[0], found[1]]];
+          storedLogs.forEach((storedLog) => {
+            if (storedLog[0] !== example) {
+              nextStoredLogs.push(storedLog);
+            }
+          });
+          updateStoredLogs(nextStoredLogs);
+          const newVerifierLogState = processRawLines(found[1].rawLogLines);
+          const nextVisualLogState = getVisualLogState(
+            newVerifierLogState,
+            false,
+          );
+          const [cLines, cLineIdToVisualIdx] = getVisibleCLines(
+            newVerifierLogState,
+            found[1].pastedCLines,
+          );
+          setVisualLogState({
+            ...nextVisualLogState,
+            cLines,
+            cLineIdToVisualIdx,
+          });
+          setIsLoading(false);
         }
       }
     },
@@ -437,7 +499,7 @@ function App({ testListHeight }: { testListHeight?: number }) {
           }
           rawLines = rawLines.concat(lines);
         }
-        updateStoredLogs(rawLines, fileBlob.name);
+        addStoredLog(rawLines, fileBlob.name);
         const newVerifierLogState = processRawLines(rawLines);
         setVisualLogState(
           getVisualLogState(newVerifierLogState, visualLogState.showFullLog),
diff --git a/src/components.tsx b/src/components.tsx
index f179f76..66b412a 100644
--- a/src/components.tsx
+++ b/src/components.tsx
@@ -70,7 +70,12 @@ type HelperArg = {
   name: string | null;
 };
 
-export type StoredLogs = [string, string[]][];
+// fileName -> cLines (N.B. not using a real Map to make it easier to json.parse/stringify)
+export type StoredCLines = { [index: string]: string[] };
+export type StoredLogs = [
+  string,
+  { rawLogLines: string[]; pastedCLines: StoredCLines },
+][];
 
 function isVoidHelperArg(arg: HelperArg) {
   return arg.type === "void" && arg.name === null && arg.star === null;