Clean up old UI code and rename V2 to Drive

- Remove old UI components: file-drive.tsx, history-view.tsx
- Remove unused API endpoints: /api/tree, /api/log, /api/fs/route.ts
- Rename /v2 routes to /drive routes for cleaner URLs
- Rename V2* components to Drive* components (V2DirectoryView -> DriveDirectoryView, etc.)
- Update all breadcrumb and navigation references from /v2 to /drive
- Redirect root path to /drive instead of old UI
- Keep /api/fs/[...path] and /api/directories for uploads and move functionality
- Preserve Drive_* server functions for potential future use

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

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

1 files changed, 591 insertions, 0 deletions

diff --git a/frontend/components/drive/DriveDirectoryClient.tsx b/frontend/components/drive/DriveDirectoryClient.tsx
new file mode 100644
index 0000000..548773a
--- /dev/null
+++ b/frontend/components/drive/DriveDirectoryClient.tsx
@@ -0,0 +1,591 @@
+"use client"
+
+import type React from "react"
+import { useState, useRef } from "react"
+import Link from "next/link"
+import {
+  ChevronRight,
+  File,
+  Folder,
+  Upload,
+  Trash2,
+  Move,
+  MoreHorizontal,
+  HardDrive,
+  Edit,
+  Link as LinkIcon,
+  Info,
+  LogIn,
+  LogOut,
+} 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 { DriveMoveDialog } from "./DriveMoveDialog"
+
+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 Breadcrumb {
+  name: string
+  path: string
+}
+
+interface DriveDirectoryClientProps {
+  path: string
+  files: DriveLsEntry[]
+  breadcrumbs: Breadcrumb[]
+}
+
+export function DriveDirectoryClient({ path, files, breadcrumbs }: DriveDirectoryClientProps) {
+  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
+
+  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
+      setRenameDialogOpen(false)
+      setCurrentItem(null)
+      setNewName("")
+      toast({
+        title: "Renamed successfully",
+        description: `Item renamed to "${newName.trim()}"`,
+      })
+      // Refresh page to show changes
+      window.location.reload()
+    }
+  }
+
+  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)
+          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 page to show changes
+        window.location.reload()
+      }
+
+      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
+    setSelectedFiles(new Set())
+    
+    toast({
+      title: "Deleted successfully",
+      description: `${itemPaths.length} item(s) deleted`,
+    })
+    
+    // Refresh page to show changes
+    window.location.reload()
+  }
+
+  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 page to show changes
+    window.location.reload()
+  }
+
+  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</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>
+
+      {/* Storage Info */}
+      <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 */}
+      {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 */}
+      <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={`/drive${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 */}
+      <DriveMoveDialog
+        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