gh-here 1.0.5 → 1.1.1

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/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');
 
 /**
@@ -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>
@@ -340,6 +369,7 @@ 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);
   let displayContent;
@@ -349,7 +379,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;
       
@@ -433,18 +505,17 @@ 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;">
               <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' })}
@@ -453,9 +524,12 @@ 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>
+        ${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>
@@ -469,6 +543,8 @@ 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 +568,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 +578,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 +597,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

@@ -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');
       }
@@ -82,12 +92,17 @@ 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);
         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);
@@ -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.0.5",
+  "version": "1.1.1",
   "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 {
@@ -560,6 +722,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;
@@ -1109,8 +1348,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 +1367,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 +1582,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;

package/tests/fileTypeDetection.test.js

@@ -0,0 +1,111 @@
+// Simple unit tests for file type detection
+// Run with: node tests/fileTypeDetection.test.js
+
+// Import the functions from our file-utils module
+const { isImageFile, isBinaryFile, isTextFile } = require('../lib/file-utils');
+
+function test(description, testFn) {
+  try {
+    testFn();
+    console.log(`✅ ${description}`);
+  } catch (error) {
+    console.log(`❌ ${description}`);
+    console.log(`   Error: ${error.message}`);
+  }
+}
+
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message || 'Assertion failed');
+  }
+}
+
+// Test isImageFile function
+test('should detect PNG files as images', () => {
+  assert(isImageFile('photo.png'), 'PNG should be detected as image');
+  assert(isImageFile('PNG'), 'Extension-only PNG should work');
+});
+
+test('should detect common image formats', () => {
+  const imageFiles = ['test.jpg', 'test.jpeg', 'test.gif', 'test.svg', 'test.webp', 'test.bmp', 'test.tiff', 'test.ico'];
+  imageFiles.forEach(file => {
+    assert(isImageFile(file), `${file} should be detected as image`);
+  });
+});
+
+test('should not detect text files as images', () => {
+  const textFiles = ['readme.md', 'script.js', 'style.css', 'config.json'];
+  textFiles.forEach(file => {
+    assert(!isImageFile(file), `${file} should not be detected as image`);
+  });
+});
+
+// Test isBinaryFile function
+test('should detect images as binary files', () => {
+  assert(isBinaryFile('photo.png'), 'Images should be binary');
+  assert(isBinaryFile('animation.gif'), 'GIFs should be binary');
+});
+
+test('should detect archives as binary files', () => {
+  const archives = ['file.zip', 'backup.tar', 'compressed.gz', 'archive.rar', 'package.7z'];
+  archives.forEach(file => {
+    assert(isBinaryFile(file), `${file} should be detected as binary`);
+  });
+});
+
+test('should detect executables as binary files', () => {
+  const executables = ['program.exe', 'binary.bin', 'application.app'];
+  executables.forEach(file => {
+    assert(isBinaryFile(file), `${file} should be detected as binary`);
+  });
+});
+
+test('should detect documents as binary files', () => {
+  const docs = ['document.pdf', 'spreadsheet.xlsx', 'presentation.pptx'];
+  docs.forEach(file => {
+    assert(isBinaryFile(file), `${file} should be detected as binary`);
+  });
+});
+
+test('should not detect text files as binary', () => {
+  const textFiles = ['readme.md', 'script.js', 'style.css', 'data.json', 'config.yml', 'index.html'];
+  textFiles.forEach(file => {
+    assert(!isBinaryFile(file), `${file} should not be detected as binary`);
+  });
+});
+
+// Test isTextFile function
+test('should detect common text files', () => {
+  const textFiles = ['readme.md', 'script.js', 'style.css', 'data.json', 'config.yml', 'index.html', 'app.py', 'main.go'];
+  textFiles.forEach(file => {
+    assert(isTextFile(file), `${file} should be detected as text`);
+  });
+});
+
+test('should not detect binary files as text', () => {
+  const binaryFiles = ['photo.png', 'archive.zip', 'program.exe', 'document.pdf'];
+  binaryFiles.forEach(file => {
+    assert(!isTextFile(file), `${file} should not be detected as text`);
+  });
+});
+
+// Test edge cases
+test('should handle files without extensions', () => {
+  assert(isTextFile('README'), 'Files without extensions should default to text');
+  assert(isTextFile('Makefile'), 'Common text files without extensions should be text');
+});
+
+test('should handle extension-only input', () => {
+  assert(isImageFile('png'), 'Should handle bare extensions');
+  assert(isBinaryFile('exe'), 'Should handle bare extensions for binary');
+  assert(isTextFile('js'), 'Should handle bare extensions for text');
+});
+
+test('should be case insensitive', () => {
+  assert(isImageFile('PHOTO.PNG'), 'Should handle uppercase extensions');
+  assert(isBinaryFile('ARCHIVE.ZIP'), 'Should handle uppercase extensions');
+  assert(isTextFile('SCRIPT.JS'), 'Should handle uppercase extensions');
+});
+
+// Run all tests
+console.log('Running file type detection tests...\n');