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