diff --git a/webui/src/web-components/demo/index.html b/webui/src/web-components/demo/index.html
index e8db7d8..2dd8f18 100644
--- a/webui/src/web-components/demo/index.html
+++ b/webui/src/web-components/demo/index.html
@@ -23,6 +23,12 @@
       <li>
         <a href="sketch-view-mode-select.demo.html">sketch-view-mode-select</a>
       </li>
+      <li>
+        <a href="sketch-monaco-view.demo.html">sketch-monaco-view</a>
+      </li>
+      <li>
+        <a href="sketch-diff2-view.demo.html">sketch-diff2-view</a>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/webui/src/web-components/demo/mock-git-data-service.ts b/webui/src/web-components/demo/mock-git-data-service.ts
new file mode 100644
index 0000000..74937f0
--- /dev/null
+++ b/webui/src/web-components/demo/mock-git-data-service.ts
@@ -0,0 +1,403 @@
+// mock-git-data-service.ts
+// Mock implementation of GitDataService for the demo environment
+
+import { GitDataService, GitDiffFile } from '../git-data-service';
+import { GitLogEntry } from '../../types';
+
+/**
+ * Demo implementation of GitDataService with canned responses
+ */
+export class MockGitDataService implements GitDataService {
+  constructor() {
+    console.log('MockGitDataService instance created');
+  }
+
+  // Mock commit history
+  private mockCommits: GitLogEntry[] = [
+    {
+      hash: 'abc123456789',
+      subject: 'Implement new file picker UI',
+      refs: ['HEAD', 'main']
+    },
+    {
+      hash: 'def987654321',
+      subject: 'Add range picker component',
+      refs: []
+    },
+    {
+      hash: 'ghi456789123',
+      subject: 'Fix styling issues in navigation',
+      refs: []
+    },
+    {
+      hash: 'jkl789123456',
+      subject: 'Initial commit',
+      refs: ['sketch-base']
+    }
+  ];
+
+  // Mock diff files for various scenarios
+  private mockDiffFiles: GitDiffFile[] = [
+    {
+      path: 'src/components/FilePicker.js',
+      status: 'A',
+      new_mode: '100644',
+      old_mode: '000000',
+      old_hash: '0000000000000000000000000000000000000000',
+      new_hash: 'def0123456789abcdef0123456789abcdef0123'
+    },
+    {
+      path: 'src/components/RangePicker.js',
+      status: 'A',
+      new_mode: '100644',
+      old_mode: '000000',
+      old_hash: '0000000000000000000000000000000000000000',
+      new_hash: 'cde0123456789abcdef0123456789abcdef0123'
+    },
+    {
+      path: 'src/components/App.js',
+      status: 'M',
+      new_mode: '100644',
+      old_mode: '100644',
+      old_hash: 'abc0123456789abcdef0123456789abcdef0123',
+      new_hash: 'bcd0123456789abcdef0123456789abcdef0123'
+    },
+    {
+      path: 'src/styles/main.css',
+      status: 'M',
+      new_mode: '100644',
+      old_mode: '100644',
+      old_hash: 'fgh0123456789abcdef0123456789abcdef0123',
+      new_hash: 'ghi0123456789abcdef0123456789abcdef0123'
+    }
+  ];
+
+  // Mock file content for different files and commits
+  private appJSOriginal = `function App() {
+  return (
+    <div className="app">
+      <header>
+        <h1>Git Diff Viewer</h1>
+      </header>
+      <main>
+        <p>Select a file to view differences</p>
+      </main>
+    </div>
+  );
+}`;
+
+  private appJSModified = `function App() {
+  const [files, setFiles] = useState([]);
+  const [selectedFile, setSelectedFile] = useState(null);
+  
+  // Load commits and files
+  useEffect(() => {
+    // Code to load commits would go here
+    // setCommits(...);
+  }, []);
+  
+  return (
+    <div className="app">
+      <header>
+        <h1>Git Diff Viewer</h1>
+      </header>
+      <main>
+        <FilePicker files={files} onFileSelect={setSelectedFile} />
+        <div className="diff-view">
+          {selectedFile ? (
+            <div>Diff view for {selectedFile.path}</div>
+          ) : (
+            <p>Select a file to view differences</p>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}`;
+
+  private filePickerJS = `function FilePicker({ files, onFileSelect }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  
+  useEffect(() => {
+    // Reset selection when files change
+    setSelectedIndex(0);
+    if (files.length > 0) {
+      onFileSelect(files[0]);
+    }
+  }, [files, onFileSelect]);
+  
+  const handleNext = () => {
+    if (selectedIndex < files.length - 1) {
+      const newIndex = selectedIndex + 1;
+      setSelectedIndex(newIndex);
+      onFileSelect(files[newIndex]);
+    }
+  };
+  
+  const handlePrevious = () => {
+    if (selectedIndex > 0) {
+      const newIndex = selectedIndex - 1;
+      setSelectedIndex(newIndex);
+      onFileSelect(files[newIndex]);
+    }
+  };
+  
+  return (
+    <div className="file-picker">
+      <select value={selectedIndex} onChange={(e) => {
+        const index = parseInt(e.target.value, 10);
+        setSelectedIndex(index);
+        onFileSelect(files[index]);
+      }}>
+        {files.map((file, index) => (
+          <option key={file.path} value={index}>
+            {file.status} {file.path}
+          </option>
+        ))}
+      </select>
+      
+      <div className="navigation-buttons">
+        <button 
+          onClick={handlePrevious} 
+          disabled={selectedIndex === 0}
+        >
+          Previous
+        </button>
+        <button 
+          onClick={handleNext} 
+          disabled={selectedIndex === files.length - 1}
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}`;
+
+  private rangePickerJS = `function RangePicker({ commits, onRangeChange }) {
+  const [rangeType, setRangeType] = useState('range');
+  const [startCommit, setStartCommit] = useState(commits[0]);
+  const [endCommit, setEndCommit] = useState(commits[commits.length - 1]);
+
+  const handleTypeChange = (e) => {
+    setRangeType(e.target.value);
+    if (e.target.value === 'single') {
+      onRangeChange({ type: 'single', commit: startCommit });
+    } else {
+      onRangeChange({ type: 'range', from: startCommit, to: endCommit });
+    }
+  };
+
+  return (
+    <div className="range-picker">
+      <div className="range-type-selector">
+        <label>
+          <input 
+            type="radio" 
+            value="range" 
+            checked={rangeType === 'range'} 
+            onChange={handleTypeChange} 
+          />
+          Commit Range
+        </label>
+        <label>
+          <input 
+            type="radio" 
+            value="single" 
+            checked={rangeType === 'single'} 
+            onChange={handleTypeChange} 
+          />
+          Single Commit
+        </label>
+      </div>
+    </div>
+  );
+}`;
+
+  private mainCSSOriginal = `body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.app {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  margin-bottom: 20px;
+}
+
+h1 {
+  color: #333;
+}`;
+
+  private mainCSSModified = `body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f5f5f5;
+}
+
+.app {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  margin-bottom: 20px;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 10px;
+}
+
+h1 {
+  color: #333;
+}
+
+.file-picker {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.file-picker select {
+  flex: 1;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+.navigation-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+button {
+  padding: 8px 12px;
+  background-color: #4a7dfc;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}`;
+
+  async getCommitHistory(initialCommit?: string): Promise<GitLogEntry[]> {
+    console.log(`[MockGitDataService] Getting commit history from ${initialCommit || 'beginning'}`);
+    
+    // If initialCommit is provided, return commits from that commit to HEAD
+    if (initialCommit) {
+      const startIndex = this.mockCommits.findIndex(commit => commit.hash === initialCommit);
+      if (startIndex >= 0) {
+        return this.mockCommits.slice(0, startIndex + 1);
+      }
+    }
+    
+    return [...this.mockCommits];
+  }
+
+  async getDiff(from: string, to: string): Promise<GitDiffFile[]> {
+    console.log(`[MockGitDataService] Getting diff from ${from} to ${to}`);
+    
+    return [...this.mockDiffFiles];
+  }
+
+  async getCommitDiff(commit: string): Promise<GitDiffFile[]> {
+    console.log(`[MockGitDataService] Getting diff for commit ${commit}`);
+    
+    // Return a subset of files for specific commits
+    if (commit === 'abc123456789') {
+      return this.mockDiffFiles.slice(0, 2);
+    } else if (commit === 'def987654321') {
+      return this.mockDiffFiles.slice(1, 3);
+    }
+    
+    // For other commits, return all files
+    return [...this.mockDiffFiles];
+  }
+
+  async getFileContent(fileHash: string): Promise<string> {
+    console.log(`[MockGitDataService] Getting file content for hash: ${fileHash}`);
+    
+    // Return different content based on the file hash
+    if (fileHash === 'bcd0123456789abcdef0123456789abcdef0123') {
+      return this.appJSModified;
+    } else if (fileHash === 'abc0123456789abcdef0123456789abcdef0123') {
+      return this.appJSOriginal;
+    } else if (fileHash === 'def0123456789abcdef0123456789abcdef0123') {
+      return this.filePickerJS;
+    } else if (fileHash === 'cde0123456789abcdef0123456789abcdef0123') {
+      return this.rangePickerJS;
+    } else if (fileHash === 'ghi0123456789abcdef0123456789abcdef0123') {
+      return this.mainCSSModified;
+    } else if (fileHash === 'fgh0123456789abcdef0123456789abcdef0123') {
+      return this.mainCSSOriginal;
+    }
+    
+    // Return empty string for unknown file hashes
+    return '';
+  }
+
+  async getBaseCommitRef(): Promise<string> {
+    console.log('[MockGitDataService] Getting base commit ref');
+    
+    // Find the commit with the sketch-base ref
+    const baseCommit = this.mockCommits.find(commit => 
+      commit.refs && commit.refs.includes('sketch-base')
+    );
+    
+    if (baseCommit) {
+      return baseCommit.hash;
+    }
+    
+    // Fallback to the last commit in our list
+    return this.mockCommits[this.mockCommits.length - 1].hash;
+  }
+
+  // Helper to simulate network delay
+  private delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+  
+  async getWorkingCopyContent(filePath: string): Promise<string> {
+    console.log(`[MockGitDataService] Getting working copy content for path: ${filePath}`);
+    
+    // Return different content based on the file path
+    if (filePath === 'src/components/App.js') {
+      return this.appJSModified;
+    } else if (filePath === 'src/components/FilePicker.js') {
+      return this.filePickerJS;
+    } else if (filePath === 'src/components/RangePicker.js') {
+      return this.rangePickerJS;
+    } else if (filePath === 'src/styles/main.css') {
+      return this.mainCSSModified;
+    }
+    
+    // Return empty string for unknown file paths
+    return '';
+  }
+  
+  async getUnstagedChanges(from: string = 'HEAD'): Promise<GitDiffFile[]> {
+    console.log(`[MockGitDataService] Getting unstaged changes from ${from}`);
+    
+    // Create a new array of files with 0000000... as the new hashes
+    // to simulate unstaged changes
+    return this.mockDiffFiles.map(file => ({
+      ...file,
+      newHash: '0000000000000000000000000000000000000000'
+    }));
+  }
+  
+  async saveFileContent(filePath: string, content: string): Promise<void> {
+    console.log(`[MockGitDataService] Saving file content for path: ${filePath}`);
+    // Simulate a network delay
+    await this.delay(500);
+    // In a mock implementation, we just log the save attempt
+    console.log(`File would be saved: ${filePath} (${content.length} characters)`);
+    // Return void as per interface
+  }
+
+}
\ No newline at end of file
diff --git a/webui/src/web-components/demo/sketch-diff2-view.demo.html b/webui/src/web-components/demo/sketch-diff2-view.demo.html
new file mode 100644
index 0000000..da9e46f
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-diff2-view.demo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sketch Monaco Diff View Demo</title>
+  <script type="module">
+    // Set up the demo environment with mock data service
+    import { MockGitDataService } from './mock-git-data-service.ts';
+    import '../sketch-diff2-view.ts';
+    
+    // Wait for DOM content to be loaded before initializing components
+    document.addEventListener('DOMContentLoaded', () => {
+      // Create a mock service instance
+      const mockService = new MockGitDataService();
+      console.log('Demo initialized with MockGitDataService');
+      
+      // Get the diff2 view component and set its gitService property
+      const diff2View = document.querySelector('sketch-diff2-view');
+      if (diff2View) {
+        diff2View.gitService = mockService;
+      }
+    });
+  </script>
+  <style>
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    h1 {
+      color: #333;
+      margin-bottom: 2rem;
+    }
+
+    .control-panel {
+      margin-bottom: 2rem;
+      padding: 1rem;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+    }
+    
+    .demo-container {
+      display: flex;
+      height: 80vh; /* Use viewport height to ensure good sizing */
+      min-height: 600px; /* Minimum height */
+      border: 1px solid #ddd;
+      margin-top: 20px;
+      margin-bottom: 30px;
+    }
+
+    sketch-diff2-view {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+<body>
+  <h1>Sketch Monaco Diff View Demo</h1>
+
+  <div class="control-panel">
+    <p>This demonstrates the Monaco-based diff view with range and file pickers.</p>
+    <p>Using mock data to simulate the real API responses.</p>
+  </div>
+
+  <div class="demo-container">
+    <sketch-diff2-view></sketch-diff2-view>
+  </div>
+  
+
+</body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-monaco-view.demo.html b/webui/src/web-components/demo/sketch-monaco-view.demo.html
new file mode 100644
index 0000000..92da292
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-monaco-view.demo.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sketch Monaco Viewer Demo</title>
+    <script type="module" src="../sketch-monaco-view.ts"></script>
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+          Arial, sans-serif;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 2rem;
+      }
+
+      .control-panel {
+        margin-bottom: 2rem;
+        padding: 1rem;
+        background-color: #f0f0f0;
+        border-radius: 4px;
+      }
+      
+      button {
+        padding: 8px 12px;
+        background-color: #4285f4;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-right: 8px;
+      }
+      
+      button:hover {
+        background-color: #3367d6;
+      }
+      
+      sketch-monaco-view {
+        margin-top: 20px;
+        height: 500px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sketch Monaco Viewer Demo</h1>
+
+    <div class="control-panel">
+      <p>This is a demo page for the sketch-monaco-view component.</p>
+      <div>
+        <button id="example1">Example 1: JavaScript</button>
+        <button id="example2">Example 2: HTML</button>
+        <button id="example3">Example 3: Go</button>
+      </div>
+    </div>
+
+    <sketch-monaco-view id="diffEditor"></sketch-monaco-view>
+    
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const diffEditor = document.getElementById('diffEditor');
+        
+        // Set initial example
+        diffEditor.originalCode = `function hello() {
+  console.log("Hello World");
+  return true;
+}`;
+        
+        diffEditor.modifiedCode = `function hello() {
+  // Add a comment
+  console.log("Hello Updated World");
+  return true;
+}`;
+        
+        // Example 1: JavaScript
+        document.getElementById('example1').addEventListener('click', () => {
+          diffEditor.setOriginalCode(
+            `function calculateTotal(items) {
+  return items
+    .map(item => item.price * item.quantity)
+    .reduce((a, b) => a + b, 0);
+}`,
+            'original.js'
+          );
+          
+          diffEditor.setModifiedCode(
+            `function calculateTotal(items) {
+  // Apply discount if available
+  return items
+    .map(item => {
+      const price = item.discount ? 
+        item.price * (1 - item.discount) : 
+        item.price;
+      return price * item.quantity;
+    })
+    .reduce((a, b) => a + b, 0);
+}`,
+            'modified.js'
+          );
+        });
+        
+        // Example 2: HTML
+        document.getElementById('example2').addEventListener('click', () => {
+          diffEditor.setOriginalCode(
+            `<!DOCTYPE html>
+<html>
+<head>
+  <title>Demo Page</title>
+</head>
+<body>
+  <h1>Hello World</h1>
+  <p>This is a paragraph.</p>
+</body>
+</html>`,
+            'original.html'
+          );
+          
+          diffEditor.setModifiedCode(
+            `<!DOCTYPE html>
+<html>
+<head>
+  <title>Demo Page</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header>
+    <h1>Hello World</h1>
+  </header>
+  <main>
+    <p>This is a paragraph with some <strong>bold</strong> text.</p>
+  </main>
+  <footer>
+    <p>&copy; 2025</p>
+  </footer>
+</body>
+</html>`,
+            'modified.html'
+          );
+        });
+        
+        // Example 3: Go
+        document.getElementById('example3').addEventListener('click', () => {
+          diffEditor.setOriginalCode(
+            `package main
+
+import "fmt"
+
+func main() {
+	fmt.Println("Hello, world!")
+}`,
+            'original.go'
+          );
+          
+          diffEditor.setModifiedCode(
+            `package main
+
+import (
+	"fmt"
+	"time"
+)
+
+func main() {
+	fmt.Println("Hello, world!")
+	fmt.Printf("The time is %s\n", time.Now().Format(time.RFC3339))
+}`,
+            'modified.go'
+          );
+        });
+      });
+    </script>
+  </body>
+</html>