diff --git a/loop/webui/src/web-components/sketch-diff-view.ts b/loop/webui/src/web-components/sketch-diff-view.ts
new file mode 100644
index 0000000..562eb1e
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-diff-view.ts
@@ -0,0 +1,566 @@
+import {css, html, LitElement, unsafeCSS} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import * as Diff2Html from "diff2html";
+
+@customElement('sketch-diff-view')
+export class SketchDiffView extends LitElement {
+  // Current commit hash being viewed
+  @property({type: String})
+  commitHash: string = "";
+
+  // Selected line in the diff for commenting
+  @state()
+  private selectedDiffLine: string | null = null;
+
+  // View format (side-by-side or line-by-line)
+  @state()
+  private viewFormat: "side-by-side" | "line-by-line" = "side-by-side";
+
+  static styles = css`
+    .diff-view {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: 100%;
+    }
+    
+    .diff-container {
+      height: 100%;
+      overflow: auto;
+      flex: 1;
+      padding: 0 1rem;
+    }
+    
+    #diff-view-controls {
+      display: flex;
+      justify-content: flex-end;
+      padding: 10px;
+      background: #f8f8f8;
+      border-bottom: 1px solid #eee;
+    }
+    
+    .diff-view-format {
+      display: flex;
+      gap: 10px;
+    }
+    
+    .diff-view-format label {
+      cursor: pointer;
+    }
+    
+    .diff2html-content {
+      font-family: var(--monospace-font);
+      position: relative;
+    }
+    
+    /* Comment box styles */
+    .diff-comment-box {
+      position: fixed;
+      bottom: 80px;
+      right: 20px;
+      width: 400px;
+      background-color: white;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      padding: 16px;
+      z-index: 1000;
+    }
+    
+    .diff-comment-box h3 {
+      margin-top: 0;
+      margin-bottom: 10px;
+      font-size: 16px;
+    }
+    
+    .selected-line {
+      margin-bottom: 10px;
+      font-size: 14px;
+    }
+    
+    .selected-line pre {
+      padding: 6px;
+      background: #f5f5f5;
+      border: 1px solid #eee;
+      border-radius: 3px;
+      margin: 5px 0;
+      max-height: 100px;
+      overflow: auto;
+      font-family: var(--monospace-font);
+      font-size: 13px;
+      white-space: pre-wrap;
+    }
+    
+    #diffCommentInput {
+      width: 100%;
+      height: 100px;
+      padding: 8px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      resize: vertical;
+      font-family: inherit;
+      margin-bottom: 10px;
+    }
+    
+    .diff-comment-buttons {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+    
+    .diff-comment-buttons button {
+      padding: 6px 12px;
+      border-radius: 4px;
+      border: 1px solid #ddd;
+      background: white;
+      cursor: pointer;
+    }
+    
+    .diff-comment-buttons button:hover {
+      background: #f5f5f5;
+    }
+    
+    .diff-comment-buttons button#submitDiffComment {
+      background: #1a73e8;
+      color: white;
+      border-color: #1a73e8;
+    }
+    
+    .diff-comment-buttons button#submitDiffComment:hover {
+      background: #1967d2;
+    }
+    
+    /* Styles for the comment button on diff lines */
+    .d2h-gutter-comment-button {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      visibility: hidden;
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      line-height: 13px;
+      text-align: center;
+      font-size: 14px;
+      cursor: pointer;
+      color: #666;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+    
+    tr:hover .d2h-gutter-comment-button {
+      visibility: visible;
+    }
+    
+    .d2h-gutter-comment-button:hover {
+      background: white;
+      color: #333;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+  `;
+  
+  constructor() {
+    super();
+  }
+  
+  // See https://lit.dev/docs/components/lifecycle/
+  connectedCallback() {
+    super.connectedCallback();
+    
+    // Load the diff2html CSS if needed
+    this.loadDiff2HtmlCSS();
+  }
+  
+  // Load diff2html CSS into the shadow DOM
+  private async loadDiff2HtmlCSS() {
+    try {
+      // Check if diff2html styles are already loaded
+      const styleId = 'diff2html-styles';
+      if (this.shadowRoot?.getElementById(styleId)) {
+        return; // Already loaded
+      }
+      
+      // Fetch the diff2html CSS
+      const response = await fetch('static/diff2html.min.css');
+      
+      if (!response.ok) {
+        console.error(`Failed to load diff2html CSS: ${response.status} ${response.statusText}`);
+        return;
+      }
+      
+      const cssText = await response.text();
+      
+      // Create a style element and append to shadow DOM
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = cssText;
+      this.shadowRoot?.appendChild(style);
+      
+      console.log('diff2html CSS loaded into shadow DOM');
+    } catch (error) {
+      console.error('Error loading diff2html CSS:', error);
+    }
+  }
+  
+  // See https://lit.dev/docs/components/lifecycle/
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  
+  // Method called to load diff content
+  async loadDiffContent() {
+    // Wait for the component to be rendered
+    await this.updateComplete;
+    
+    const diff2htmlContent = this.shadowRoot?.getElementById("diff2htmlContent");
+    if (!diff2htmlContent) return;
+    
+    try {
+      // Show loading state
+      diff2htmlContent.innerHTML = "Loading enhanced diff...";
+      
+      // Build the diff URL - include commit hash if specified
+      const diffUrl = this.commitHash ? `diff?commit=${this.commitHash}` : "diff";
+      
+      // Fetch the diff from the server
+      const response = await fetch(diffUrl);
+      
+      if (!response.ok) {
+        throw new Error(
+          `Server returned ${response.status}: ${response.statusText}`,
+        );
+      }
+      
+      const diffText = await response.text();
+      
+      if (!diffText || diffText.trim() === "") {
+        diff2htmlContent.innerHTML =
+          "<span style='color: #666; font-style: italic;'>No changes detected since conversation started.</span>";
+        return;
+      }
+      
+      // Render the diff using diff2html
+      const diffHtml = Diff2Html.html(diffText, {
+        outputFormat: this.viewFormat,
+        drawFileList: true,
+        matching: "lines",
+        renderNothingWhenEmpty: false,
+        colorScheme: "light" as any, // Force light mode to match the rest of the UI
+      });
+      
+      // Insert the generated HTML
+      diff2htmlContent.innerHTML = diffHtml;
+      
+      // Add CSS styles to ensure we don't have double scrollbars
+      const d2hFiles = diff2htmlContent.querySelectorAll(".d2h-file-wrapper");
+      d2hFiles.forEach((file) => {
+        const contentElem = file.querySelector(".d2h-files-diff");
+        if (contentElem) {
+          // Remove internal scrollbar - the outer container will handle scrolling
+          (contentElem as HTMLElement).style.overflow = "visible";
+          (contentElem as HTMLElement).style.maxHeight = "none";
+        }
+      });
+      
+      // Add click event handlers to each code line for commenting
+      this.setupDiffLineComments();
+      
+    } catch (error) {
+      console.error("Error loading diff2html content:", error);
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error";
+      diff2htmlContent.innerHTML = `<span style='color: #dc3545;'>Error loading enhanced diff: ${errorMessage}</span>`;
+    }
+  }
+  
+  // Handle view format changes
+  private handleViewFormatChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.checked) {
+      this.viewFormat = input.value as "side-by-side" | "line-by-line";
+      this.loadDiffContent();
+    }
+  }
+  
+  /**
+   * Setup handlers for diff code lines to enable commenting
+   */
+  private setupDiffLineComments(): void {
+    const diff2htmlContent = this.shadowRoot?.getElementById("diff2htmlContent");
+    if (!diff2htmlContent) return;
+    
+    console.log("Setting up diff line comments");
+    
+    // Add plus buttons to each code line
+    this.addCommentButtonsToCodeLines();
+    
+    // Use event delegation for handling clicks on plus buttons
+    diff2htmlContent.addEventListener("click", (event) => {
+      const target = event.target as HTMLElement;
+      
+      // Only respond to clicks on the plus button
+      if (target.classList.contains("d2h-gutter-comment-button")) {
+        // Find the parent row first
+        const row = target.closest("tr");
+        if (!row) return;
+        
+        // Then find the code line in that row
+        const codeLine = row.querySelector(".d2h-code-side-line") || row.querySelector(".d2h-code-line");
+        if (!codeLine) return;
+        
+        // Get the line text content
+        const lineContent = codeLine.querySelector(".d2h-code-line-ctn");
+        if (!lineContent) return;
+        
+        const lineText = lineContent.textContent?.trim() || "";
+        
+        // Get file name to add context
+        const fileHeader = codeLine
+          .closest(".d2h-file-wrapper")
+          ?.querySelector(".d2h-file-name");
+        const fileName = fileHeader
+          ? fileHeader.textContent?.trim()
+          : "Unknown file";
+        
+        // Get line number if available
+        const lineNumElem = codeLine
+          .closest("tr")
+          ?.querySelector(".d2h-code-side-linenumber");
+        const lineNum = lineNumElem ? lineNumElem.textContent?.trim() : "";
+        const lineInfo = lineNum ? `Line ${lineNum}: ` : "";
+        
+        // Format the line for the comment box with file context and line number
+        const formattedLine = `${fileName} ${lineInfo}${lineText}`;
+        
+        console.log("Comment button clicked for line: ", formattedLine);
+        
+        // Open the comment box with this line
+        this.openDiffCommentBox(formattedLine);
+        
+        // Prevent event from bubbling up
+        event.stopPropagation();
+      }
+    });
+  }
+  
+  /**
+   * Add plus buttons to each table row in the diff for commenting
+   */
+  private addCommentButtonsToCodeLines(): void {
+    const diff2htmlContent = this.shadowRoot?.getElementById("diff2htmlContent");
+    if (!diff2htmlContent) return;
+    
+    // Target code lines first, then find their parent rows
+    const codeLines = diff2htmlContent.querySelectorAll(
+      ".d2h-code-side-line, .d2h-code-line"
+    );
+    
+    // Create a Set to store unique rows to avoid duplicates
+    const rowsSet = new Set<HTMLElement>();
+    
+    // Get all rows that contain code lines
+    codeLines.forEach(line => {
+      const row = line.closest('tr');
+      if (row) rowsSet.add(row as HTMLElement);
+    });
+    
+    // Convert Set back to array for processing
+    const codeRows = Array.from(rowsSet);
+    
+    codeRows.forEach((row) => {
+      const rowElem = row as HTMLElement;
+      
+      // Skip info lines without actual code (e.g., "file added")
+      if (rowElem.querySelector(".d2h-info")) {
+        return;
+      }
+      
+      // Find the code line number element (first TD in the row)
+      const lineNumberCell = rowElem.querySelector(
+        ".d2h-code-side-linenumber, .d2h-code-linenumber"
+      );
+      
+      if (!lineNumberCell) return;
+      
+      // Create the plus button
+      const plusButton = document.createElement("span");
+      plusButton.className = "d2h-gutter-comment-button";
+      plusButton.innerHTML = "+";
+      plusButton.title = "Add a comment on this line";
+      
+      // Add button to the line number cell for proper positioning
+      (lineNumberCell as HTMLElement).style.position = "relative"; // Ensure positioning context
+      lineNumberCell.appendChild(plusButton);
+    });
+  }
+  
+  /**
+   * Open the comment box for a selected diff line
+   */
+  private openDiffCommentBox(lineText: string): void {
+    // Make sure the comment box div exists
+    const commentBoxId = "diffCommentBox";
+    let commentBox = this.shadowRoot?.getElementById(commentBoxId);
+    
+    // If it doesn't exist, create it
+    if (!commentBox) {
+      commentBox = document.createElement("div");
+      commentBox.id = commentBoxId;
+      commentBox.className = "diff-comment-box";
+      
+      // Create the comment box contents
+      commentBox.innerHTML = `
+        <h3>Add a comment</h3>
+        <div class="selected-line">
+          Line:
+          <pre id="selectedLine"></pre>
+        </div>
+        <textarea
+          id="diffCommentInput"
+          placeholder="Enter your comment about this line..."
+        ></textarea>
+        <div class="diff-comment-buttons">
+          <button id="cancelDiffComment">Cancel</button>
+          <button id="submitDiffComment">Add Comment</button>
+        </div>
+      `;
+      
+      this.shadowRoot?.appendChild(commentBox);
+    }
+    
+    // Store the selected line
+    this.selectedDiffLine = lineText;
+    
+    // Display the line in the comment box
+    const selectedLine = this.shadowRoot?.getElementById("selectedLine");
+    if (selectedLine) {
+      selectedLine.textContent = lineText;
+    }
+    
+    // Reset the comment input
+    const commentInput = this.shadowRoot?.getElementById(
+      "diffCommentInput"
+    ) as HTMLTextAreaElement;
+    if (commentInput) {
+      commentInput.value = "";
+    }
+    
+    // Show the comment box
+    if (commentBox) {
+      commentBox.style.display = "block";
+    }
+    
+    // Add event listeners for submit and cancel buttons
+    const submitButton = this.shadowRoot?.getElementById("submitDiffComment");
+    if (submitButton) {
+      submitButton.onclick = () => this.submitDiffComment();
+    }
+    
+    const cancelButton = this.shadowRoot?.getElementById("cancelDiffComment");
+    if (cancelButton) {
+      cancelButton.onclick = () => this.closeDiffCommentBox();
+    }
+    
+    // Focus on the comment input
+    if (commentInput) {
+      commentInput.focus();
+    }
+  }
+  
+  /**
+   * Close the diff comment box without submitting
+   */
+  private closeDiffCommentBox(): void {
+    const commentBox = this.shadowRoot?.getElementById("diffCommentBox");
+    if (commentBox) {
+      commentBox.style.display = "none";
+    }
+    this.selectedDiffLine = null;
+  }
+  
+  /**
+   * Submit a comment on a diff line
+   */
+  private submitDiffComment(): void {
+    const commentInput = this.shadowRoot?.getElementById(
+      "diffCommentInput"
+    ) as HTMLTextAreaElement;
+    
+    if (!commentInput) return;
+    
+    const comment = commentInput.value.trim();
+    
+    // Validate inputs
+    if (!this.selectedDiffLine || !comment) {
+      alert("Please select a line and enter a comment.");
+      return;
+    }
+    
+    // Format the comment in a readable way
+    const formattedComment = `\`\`\`\n${this.selectedDiffLine}\n\`\`\`\n\n${comment}`;
+    
+    // Dispatch a custom event with the formatted comment
+    const event = new CustomEvent('diff-comment', {
+      detail: { comment: formattedComment },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(event);
+    
+    // Close only the comment box but keep the diff view open
+    this.closeDiffCommentBox();
+  }
+  
+  // Clear the current state
+  public clearState(): void {
+    this.commitHash = "";
+  }
+  
+  // Show diff for a specific commit
+  public showCommitDiff(commitHash: string): void {
+    // Store the commit hash
+    this.commitHash = commitHash;
+    // Load the diff content
+    this.loadDiffContent();
+  }
+  
+  render() {
+    return html`
+      <div class="diff-view">
+        <div class="diff-container">
+          <div id="diff-view-controls">
+            <div class="diff-view-format">
+              <label>
+                <input 
+                  type="radio" 
+                  name="diffViewFormat" 
+                  value="side-by-side" 
+                  ?checked=${this.viewFormat === "side-by-side"}
+                  @change=${this.handleViewFormatChange}
+                > Side-by-side
+              </label>
+              <label>
+                <input 
+                  type="radio" 
+                  name="diffViewFormat" 
+                  value="line-by-line"
+                  ?checked=${this.viewFormat === "line-by-line"}
+                  @change=${this.handleViewFormatChange}
+                > Line-by-line
+              </label>
+            </div>
+          </div>
+          <div id="diff2htmlContent" class="diff2html-content"></div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-diff-view": SketchDiffView;
+  }
+}