feat: frontend MVP — auth, timeline, upload, albums, admin, image viewer

Backend:
- user roles (DB + JWT + first-user-is-admin)
- volume-aware file resolver (multi-volume asset serving)
- directory scanner uses volume URI directly
- date-summary endpoint (capture date from EXIF)
- timeline ordered by capture date
- list endpoints: volumes, plugins, pipelines, library paths
- delete endpoints: volumes, library paths
- configurable upload body limit (MAX_UPLOAD_BYTES)

Frontend:
- auth: login/register, token refresh, role-based admin gate
- timeline: date-grouped grid, infinite scroll, date scrubber
- image viewer: fullscreen zoom/pan/pinch, metadata sidebar
- upload: drag-drop, sequential upload, progress tracking
- albums: create, add/remove photos, asset picker dialog
- admin: storage (import library), jobs (pagination, error details),
  plugins (list + toggle), pipelines, sidecars, duplicates
- multi-select mode with add-to-album action
- TanStack Query for all data fetching

k-photos-frontend/app/(app)/admin/pipelines/page.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import { useState } from "react"
+import { usePipelines, useConfigurePipeline } from "@/hooks/use-pipelines"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Spinner } from "@/components/ui/spinner"
+import { toast } from "sonner"
+
+export default function PipelinesPage() {
+  const { data: pipelines, isLoading } = usePipelines()
+  const configure = useConfigurePipeline()
+  const [triggerEvent, setTriggerEvent] = useState("")
+  const [stepsJson, setStepsJson] = useState("[]")
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      const steps = JSON.parse(stepsJson)
+      await configure.mutateAsync({ trigger_event: triggerEvent, steps })
+      toast.success("Pipeline configured")
+    } catch {
+      toast.error("Failed — check JSON syntax")
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <h1 className="text-lg font-semibold">Pipeline Configuration</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Pipelines</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <Spinner />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Trigger Event</TableHead>
+                  <TableHead>Steps</TableHead>
+                  <TableHead>ID</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {(pipelines ?? []).map((p) => (
+                  <TableRow key={p.pipeline_id}>
+                    <TableCell className="font-mono text-sm">
+                      {p.trigger_event}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">{p.steps_count}</Badge>
+                    </TableCell>
+                    <TableCell className="font-mono text-xs text-muted-foreground">
+                      {p.pipeline_id.slice(0, 8)}...
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Configure Pipeline</CardTitle>
+          <CardDescription>
+            Define a processing pipeline triggered by an event
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+            <div className="flex flex-col gap-1">
+              <Label className="text-xs">Trigger Event</Label>
+              <Input
+                required
+                value={triggerEvent}
+                onChange={(e) => setTriggerEvent(e.target.value)}
+                placeholder="asset.ingested"
+                className="h-8"
+              />
+            </div>
+            <div className="flex flex-col gap-1">
+              <Label className="text-xs">
+                Steps (JSON array of {`{ plugin_id, config }`})
+              </Label>
+              <Textarea
+                value={stepsJson}
+                onChange={(e) => setStepsJson(e.target.value)}
+                rows={4}
+                className="font-mono text-xs"
+              />
+            </div>
+            <Button
+              type="submit"
+              size="sm"
+              className="self-start"
+              disabled={configure.isPending}
+            >
+              Save Pipeline
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}