Repository: humanlayer/humanlayer
File: humanlayer-wui/src/components/internal/SessionDetail/components/CustomDiffViewer.tsx (TypeScript)

Code before:
              <div key={`eq-${i}`} className="flex items-start bg-transparent text-muted-foreground">
                <span className="w-8 text-right text-muted-foreground/40 select-none pr-2">
                  {lineNumber}
                </span>
                <span className="w-4 select-none"> </span>
                <span>{d.oldLine}</span>
              </div>
            )
          })}
        </div>
      </div>
    )
  } catch {
    // Log detailed context for debugging
    // Commented out (not deleted) for future debugging if needed
    // logger.warn('Snapshot-based diff rendering failed, falling back to simple diff:', {
    //   error: error instanceof Error ? error.message : String(error),
    //   editsCount: edits.length,
    //   fileContentLength: fileContents?.length,
    //   firstEditPreview: edits[0]
    //     ? {
    //         oldValue: edits[0].oldValue.substring(0, 50) + '...',
    //         newValue: edits[0].newValue.substring(0, 50) + '...',
    //       }
    //     : null,
    // })

    // Recursively call self with undefined fileContents to trigger non-snapshot mode
    return <CustomDiffViewer fileContents={undefined} edits={edits} splitView={splitView} />
  }
}


Review comment (bug):
hmm don't think I like having big commented blocks in the code, how about, higher up in the file or something

```
 debugLogSnapshotFailure(...) {
   // original logic, not commented out
 }
```
and then in the function itself, just comment out the invocation

```
} catch {
     // debugLogSnapshotFailure(…)
}
```
then we can leave the import uncommented too

Code after:
              )
            }

            if (d.type === 'remove') {
              const lineNumber = d.oldIndex! + 1
              return (
                <div
                  key={`rem-${i}`}
                  className="flex items-start bg-[var(--terminal-error)]/10 text-foreground"
                >
                  <span className="w-8 text-right text-muted-foreground/60 select-none pr-2">
                    {lineNumber}
                  </span>
                  <span className="w-4 select-none text-foreground">-</span>
                  <span>{d.oldLine}</span>
                </div>
              )
            }

            // Equal
            const lineNumber = d.oldIndex! + 1
            return (
              <div key={`eq-${i}`} className="flex items-start bg-transparent text-muted-foreground">
                <span className="w-8 text-right text-muted-foreground/40 select-none pr-2">
                  {lineNumber}
                </span>
                <span className="w-4 select-none"> </span>
                <span>{d.oldLine}</span>
              </div>
            )
          })}
        </div>
      </div>
    )
  } catch {
    // debugLogSnapshotFailure(error, edits, fileContents) // uncomment to enable debug logging

    // Recursively call self with undefined fileContents to trigger non-snapshot mode
    return <CustomDiffViewer fileContents={undefined} edits={edits} splitView={splitView} />
  }
}