Implement /v2 prototype UI with page-based navigation

- Add /v2 route structure with dynamic nested directory pages
- Create V2DirectoryView component with breadcrumb navigation
- Add V2MoveDialog with directory search and flat list display
- Implement single upload button for current directory context
- Add /api/directories endpoint for move dialog directory picker
- Fix breadcrumb decoding to show readable names instead of URL encoding
- Add file sorting: directories first, then files, all alphabetically
- Improve performance by loading only current directory contents
- Add ScrollArea component and @radix-ui/react-scroll-area dependency
- Ensure proper URL encoding/decoding flow to prevent malformed paths

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

9 files changed, 990 insertions, 0 deletions

diff --git a/frontend/app/api/directories/route.ts b/frontend/app/api/directories/route.ts
new file mode 100644
index 0000000..b3515bb
--- /dev/null
+++ b/frontend/app/api/directories/route.ts
@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server'
+import { Drive_ls_directories } from '@/lib/drive_server'
+
+export async function GET() {
+  try {
+    const directories = await Drive_ls_directories()
+    
+    return NextResponse.json(directories)
+  } catch (error) {
+    console.error('Error fetching directories:', error)
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/v2/[...path]/page.tsx b/frontend/app/v2/[...path]/page.tsx
new file mode 100644
index 0000000..4af0167
--- /dev/null
+++ b/frontend/app/v2/[...path]/page.tsx
@@ -0,0 +1,12 @@
+import { V2DirectoryView } from "@/components/v2/V2DirectoryView"
+
+export default async function V2DirectoryPage({
+  params,
+}: {
+  params: Promise<{ path: string[] }>
+}) {
+  const { path: pathSegments } = await params
+  const currentPath = '/' + (pathSegments?.join('/') || '')
+
+  return <V2DirectoryView path={currentPath} />
+}
\ No newline at end of file
diff --git a/frontend/app/v2/page.tsx b/frontend/app/v2/page.tsx
new file mode 100644
index 0000000..e693c77
--- /dev/null
+++ b/frontend/app/v2/page.tsx
@@ -0,0 +1,5 @@
+import { V2DirectoryView } from "@/components/v2/V2DirectoryView"
+
+export default function V2RootPage() {
+  return <V2DirectoryView path="/" />
+}
\ No newline at end of file
diff --git a/frontend/components/ui/scroll-area.tsx b/frontend/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..63b95e3
--- /dev/null
+++ b/frontend/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
\ No newline at end of file
diff --git a/frontend/components/v2/V2DirectoryView.tsx b/frontend/components/v2/V2DirectoryView.tsx
new file mode 100644
index 0000000..03532e8
--- /dev/null
+++ b/frontend/components/v2/V2DirectoryView.tsx
@@ -0,0 +1,694 @@
+"use client"
+
+import type React from "react"
+import { useState, useRef, useEffect } from "react"
+import Link from "next/link"
+import {
+  ChevronRight,
+  File,
+  Folder,
+  Upload,
+  Trash2,
+  Move,
+  MoreHorizontal,
+  HardDrive,
+  Edit,
+  Link as LinkIcon,
+  Info,
+  LogIn,
+  LogOut,
+  Home,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Progress } from "@/components/ui/progress"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Checkbox } from "@/components/ui/checkbox"
+import { toast } from "@/hooks/use-toast"
+import { DriveLsEntry } from "@/lib/drive_types"
+import { UPLOAD_MAX_FILE_SIZE, UPLOAD_MAX_FILES } from "@/lib/constants"
+import { V2MoveDialog } from "./V2MoveDialog"
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes"
+  const k = 1024
+  const sizes = ["Bytes", "KB", "MB", "GB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
+}
+
+function formatDate(timestamp: number): string {
+  return new Date(timestamp * 1000).toISOString().split('T')[0]
+}
+
+function formatDateTime(timestamp: number): string {
+  const date = new Date(timestamp * 1000)
+  const dateStr = date.toISOString().split('T')[0]
+  const timeStr = date.toLocaleTimeString('en-US', { 
+    hour12: false, 
+    hour: '2-digit', 
+    minute: '2-digit',
+    second: '2-digit'
+  })
+  return `${dateStr} at ${timeStr}`
+}
+
+interface V2DirectoryViewProps {
+  path: string
+}
+
+export function V2DirectoryView({ path }: V2DirectoryViewProps) {
+  const [files, setFiles] = useState<DriveLsEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set())
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false)
+  const [infoDialogOpen, setInfoDialogOpen] = useState(false)
+  const [moveDialogOpen, setMoveDialogOpen] = useState(false)
+  const [currentItem, setCurrentItem] = useState<DriveLsEntry | null>(null)
+  const [newName, setNewName] = useState("")
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [uploading, setUploading] = useState(false)
+
+  const [isLoggedIn, setIsLoggedIn] = useState(true) // Mock logged in state
+
+  const maxStorage = 1073741824 // 1GB
+  const usedStorage = 0 // TODO: Calculate from files if needed
+  const storagePercentage = (usedStorage / maxStorage) * 100
+
+  // Generate breadcrumbs from path
+  const generateBreadcrumbs = (currentPath: string) => {
+    if (currentPath === '/') {
+      return [{ name: 'Root', path: '/v2' }]
+    }
+    
+    const parts = currentPath.split('/').filter(Boolean)
+    const breadcrumbs = [{ name: 'Root', path: '/v2' }]
+    
+    let accumulatedPath = ''
+    parts.forEach((part, index) => {
+      accumulatedPath += '/' + part
+      breadcrumbs.push({
+        name: decodeURIComponent(part), // Decode URL encoded characters
+        path: '/v2' + accumulatedPath
+      })
+    })
+    
+    return breadcrumbs
+  }
+
+  const breadcrumbs = generateBreadcrumbs(path)
+
+  // Sort files: directories first, then files, all alphabetically
+  const sortFiles = (files: DriveLsEntry[]): DriveLsEntry[] => {
+    return [...files].sort((a, b) => {
+      // Directories first, then files
+      if (a.type === "dir" && b.type === "file") return -1;
+      if (a.type === "file" && b.type === "dir") return 1;
+      
+      // Both same type, sort alphabetically by name (case-insensitive)
+      const aName = a.path.split('/').pop() || a.path;
+      const bName = b.path.split('/').pop() || b.path;
+      return aName.toLowerCase().localeCompare(bName.toLowerCase());
+    });
+  };
+
+  // Function to refresh directory contents
+  const refreshDirectory = async () => {
+    try {
+      const encodedPath = path === '/' ? '' : path.split('/').filter(Boolean).map(encodeURIComponent).join('/')
+      const response = await fetch(`/api/fs/${encodedPath}`)
+      if (!response.ok) {
+        throw new Error(`Failed to fetch directory: ${response.statusText}`)
+      }
+      const entries = await response.json()
+      setFiles(sortFiles(entries)) // Sort the files before setting state
+    } catch (err) {
+      console.error('Error refreshing directory:', err)
+      toast({
+        title: "Failed to refresh",
+        description: "Could not refresh directory contents",
+        variant: "destructive"
+      })
+    }
+  }
+
+  // Load directory contents
+  useEffect(() => {
+    async function loadDirectoryData() {
+      try {
+        setLoading(true)
+        setError(null)
+        await refreshDirectory()
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load directory data')
+        console.error('Error loading directory data:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadDirectoryData()
+  }, [path])
+
+  const toggleFileSelection = (filePath: string) => {
+    const newSelected = new Set(selectedFiles)
+    if (newSelected.has(filePath)) {
+      newSelected.delete(filePath)
+    } else {
+      newSelected.add(filePath)
+    }
+    setSelectedFiles(newSelected)
+  }
+
+  const selectAll = () => {
+    setSelectedFiles(new Set(files.map(file => file.path)))
+  }
+
+  const deselectAll = () => {
+    setSelectedFiles(new Set())
+  }
+
+  const openRenameDialog = (item: DriveLsEntry) => {
+    setCurrentItem(item)
+    setNewName(item.path.split('/').pop() || '')
+    setRenameDialogOpen(true)
+  }
+
+  const openInfoDialog = (item: DriveLsEntry) => {
+    setCurrentItem(item)
+    setInfoDialogOpen(true)
+  }
+
+  const openMoveDialog = () => {
+    setMoveDialogOpen(true)
+  }
+
+  const copyPermalink = (item: DriveLsEntry) => {
+    const permalink = `${window.location.origin}/drive/file/${item.path}`
+    navigator.clipboard.writeText(permalink).then(() => {
+      toast({
+        title: "Link copied!",
+        description: "Permalink has been copied to clipboard",
+      })
+    })
+  }
+
+  const handleRename = () => {
+    if (currentItem && newName.trim()) {
+      // TODO: Implement actual rename API call
+      const updatedFiles = files.map((file) => {
+        if (file.path === currentItem.path) {
+          return { ...file, path: file.path.replace(/[^/]+$/, newName.trim()) }
+        }
+        return file
+      })
+      setFiles(sortFiles(updatedFiles)) // Sort after rename
+      setRenameDialogOpen(false)
+      setCurrentItem(null)
+      setNewName("")
+      toast({
+        title: "Renamed successfully",
+        description: `Item renamed to "${newName.trim()}"`,
+      })
+    }
+  }
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const uploadedFiles = event.target.files
+    if (!uploadedFiles || uploadedFiles.length === 0) return
+
+    // Validate file count
+    if (uploadedFiles.length > UPLOAD_MAX_FILES) {
+      toast({
+        title: "Too many files",
+        description: `You can only upload up to ${UPLOAD_MAX_FILES} files at once`,
+        variant: "destructive"
+      })
+      return
+    }
+
+    // Validate file sizes
+    const oversizedFiles = Array.from(uploadedFiles).filter(file => file.size > UPLOAD_MAX_FILE_SIZE)
+    if (oversizedFiles.length > 0) {
+      toast({
+        title: "Files too large",
+        description: `Maximum file size is ${formatFileSize(UPLOAD_MAX_FILE_SIZE)}. Found ${oversizedFiles.length} oversized file(s)`,
+        variant: "destructive"
+      })
+      return
+    }
+
+    setUploading(true)
+    let successCount = 0
+    let errorCount = 0
+
+    try {
+      // Upload files sequentially to the current directory
+      for (const file of Array.from(uploadedFiles)) {
+        try {
+          const formData = new FormData()
+          formData.append('file', file)
+          
+          // Construct the upload path (current path + filename)
+          // The path should already be properly decoded by Next.js page params
+          const uploadPath = path === '/' ? file.name : `${path.slice(1)}/${file.name}`
+          // Encode each path segment for the URL - Next.js will decode it back for the API
+          const encodedPath = uploadPath.split('/').map(encodeURIComponent).join('/')
+          
+          const response = await fetch(`/api/fs/${encodedPath}`, {
+            method: 'PUT',
+            headers: {
+              'AUTH': '1' // Development auth header
+            },
+            body: formData
+          })
+
+          if (!response.ok) {
+            const error = await response.json()
+            throw new Error(error.error || `Upload failed with status ${response.status}`)
+          }
+
+          successCount++
+        } catch (error) {
+          console.error(`Failed to upload ${file.name}:`, error)
+          errorCount++
+        }
+      }
+
+      // Show results
+      if (successCount > 0) {
+        toast({
+          title: "Upload successful",
+          description: `${successCount} file(s) uploaded successfully${errorCount > 0 ? `, ${errorCount} failed` : ''}`
+        })
+        
+        // Refresh the directory
+        await refreshDirectory()
+      }
+
+      if (errorCount > 0 && successCount === 0) {
+        toast({
+          title: "Upload failed",
+          description: `All ${errorCount} file(s) failed to upload`,
+          variant: "destructive"
+        })
+      }
+
+    } catch (error) {
+      console.error('Upload error:', error)
+      toast({
+        title: "Upload failed",
+        description: error instanceof Error ? error.message : 'Unknown error occurred',
+        variant: "destructive"
+      })
+    } finally {
+      setUploading(false)
+      // Reset the input
+      event.target.value = ''
+    }
+  }
+
+  const handleDelete = async (itemPaths: string[]) => {
+    // TODO: Implement actual delete API calls
+    const updatedFiles = files.filter(file => !itemPaths.includes(file.path))
+    setFiles(sortFiles(updatedFiles)) // Sort after delete (though order shouldn't change for deletion)
+    // Remove deleted items from selection
+    const newSelected = new Set(selectedFiles)
+    itemPaths.forEach((path) => newSelected.delete(path))
+    setSelectedFiles(newSelected)
+    
+    toast({
+      title: "Deleted successfully",
+      description: `${itemPaths.length} item(s) deleted`,
+    })
+  }
+
+  const handleLogin = () => {
+    // Redirect to external auth page (configured via env var)
+    const authUrl = process.env.NEXT_PUBLIC_AUTH_URL || "/auth/login"
+    window.location.href = authUrl
+  }
+
+  const handleLogout = () => {
+    // Handle logout (would typically clear tokens, etc.)
+    setIsLoggedIn(false)
+    // Could also redirect to logout endpoint
+  }
+
+  const handleMove = async (destinationPath: string) => {
+    // TODO: Implement actual move API calls
+    console.log('Moving files:', Array.from(selectedFiles), 'to:', destinationPath)
+    setSelectedFiles(new Set())
+    setMoveDialogOpen(false)
+    
+    toast({
+      title: "Moved successfully",
+      description: `${selectedFiles.size} item(s) moved to ${destinationPath}`,
+    })
+    
+    // Refresh directory after move
+    await refreshDirectory()
+  }
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      {/* Header with Breadcrumbs */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <HardDrive className="h-6 w-6" />
+            <h1 className="text-2xl font-bold">Drive V2</h1>
+          </div>
+          
+          {/* Breadcrumbs */}
+          <nav className="flex items-center gap-1 text-sm text-muted-foreground">
+            {breadcrumbs.map((crumb, index) => (
+              <div key={crumb.path} className="flex items-center gap-1">
+                {index > 0 && <ChevronRight className="h-3 w-3" />}
+                {index === breadcrumbs.length - 1 ? (
+                  <span className="text-foreground font-medium">{crumb.name}</span>
+                ) : (
+                  <Link 
+                    href={crumb.path}
+                    className="hover:text-foreground transition-colors"
+                  >
+                    {crumb.name}
+                  </Link>
+                )}
+              </div>
+            ))}
+          </nav>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <Button 
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploading}
+          >
+            <Upload className="mr-2 h-4 w-4" />
+            {uploading ? "Uploading..." : "Upload Files"}
+          </Button>
+          {isLoggedIn ? (
+            <Button variant="outline" onClick={handleLogout}>
+              <LogOut className="mr-2 h-4 w-4" />
+              Logout
+            </Button>
+          ) : (
+            <Button onClick={handleLogin}>
+              <LogIn className="mr-2 h-4 w-4" />
+              Login
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Loading State */}
+      {loading && (
+        <div className="flex items-center justify-center py-8">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-2"></div>
+            <p className="text-sm text-muted-foreground">Loading directory contents...</p>
+          </div>
+        </div>
+      )}
+
+      {/* Error State */}
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+          <div className="text-sm text-red-800">
+            <strong>Error loading directory:</strong> {error}
+          </div>
+        </div>
+      )}
+
+      {/* Storage Info */}
+      {!loading && !error && (
+        <div className="bg-card rounded-lg border p-4">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-medium">Storage Usage</span>
+            <span className="text-sm text-muted-foreground">
+              {formatFileSize(usedStorage)} of {formatFileSize(maxStorage)} used
+            </span>
+          </div>
+          <Progress value={storagePercentage} className="h-2" />
+          <div className="flex justify-between text-xs text-muted-foreground mt-1">
+            <span>{storagePercentage.toFixed(1)}% used</span>
+            <span>{formatFileSize(maxStorage - usedStorage)} available</span>
+          </div>
+        </div>
+      )}
+
+      {/* Bulk Actions */}
+      {!loading && !error && selectedFiles.size > 0 && (
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <span className="text-sm font-medium text-blue-900">
+              {selectedFiles.size} item{selectedFiles.size !== 1 ? "s" : ""} selected
+            </span>
+            <Button variant="outline" size="sm" onClick={deselectAll}>
+              Deselect All
+            </Button>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={openMoveDialog}
+            >
+              <Move className="mr-2 h-4 w-4" />
+              Move Selected
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handleDelete(Array.from(selectedFiles))}
+              className="text-red-600 hover:text-red-700"
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              Delete Selected
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* File Table */}
+      {!loading && !error && (
+        <div className="border rounded-lg">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[40px]"></TableHead>
+                <TableHead>Name</TableHead>
+                <TableHead>Size</TableHead>
+                <TableHead>Modified</TableHead>
+                <TableHead className="w-[50px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {files.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
+                    This directory is empty
+                  </TableCell>
+                </TableRow>
+              ) : (
+                files.map((file) => {
+                  const isSelected = selectedFiles.has(file.path)
+                  const fileName = file.path.split('/').pop() || file.path
+                  
+                  return (
+                    <TableRow 
+                      key={file.path} 
+                      className={`hover:bg-muted/50 ${isSelected ? "bg-muted/30" : ""}`}
+                    >
+                      <TableCell className="w-[40px]" onClick={(e) => e.stopPropagation()}>
+                        <Checkbox 
+                          checked={isSelected} 
+                          onCheckedChange={() => toggleFileSelection(file.path)} 
+                        />
+                      </TableCell>
+                      <TableCell className="font-medium">
+                        <div className="flex items-center gap-2">
+                          {file.type === "dir" ? (
+                            <>
+                              <Folder className="h-4 w-4 text-blue-500" />
+                              <Link 
+                                href={`/v2${file.path}`}
+                                className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
+                              >
+                                {fileName}
+                              </Link>
+                            </>
+                          ) : (
+                            <>
+                              <File className="h-4 w-4 text-gray-500" />
+                              {file.blob ? (
+                                <a
+                                  href={`/blob/${file.blob}?filename=${encodeURIComponent(fileName)}`}
+                                  className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                >
+                                  {fileName}
+                                </a>
+                              ) : (
+                                <span>{fileName}</span>
+                              )}
+                            </>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell>{formatFileSize(file.size || 0)}</TableCell>
+                      <TableCell>{formatDate(file.lastmod)}</TableCell>
+                      <TableCell onClick={(e) => e.stopPropagation()}>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                              <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem onClick={() => openRenameDialog(file)}>
+                              <Edit className="mr-2 h-4 w-4" />
+                              Rename
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => copyPermalink(file)}>
+                              <LinkIcon className="mr-2 h-4 w-4" />
+                              Copy Permalink
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => openInfoDialog(file)}>
+                              <Info className="mr-2 h-4 w-4" />
+                              Info
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem 
+                              onClick={() => handleDelete([file.path])} 
+                              className="text-red-600"
+                            >
+                              <Trash2 className="mr-2 h-4 w-4" />
+                              Delete
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  )
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {/* Rename Dialog */}
+      <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Rename {currentItem?.type === "dir" ? "Folder" : "File"}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="newName">New Name</Label>
+              <Input
+                id="newName"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleRename()
+                  }
+                }}
+                placeholder="Enter new name"
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setRenameDialogOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={handleRename} disabled={!newName.trim()}>
+                Rename
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Info Dialog */}
+      <Dialog open={infoDialogOpen} onOpenChange={setInfoDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              {currentItem?.type === "dir" ? (
+                <Folder className="h-5 w-5 text-blue-500" />
+              ) : (
+                <File className="h-5 w-5 text-gray-500" />
+              )}
+              {currentItem?.type === "dir" ? "Folder" : "File"} Information
+            </DialogTitle>
+          </DialogHeader>
+          {currentItem && (
+            <div className="space-y-4">
+              <div className="space-y-3">
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Name</Label>
+                  <p className="text-sm break-words">{currentItem.path.split('/').pop()}</p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Size</Label>
+                  <p className="text-sm">{formatFileSize(currentItem.size || 0)}</p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Modified</Label>
+                  <p className="text-sm">{formatDateTime(currentItem.lastmod)}</p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Modified By</Label>
+                  <p className="text-sm">{currentItem.author}</p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Type</Label>
+                  <p className="text-sm capitalize">{currentItem.type}</p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Path</Label>
+                  <p className="text-sm font-mono text-xs">{currentItem.path}</p>
+                </div>
+              </div>
+              <div className="flex justify-end">
+                <Button variant="outline" onClick={() => setInfoDialogOpen(false)}>
+                  Close
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Move Dialog */}
+      <V2MoveDialog
+        open={moveDialogOpen}
+        onOpenChange={setMoveDialogOpen}
+        selectedCount={selectedFiles.size}
+        onMove={handleMove}
+      />
+
+      <input 
+        ref={fileInputRef} 
+        type="file" 
+        multiple 
+        className="hidden" 
+        onChange={handleFileUpload} 
+      />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/v2/V2MoveDialog.tsx b/frontend/components/v2/V2MoveDialog.tsx
new file mode 100644
index 0000000..7cedde0
--- /dev/null
+++ b/frontend/components/v2/V2MoveDialog.tsx
@@ -0,0 +1,169 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+import { Search, Folder, Move } from "lucide-react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { toast } from "@/hooks/use-toast"
+import { DriveLsEntry } from "@/lib/drive_types"
+
+interface V2MoveDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  selectedCount: number
+  onMove: (destinationPath: string) => void
+}
+
+export function V2MoveDialog({ open, onOpenChange, selectedCount, onMove }: V2MoveDialogProps) {
+  const [directories, setDirectories] = useState<DriveLsEntry[]>([])
+  const [filteredDirectories, setFilteredDirectories] = useState<DriveLsEntry[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedDirectory, setSelectedDirectory] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  // Load all directories when dialog opens
+  useEffect(() => {
+    if (open) {
+      loadDirectories()
+    }
+  }, [open])
+
+  // Filter directories based on search query
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setFilteredDirectories(directories)
+    } else {
+      const query = searchQuery.toLowerCase()
+      const filtered = directories.filter(dir => 
+        dir.path.toLowerCase().includes(query)
+      )
+      setFilteredDirectories(filtered)
+    }
+  }, [searchQuery, directories])
+
+  const loadDirectories = async () => {
+    setLoading(true)
+    try {
+      const response = await fetch('/api/directories')
+      if (!response.ok) {
+        throw new Error(`Failed to fetch directories: ${response.statusText}`)
+      }
+      const dirs = await response.json()
+      setDirectories(dirs)
+      setFilteredDirectories(dirs)
+    } catch (error) {
+      console.error('Error loading directories:', error)
+      toast({
+        title: "Failed to load directories",
+        description: error instanceof Error ? error.message : 'Unknown error occurred',
+        variant: "destructive"
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleMove = () => {
+    if (selectedDirectory) {
+      onMove(selectedDirectory)
+      // Reset dialog state
+      setSelectedDirectory(null)
+      setSearchQuery("")
+    }
+  }
+
+  const handleClose = () => {
+    onOpenChange(false)
+    // Reset dialog state
+    setSelectedDirectory(null)
+    setSearchQuery("")
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Move className="h-5 w-5" />
+            Move {selectedCount} item{selectedCount !== 1 ? "s" : ""}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Search Input */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search directories..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+
+          {/* Directory List */}
+          <ScrollArea className="h-[300px] border rounded-md">
+            <div className="p-2">
+              {loading ? (
+                <div className="flex items-center justify-center py-8">
+                  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900"></div>
+                </div>
+              ) : filteredDirectories.length === 0 ? (
+                <div className="text-center py-8 text-muted-foreground">
+                  {searchQuery ? 'No directories found matching your search' : 'No directories available'}
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {filteredDirectories.map((directory) => (
+                    <div
+                      key={directory.path}
+                      className={`flex items-center gap-2 p-2 rounded cursor-pointer transition-colors ${
+                        selectedDirectory === directory.path
+                          ? 'bg-blue-50 border border-blue-200'
+                          : 'hover:bg-muted/50'
+                      }`}
+                      onClick={() => setSelectedDirectory(directory.path)}
+                    >
+                      <Folder className="h-4 w-4 text-blue-500 flex-shrink-0" />
+                      <span className="text-sm font-mono break-all">
+                        {directory.path}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+
+          {/* Selected Directory Display */}
+          {selectedDirectory && (
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+              <div className="text-sm font-medium text-blue-900 mb-1">
+                Moving to:
+              </div>
+              <div className="text-sm font-mono text-blue-700">
+                {selectedDirectory}
+              </div>
+            </div>
+          )}
+
+          {/* Action Buttons */}
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button 
+              onClick={handleMove} 
+              disabled={!selectedDirectory || loading}
+            >
+              <Move className="mr-2 h-4 w-4" />
+              Move Here
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/frontend/lib/drive_server.ts b/frontend/lib/drive_server.ts
index 81e9321..992a287 100644
--- a/frontend/lib/drive_server.ts
+++ b/frontend/lib/drive_server.ts
@@ -174,6 +174,13 @@ export async function Drive_tree(): Promise<DriveTreeResponse> {
   return { root: calculateSizesAndSort(rootNodes) };
 }
 
+/// lists only directories (recursively) from the given path
+export async function Drive_ls_directories(path: string = '/'): Promise<DriveLsEntry[]> {
+  // Get all entries recursively and filter for directories
+  const allEntries = await Drive_ls(path, true)
+  return allEntries.filter(entry => entry.type === 'dir')
+}
+
 /// returns the log entries from the drive
 export async function Drive_log(): Promise<DriveLogEntry[]> {
   const result = spawnSync('fctdrive', ['log'], { encoding: 'utf-8', maxBuffer: 50 * 1024 * 1024 })
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2a93c83..6680145 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,6 +13,7 @@
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-scroll-area": "^1.2.1",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-toast": "^1.2.14",
         "class-variance-authority": "^0.7.1",
@@ -1016,6 +1017,12 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
@@ -1517,6 +1524,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.9.tgz",
+      "integrity": "sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d7922cf..d3762a2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-toast": "^1.2.14",
     "class-variance-authority": "^0.7.1",