gh-here 2.1.0 → 3.0.1

package/.claude/settings.local.json

@@ -1,21 +1,30 @@
 {
   "permissions": {
     "allow": [
-      "Bash(if [ -f scripts/lint ])",
-      "Bash(then scripts/lint)",
-      "Bash(elif [ -f script/lint ])",
-      "Bash(then script/lint)",
-      "Bash(elif [ -f package.json ])",
-      "Bash(then npm run lint)",
-      "Bash(else echo \"No linting script found\")",
-      "Bash(fi)",
-      "Bash(git checkout:*)",
+      "Bash(chmod:*)",
+      "Bash(npm install)",
+      "Bash(npm start)",
+      "Bash(pkill:*)",
+      "Bash(node:*)",
+      "Bash(curl:*)",
+      "Bash(npm install:*)",
+      "Bash(git init:*)",
       "Bash(git add:*)",
       "Bash(git commit:*)",
+      "Bash(git rm:*)",
+      "Bash(ssh:*)",
+      "Bash(git restore:*)",
+      "Bash(npx gh-here:*)",
+      "Bash(git checkout:*)",
       "Bash(git push:*)",
-      "Bash(gh pr view:*)"
+      "Bash(git pull:*)",
+      "Bash(npm publish:*)",
+      "Bash(timeout:*)",
+      "Bash(npm version:*)",
+      "Bash(gh release create:*)",
+      "Bash(tree:*)"
     ],
     "deny": [],
     "ask": []
   }
-}
+}

package/README.md

@@ -1,22 +1,14 @@
 # gh-here
 
-A local GitHub-like file browser for viewing and exploring codebases in your browser. Launch it in any folder to get a beautiful web-based directory browser with syntax highlighting and powerful navigation features.
-
-## Why?
-
-TUIs (Terminal User Interfaces) like Claude Code, Google Gemini CLI, and Cursor have become very popular tools for working on codebases, but they don't provide a visual view into the directories and files themselves. gh-here exists to fill that gap, so you can easily explore your project files in a familiar GitHub-esque browser GUI.
-
-<!-- Test change for commit interface -->
+A fast, local GitHub-style file browser for exploring codebases. Browse directories with a file tree, view files with syntax highlighting, and explore git diffs - all in your browser.
 
 ## Installation
 
-Run gh-here directly with npx (no installation required):
-
 ```bash
 npx gh-here
 ```
 
-Or install it globally:
+Or install globally:
 
 ```bash
 npm install -g gh-here
@@ -24,102 +16,44 @@ npm install -g gh-here
 
 ## Usage
 
-Navigate to any directory and run:
-
 ```bash
 gh-here                           # Start server on available port
-gh-here --open                    # Start server and open browser
-gh-here --port=8080               # Start server on port 8080
-gh-here --open --browser=safari   # Start server and open in Safari
-gh-here --open --browser=arc      # Start server and open in Arc
+gh-here --open                    # Start and open browser (default)
+gh-here --port=8080               # Use specific port
+gh-here --open --browser=safari   # Open in Safari
 ```
 
-The app will automatically find an available port starting from 5555 and serve your current directory with a GitHub-like interface.
-
 ## Features
 
-### 📁 File Browsing
-- Beautiful directory browsing with specific file type icons
-- README preview with beautiful markdown rendering
-- Language statistics for project overview
-- Quick actions (copy path, download files, edit, rename, delete)
-- .gitignore support with toggle functionality
-- File and folder creation, editing, renaming, and deletion
-
-### 🎨 Code Viewing & Editing
-- VS Code-quality Monaco Editor with advanced syntax highlighting for 30+ languages
-- GitHub-style line numbers with selection (click, shift-click, ctrl-click)
-- Professional in-browser file editing with auto-save to localStorage
-- Draft management with persistence across sessions
-- Raw and rendered markdown views
-- Shareable URLs with line selections (`#L10-L20`)
-- Monaco Editor features: IntelliSense, bracket matching, folding
-
-### 🔀 Git Integration
-- Automatic git repository detection
-- Clean git status indicators with colored dots in dedicated column
-- Smart status detection for files within untracked directories
-- Professional inline diff viewer with syntax highlighting
-- View/Diff/Edit mode toggle for files with changes
-- Beautiful raw git diff display with color coding
-- Git branch display in navigation header
-- Visual status indicators: modified (dot), untracked (purple dot), added, deleted
-
-### ⌨️ Keyboard Navigation
-- `j`/`k` or arrow keys to navigate files
-- `Enter` or `o` to open files/folders
-- `e` to edit focused file
-- `c` to create new file
-- `/` or `s` to focus search
-- `h` to go up directory
-- `t` to toggle theme
-- `i` to toggle .gitignore filter
-- `d` to show diff for focused file (if git changes)
-- `r` to refresh
-- `?` to show keyboard shortcuts
-- `Ctrl/Cmd + S` to save file (in editor)
-- `Esc` to close editor/dialogs
-
-### 🌙 Themes & UI
-- GitHub dark and light themes
-- Smart header path (shows "gh-here" at root, path when browsing)
-- Search functionality with keyboard shortcuts
-- Breadcrumb navigation
-- Error handling and loading states
-- Notification system for user feedback
-
-## Language Support
-
-Supports syntax highlighting for 30+ languages including JavaScript, TypeScript, Python, Go, Rust, Java, C/C++, and many more through Monaco Editor integration.
+### Core
+- **File Tree Sidebar** - Navigate your repository structure with an interactive file tree
+- **Context-Aware Search** - Global repository search or filter the file tree
+- **Client-Side Navigation** - Fast page transitions without full reloads
+- **Syntax Highlighting** - Support for 30+ languages via highlight.js
+- **Git Integration** - Status indicators and diff viewer with line numbers
+
+### UI/UX
+- **Gitignore Toggle** - Show/hide gitignored files (persists in localStorage)
+- **Dark/Light Themes** - Toggle between themes
+- **README Preview** - Automatic markdown rendering
+- **Language Statistics** - See breakdown of languages in your repo
+- **File Operations** - Copy file paths, download files, view raw content
 
 ## Keyboard Shortcuts
 
-| Shortcut | Action |
-|----------|--------|
-| `j` / `↓` | Move down |
-| `k` / `↑` | Move up |
-| `Enter` / `o` | Open file/folder |
-| `e` | Edit focused file |
-| `c` | Create new file |
-| `h` | Go up directory |
-| `/` / `s` | Focus search |
-| `Ctrl/Cmd + K` | Focus search |
-| `Ctrl/Cmd + G` | Go to top |
-| `Shift + G` | Go to bottom |
-| `t` | Toggle theme |
-| `i` | Toggle .gitignore filter |
-| `d` | Show diff for focused file |
-| `r` | Refresh page |
-| `?` | Show keyboard shortcuts |
-| `Ctrl/Cmd + S` | Save file (in editor) |
-| `Esc` | Close editor/dialogs |
-
-## Line Selection (Code Files)
-
-- **Click line number**: Select single line
-- **Shift + Click**: Select range
-- **Ctrl/Cmd + Click**: Multi-select lines
-- **URLs**: Automatically updated (`#L5`, `#L10-L20`, `#L1,L5-L10`)
+| Key | Action |
+|-----|--------|
+| `Cmd/Ctrl + K` | Focus search |
+| `Escape` | Close search/modals |
+
+## How It Works
+
+gh-here runs a local Express server that serves a read-only view of your codebase. It:
+
+1. Respects your `.gitignore` (optional toggle to show ignored files)
+2. Shows git status and diffs for modified files
+3. Provides a familiar GitHub-like interface
+4. Works entirely offline - no data leaves your machine
 
 ## Development
 
@@ -128,11 +62,13 @@ npm install
 npm start
 ```
 
-Navigate to `http://localhost:5555` to view the interface.
-
 ## Dependencies
 
-- **express** - Web server
-- **highlight.js** - Syntax highlighting  
-- **marked** - Markdown rendering
-- **@primer/octicons** - GitHub icons
+- express - Web server
+- highlight.js - Syntax highlighting
+- marked - Markdown rendering
+- @primer/octicons - GitHub icons
+
+## License
+
+MIT

package/lib/constants.js

@@ -0,0 +1,38 @@
+/**
+ * Backend constants and configuration
+ */
+
+module.exports = {
+  HTTP_STATUS: {
+    OK: 200,
+    BAD_REQUEST: 400,
+    FORBIDDEN: 403,
+    NOT_FOUND: 404,
+    CONFLICT: 409,
+    INTERNAL_ERROR: 500
+  },
+
+  ERROR_MESSAGES: {
+    NOT_GIT_REPO: 'Not a git repository',
+    COMMIT_MESSAGE_REQUIRED: 'Commit message is required',
+    NO_FILES_SELECTED: 'No files selected',
+    FILE_PATH_REQUIRED: 'File path is required',
+    ACCESS_DENIED: 'Access denied',
+    FILE_NOT_FOUND: 'File not found',
+    ITEM_NOT_FOUND: 'Item not found',
+    ITEM_ALREADY_EXISTS: 'Item already exists',
+    CANNOT_EDIT_BINARY: 'Cannot edit binary files',
+    CANNOT_DOWNLOAD_DIRECTORIES: 'Cannot download directories'
+  },
+
+  GIT_STATUS_MAP: {
+    'A': 'added',
+    'M': 'modified',
+    'D': 'deleted',
+    'R': 'renamed',
+    '??': 'untracked',
+    'MM': 'mixed',
+    'AM': 'mixed',
+    'AD': 'mixed'
+  }
+};

package/lib/error-handler.js

@@ -0,0 +1,55 @@
+/**
+ * Centralized error handling
+ */
+
+const { HTTP_STATUS, ERROR_MESSAGES } = require('./constants');
+
+/**
+ * Formats error response
+ */
+function formatErrorResponse(error, statusCode = HTTP_STATUS.INTERNAL_ERROR) {
+  return {
+    success: false,
+    error: error.message || error,
+    statusCode
+  };
+}
+
+/**
+ * Sends error response
+ */
+function sendError(res, message, statusCode = HTTP_STATUS.INTERNAL_ERROR) {
+  res.status(statusCode).json({
+    success: false,
+    error: message
+  });
+}
+
+/**
+ * Handles async route errors
+ */
+function asyncHandler(fn) {
+  return (req, res, next) => {
+    Promise.resolve(fn(req, res, next)).catch(error => {
+      console.error('Route error:', error);
+      sendError(res, 'Internal server error', HTTP_STATUS.INTERNAL_ERROR);
+    });
+  };
+}
+
+/**
+ * Logs error with context
+ */
+function logError(context, error) {
+  console.error(`[${context}] Error:`, error.message || error);
+  if (error.stack) {
+    console.error(error.stack);
+  }
+}
+
+module.exports = {
+  formatErrorResponse,
+  sendError,
+  asyncHandler,
+  logError
+};

package/lib/file-tree-builder.js

@@ -0,0 +1,81 @@
+/**
+ * Builds file tree structure for navigation
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { isIgnoredByGitignore } = require('./gitignore');
+
+function buildFileTree(dirPath, relativePath = '', gitignoreRules, workingDir, showGitignored = false, maxDepth = 5, currentDepth = 0) {
+  if (currentDepth >= maxDepth) {
+    return [];
+  }
+
+  try {
+    const items = fs.readdirSync(dirPath);
+    const tree = [];
+
+    for (const item of items) {
+      const fullPath = path.join(dirPath, item);
+      const itemRelativePath = relativePath ? `${relativePath}/${item}` : item;
+
+      // Always skip .git directory and node_modules
+      if (item === '.git' || item === 'node_modules') {
+        continue;
+      }
+
+      // Skip other hidden files/folders unless showing gitignored
+      if (!showGitignored && item.startsWith('.')) {
+        continue;
+      }
+
+      // Skip gitignored items unless explicitly showing them
+      if (!showGitignored && isIgnoredByGitignore(fullPath, gitignoreRules, workingDir, false)) {
+        continue;
+      }
+
+      const stats = fs.statSync(fullPath);
+      const isDirectory = stats.isDirectory();
+
+      const treeItem = {
+        name: item,
+        path: itemRelativePath,
+        isDirectory
+      };
+
+      if (isDirectory) {
+        treeItem.children = buildFileTree(
+          fullPath,
+          itemRelativePath,
+          gitignoreRules,
+          workingDir,
+          showGitignored,
+          maxDepth,
+          currentDepth + 1
+        );
+      }
+
+      tree.push(treeItem);
+    }
+
+    // Sort: directories first, then alphabetically
+    tree.sort((a, b) => {
+      if (a.isDirectory && !b.isDirectory) {
+        return -1;
+      }
+      if (!a.isDirectory && b.isDirectory) {
+        return 1;
+      }
+      return a.name.localeCompare(b.name);
+    });
+
+    return tree;
+  } catch (error) {
+    console.error('Error building file tree:', error);
+    return [];
+  }
+}
+
+module.exports = {
+  buildFileTree
+};

package/lib/file-utils.js

@@ -187,46 +187,77 @@ function getFileIcon(filename) {
 }
 
 function getLanguageFromExtension(ext) {
+  if (!ext) return undefined;
+  const normalized = String(ext).toLowerCase();
   const langMap = {
+    // JavaScript family
     'js': 'javascript',
+    'mjs': 'javascript',
     'jsx': 'javascript',
     'ts': 'typescript',
     'tsx': 'typescript',
-    'py': 'python',
-    'java': 'java',
+
+    // Web
     'html': 'html',
+    'htm': 'html',
     'css': 'css',
     'scss': 'scss',
     'sass': 'sass',
+    'less': 'less',
+
+    // Data / config
     'json': 'json',
     'xml': 'xml',
     'yaml': 'yaml',
     'yml': 'yaml',
+
+    // Shell & scripts
     'sh': 'bash',
     'bash': 'bash',
     'zsh': 'bash',
-    'go': 'go',
-    'rs': 'rust',
-    'cpp': 'cpp',
-    'cxx': 'cpp',
-    'cc': 'cpp',
+    'fish': 'bash',
+    'ps1': 'powershell',
+
+    // Compiled / systems
     'c': 'c',
     'h': 'c',
+    'cpp': 'cpp',
+    'cc': 'cpp',
+    'cxx': 'cpp',
     'hpp': 'cpp',
+    'rs': 'rust',
+    'go': 'go',
+    'java': 'java',
+    'kt': 'kotlin',
+    'swift': 'swift',
+
+    // Scripting
+    'py': 'python',
     'php': 'php',
     'rb': 'ruby',
-    'swift': 'swift',
-    'kt': 'kotlin',
     'dart': 'dart',
     'r': 'r',
     'sql': 'sql',
-    'dockerfile': 'dockerfile',
+    'scala': 'scala',
+    'clj': 'clojure',
+    'lua': 'lua',
+    'pl': 'perl',
+    'groovy': 'groovy',
+
+    // Markup / frameworks
     'md': 'markdown',
     'markdown': 'markdown',
     'vue': 'vue',
-    'svelte': 'svelte'
+    'svelte': 'svelte',
+
+    // Misc text
+    'txt': 'plaintext',
+    'log': 'plaintext',
+
+    // Special filename-style extensions
+    'dockerfile': 'dockerfile'
   };
-  return langMap[ext];
+  return langMap[normalized];
 }
 
 function getLanguageColor(language) {