Add permission-scoped MCP, readiness checks, and management UI improvements

apps/web/src/app/e/[slug]/guest-upload.tsx

@@ -17,6 +17,8 @@ import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
 import { Progress } from "@/components/ui/progress";
 import { Spinner } from "@/components/ui/spinner";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { uploadProgress } from "@/lib/upload-progress";
 
 type QueueItem = {
   file?: File;
@@ -59,6 +61,7 @@ export function GuestUpload({
   const retryUpload = api.photos.retryUpload.useMutation();
   const uploading = useRef(false);
   const utils = api.useUtils();
+  const progress = uploadProgress(queue);
 
   useEffect(() => {
     const storedName = localStorage.getItem(guestKey(slug, "name")) ?? "";
@@ -257,7 +260,20 @@ export function GuestUpload({
         </Button>
       </label> : null}
       {queue.length > 0 ? (
-        <ul className="flex flex-col gap-3" aria-live="polite">
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between gap-4">
+              <CardTitle>{busy ? "Uploading your photos" : progress.failed ? "Some photos need attention" : "Photos uploaded"}</CardTitle>
+              <span className="text-2xl font-semibold tabular-nums">{progress.percent}%</span>
+            </div>
+            <CardDescription role="status">{progress.completed} of {progress.total} photos uploaded{progress.failed ? ` · ${progress.failed} need retry` : ""}</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <Progress value={progress.percent} aria-label="Overall upload progress" />
+            <p className="text-sm text-muted-foreground">{busy ? "Keep this page open until uploading finishes." : progress.failed ? "Open file details below to retry unsuccessful uploads." : "Your originals are saved. Gallery previews may take a moment to appear."}</p>
+            <details className="group">
+              <summary className="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3 text-sm font-medium [&::-webkit-details-marker]:hidden">File details<ChevronDownIcon className="size-4 transition-transform group-open:rotate-180" aria-hidden="true" /></summary>
+        <ul className="flex max-h-80 flex-col gap-4 overflow-y-auto pt-3">
           {queue.map((item) => (
             <li key={item.id} className="flex flex-col gap-1">
               <div className="flex justify-between gap-3 text-sm">
@@ -272,6 +288,9 @@ export function GuestUpload({
             </li>
           ))}
         </ul>
+            </details>
+          </CardContent>
+        </Card>
       ) : null}
       <details
         className="rounded-2xl border bg-card/60 px-4 py-1"