tab demos videos

Author: sagtanih

.gitattributes

@@ -0,0 +1,2 @@
+# Git attributes for amp-tab-demos
+# No Git LFS - using direct MP4 files for GitHub Pages compatibility

.github/workflows/pages.yml

@@ -0,0 +1,37 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: '.'
+          
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,11 @@
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Temporary files
+*.tmp
+*.log

README.md

@@ -0,0 +1,72 @@
+# Amp Tab AI Completion Demos
+
+See how Amp Tab's advanced AI completion compares with other tools across real-world coding scenarios.
+
+## 🎬 **[View Comparisons →](https://sourcegraph-community.github.io/amp-tab-demos/)**
+
+**Click the link above to see side-by-side video comparisons.**
+
+---
+
+## ✨ Features
+
+- **Side-by-side comparisons** - Watch Amp Tab vs competitors simultaneously  
+- **Independent controls** - Each video has its own playback controls
+- **Mobile responsive** - Perfect viewing on any device
+- **Zero dependencies** - Just HTML + JavaScript, no servers needed
+
+## 📁 Repository Structure
+
+```
+amp-tab-demos/
+├── index.html                    # 🎬 Main comparison page (186 lines, demos embedded)
+├── demos/                       # 📁 Video files
+│   ├── delete-interface-fields/
+│   │   ├── README.md           # Demo details & reproduction steps
+│   │   ├── amp_tab.mp4         # Amp Tab demo
+│   │   └── cursor_tab.mp4      # Competitor demo
+│   └── delete-proxy-variable/
+│       ├── README.md           # Demo details & reproduction steps
+│       ├── amp_tab.mp4
+│       └── cursor_tab.mp4
+├── .github/workflows/pages.yml  # Auto-deploy to GitHub Pages
+├── .gitattributes              # Git attributes (no LFS)
+├── .gitignore                  # Standard ignore rules
+├── LICENSE                     # MIT License
+└── README.md                   # This file
+```
+
+## ➕ Adding New Demos
+
+1. **Add videos** to a new folder in `demos/`
+2. **Update the `DEMOS_DATA` object** in `index.html`:
+   ```javascript
+   {
+     "id": "new-demo",
+     "title": "My New Demo", 
+     "description": "Description of what this demo shows...",
+     "tags": ["completion", "refactoring"],
+     "videos": {
+       "amp": "demos/new-demo/amp_tab.mp4",
+       "cursor": "demos/new-demo/cursor_tab.mp4"
+     }
+   }
+   ```
+3. **Commit and push** - GitHub Pages will auto-deploy!
+
+## 🏗️ Extending Beyond Cursor Tab
+
+To add more competitors (VS Code, GitHub Copilot, etc.):
+
+1. **Add video paths** to the `DEMOS_DATA` object in `index.html`:
+   ```javascript
+   "videos": {
+     "amp": "demos/demo-name/amp_tab.mp4",
+     "cursor": "demos/demo-name/cursor_tab.mp4", 
+     "copilot": "demos/demo-name/github_copilot.mp4"
+   }
+   ```
+
+2. **Update the HTML template** in `index.html` to render additional video containers.
+
+The system is designed to be easily extensible for any number of AI completion tools.

demos/delete-interface-fields/README.md

@@ -0,0 +1,24 @@
+# Delete Interface Fields
+
+## Tags
+- deletion
+- long-range-edits
+
+## Demo Videos
+
+### Amp Tab
+![Amp Tab Demo](amp_tab.mp4)
+
+### Cursor Tab
+![Cursor Tab Demo](cursor_tab.mp4)
+
+## How to Reproduce
+
+1. Go to https://github.com/sourcegraph/amp
+2. Checkout to commit `94f5e9a1c9ef6ad6f77d6f889e8bf6510180b7b6`
+3. Navigate to `vscode/src/autoedit/context/retrievers/diagnostics-retriever.ts`
+4. Follow the steps from the video
+
+## Description
+
+This demo demonstrates AI-assisted deletion and long-range editing across interface definitions in TypeScript code. It showcases how Amp Tab handles complex refactoring scenarios involving interface modifications and their cascading effects throughout the codebase.

demos/delete-interface-fields/amp_tab.mp4

@@ -0,0 +1,23 @@
+# Delete Proxy Variable
+
+## Tags
+- deletion
+
+## Demo Videos
+
+### Amp Tab
+![Amp Tab Demo](amp_tab.mp4)
+
+### Cursor Tab
+![Cursor Tab Demo](cursor_tab.mp4)
+
+## How to Reproduce
+
+1. Go to https://github.com/sourcegraph/src-cli
+2. Checkout to commit `f454b2c46697d3249a9eadcbcb2d3fe98f72a078`
+3. Navigate to `cmd/src/main.go`
+4. Follow the steps from the video
+
+## Description
+
+This demo shows AI completion behavior when removing proxy variables and updating related code structures in Go. It highlights how Amp Tab intelligently handles variable deletion and updates dependent code sections automatically.