From a80c61b4cd411aab37bbb3cbc9a0b44a28cf06fc Mon Sep 17 00:00:00 2001
From: Chris Scott <chris@cstech.dev>
Date: Sat, 13 Dec 2025 22:58:23 -0500
Subject: [PATCH 1/2] Add file download option to FileTree dropdown menu

---
 .../src/components/file-browser/FileTree.tsx  | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/file-browser/FileTree.tsx b/frontend/src/components/file-browser/FileTree.tsx
index 2c98daa..cb103d5 100644
--- a/frontend/src/components/file-browser/FileTree.tsx
+++ b/frontend/src/components/file-browser/FileTree.tsx
@@ -1,7 +1,9 @@
 import { useState, memo } from 'react'
+import { useMobile } from '@/hooks/useMobile'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { DeleteDialog } from '@/components/ui/delete-dialog'
+import { API_BASE_URL } from '@/config'
 import { 
   File, 
   Folder, 
@@ -10,7 +12,8 @@ import {
   ChevronDown,
   MoreHorizontal,
   Trash2,
-  Edit3
+  Edit3,
+  Download
 } from 'lucide-react'
 import {
   DropdownMenu,
@@ -42,6 +45,7 @@ interface TreeNodeProps {
 }
 
 function TreeNode({ file, level, onFileSelect, onDirectoryClick, selectedFile, onDelete, onRename }: TreeNodeProps) {
+  const isMobile = useMobile()
   const [expanded, setExpanded] = useState(false)
   const [editing, setEditing] = useState(false)
   const [editName, setEditName] = useState(file.name)
@@ -86,6 +90,18 @@ function TreeNode({ file, level, onFileSelect, onDirectoryClick, selectedFile, o
     setEditName(file.name)
   }
 
+  const handleDownload = () => {
+    if (file.isDirectory) return
+    
+    const downloadUrl = `${API_BASE_URL}/api/files/${file.path}?download=true`
+    const link = document.createElement('a')
+    link.href = downloadUrl
+    link.download = file.name
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
+
   const getFileIcon = () => {
     if (file.isDirectory) {
       return expanded ? <FolderOpen className="w-4 h-4" /> : <Folder className="w-4 h-4" />
@@ -167,12 +183,18 @@ function TreeNode({ file, level, onFileSelect, onDirectoryClick, selectedFile, o
             <Button
               variant="ghost"
               size="sm"
-              className="w-6 h-6 p-0 opacity-0 group-hover:opacity-100"
+              className={`w-6 h-6 p-0 ${isMobile ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}
             >
               <MoreHorizontal className="w-3 h-3" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
+            {!file.isDirectory && (
+              <DropdownMenuItem onClick={handleDownload}>
+                <Download className="w-4 h-4 mr-2" />
+                Download
+              </DropdownMenuItem>
+            )}
             <DropdownMenuItem onClick={handleRename}>
               <Edit3 className="w-4 h-4 mr-2" />
               Rename

From d3e2a63bb2dc272893dca21e6e49cc81831628b3 Mon Sep 17 00:00:00 2001
From: Chris Scott <chris@cstech.dev>
Date: Sat, 13 Dec 2025 23:02:22 -0500
Subject: [PATCH 2/2] Fix linting warnings in FileBrowser component

---
 frontend/src/components/file-browser/FileBrowser.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/file-browser/FileBrowser.tsx b/frontend/src/components/file-browser/FileBrowser.tsx
index 92c1a53..66b1b24 100644
--- a/frontend/src/components/file-browser/FileBrowser.tsx
+++ b/frontend/src/components/file-browser/FileBrowser.tsx
@@ -274,7 +274,7 @@ useEffect(() => {
         
         {/* Mobile: Full width file listing, Desktop: Split view */}
         <div className="flex-1 flex overflow-hidden min-h-0 h-full">
-          <div className={`${isMobile ? 'w-full' : 'w-[30%]'} border-r border-border px-4 flex flex-col min-h-0 h-full`}>
+          <div className={`${isMobile ? 'w-full' : 'w-[30%]'} border-r border-border px-1 md:px-4 flex flex-col min-h-0 h-full`}>
             <div className="flex items-center gap-2 mb-4 mt-4 flex-shrink-0">
               <Input
                 placeholder="Search"