feat: add paginated history page with activity log

- Create /history page showing drive activity with server-side rendering
- Display timestamp, action, user, path, and file size in table format
- Add pagination (50 entries per page) using URL query parameters
- Sort entries by timestamp descending (most recent first)
- Add History button to drive header for easy navigation
- Use existing UI components and styling patterns

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

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

3 files changed, 185 insertions, 2 deletions

diff --git a/frontend/app/history/page.tsx b/frontend/app/history/page.tsx
new file mode 100644
index 0000000..9ccba27
--- /dev/null
+++ b/frontend/app/history/page.tsx
@@ -0,0 +1,35 @@
+import { Drive_log } from "@/lib/drive_server"
+import { HistoryView } from "@/components/history/HistoryView"
+
+interface HistoryPageProps {
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+export default async function HistoryPage({ searchParams }: HistoryPageProps) {
+  const logEntries = await Drive_log()
+  
+  // Parse page parameter (default to 0)
+  const page = parseInt((searchParams.page as string) || '0', 10)
+  const pageSize = 50
+  
+  // Sort by timestamp descending (most recent first)
+  const sortedEntries = logEntries.sort((a, b) => b.timestamp - a.timestamp)
+  
+  // Calculate pagination
+  const startIndex = page * pageSize
+  const endIndex = startIndex + pageSize
+  const paginatedEntries = sortedEntries.slice(startIndex, endIndex)
+  
+  const hasNextPage = endIndex < sortedEntries.length
+  const hasPrevPage = page > 0
+  
+  return (
+    <HistoryView 
+      entries={paginatedEntries}
+      currentPage={page}
+      hasNextPage={hasNextPage}
+      hasPrevPage={hasPrevPage}
+      totalEntries={sortedEntries.length}
+    />
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/drive/DriveHeader.tsx b/frontend/components/drive/DriveHeader.tsx
index 718d031..76b0e40 100644
--- a/frontend/components/drive/DriveHeader.tsx
+++ b/frontend/components/drive/DriveHeader.tsx
@@ -1,5 +1,7 @@
-import { HardDrive } from "lucide-react"
+import { HardDrive, Clock } from "lucide-react"
 import { AuthButtons } from "@/components/auth/AuthButtons"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
 
 export async function DriveHeader() {
   return (
@@ -9,7 +11,15 @@ export async function DriveHeader() {
         <h1 className="text-2xl font-bold">FCT Drive</h1>
       </div>
       
-      <AuthButtons />
+      <div className="flex items-center gap-2">
+        <Link href="/history">
+          <Button variant="outline" size="sm">
+            <Clock className="mr-2 h-4 w-4" />
+            History
+          </Button>
+        </Link>
+        <AuthButtons />
+      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/frontend/components/history/HistoryView.tsx b/frontend/components/history/HistoryView.tsx
new file mode 100644
index 0000000..1fe3cd2
--- /dev/null
+++ b/frontend/components/history/HistoryView.tsx
@@ -0,0 +1,138 @@
+import { DriveLogEntry } from "@/lib/drive_types"
+import { DriveHeader } from "@/components/drive/DriveHeader"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import Link from "next/link"
+
+interface HistoryViewProps {
+  entries: DriveLogEntry[]
+  currentPage: number
+  hasNextPage: boolean
+  hasPrevPage: boolean
+  totalEntries: number
+}
+
+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 formatDateTime(timestamp: number): string {
+  return new Date(timestamp * 1000).toLocaleString()
+}
+
+function PaginationControls({ currentPage, hasNextPage, hasPrevPage }: { 
+  currentPage: number
+  hasNextPage: boolean
+  hasPrevPage: boolean
+}) {
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <Link href={`/history?page=${currentPage - 1}`}>
+        <Button 
+          variant="outline" 
+          size="sm" 
+          disabled={!hasPrevPage}
+          className={!hasPrevPage ? "opacity-50 cursor-not-allowed" : ""}
+        >
+          <ChevronLeft className="h-4 w-4 mr-1" />
+          Previous
+        </Button>
+      </Link>
+      
+      <span className="text-sm text-muted-foreground px-4">
+        Page {currentPage + 1}
+      </span>
+      
+      <Link href={`/history?page=${currentPage + 1}`}>
+        <Button 
+          variant="outline" 
+          size="sm" 
+          disabled={!hasNextPage}
+          className={!hasNextPage ? "opacity-50 cursor-not-allowed" : ""}
+        >
+          Next
+          <ChevronRight className="h-4 w-4 ml-1" />
+        </Button>
+      </Link>
+    </div>
+  )
+}
+
+export function HistoryView({ entries, currentPage, hasNextPage, hasPrevPage, totalEntries }: HistoryViewProps) {
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <DriveHeader />
+      
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold">Activity History</h1>
+          <div className="text-sm text-muted-foreground">
+            Showing {entries.length} of {totalEntries} entries
+          </div>
+        </div>
+
+        <PaginationControls 
+          currentPage={currentPage}
+          hasNextPage={hasNextPage}
+          hasPrevPage={hasPrevPage}
+        />
+
+        <div className="border rounded-lg">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Timestamp</TableHead>
+                <TableHead>Action</TableHead>
+                <TableHead>User</TableHead>
+                <TableHead>Path</TableHead>
+                <TableHead>Size</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {entries.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
+                    No activity history found
+                  </TableCell>
+                </TableRow>
+              ) : (
+                entries.map((entry) => (
+                  <TableRow key={entry.log_id} className="hover:bg-muted/50">
+                    <TableCell className="font-mono text-sm">
+                      {formatDateTime(entry.timestamp)}
+                    </TableCell>
+                    <TableCell>
+                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                        {entry.action}
+                      </span>
+                    </TableCell>
+                    <TableCell className="font-medium">
+                      {entry.email}
+                    </TableCell>
+                    <TableCell className="font-mono text-sm max-w-md truncate">
+                      {entry.path}
+                    </TableCell>
+                    <TableCell>
+                      {formatFileSize(entry.size)}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        <PaginationControls 
+          currentPage={currentPage}
+          hasNextPage={hasNextPage}
+          hasPrevPage={hasPrevPage}
+        />
+      </div>
+    </div>
+  )
+}
\ No newline at end of file