gh-here 1.1.0 → 2.0.0

package/bin/gh-here.js

@@ -9,7 +9,8 @@ const { setupRoutes } = require('../lib/server');
 
 // Parse command line arguments
 const args = process.argv.slice(2);
-const openBrowser = args.includes('--open') || args.includes('-o');
+const noOpen = args.includes('--no-open');
+const openBrowser = !noOpen; // Default is to open browser
 const helpRequested = args.includes('--help') || args.includes('-h');
 
 // Check for port specification
@@ -37,17 +38,17 @@ gh-here - GitHub-like local file browser
 Usage: npx gh-here [options]
 
 Options:
-  --open, -o              Open browser automatically
+  --no-open               Do not open browser automatically
   --browser=<name>        Specify browser (safari, chrome, firefox, arc)
   --port=<number>         Specify port number (default: 5555)
   --help, -h              Show this help message
 
 Examples:
-  npx gh-here                           Start server on port 5555 (or next available)
-  npx gh-here --open                    Start server and open browser
-  npx gh-here --port=8080               Start server on port 8080
-  npx gh-here --open --browser=safari   Start server and open in Safari
-  npx gh-here --open --browser=arc      Start server and open in Arc
+  npx gh-here                           Start server and open browser
+  npx gh-here --no-open                 Start server without opening browser
+  npx gh-here --port=8080               Start server on port 8080 and open browser
+  npx gh-here --browser=safari          Start server and open in Safari
+  npx gh-here --browser=arc             Start server and open in Arc
 `);
   process.exit(0);
 }
@@ -181,8 +182,6 @@ async function startServer() {
       if (openBrowser) {
         console.log(`🌍 Opening browser...`);
         setTimeout(() => openBrowserToUrl(url), 1000);
-      } else {
-        console.log(`💡 Tip: Use --open flag to launch browser automatically`);
       }
     });
   } catch (error) {

package/blog-post.md

@@ -0,0 +1,100 @@
+# Why gh-here is the Perfect Tool for Terminal-Heavy Developers
+
+If you're like most developers in 2025, you probably spend a lot of time in the terminal. You're using Claude Code to generate and refactor code, running commands left and right, and iterating quickly on projects that haven't even been pushed to GitHub yet. But sometimes you need to step back and get a bird's-eye view of your codebase—and that's where `gh-here` shines.
+
+## The Gap Between Terminal and IDE
+
+Picture this scenario: You're deep in a terminal session, using Claude Code to implement a new feature. You've got files scattered across multiple directories, you're testing things with curl, and you're in that flow state where opening a heavy IDE would just break your momentum. But you need to:
+
+- Quickly browse through your project structure
+- Check what files you've modified
+- Preview a README or markdown file
+- Navigate between related files without losing context
+- See language distribution across your codebase
+
+This is the exact gap that `gh-here` fills.
+
+## Built for Modern Development Workflows
+
+### 1. **Perfect for AI-Assisted Development**
+When you're working with Claude Code or GitHub Copilot, you're often generating and modifying files rapidly. `gh-here` gives you an instant, GitHub-like interface to review what's been changed without committing to version control or opening a full IDE.
+
+### 2. **Ideal for Pre-Push Workflows**
+Not everything needs to hit GitHub immediately. Whether you're experimenting with a proof of concept or working on a feature branch, `gh-here` lets you navigate and review your local changes in a familiar, web-based interface.
+
+### 3. **Terminal-Native but GUI-Friendly**
+Launch it with a single command (`gh-here`) from any directory, and instantly get a clean, GitHub-inspired interface in your browser. No configuration, no setup—just point and browse.
+
+## Real-World Use Cases
+
+**Scenario 1: Code Review Before Push**
+```bash
+$ claude "implement user authentication system"
+# ... lots of generated files and changes
+$ gh-here
+# Browse through generated files, check git status, review changes
+$ git add . && git commit -m "Add user authentication"
+```
+
+**Scenario 2: Project Exploration**
+```bash
+$ git clone some-interesting-repo
+$ cd some-interesting-repo
+$ gh-here
+# Instantly get an overview: languages used, file structure, README preview
+```
+
+**Scenario 3: Documentation Review**
+```bash
+$ claude "update all the documentation"
+$ gh-here
+# Preview all the markdown files in GitHub-style rendering
+# Check if everything looks good before committing
+```
+
+## Why Not Just Use GitHub or an IDE?
+
+**GitHub**: Your code isn't pushed yet, or you're working on experimental changes you don't want in version control.
+
+**IDE**: Too heavy for quick browsing, breaks your terminal flow, takes time to open and index.
+
+**File Explorer**: No syntax highlighting, no git integration, no markdown rendering, no language stats.
+
+**Terminal**: Great for editing, terrible for browsing and getting visual context.
+
+## The Sweet Spot
+
+`gh-here` hits the perfect sweet spot:
+- **Lightweight**: Starts instantly, no heavy indexing
+- **Familiar**: GitHub-style interface that every developer knows
+- **Integrated**: Shows git status, handles various file types, renders markdown
+- **Flexible**: Works with any directory, whether it's a git repo or not
+- **Terminal-friendly**: Launch with one command, works alongside your existing workflow
+
+## Features That Just Make Sense
+
+- **Language statistics**: Instantly see what technologies your project uses
+- **Git integration**: Visual git status indicators, diff viewing
+- **File type support**: Syntax highlighting, image viewing, markdown rendering
+- **Search functionality**: Quick file search with keyboard shortcuts
+- **Breadcrumb navigation**: Always know where you are in your project
+
+## Perfect for 2025 Development
+
+As development workflows become more AI-assisted and terminal-centric, tools like `gh-here` become essential. You're not always in an IDE, you're not always ready to push to GitHub, but you always need to understand your codebase structure and changes.
+
+It's the missing link between your terminal workflow and the visual context you need to stay productive.
+
+## Get Started
+
+```bash
+npm install -g gh-here
+cd your-project
+gh-here
+```
+
+That's it. Your local codebase is now browsable in a clean, GitHub-style interface at `localhost:5556`.
+
+---
+
+*Built for developers who live in the terminal but occasionally need a better view of their code.*

package/lib/file-utils.js

@@ -256,9 +256,53 @@ function formatBytes(bytes) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
 
+/**
+ * File type detection functions
+ */
+function isImageFile(filePathOrExt) {
+  const ext = getExtension(filePathOrExt);
+  const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'tiff', 'ico'];
+  return imageExtensions.includes(ext);
+}
+
+function isBinaryFile(filePathOrExt) {
+  const ext = getExtension(filePathOrExt);
+  const binaryExtensions = [
+    // Images (handled separately)
+    'png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'tiff', 'ico',
+    // Archives
+    'zip', 'tar', 'gz', 'rar', '7z', 
+    // Executables
+    'exe', 'bin', 'app', 'deb', 'rpm',
+    // Documents
+    'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx',
+    // Media
+    'mp4', 'mov', 'avi', 'mkv', 'mp3', 'wav', 'flac',
+    // Other
+    'class', 'so', 'dll', 'dylib'
+  ];
+  return binaryExtensions.includes(ext);
+}
+
+function isTextFile(filePathOrExt) {
+  return !isBinaryFile(filePathOrExt);
+}
+
+function getExtension(filePathOrExt) {
+  // If it's already just an extension (no dots), return as-is
+  if (!filePathOrExt.includes('.') && !filePathOrExt.includes('/') && !filePathOrExt.includes('\\')) {
+    return filePathOrExt.toLowerCase();
+  }
+  // Extract extension from file path
+  return path.extname(filePathOrExt).toLowerCase().slice(1);
+}
+
 module.exports = {
   getFileIcon,
   getLanguageFromExtension,
   getLanguageColor,
-  formatBytes
+  formatBytes,
+  isImageFile,
+  isBinaryFile,
+  isTextFile
 };

package/lib/renderers.js

@@ -5,7 +5,7 @@ const marked = require('marked');
 const octicons = require('@primer/octicons');
 const { exec } = require('child_process');
 
-const { getFileIcon, getLanguageFromExtension, getLanguageColor, formatBytes } = require('./file-utils');
+const { getFileIcon, getLanguageFromExtension, getLanguageColor, formatBytes, isImageFile, isBinaryFile, isTextFile } = require('./file-utils');
 const { getGitStatusIcon, getGitStatusDescription } = require('./git');
 
 /**
@@ -18,7 +18,8 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
   const breadcrumbs = generateBreadcrumbs(currentPath, gitBranch, workingDirName);
   const readmeFile = findReadmeFile(items);
   const readmePreview = readmeFile ? generateReadmePreview(currentPath, readmeFile) : '';
-  const languageStats = generateLanguageStats(items);
+  // Only show language stats on root/top-level directory
+  const languageStats = (!currentPath || currentPath === '.') ? generateLanguageStats(items) : '';
   
   const itemsHtml = items.map(item => `
     <tr class="file-row" data-name="${item.name.toLowerCase()}" data-type="${item.isDirectory ? 'dir' : 'file'}" data-path="${item.path}">
@@ -113,6 +114,7 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
                   ${octicons['chevron-down'].toSVG({ class: 'octicon-chevron' })}
                 </button>
               ` : ''}
+              ${languageStats}
             </div>
             <div class="repo-controls-right">
               <div class="search-container">
@@ -130,7 +132,6 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
       <main>
         <div class="repo-canvas">
           <div class="repo-canvas-content">
-            ${languageStats}
             <div class="file-table-container">
               <table class="file-table" id="file-table">
             <thead>
@@ -242,8 +243,9 @@ function generateLanguageStats(items) {
   `;
 }
 
-async function renderFileDiff(filePath, ext, gitInfo, gitRepoRoot) {
-  const breadcrumbs = generateBreadcrumbs(filePath);
+async function renderFileDiff(filePath, ext, gitInfo, gitRepoRoot, workingDir = null) {
+  const workingDirName = workingDir ? path.basename(workingDir) : null;
+  const breadcrumbs = generateBreadcrumbs(filePath, null, workingDirName);
   
   // Get git diff for the file
   return new Promise((resolve, reject) => {
@@ -369,8 +371,10 @@ function renderRawDiff(diffOutput, ext) {
   return `<div class="raw-diff-container">${linesHtml}</div>`;
 }
 
-async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStatus = null, workingDir) {
-  const breadcrumbs = generateBreadcrumbs(filePath);
+
+async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStatus = null, workingDir = null) {
+  const workingDirName = workingDir ? path.basename(workingDir) : null;
+  const breadcrumbs = generateBreadcrumbs(filePath, null, workingDirName);
   let displayContent;
   let viewToggle = '';
   
@@ -378,7 +382,49 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
   const absolutePath = path.resolve(path.join(workingDir, filePath));
   const hasGitChanges = gitStatus && gitStatus[absolutePath];
   
-  if (ext === 'md') {
+  // Determine file category and handle accordingly
+  if (isImageFile(ext)) {
+    // Handle image files
+    const imageUrl = `/download?path=${encodeURIComponent(filePath)}`;
+    displayContent = `
+      <div class="image-container">
+        <img src="${imageUrl}" alt="${path.basename(filePath)}" class="image-display">
+        <div class="image-info">
+          <span class="image-filename">${path.basename(filePath)}</span>
+        </div>
+      </div>
+    `;
+    
+    // Add diff view for images with git changes
+    if (hasGitChanges) {
+      const currentParams = new URLSearchParams({ path: filePath });
+      const diffUrl = `/?${currentParams.toString()}&view=diff`;
+      
+      viewToggle = `
+        <div class="view-toggle">
+          <a href="/?path=${encodeURIComponent(filePath)}" class="view-btn active">
+            ${octicons.eye.toSVG({ class: 'view-icon' })} View
+          </a>
+          <a href="${diffUrl}" class="view-btn">
+            ${octicons.diff.toSVG({ class: 'view-icon' })} Diff
+          </a>
+        </div>
+      `;
+    }
+  } else if (isBinaryFile(ext) && !isImageFile(ext)) {
+    // Handle other binary files - download only
+    displayContent = `
+      <div class="binary-file-container">
+        <div class="binary-file-info">
+          <h3>Binary File</h3>
+          <p>This is a binary file that cannot be displayed in the browser.</p>
+          <a href="/download?path=${encodeURIComponent(filePath)}" class="btn btn-primary" download="${path.basename(filePath)}">
+            ${octicons.download.toSVG({ class: 'download-icon' })} Download File
+          </a>
+        </div>
+      </div>
+    `;
+  } else if (ext === 'md') {
     if (viewMode === 'raw') {
       const highlighted = hljs.highlight(content, { language: 'markdown' }).value;
       
@@ -468,9 +514,11 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
             <div id="filename-input-container" class="filename-input-container" style="display: none;">
               <input type="text" id="filename-input" class="filename-input" placeholder="Name your file...">
             </div>
-            <button id="edit-btn" class="edit-btn" aria-label="Edit file">
-              ${octicons.pencil.toSVG({ class: 'edit-icon' })}
-            </button>
+            ${isTextFile(ext) ? `
+              <button id="edit-btn" class="edit-btn" aria-label="Edit file">
+                ${octicons.pencil.toSVG({ class: 'edit-icon' })}
+              </button>
+            ` : ''}
             ${viewToggle}
             <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
               ${octicons.moon.toSVG({ class: 'theme-icon' })}
@@ -484,6 +532,7 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
           <div class="file-content">
             ${displayContent}
           </div>
+        ${isTextFile(ext) ? `
         <div id="editor-container" class="editor-container" style="display: none;">
           <div class="editor-header">
             <div class="editor-title">Edit ${path.basename(filePath)}</div>
@@ -497,6 +546,7 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
             <div id="file-editor" class="monaco-editor"></div>
           </div>
         </div>
+        ` : ''}
         </div>
       </main>
     </body>
@@ -504,8 +554,9 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
   `;
 }
 
-function renderNewFile(currentPath) {
-  const breadcrumbs = generateBreadcrumbs(currentPath);
+function renderNewFile(currentPath, workingDir = null) {
+  const workingDirName = workingDir ? path.basename(workingDir) : null;
+  const breadcrumbs = generateBreadcrumbs(currentPath, null, workingDirName);
   
   return `
     <!DOCTYPE html>

package/lib/server.js

@@ -5,6 +5,7 @@ const path = require('path');
 const { getGitStatus, getGitBranch, commitAllChanges, commitSelectedFiles, getGitDiff } = require('./git');
 const { isIgnoredByGitignore, getGitignoreRules } = require('./gitignore');
 const { renderDirectory, renderFileDiff, renderFile, renderNewFile } = require('./renderers');
+const { isImageFile, isBinaryFile } = require('./file-utils');
 
 /**
  * Express server setup and route handlers
@@ -16,6 +17,7 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
   app.use('/static', express.static(path.join(__dirname, '..', 'public')));
   app.use('/octicons', express.static(path.join(__dirname, '..', 'node_modules', '@primer', 'octicons', 'build')));
 
+
   // Download route
   app.get('/download', (req, res) => {
     const filePath = req.query.path || '';
@@ -25,8 +27,16 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
       const stats = fs.statSync(fullPath);
       if (stats.isFile()) {
         const fileName = path.basename(fullPath);
-        res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
-        res.sendFile(fullPath);
+        
+        // For images, serve inline for viewing, otherwise force download
+        if (isImageFile(fullPath)) {
+          // Serve image inline
+          res.sendFile(fullPath);
+        } else {
+          // Force download for non-images
+          res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
+          res.sendFile(fullPath);
+        }
       } else {
         res.status(400).send('Cannot download directories');
       }
@@ -84,16 +94,21 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
         
         res.send(renderDirectory(currentPath, items, showGitignored, gitBranch, gitStatus, workingDir));
       } else {
-        const content = fs.readFileSync(fullPath, 'utf8');
         const ext = path.extname(fullPath).slice(1);
         const viewMode = req.query.view || 'rendered';
         
+        // For image files, don't try to read as text
+        let content = '';
+        if (!isImageFile(fullPath)) {
+          content = fs.readFileSync(fullPath, 'utf8');
+        }
+        
         if (viewMode === 'diff' && isGitRepo) {
           // Check if file has git status
           const absolutePath = path.resolve(fullPath);
           const gitInfo = gitStatus[absolutePath];
           if (gitInfo) {
-            const diffHtml = await renderFileDiff(currentPath, ext, gitInfo, gitRepoRoot);
+            const diffHtml = await renderFileDiff(currentPath, ext, gitInfo, gitRepoRoot, workingDir);
             return res.send(diffHtml);
           }
         }
@@ -108,7 +123,7 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
   // Route for creating new files
   app.get('/new', (req, res) => {
     const currentPath = req.query.path || '';
-    res.send(renderNewFile(currentPath));
+    res.send(renderNewFile(currentPath, workingDir));
   });
 
   // API endpoint to get file content for editing
@@ -122,6 +137,11 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
         return res.status(403).send('Access denied');
       }
       
+      // Check if it's a binary file - prevent editing
+      if (isBinaryFile(fullPath)) {
+        return res.status(400).json({ error: 'Cannot edit binary files' });
+      }
+      
       const content = fs.readFileSync(fullPath, 'utf-8');
       res.send(content);
     } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gh-here",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "A local GitHub-like file browser for viewing code",
   "repository": "https://github.com/corywilkerson/gh-here",
   "main": "index.js",

package/public/styles.css

@@ -499,29 +499,54 @@ main {
 
 /* Old search styles removed - using new GitHub-style search */
 
-/* Language stats */
+/* Language stats in control bar */
 .language-stats {
   display: flex;
-  gap: 16px;
-  margin-bottom: 16px;
-  padding: 12px 0;
-  border-bottom: 1px solid var(--border-primary);
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-left: 16px;
+  max-width: 300px;
+  overflow: hidden;
+  position: relative;
+}
+
+.language-stats:hover {
+  overflow: visible;
+  z-index: 10;
+}
+
+.language-stats:hover::before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: -8px;
+  right: -8px;
+  bottom: -4px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: -1;
+  pointer-events: none;
 }
 
 .lang-stat {
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-size: 12px;
+  gap: 4px;
+  font-size: 11px;
   color: var(--text-secondary);
+  white-space: nowrap;
+  flex-shrink: 0;
+  padding: 2px 0;
 }
 
 .lang-dot {
-  width: 12px;
-  height: 12px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   display: inline-block;
+  flex-shrink: 0;
 }
 
 .lang-name {
@@ -722,6 +747,83 @@ main {
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 }
 
+/* Image viewing styles */
+.image-container {
+  padding: 20px;
+  text-align: center;
+  background-color: var(--bg-primary);
+  border-radius: 6px;
+}
+
+.image-display {
+  max-width: 100%;
+  max-height: 80vh;
+  height: auto;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  background: var(--bg-secondary);
+}
+
+[data-theme="light"] .image-display {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.image-info {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-primary);
+}
+
+.image-filename {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Binary file viewing styles */
+.binary-file-container {
+  padding: 40px 20px;
+  text-align: center;
+  background-color: var(--bg-primary);
+  border-radius: 6px;
+  border: 1px solid var(--border-primary);
+}
+
+.binary-file-info h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+}
+
+.binary-file-info p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+}
+
+.binary-file-info .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.binary-file-info .btn-primary {
+  background-color: var(--link-color);
+  color: white;
+}
+
+.binary-file-info .btn-primary:hover {
+  opacity: 0.9;
+}
+
 /* Line numbers for code viewing */
 .with-line-numbers {
   counter-reset: line;
@@ -1933,6 +2035,31 @@ main {
   height: 14px;
 }
 
+/* General modal overlay */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+  padding: 20px;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
 /* Clean commit modal */
 .commit-modal-overlay {
   position: fixed;