Heavy security and file splitting

web/ui/src/App.svelte

@@ -30,6 +30,14 @@
   const maxUploadSizeDisplay = $derived(formatBytes(maxUploadSizeBytes, true));
   const defaultTTLDisplay = $derived(formatTTLDisplay(defaultTTL));
 
+  const viewPageTitle = $derived(
+    viewMeta?.filename
+      ? `${viewMeta.filename} • Scratchbox`
+      : scratchID
+        ? `${scratchID} • Scratchbox`
+        : "Scratchbox"
+  );
+
   onMount(async () => {
     nowTicker = window.setInterval(() => {
       nowMs = Date.now();
@@ -127,14 +135,16 @@
           return;
         }
         const msg = await metaResponse.text();
-        throw new Error(msg || `Failed to load scratch metadata (${metaResponse.status}).`);
+        viewError = msg || `Failed to load scratch metadata (${metaResponse.status}).`;
+        return;
       }
       viewMeta = await metaResponse.json();
 
       const rawResponse = await fetch(`/api/raw/${encodeURIComponent(scratchID)}`);
       if (!rawResponse.ok) {
         const msg = await rawResponse.text();
-        throw new Error(msg || `Failed to load scratch content (${rawResponse.status}).`);
+        viewError = msg || `Failed to load scratch content (${rawResponse.status}).`;
+        return;
       }
 
       const contentType = rawResponse.headers.get("content-type") ?? "";
@@ -412,6 +422,31 @@
   }
 </script>
 
+<svelte:head>
+  {#if routeMode === "view"}
+    <title>{viewPageTitle}</title>
+    <meta property="og:title" content={viewPageTitle} />
+    <meta property="og:description" content="Temporary scratch file shared on Scratchbox." />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content={viewPageTitle} />
+  {:else if routeMode === "expired"}
+    <title>Scratch expired • Scratchbox</title>
+    <meta property="og:title" content="Scratch expired • Scratchbox" />
+    <meta property="og:description" content="This scratch is no longer available." />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="Scratch expired • Scratchbox" />
+  {:else if routeMode === "notfound"}
+    <title>Not found • Scratchbox</title>
+    <meta property="og:title" content="Not found • Scratchbox" />
+    <meta property="og:description" content="The requested path does not exist." />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="Not found • Scratchbox" />
+  {/if}
+</svelte:head>
+
 <main class="container">
   <header class="site-header">
     <div class="brand-row">