gh-here 1.0.5 → 1.1.0

package/.claude/settings.local.json

@@ -19,7 +19,8 @@
       "Bash(git push:*)",
       "Bash(git pull:*)",
       "Bash(npm publish:*)",
-      "Bash(timeout:*)"
+      "Bash(timeout:*)",
+      "Bash(npm version:*)"
     ],
     "deny": [],
     "ask": []

package/README.md

@@ -29,11 +29,12 @@ 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
 ```
 
-The app will automatically find an available port starting from 3000 and serve your current directory with a GitHub-like interface.
+The app will automatically find an available port starting from 5555 and serve your current directory with a GitHub-like interface.
 
 ## Features
 
@@ -46,12 +47,13 @@ The app will automatically find an available port starting from 3000 and serve y
 - File and folder creation, editing, renaming, and deletion
 
 ### 🎨 Code Viewing & Editing
-- GitHub-accurate syntax highlighting for 25+ languages
-- Line numbers with GitHub-style selection (click, shift-click, ctrl-click)
-- In-browser file editing with auto-save to localStorage
+- 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`)
-- Syntax highlighting and line numbers in editor
+- Monaco Editor features: IntelliSense, bracket matching, folding
 
 ### 🔀 Git Integration
 - Automatic git repository detection
@@ -86,44 +88,9 @@ The app will automatically find an available port starting from 3000 and serve y
 - Error handling and loading states
 - Notification system for user feedback
 
-## Supported File Types
-
-### Programming Languages
-- JavaScript (.js, .mjs, .jsx) - React, Node.js
-- TypeScript (.ts, .tsx)
-- Python (.py)
-- Java (.java)
-- Go (.go)
-- Rust (.rs)
-- PHP (.php)
-- Ruby (.rb)
-- Swift (.swift)
-- Kotlin (.kt)
-- Dart (.dart)
-
-### Web Technologies
-- HTML (.html)
-- CSS (.css, .scss, .sass, .less)
-- JSON (.json)
-- XML (.xml)
-- YAML (.yml, .yaml)
-
-### Documentation & Config
-- Markdown (.md) - with beautiful rendering
-- Text files (.txt)
-- Configuration files (ESLint, Prettier, Webpack, etc.)
-- Docker files (Dockerfile, docker-compose.yml)
-- Environment files (.env)
-
-### Media & Archives
-- Images (.png, .jpg, .gif, .svg, .webp)
-- Videos (.mp4, .mov, .avi)
-- Audio (.mp3, .wav, .flac)
-- Archives (.zip, .tar, .gz, .rar)
-
-### Shell & Database
-- Shell scripts (.sh, .bash, .zsh)
-- SQL (.sql)
+## Language Support
+
+Supports syntax highlighting for 30+ languages including JavaScript, TypeScript, Python, Go, Rust, Java, C/C++, and many more through Monaco Editor integration.
 
 ## Keyboard Shortcuts
 
@@ -161,7 +128,7 @@ npm install
 npm start
 ```
 
-Navigate to `http://localhost:3000` to view the interface.
+Navigate to `http://localhost:5555` to view the interface.
 
 ## Dependencies
 

package/lib/renderers.js

@@ -13,8 +13,9 @@ const { getGitStatusIcon, getGitStatusDescription } = require('./git');
  * Handles all HTML template generation for different views
  */
 
-function renderDirectory(currentPath, items, showGitignored = false, gitBranch = null, gitStatus = {}) {
-  const breadcrumbs = generateBreadcrumbs(currentPath, gitBranch);
+function renderDirectory(currentPath, items, showGitignored = false, gitBranch = null, gitStatus = {}, workingDir = null) {
+  const workingDirName = workingDir ? path.basename(workingDir) : null;
+  const breadcrumbs = generateBreadcrumbs(currentPath, gitBranch, workingDirName);
   const readmeFile = findReadmeFile(items);
   const readmePreview = readmeFile ? generateReadmePreview(currentPath, readmeFile) : '';
   const languageStats = generateLanguageStats(items);
@@ -22,7 +23,7 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
   const itemsHtml = items.map(item => `
     <tr class="file-row" data-name="${item.name.toLowerCase()}" data-type="${item.isDirectory ? 'dir' : 'file'}" data-path="${item.path}">
       <td class="icon">
-        ${item.isDirectory ? octicons['file-directory'].toSVG({ class: 'octicon-directory' }) : getFileIcon(item.name)}
+        ${item.isDirectory ? octicons['file-directory-fill'].toSVG({ class: 'octicon-directory' }) : getFileIcon(item.name)}
       </td>
       <td class="git-status-col">
         ${item.gitStatus ? (item.gitStatus.status === '??' ? `<span class="git-status git-status-untracked" title="Untracked file">${require('./git').getGitStatusIcon('??')}</span>` : `<span class="git-status git-status-${item.gitStatus.status.replace(' ', '')}" title="Git Status: ${getGitStatusDescription(item.gitStatus.status)}">${getGitStatusIcon(item.gitStatus.status)}</span>`) : ''}
@@ -78,13 +79,9 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
       <header>
         <div class="header-content">
           <div class="header-left">
-            <h1 class="header-path">${breadcrumbs}</h1>
+            <h1>gh-here</h1>
           </div>
           <div class="header-right">
-            <div class="search-container">
-              ${octicons.search.toSVG({ class: 'search-icon' })}
-              <input type="text" id="file-search" placeholder="Find files..." class="search-input">
-            </div>
             ${Object.keys(gitStatus).length > 0 ? `
               <button id="commit-btn" class="commit-btn" title="Commit changes">
                 ${octicons['git-commit'].toSVG({ class: 'commit-icon' })}
@@ -100,15 +97,42 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
           </div>
         </div>
       </header>
-      <main>
-        ${languageStats}
-        <div class="directory-actions">
-          <button id="new-file-btn" class="btn btn-secondary">
-            ${octicons['file-added'].toSVG({ class: 'btn-icon' })} New file
-          </button>
+      
+      <!-- White canvas section like GitHub -->
+      <div class="repo-canvas">
+        <div class="repo-canvas-content">
+          <div class="breadcrumb-section">${breadcrumbs}</div>
+          <hr class="repo-divider">
+          
+          <div class="repo-controls">
+            <div class="repo-controls-left">
+              ${gitBranch ? `
+                <button class="branch-button">
+                  ${octicons['git-branch'].toSVG({ class: 'octicon-branch' })} 
+                  <span class="branch-name">${gitBranch}</span>
+                  ${octicons['chevron-down'].toSVG({ class: 'octicon-chevron' })}
+                </button>
+              ` : ''}
+            </div>
+            <div class="repo-controls-right">
+              <div class="search-container">
+                ${octicons.search.toSVG({ class: 'search-icon' })}
+                <input type="text" id="file-search" placeholder="Go to file" class="search-input">
+                <kbd class="search-hotkey">t</kbd>
+              </div>
+              <button id="new-file-btn" class="btn btn-outline">
+                <span class="btn-text">New file</span>
+              </button>
+            </div>
+          </div>
         </div>
-        <div class="file-table-container">
-          <table class="file-table" id="file-table">
+      </div>
+      <main>
+        <div class="repo-canvas">
+          <div class="repo-canvas-content">
+            ${languageStats}
+            <div class="file-table-container">
+              <table class="file-table" id="file-table">
             <thead>
               <tr>
                 <th></th>
@@ -133,8 +157,10 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
               ${itemsHtml}
             </tbody>
           </table>
+            </div>
+            ${readmePreview}
+          </div>
         </div>
-        ${readmePreview}
       </main>
     </body>
     </html>
@@ -265,7 +291,7 @@ async function renderFileDiff(filePath, ext, gitInfo, gitRepoRoot) {
           <header>
             <div class="header-content">
               <div class="header-left">
-                <h1 class="header-path">${breadcrumbs}</h1>
+                <h1>gh-here</h1>
               </div>
               <div class="header-right">
                 ${viewToggle}
@@ -276,9 +302,12 @@ async function renderFileDiff(filePath, ext, gitInfo, gitRepoRoot) {
             </div>
           </header>
           <main>
-            <div class="diff-container">
-              <div class="diff-content">
-                ${diffContent}
+            <div class="main-content">
+              <div class="breadcrumb-section">${breadcrumbs}</div>
+              <div class="diff-container">
+                <div class="diff-content">
+                  ${diffContent}
+                </div>
               </div>
             </div>
           </main>
@@ -433,10 +462,7 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
       <header>
         <div class="header-content">
           <div class="header-left">
-            <h1 class="header-path">
-              ${breadcrumbs}
-              ${hasGitChanges ? (hasGitChanges.status === '??' ? `<span class="git-status git-status-untracked" title="Untracked file">${getGitStatusIcon('??')}</span>` : `<span class="git-status git-status-${hasGitChanges.status.replace(' ', '')}" title="Git Status: ${getGitStatusDescription(hasGitChanges.status)}">${getGitStatusIcon(hasGitChanges.status)}</span>`) : ''}
-            </h1>
+            <h1>gh-here</h1>
           </div>
           <div class="header-right">
             <div id="filename-input-container" class="filename-input-container" style="display: none;">
@@ -453,9 +479,11 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
         </div>
       </header>
       <main>
-        <div class="file-content">
-          ${displayContent}
-        </div>
+        <div class="main-content">
+          <div class="breadcrumb-section">${breadcrumbs}</div>
+          <div class="file-content">
+            ${displayContent}
+          </div>
         <div id="editor-container" class="editor-container" style="display: none;">
           <div class="editor-header">
             <div class="editor-title">Edit ${path.basename(filePath)}</div>
@@ -469,6 +497,7 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
             <div id="file-editor" class="monaco-editor"></div>
           </div>
         </div>
+        </div>
       </main>
     </body>
     </html>
@@ -492,7 +521,7 @@ function renderNewFile(currentPath) {
       <header>
         <div class="header-content">
           <div class="header-left">
-            <h1 class="header-path">${breadcrumbs}</h1>
+            <h1>gh-here</h1>
           </div>
           <div class="header-right">
             <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
@@ -502,8 +531,10 @@ function renderNewFile(currentPath) {
         </div>
       </header>
       <main>
-        <div class="new-file-container">
-          <div class="new-file-header">
+        <div class="main-content">
+          <div class="breadcrumb-section">${breadcrumbs}</div>
+          <div class="new-file-container">
+            <div class="new-file-header">
             <div class="filename-section">
               <span class="filename-label">Name your file...</span>
               <input type="text" id="new-filename-input" class="new-filename-input" placeholder="README.md" autofocus>
@@ -519,24 +550,26 @@ function renderNewFile(currentPath) {
             </div>
           </div>
         </div>
+        </div>
       </main>
     </body>
     </html>
   `;
 }
 
-function generateBreadcrumbs(currentPath, gitBranch = null) {
-  // At root, show gh-here branding with git branch if available
+function generateBreadcrumbs(currentPath, gitBranch = null, workingDirName = null) {
+  const rootDisplayName = workingDirName || 'repository';
+  
+  // At root, show working directory name
   if (!currentPath || currentPath === '.') {
-    const gitBranchDisplay = gitBranch ? `<span class="git-branch">${octicons['git-branch'].toSVG({ class: 'octicon-branch' })} ${gitBranch}</span>` : '';
-    return `${octicons.home.toSVG({ class: 'octicon-home' })} gh-here ${gitBranchDisplay}`;
+    return `${octicons.home.toSVG({ class: 'octicon-home' })} ${rootDisplayName}`;
   }
   
   // In subdirectories, show clickable path
   const parts = currentPath.split('/').filter(p => p && p !== '.');
   let breadcrumbs = `
     <div class="breadcrumb-item">
-      <a href="/">${octicons.home.toSVG({ class: 'octicon-home' })}</a>
+      <a href="/">${octicons.home.toSVG({ class: 'octicon-home' })} ${rootDisplayName}</a>
     </div>
   `;
   let buildPath = '';

package/lib/server.js

@@ -82,7 +82,7 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
           return a.name.localeCompare(b.name);
         });
         
-        res.send(renderDirectory(currentPath, items, showGitignored, gitBranch, gitStatus));
+        res.send(renderDirectory(currentPath, items, showGitignored, gitBranch, gitStatus, workingDir));
       } else {
         const content = fs.readFileSync(fullPath, 'utf8');
         const ext = path.extname(fullPath).slice(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gh-here",
-  "version": "1.0.5",
+  "version": "1.1.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

@@ -52,15 +52,15 @@ body {
 header {
   background-color: var(--bg-secondary);
   border-bottom: 1px solid var(--border-primary);
-  padding: 16px 24px;
 }
 
 .header-content {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  max-width: 1200px;
+  max-width: 900px;
   margin: 0 auto;
+  padding: 16px 24px;
 }
 
 .header-left h1 {
@@ -82,6 +82,203 @@ header {
   gap: 12px;
 }
 
+/* GitHub-style White Canvas Section */
+.repo-canvas {
+  background-color: var(--bg-primary);
+}
+
+.repo-canvas-content {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 16px 24px;
+}
+
+.breadcrumb-section {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 12px 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.repo-name {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 12px 0;
+}
+
+.repo-divider {
+  border: none;
+  border-top: 1px solid var(--border-primary);
+  margin: 0 0 12px 0;
+}
+
+.repo-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.repo-controls-left {
+  display: flex;
+  align-items: center;
+}
+
+.repo-controls-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.branch-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.branch-button:hover {
+  background: var(--bg-secondary);
+  border-color: var(--text-secondary);
+}
+
+.branch-count,
+.tag-count {
+  color: var(--text-secondary);
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.octicon-branch {
+  width: 16px;
+  height: 16px;
+  fill: var(--text-secondary);
+}
+
+.octicon-small {
+  width: 14px;
+  height: 14px;
+  fill: var(--text-secondary);
+}
+
+.branch-name {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  font-weight: 600;
+}
+
+.octicon-chevron {
+  width: 12px;
+  height: 12px;
+  fill: var(--text-secondary);
+}
+
+.search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  padding: 6px 40px 6px 32px;
+  color: var(--text-primary);
+  font-size: 14px;
+  width: 300px;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
+}
+
+.search-icon {
+  position: absolute;
+  left: 8px;
+  width: 16px;
+  height: 16px;
+  fill: var(--text-secondary);
+  pointer-events: none;
+}
+
+.search-hotkey {
+  position: absolute;
+  right: 8px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-family: ui-monospace, SFMono-Regular, monospace;
+}
+
+/* GitHub-style Buttons */
+.btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid;
+}
+
+.btn-primary {
+  background: var(--bg-primary);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+.btn-primary:hover {
+  background: var(--bg-secondary);
+}
+
+.btn-outline {
+  background: var(--bg-primary);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+.btn-outline:hover {
+  background: var(--bg-secondary);
+}
+
+.btn-success {
+  background: #238636;
+  border-color: rgba(240, 246, 252, 0.1);
+  color: #ffffff;
+}
+
+.btn-success:hover {
+  background: #2ea043;
+}
+
+.btn-icon,
+.btn-chevron {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
 .theme-toggle,
 .gitignore-toggle,
 .edit-btn {
@@ -158,7 +355,7 @@ header {
 }
 
 .breadcrumb-item {
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 
@@ -184,9 +381,13 @@ header {
 }
 
 main {
-  padding: 24px;
-  max-width: 1200px;
+  padding: 0;
+}
+
+.main-content {
+  max-width: 900px;
   margin: 0 auto;
+  padding: 16px 24px;
 }
 
 .directory-actions {
@@ -261,13 +462,13 @@ main {
   vertical-align: text-bottom;
 }
 
-/* GitHub-style blue folder icons */
+/* GitHub-style baby blue folder icons */
 .octicon-directory {
-  fill: #58a6ff;
+  fill: #7dd3fc;
 }
 
 [data-theme="light"] .octicon-directory {
-  fill: #0969da;
+  fill: #54adf5;
 }
 
 .octicon-home {
@@ -296,43 +497,7 @@ main {
 [data-theme="light"] .text-orange { color: #bc4c00; }
 [data-theme="light"] .text-purple { color: #6f42c1; }
 
-/* Search functionality */
-.search-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  padding: 6px 8px;
-  transition: all 0.2s ease;
-}
-
-.search-container:focus-within {
-  border-color: var(--link-color);
-  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.1);
-}
-
-.search-icon {
-  width: 16px;
-  height: 16px;
-  fill: var(--text-secondary);
-  margin-right: 6px;
-}
-
-.search-input {
-  background: none;
-  border: none;
-  outline: none;
-  color: var(--text-primary);
-  font-size: 14px;
-  width: 200px;
-  transition: all 0.2s ease;
-}
-
-.search-input::placeholder {
-  color: var(--text-secondary);
-}
+/* Old search styles removed - using new GitHub-style search */
 
 /* Language stats */
 .language-stats {
@@ -451,9 +616,6 @@ main {
 
 
 /* Loading states */
-.search-input:focus {
-  width: 250px;
-}
 
 /* Quick actions */
 .name {
@@ -1109,8 +1271,18 @@ main {
 
 
 @media (max-width: 768px) {
-  main {
-    padding: 16px;
+  .main-content {
+    padding: 12px 16px;
+  }
+  
+  .repo-canvas-content {
+    padding: 12px 16px;
+  }
+  
+  .header-content {
+    padding: 12px 16px;
+    flex-direction: column;
+    gap: 12px;
   }
   
   .file-table .size,
@@ -1118,13 +1290,15 @@ main {
     display: none;
   }
   
-  header {
-    padding: 12px 16px;
+  .repo-controls {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
   }
   
-  .header-content {
+  .repo-controls-right {
     flex-direction: column;
-    gap: 12px;
+    gap: 8px;
   }
   
   .header-right {
@@ -1331,22 +1505,8 @@ main {
     transform: translateY(0);
   }
 }
-}
-/* Git Integration */
-.git-branch {
-  display: inline-flex;
-  align-items: center;
-  margin-left: 12px;
-  color: var(--text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-  gap: 6px;
-}
 
-.octicon-branch {
-  width: 16px;
-  height: 16px;
-}
+/* Git Integration */
 
 .git-status {
   display: inline;