diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
new file mode 100644
index 0000000..9893875
--- /dev/null
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -0,0 +1,373 @@
+// sketch-diff-range-picker.ts
+// Component for selecting commit range for diffs
+
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { GitDataService, DefaultGitDataService } from "./git-data-service";
+import { GitLogEntry } from "../types";
+
+/**
+ * Range type for diff views
+ */
+export type DiffRange = 
+  | { type: 'range'; from: string; to: string } 
+  | { type: 'single'; commit: string };
+
+/**
+ * Component for selecting commit range for diffs
+ */
+@customElement("sketch-diff-range-picker")
+export class SketchDiffRangePicker extends LitElement {
+  @property({ type: Array })
+  commits: GitLogEntry[] = [];
+
+  @state()
+  private rangeType: 'range' | 'single' = 'range';
+
+  @state()
+  private fromCommit: string = '';
+
+  @state()
+  private toCommit: string = '';
+
+  @state()
+  private singleCommit: string = '';
+
+  @state()
+  private loading: boolean = true;
+
+  @state()
+  private error: string | null = null;
+  
+  @property({ attribute: false, type: Object })
+  gitService!: GitDataService;
+  
+  constructor() {
+    super();
+    console.log('SketchDiffRangePicker initialized');
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: var(--font-family, system-ui, sans-serif);
+      color: var(--text-color, #333);
+    }
+
+    .range-picker {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
+      background-color: var(--background-light, #f8f8f8);
+      border-radius: 4px;
+      border: 1px solid var(--border-color, #e0e0e0);
+      flex-wrap: wrap; /* Allow wrapping on small screens */
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .range-type-selector {
+      display: flex;
+      gap: 16px;
+      flex-shrink: 0;
+    }
+
+    .range-type-option {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .commit-selectors {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 12px;
+      flex: 1;
+      flex-wrap: wrap; /* Allow wrapping on small screens */
+    }
+
+    .commit-selector {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      min-width: 200px;
+      max-width: calc(50% - 12px); /* Half width minus half the gap */
+      overflow: hidden;
+    }
+
+    select {
+      padding: 6px 8px;
+      border-radius: 4px;
+      border: 1px solid var(--border-color, #e0e0e0);
+      background-color: var(--background, #fff);
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    label {
+      font-weight: 500;
+      font-size: 14px;
+    }
+
+    .loading {
+      font-style: italic;
+      color: var(--text-muted, #666);
+    }
+
+    .error {
+      color: var(--error-color, #dc3545);
+      font-size: 14px;
+    }
+    
+    @media (max-width: 768px) {
+      .commit-selector {
+        max-width: 100%;
+      }
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Wait for DOM to be fully loaded to ensure proper initialization order
+    if (document.readyState === 'complete') {
+      this.loadCommits();
+    } else {
+      window.addEventListener('load', () => {
+        setTimeout(() => this.loadCommits(), 0); // Give time for provider initialization
+      });
+    }
+  }
+
+  render() {
+    return html`
+      <div class="range-picker">
+        ${this.loading
+          ? html`<div class="loading">Loading commits...</div>`
+          : this.error
+          ? html`<div class="error">${this.error}</div>`
+          : this.renderRangePicker()
+        }
+      </div>
+    `;
+  }
+
+  renderRangePicker() {
+    return html`
+      <div class="range-type-selector">
+        <label class="range-type-option">
+          <input
+            type="radio"
+            name="rangeType"
+            value="range"
+            ?checked=${this.rangeType === 'range'}
+            @change=${() => this.setRangeType('range')}
+          />
+          Commit Range
+        </label>
+        <label class="range-type-option">
+          <input
+            type="radio"
+            name="rangeType"
+            value="single"
+            ?checked=${this.rangeType === 'single'}
+            @change=${() => this.setRangeType('single')}
+          />
+          Single Commit
+        </label>
+      </div>
+
+      <div class="commit-selectors">
+        ${this.rangeType === 'range'
+          ? this.renderRangeSelectors()
+          : this.renderSingleSelector()
+        }
+      </div>
+    `;
+  }
+
+  renderRangeSelectors() {
+    return html`
+      <div class="commit-selector">
+        <label for="fromCommit">From:</label>
+        <select
+          id="fromCommit"
+          .value=${this.fromCommit}
+          @change=${this.handleFromChange}
+        >
+          ${this.commits.map(
+            commit => html`
+              <option value=${commit.hash} ?selected=${commit.hash === this.fromCommit}>
+                ${this.formatCommitOption(commit)}
+              </option>
+            `
+          )}
+        </select>
+      </div>
+      <div class="commit-selector">
+        <label for="toCommit">To:</label>
+        <select
+          id="toCommit"
+          .value=${this.toCommit}
+          @change=${this.handleToChange}
+        >
+          <option value="" ?selected=${this.toCommit === ''}>Uncommitted Changes</option>
+          ${this.commits.map(
+            commit => html`
+              <option value=${commit.hash} ?selected=${commit.hash === this.toCommit}>
+                ${this.formatCommitOption(commit)}
+              </option>
+            `
+          )}
+        </select>
+      </div>
+    `;
+  }
+
+  renderSingleSelector() {
+    return html`
+      <div class="commit-selector">
+        <label for="singleCommit">Commit:</label>
+        <select
+          id="singleCommit"
+          .value=${this.singleCommit}
+          @change=${this.handleSingleChange}
+        >
+          ${this.commits.map(
+            commit => html`
+              <option value=${commit.hash} ?selected=${commit.hash === this.singleCommit}>
+                ${this.formatCommitOption(commit)}
+              </option>
+            `
+          )}
+        </select>
+      </div>
+    `;
+  }
+
+  /**
+   * Format a commit for display in the dropdown
+   */
+  formatCommitOption(commit: GitLogEntry): string {
+    const shortHash = commit.hash.substring(0, 7);
+    let label = `${shortHash} ${commit.subject}`;
+    
+    if (commit.refs && commit.refs.length > 0) {
+      label += ` (${commit.refs.join(', ')})`;
+    }
+    
+    return label;
+  }
+
+  /**
+   * Load commits from the Git data service
+   */
+  async loadCommits() {
+    this.loading = true;
+    this.error = null;
+
+    if (!this.gitService) {
+      console.error('GitService was not provided to sketch-diff-range-picker');
+      throw Error();
+    }
+
+    try {
+      // Get the base commit reference
+      const baseCommitRef = await this.gitService.getBaseCommitRef();
+      
+      // Load commit history
+      this.commits = await this.gitService.getCommitHistory(baseCommitRef);
+      
+      // Set default selections
+      if (this.commits.length > 0) {
+        // For range, default is base to HEAD
+        // TODO: is sketch-base right in the unsafe context, where it's sketch-base-...
+        // should this be startswith?
+        const baseCommit = this.commits.find(c => 
+          c.refs && c.refs.some(ref => ref.includes('sketch-base'))
+        );
+        
+        this.fromCommit = baseCommit ? baseCommit.hash : this.commits[this.commits.length - 1].hash;
+        // Default to Uncommitted Changes by setting toCommit to empty string
+        this.toCommit = ''; // Empty string represents uncommitted changes
+        
+        // For single, default to HEAD
+        this.singleCommit = this.commits[0].hash;
+        
+        // Dispatch initial range event
+        this.dispatchRangeEvent();
+      }
+    } catch (error) {
+      console.error('Error loading commits:', error);
+      this.error = `Error loading commits: ${error.message}`;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  /**
+   * Handle range type change
+   */
+  setRangeType(type: 'range' | 'single') {
+    this.rangeType = type;
+    this.dispatchRangeEvent();
+  }
+
+  /**
+   * Handle From commit change
+   */
+  handleFromChange(event: Event) {
+    const select = event.target as HTMLSelectElement;
+    this.fromCommit = select.value;
+    this.dispatchRangeEvent();
+  }
+
+  /**
+   * Handle To commit change
+   */
+  handleToChange(event: Event) {
+    const select = event.target as HTMLSelectElement;
+    this.toCommit = select.value;
+    this.dispatchRangeEvent();
+  }
+
+  /**
+   * Handle Single commit change
+   */
+  handleSingleChange(event: Event) {
+    const select = event.target as HTMLSelectElement;
+    this.singleCommit = select.value;
+    this.dispatchRangeEvent();
+  }
+
+  /**
+   * Dispatch range change event
+   */
+  dispatchRangeEvent() {
+    const range: DiffRange = this.rangeType === 'range'
+      ? { type: 'range', from: this.fromCommit, to: this.toCommit }
+      : { type: 'single', commit: this.singleCommit };
+    
+    const event = new CustomEvent('range-change', {
+      detail: { range },
+      bubbles: true,
+      composed: true
+    });
+    
+    this.dispatchEvent(event);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-diff-range-picker": SketchDiffRangePicker;
+  }
+}