gh-here 2.0.0 → 3.0.0

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 -->
+Local GitHub-style file browser for viewing codebases. Browse directories, view files with syntax highlighting, and explore git diffs.
 
 ## 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,41 @@ 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
+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.
+- Directory browsing with file icons
+- Syntax highlighting for 30+ languages
+- README preview with markdown rendering
+- Language statistics
+- Git status indicators
+- Diff viewer with line numbers
+- Search files
+- Copy/download files
+- Rename/delete files and folders
+- .gitignore filtering
+- Dark/light themes
+- Keyboard navigation
 
 ## Keyboard Shortcuts
 
-| Shortcut | Action |
-|----------|--------|
-| `j` / `↓` | Move down |
-| `k` / `↑` | Move up |
-| `Enter` / `o` | Open file/folder |
-| `e` | Edit focused file |
-| `c` | Create new file |
+| Key | Action |
+|-----|--------|
+| `j`/`k` or arrows | Navigate files |
+| `Enter` or `o` | Open file/folder |
 | `h` | Go up directory |
-| `/` / `s` | Focus search |
-| `Ctrl/Cmd + K` | Focus search |
-| `Ctrl/Cmd + G` | Go to top |
-| `Shift + G` | Go to bottom |
+| `/` or `s` | Focus search |
 | `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`)
+| `i` | Toggle .gitignore |
+| `d` | Show diff (if git changes) |
+| `r` | Refresh |
+| `?` | Show shortcuts |
 
 ## Development
 
@@ -128,11 +59,9 @@ 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
+- highlight.js
+- marked
+- @primer/octicons

package/SAMPLE.md

@@ -0,0 +1,287 @@
+# Syntax Highlighting Test
+
+This file contains code samples in various languages to test syntax highlighting in markdown rendering.
+
+## JavaScript
+
+```javascript
+function greet(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+  return message;
+}
+
+class Person {
+  constructor(name, age) {
+    this.name = name;
+    this.age = age;
+  }
+
+  introduce() {
+    return `My name is ${this.name} and I'm ${this.age} years old.`;
+  }
+}
+```
+
+## Python
+
+```python
+def calculate_fibonacci(n):
+    """Calculate the nth Fibonacci number."""
+    if n <= 1:
+        return n
+    return calculate_fibonacci(n - 1) + calculate_fibonacci(n - 2)
+
+class Animal:
+    def __init__(self, name, species):
+        self.name = name
+        self.species = species
+
+    def make_sound(self):
+        return f"{self.name} the {self.species} makes a sound"
+```
+
+## Go
+
+```go
+package main
+
+import (
+    "fmt"
+    "time"
+)
+
+type User struct {
+    Name      string
+    Email     string
+    CreatedAt time.Time
+}
+
+func (u *User) SendEmail(message string) error {
+    fmt.Printf("Sending email to %s: %s\n", u.Email, message)
+    return nil
+}
+
+func main() {
+    user := &User{
+        Name:      "John Doe",
+        Email:     "john@example.com",
+        CreatedAt: time.Now(),
+    }
+    user.SendEmail("Welcome!")
+}
+```
+
+## Rust
+
+```rust
+use std::collections::HashMap;
+
+fn main() {
+    let mut scores = HashMap::new();
+    scores.insert(String::from("Blue"), 10);
+    scores.insert(String::from("Red"), 50);
+
+    for (key, value) in &scores {
+        println!("{}: {}", key, value);
+    }
+}
+
+struct Rectangle {
+    width: u32,
+    height: u32,
+}
+
+impl Rectangle {
+    fn area(&self) -> u32 {
+        self.width * self.height
+    }
+}
+```
+
+## TypeScript
+
+```typescript
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+async function fetchUser(id: number): Promise<User> {
+  const response = await fetch(`/api/users/${id}`);
+  const data: User = await response.json();
+  return data;
+}
+
+class UserService {
+  private users: Map<number, User> = new Map();
+
+  addUser(user: User): void {
+    this.users.set(user.id, user);
+  }
+
+  getUser(id: number): User | undefined {
+    return this.users.get(id);
+  }
+}
+```
+
+## Bash
+
+```bash
+#!/bin/bash
+
+# Function to backup files
+backup_files() {
+    local source_dir=$1
+    local backup_dir=$2
+
+    if [ ! -d "$backup_dir" ]; then
+        mkdir -p "$backup_dir"
+    fi
+
+    tar -czf "$backup_dir/backup-$(date +%Y%m%d).tar.gz" "$source_dir"
+    echo "Backup completed successfully!"
+}
+
+backup_files "/home/user/documents" "/home/user/backups"
+```
+
+## SQL
+
+```sql
+-- Create users table
+CREATE TABLE users (
+    id SERIAL PRIMARY KEY,
+    username VARCHAR(50) UNIQUE NOT NULL,
+    email VARCHAR(100) UNIQUE NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Insert some data
+INSERT INTO users (username, email) VALUES
+    ('john_doe', 'john@example.com'),
+    ('jane_smith', 'jane@example.com');
+
+-- Query with JOIN
+SELECT u.username, o.order_date, o.total
+FROM users u
+INNER JOIN orders o ON u.id = o.user_id
+WHERE o.total > 100
+ORDER BY o.order_date DESC;
+```
+
+## JSON
+
+```json
+{
+  "name": "gh-here",
+  "version": "2.0.0",
+  "description": "A local GitHub-like file browser",
+  "dependencies": {
+    "express": "^4.18.2",
+    "highlight.js": "^11.9.0",
+    "marked": "^12.0.0"
+  },
+  "scripts": {
+    "start": "node bin/gh-here.js",
+    "test": "jest"
+  }
+}
+```
+
+## CSS
+
+```css
+:root {
+  --primary-color: #0366d6;
+  --background-color: #ffffff;
+  --text-color: #24292e;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--primary-color);
+  color: white;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #0256c7;
+  cursor: pointer;
+}
+```
+
+## HTML
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample Page</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>Welcome to My Site</h1>
+        <nav>
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <p>This is the main content area.</p>
+    </main>
+    <script src="script.js"></script>
+</body>
+</html>
+```
+
+## Java
+
+```java
+import java.util.ArrayList;
+import java.util.List;
+
+public class BankAccount {
+    private String accountNumber;
+    private double balance;
+    private List<Transaction> transactions;
+
+    public BankAccount(String accountNumber, double initialBalance) {
+        this.accountNumber = accountNumber;
+        this.balance = initialBalance;
+        this.transactions = new ArrayList<>();
+    }
+
+    public void deposit(double amount) {
+        if (amount > 0) {
+            balance += amount;
+            transactions.add(new Transaction("DEPOSIT", amount));
+        }
+    }
+
+    public boolean withdraw(double amount) {
+        if (amount > 0 && balance >= amount) {
+            balance -= amount;
+            transactions.add(new Transaction("WITHDRAWAL", amount));
+            return true;
+        }
+        return false;
+    }
+}
+```

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
+};